DEV Community

loading...
Cover image for 18 Tips to make websites look better

18 Tips to make websites look better

Kanisk
I do the development things
・2 min read

For my own reference, but useful general tips nonetheless!
Cover credit: AnalyticsIndiaMag

Typography Tips

  • Use no more than 2-3 typefaces in a page as additional typefaces increases cognitive load.

  • Use 125%-150% line height for paragraph text to make your webpage feel more spacious!

  • Keeping lines of text under 100 characters chunks text and makes it more readable.

  • Use typefaces that look noticeably different for header and paragraph text. Some pairings I really like are: Libre Baskerville & Source Sans Pro, Domine & Roboto, and DM Serif Display and Proxima Nova.

  • When creating text hierarchy try to use no more than two mechanisms to differentiate text: (1) font weight, (2) font size, (3) alignment/indentation, and (4) color.

  • Skip weights and double point sizes between different text elements used. For example, if your header text is 32px bold, then make the paragraph text 16px regular — rather than something like 24px semibold for the header text.

Great type resources: Google Fonts, Font Pairings

Alignment/Spacing Tips

  • Avoid centering text unless it's a small chunk.

  • Align left to right if targeting english-speaking folks as people read left to right.

  • Aligning things to each other can make design look clean and consistent! Using a 12 column grid can be a helpful place to start!

  • Use negative space to help differentiate elements from each other.

  • A general rule of thumb: in most cases, you'll want at least 12-16px of padding between different elements or from the edge/corners of the page.

Great alignment/spacing resources: CSS Grid Generator

Color

  • Use neutral tones to allow your primary colors to shine. Neutral tones (whites, greys, and blacks) can balance out bright colors and give them emphasis.

  • Use tints and shades to add dynamism to your project. Have a hover state or pressed state? Use tints and shade to indicate these changes.

Great color resources: Coolors Color Palette Generator, Contrast Checker for Accessibility, Grabient (Gradient Tool)

Miscellaneous

  • Avoid harsh drop shadows! A good example of not too harsh drop shadows is Stripe.com.
  • A great resource for royalty free images: Unsplash.com

Discussion (0)