Lessons of Web Design for Web Developers

Let’s quickly summarize the main content of development:

  • Most of your content will be text, so beautiful typography is a key element to a good looking website.
  • Images are getting more and more important in webdesign, so choosing great images and putting text on them is an essential part of your work.
  • Icons are also a good way of setting a friendly tone for your website, but use them carefully.
  • The adequate use of whitespace makes a website look professionally designed, so use it a lot, but in the correct way.
  • Build a layout by defining the visual hierarchy of your content. Whitespace is also important for this.
  • Your website should be designed in a way that ensures that both the user and the owner of the website achieve their goals. This is the user experience.
  • It is very important that you get inspired by studying well-designed websites from other designers.

It is very important that you have all of the guidelines in mind at the same time when you’re making your designs.

Beautiful Typography

  1. Use a font-size between 15 and 25 pixels for body text
  2.  Use (really) big font sizes for headlines
  3.  Use a line spacing between 120 and 150% of the font size
  4.  45 to 90 characters per line
  5. Use good fonts
  6.  Chose a font which reflects the look and feel you want for your website
  7. Use only one font

Using Colors Like a Pro

  1. Use only one base color
  2. Use a tool if you want to use more colors
  3. Use color to draw attention
  4. Never use black in your design
  5.  Choose colors wisely

Working with Images

  1. Put text directly on the image
  2. Overlay the image
  3. Put your text in a box
  4. Blur the image
  5. The floor fade

Working with icons

  1. Use icons to list features/steps
  2. Use icons for actions and links
  3. Icons should be recognizable
  4. Label your icons
  5. Icons should not take a center stage
  6. Use icon fonts whenever possible

Spacing and layout

  1. Put whitespace between your elements
  2. Put whitespace between your groups of elements
  3. Put whitespace between you website’s sections
  4. Define where you want your audience to look first
  5. Establish a flow that corresponds to your content’s message
  6. Use whitespace to build that flow

Improve your website’s conversion

  1. Build trust with your future customer
  2. Repeat your primary action
  3. Grab your user’s attention
  4. Tell your user the benefit
  5. Don’t ask for too much information
  6. Use social proof
  7. Use urgency
  8. Use scarcity

Published by anitanad

I'm a Software developer, designer, writer, and a Chef. I build open source projects and write tutorials

Leave a Reply