Design Tips

Design tips

Every time I check SoloLearn new web codes I come across with some bad designed layouts. Unhapilly, most of the web codes have awful layout. That's because people taste isn't good enough. Now we can fix it.

Colors

Don't use "acid", named colors. They are easier to use but look awful. I don't say about all the named palette, I mean that you shouldn't only use them. Try experimenting with hex, hsl and rgb.

Named colors

limegreen

blue

orange

Hex colors

#3ec45d

#1f1c7a

#d8a552

Units

Layout

NEVER! use `px` for layout areas. It will be unresponsive so if you change the device width or height layout breaks. Use `vw` / `vh` (viewport percentage) so your layout will automatically scale.

180px -> 324px

50vw -> 90vw

Text

The best option for text units is `em`. This unit is based p tag default font size

1.8em
29px

For auto-scaling text use this litle trick:

calc(100% + 1vw)

Contrast balance

Don't make things too contrast or monotonous. Keep the balance.

Bad

Good

Bad

Text

Fonts

If you want to make a readable text, use monospace or sans fonts.

Good

I'm very easy to read

Me too but sans is better still

Bad

I'm not that easy to read

Shadows

NEVER! use shadows on long texts. They become so unreadable that I want to rip off my eyes. Use smooth shadows for headings instead.

AWFUL!!1

Try to read this quite long text without feeling pain. You lost!

EVEN WORSE!!

This is just a text

Good

Pretty good shadow

Do you keep these rules?

Send a code (or DM me) in comments that uses these rules and I'll leave a link to it here.

My codes with good design

Your codes

Coming soon...