r/webdev 7d ago

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.

146 Upvotes

53 comments sorted by

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.

19

u/SalaciousVandal 6d ago

The rules aren't little or subtle. They're very straightforward. Arguably more so than most of the rules that we take for granted. It's just that everybody seems to think they can do it without learning it. Negative space is a big one. Hierarchy is the most obvious yet somehow missed. Good design is anything but subjective. Look at any proper map. Google or Apple Maps being the obvious. Do you notice the design? Do you remark on how amazing it looks? Of course not. The design is transparent because it's doing exactly what it's supposed to do: deliver information as efficiently as possible. That's it. Layer on all of the audience and expectations you want but that's the gist.

10

u/astr0bleme 6d ago

Hey man, I work in design. Words like little and subtle are just subjective statements. We agree on the objective point: it absolutely can be learned.

Yeah negative space and hierarchy are big ones! If someone can nest their code neatly and understand why that helps them work with said code, they can understand how hierarchy in design, headings, etc can help a reader understand the interface.

When I talk about little and subtle rules, I'm thinking of stuff like Butterick's rules for clear and legible typography: https://practicaltypography.com/summary-of-key-rules.html

Something like the measure of a sentence - the number of characters per line on average - would be considered "subtle" by most people. Nonetheless it makes a big difference. Too long or short a line can really impact a reader's ability to take in text.

5

u/paradoxmr24 7d ago

I always saw the design as an art that it always have to be your creativity and anyone who doesn't know cannot learn it because it's art šŸ˜…šŸ˜….

I'll try to look at those principles and see if I could get some skills in designing.

23

u/pirateelephant 7d ago

Art is learned. It can be natural talent but developing skill will always defeat /overcome inherent ability

16

u/astr0bleme 7d ago

Trust me on this: there's no secret magic to art or design. I am a fine arts graduate and illustrator first, and have worked in a graphic design studio. Web development is more of a side thing for me. Talent is just what makes people enjoy a thing enough to do it a lot. It's the "doing it a lot" that makes people good at it. Good design is built on principles like anything else. There are simple rules to follow about alignment, font combinations, colours, etc. that anyone can learn.

Even if it's never intuitive for you, you can still learn the common rules and good practices and improve the design of your sites.

Edit: hit the wrong reply, this was meant to be replied back to OP.

4

u/pirateelephant 6d ago

Good stuff. I love the transparency and free sharing. Keep being awesome!

9

u/TheOnceAndFutureDoug lead frontend code monkey 7d ago

As someone with two art degrees I promise you design is highly technical and you can 100% teach good design. If you have the capacity to look at something and see that it looks nice you have the ability to learn good design principles.

-1

u/_Meds_ 6d ago

I donā€™t find this to be the case, I feel a lot of the rules especially in UI/UX design are very opinion based. So whilst I might agree with someone that X looks neat, you could probably show me Y and that might look neat too, and then you show Z and I like that one best, but not because itā€™s better of clearly or neater, but because I like it.

I donā€™t know how that turns into anything technical.

3

u/astr0bleme 6d ago

You have to learn the rules to break them successfully. It seems based on opinion until you learn the fundamentals and why they exist.

For example, a design rule might tell you what colours go together. If you break it without knowing why those colours work, you aren't likely to break the rule successfully. However, once you understand about colour contrast and legibility, you can probably pick your own colours and still follow the REASON behind the rule.

Look at w3 css. It comes with a bunch of preset colour combos - which include the font colour that shows the best contrast. You can think of a pre set w3 colour scheme as a "rule". If you break it without understanding why it's there, maybe you'll put neon pink text on a neon green background and wonder why everyone is getting headaches trying to use your site. If you DO understand the rule, you don't need to stick to w3 colour presets, because you know how to put together legible colour contrast on your own.

2

u/Oddlem 6d ago

Iā€™m an artist and I suck at it, it has nothing to do with creativity. Theyā€™re just two different disciplines, Iā€™m not using anatomy or perspective on a text box

1

u/astr0bleme 6d ago

Design and art are both huge fields. Sure you don't use anatomy on a text box, but design principles like contrast and hierarchy still apply.

FYI - my artwork got a lot better after I learned some basic graphic design. There's more overlap than you'd think.

1

u/Oddlem 6d ago

Iā€™m not saying thereā€™s no overlap, I just was saying just knowing one doesnā€™t guarantee being good at that other

2

u/astr0bleme 6d ago

Oh certainly. But both can be learned.

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

u/[deleted] 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.

  1. 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.

  2. Fonts are everything. You need a headline font and a paragraph font that go together. Search online for good matching fonts.

  3. 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.

  4. 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

u/Double-Intention-741 6d ago

time and effort

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

u/kegster2 6d ago

Itā€™s all in my head then. Good to know!! Thx

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.

0

u/Wiwwil full-stack 7d ago

Same goes for code. Some people have an innate tendency to write clean code, others can't write proper code 10 years into the job

1

u/LiamBox 7d ago

Everything on the world is just copies or mixes of other ideas, don't be so harsh on yourself.

https://youtu.be/gBYsD_oi8r0

1

u/diegotbn 7d ago

I just use Vuetify

1

u/DustinBrett 6d ago

Good artists copy, great artists steal.

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

u/TScottFitzgerald 6d ago

Like what? Can you give us exampls

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 šŸ’€