9 Tips for designing for the web

The details are not the details

This article aims to provide you with 9 important tips that I have learned during my first year as a web designer at Uni-t. Some might seem obvious but it’s the sum of all these tips that will make your designs ‘work’.

1. Use the right application

First things first. Choose the right application before starting to design. I recommend Sketch for all sites which are focused on complex forms, data and UI. For all the other corporate sites I would opt for Adobe Photoshop together with Adobe Illustrator for vector elements.

2. Use a grid

After choosing the right application, we should start with choosing a good grid. This will help you for creating more structured and pixel perfect designs. It will also bring relief and joy for your developer. I always work with the same Bootstrap PSD for designs made in Photoshop. As for Sketch I customize the settings as follows for the website's desktop version: Artboard 1280px width – 12 columns - 70px column width - 30px gutter width

3. Use vectors and retina images

Use as many vectors as you can. Vector images will look sharp on every device. Flaticon, Icomoon and Svgeezy are some great services and libraries you should check out. Make sure to use retina images for small images with a lot of details. Your developer will be able to scale these images with CSS so they will look sharp on retina screens.

4. Use enough padding

You can compare a website to a real shop. In a real shop you don’t want to walk through small aisles, get lost in the dark or be overwhelmed by garbage. Make sure to use enough padding and whitespace in your designs.

Media manager

5. Think about animations

Smooth animations will give your website something extra. But keep in mind, less is more, don’t overdo this trick. Some helpful resources that are worth a shot:

Some great examples can be found lower on this page.

6. Keep it consistent

Consistency makes sites easier to use for your audience, because visitors don’t have to learn new tricks as they move around. Users will tend to apply rules they’ve learned elsewhere. Some examples

  • Logo should be in de left top corner
  • Underlined text is clickable
  • Search function is implemented in the right top corner
  • Contact top right
  • Call to action / main focus above the fold on the homepage
  • Social media icons in the footer

This might cause confusion when ignoring some of these rules. Nevertheless, be creative when you start designing and make sure not every design is an exact copy of the previous one you’ve made.

7. Know what is possible

A basic knowledge in HTML and good communication with your web developer is key. You can’t design a website if you don’t know what is realizable and what is not.

8. Think twice about forms and complex data

Don’t just copy exactly what the client is telling/asking you. Think about it, firstly as a user and secondly as a developer. For example, is it necessary for the form to have two single input fields for first name and last name or can it have one input field for the full name? Do you need a slider, dropdown or checkboxes for a price range? These might seem like small details but they could save your user some time to fill in the form. Some interesting resources to improve your usability skills:

9. The details are not the details


Media manager

Media manager

Media manager