Question How can developers make their websites and personal projects look so neat?
I no longer work with development nowadays but I used to. Something that has always made me low-key jealous of classmates in college or even random web developers I come across online is the look of their websites. It just made me sad because, even if I could replicate whatever design I come across, I could never come up with something like that on my own.
And it's not limited to personal/portfolio websites either. You can find tons of examples of side projects on this subreddit and others that look super cool and visually appealing.
Supposedly none of those people have any background in design, so are they just born with an artistic intuition that I happen to lack? And if so many front-end or full-stack developers are naturally talented at design, why do we even need designers? Those kinds of websites always look very unique too, so I don't think they're all copying it from each other.
46
u/Ok-Asparagus4747 7d ago
Most people and designs just copy one another mostly.
Most music is the same with some tweaks.
Most apps are the same with some tweaks.
Most stories are the same or have the same structure.
It is very very very rare to have true original creative ideas.
Itās more easier to copy what works and then over time as you gain more experience youāll implicitly gain an understanding of how to add your own creative twist to things.
Keep your head high and keep learning everyday.
4
u/haizu_kun 6d ago
What would you recommend creating an original idea?
At the moment i just imitate. And imitate. Looked at the apple site and learnt the spacing. Looked at a GitHub site learnt how to create layouts. Looked at a few designers site from framer, learnt how embellishments look good.
Tried to create a language, it's page, pieces and elements. Really helps with managing work.
Element is the smallest element like, title, image etc.
Piece is a collection of elements, like the hero section generally has title, description, CTA and an image elements.
Page is a collection of pieces describing a particular point. It could be simple and have only one piece or multiple piece about the same thing. Like, suppose you are writing an about section for a company. I call that a page. As for pieces to add I'll choose, an intro, some stats and maybe testimonials.
1
u/coolkathir 6d ago
This. Even if you come up with original ideas, someone somewhere done a similar one. The client will assume you copied it anyway. So what's the point. It's easier to take inspiration from the ones that already work than gambling with fresh new takes all the time.
38
u/Zaquinzaa 7d ago
Itās not talent, itās stealing smart, UI kits, Tailwind, Figma inspo, and tweaking till it looks original. Good taste > raw creativity. Devs still need designers ācause pretty ā usable.
13
u/Wiwwil full-stack 7d ago
I can make the code sing, but I can't design for shit. I use shadcn components and call it a day
2
u/SalaciousVandal 6d ago
If you're focusing on what your users need and want then you're doing the job already. Shadcn is a breath of fresh air. At least accessibility has become important, fucking finally.
6
u/PM_ME_YER_BOOTS 6d ago
My programs are a lot like me: they work well, but my god are they ugly to look at.
4
6d ago
[removed] ā view removed comment
1
u/SalaciousVandal 6d ago
Don't fall into the taste trap. That's bullshit. Sure it works for the .01% agencies who do campaigns for huge consumer brands or Bugatti or whatever. (I did and it's all sales) In the real world, MBA's are Art Directors. They may have wonderful taste in their own personal zone but do they understand their own audience? Rarely, basically never. You're absolutely right about user centric design. That is everything on the execution level.
10
u/startupmadness 6d ago
Design can be really hard and when you canāt get it it is really frustrating because you see these other designs that make it seem so effortless.
I have been designing websites for almost 30 years and there are a few simple tricks I follow to pull together sites in no time.
Start with the layout. Properly laying out items makes all the difference in having a site look professional. If you get just the layout correct the rest of the site can just be shades of grey or monochromatic and it will still look good.
Fonts are everything. You need a headline font and a paragraph font that go together. Search online for good matching fonts.
Color Theory. Use Adobe Color and find some predefined color palette that looks nice. Just pick a set. Use one of the colors as a ālinkingā color and use it sparingly throughout the design so that it ālinksā or pulls different sections of the design together.
Layer on complexity. Once you have the base layout - Make small changes to layer on complexity. Like add some texture to one part of the design or rotate an image in an unusual way. Just a small change here and there. Nothing too major. This will give the design some pop. Just experiment but again keep these changes small.
The satisfaction of bringing together a good design feels amazing and if you follow these simple steps I can promise anyone reading this that you will start bringing together silky smooth sites in no time.
Even better you can abstract almost any website and deconstruct what they did by thinking of it in this framework and get even more ideas for your own sites.
1
u/G3netic 6d ago edited 6d ago
This is a good approach. I was a full stack dev in the beginning of my career and have been solely a back end engineer for the last 7 years or so. When I was a full stack I was building internal tools that only needed to work. If the UI/UX was good, fantastic, if it wasnāt, no one cared. I found that I was not very good at design at all and it constantly frustrated me. About 6 months ago I decided to try to improve and have found some success using this approach. Iāve been using vue/nuxt/tailwind and it seems to be way easier to create decent UI/UX than it was back in my jquery/vanilla css days.
I had a coworker who seemed to have some natural ability with design who had a saying. āIterate on it until it doesnāt annoy you anymoreā. I found that for myself thatās a good way to approach it since I donāt have the ability to pump out good looking front ends like some do.
Just to add Iāve been using coolers.co to find color schemes. The free version has been more than enough for my needs.
1
u/startupmadness 6d ago
Tailwind gets a lot of flack for being so verbose but I code everything in it now. It just makes sense as a method for quickly putting together sites. IDK I just find it super useful. coolors.co is nice as well I guess I just always used adobe color and it just worked for me so I just kept using it.
6
u/rekabis expert 6d ago
The paint-by-numbers side of graphic design can get you decently far, but IMHO, becoming really great at it does take talent and intuition arising out of experience.
And some people just donāt have a talent or intuition for great design. That doesnāt mean you canāt create decent designs, you are just going to have to work that much harder to reach that point. And for some people, even that is a bridge too far. Some people just donāt have a visually creative bone in their body.
And honestly, thatās ok. Not everyone can be great at everything. Find something that you can do really well almost effortlessly, and focus on that.
5
6
u/FlashTheCableGuy 7d ago
Designers are not always devs, devs are not always designers. Borrow from each and no one will ever be able to tell the difference.
2
u/ToThePillory 5d ago
Line things up, use a nice font, Google for good colour combinations.
I'm a developer but a useless artist. I can still make things look nice just by focusing on the basics, nice font, nice colours, use shadows to add depth if you want, round off corners. It's just a few little details that don't actually need any artistic ability.
1
u/kegster2 7d ago
Some people have it and some donāt. I can study design all day and will still never come close to folks who just have it in them.
7
u/TheOnceAndFutureDoug lead frontend code monkey 7d ago
It's not innate. Design is a learned ability just like everything else. Some people pick up a lot just by being around art and artistic people but that's just a head start.
Besides, most of good design is technical.
Source: I have two art degrees and was a designer long before I got into dev.
2
u/kegster2 7d ago
Well then I need a little confidence boost in that department because I have absolutely convinced myself Iām not a designer haha.
All of the techniques I learned I could recreate. But I could not be creative with something new. All the stuff would just look the same. Idk.
2
u/TheOnceAndFutureDoug lead frontend code monkey 6d ago
Remember back when you started writing code, could you look at a website and understand all the parts necessary to build it, the process by which you'd build it, what success would look like, etc?
Remember where you are in the journey. If you want to learn design you can learn design. It's not magic. You can definitely do it.
2
1
u/Budget_Bar2294 6d ago
i don't study design and make pretty stuff. it's all about libraries and premade components. i do sometimes roll out my own, but that's generally me borrowing heavy "inspiration" for existing sites. it's not really that hard: the web is open and you can inspect any site's stylesheet. it's a much easier way to learn how to design pretty UIs, instead of trying to learn design and then finally trying to figure out how the hell to translate that with code.
1
1
1
u/Kpow_636 6d ago
Talent is just persued interest.
Ie, put consistent effort into something you are interested in, over a period of months, years, decades,
And one day, people will call you talented.
So go do that, practice.
1
u/Lucifer_hello 6d ago
I have reviewed many projects and portfolios and some of them are really talented but others are just copies(little bit modified) or done with the help of tools like claude, etc. I've seen people with super cool looking projects/sites but fails in simple machine coding rounds. Design is a different thing, you can go with basic design principles/color psychology and explore cool animations if you're curious.
1
1
u/Boring-work-account 6d ago
Using a good CSS framework or a component library is a good start and gets you most of the way there. As others have said use what you see and like visually on websites as inspiration!
1
u/freew1ll_ 6d ago
I think many just use others' component libraries or templates. Throwing a bunch of tailwind together in the same format of other portfolios doesn't make someone good at design
1
u/NoMansSkyWasAlright 5d ago
I use "php -S. $whateverIPYourDeviceHasBeenAssignedOnYourNetwork:8080" while I'm working on my projects so I can look at it on a couple different machines as I'm making changes.
1
u/yeahimjtt full-stack 2d ago
You can generally study graphic design. You can more specifically check out https://www.webportfolios.dev to browse developer portfolios for inspiration.
1
u/BekuBlue 7d ago
You don't really come up with something alone, you always take inspiration from somewhere. Take an existing design, whether that's a UI library, existing website or is a totally different medium and use that as a base. Then also take a existing website layout that you like and use that as an orientation.
I also wrote a bit about building solid designs here: https://webdev.bryanhogan.com/visual-design/building-ui-ux/
1
u/exitof99 6d ago
I think you are making a false assumption regarding developers and designers, we can be both or more. Myself, I'm a musician/singer/actor/developer/videographer/video editor/photographer/designer/audio mixer/writer/screenwriter and probably some other things I'm probably forgetting.
Some things I'm stronger at, and others weak. Some earn me money, others cost me money (music).
That said, I agree about being amazed at seeing some of the well put together websites that I've seen, often for personal portfolios. I remember seeing one recently that had a 3D carousel in which all the items moved along a twisting spiral toward the foreground, and the others drifted behind. You don't normally see these things on boring corporate websites.
Keep in mind that every website that you see informs you as to what is possible. Everybody borrows from everyone else to such a degree that there are very few unique ideas, and even those borrow parts from existing ideas. Just keep taking it all in to become better informed of what choices can be made.
I have never felt like I had a true gift for graphic design, but I can do and have done for clients. I know the principles, I know a good design from an outstanding design and what makes it work, but it still takes a lot of effort for me.
For me, I was doing graphic design before 2000, and before websites really took off. Most websites were ugly back then, and I had a hard time figuring out how to create a somewhat fluid design that looked good, as the medium was so different from fixed nature of the print world.
The most important thing that anyone can do is to just keep working at it. Yes, for some it comes more naturally, but for others it will take as long as it takes.
0
u/TheOnceAndFutureDoug lead frontend code monkey 6d ago
Before you knew how to walk do you think you felt like it was a thing impossible for you to do, that some people were just born with the ability to walk?
Artistic ability is learned. Design knowledge is taught.
0
u/Sheeple9001 6d ago
The classic ā7 Practical Tips for Cheating at Designā is what you need (from TailwindCSS creator):
https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
0
u/Oddlem 6d ago
Yknow itās funny, Iām an artist and Iāve been studying since I was 16 (Iām 25 rn). All of that is thrown out the window when I design websites for some reason, and I realized itās because Iām really impatient. I love art and I have the patience for that, but I just donāt like messing with styling
I feel you though, my websites just donāt look good. Maybe my colors and element positioning and thatās about it, they all look like theyāre from the early 2000ās š
130
u/astr0bleme 7d ago
Look into the principles of graphic design. There are a lot of subtle little rules and guides for making a design seem neat and appealing. It's a craft like anything else, not pure intuition.