A good website depends on the collaboration between all disciplines involved. All the different expertise must be connected as well as possible to achieve the best end product. You can achieve that connection by working in a standardized way. There are also a number of standards that you must adhere to for the design of your website to make your work as transferable as possible.

Pixels and Dots Per Inch

It is best to supply designs based on 72 dots per inch (DPI). Although pixels are always leading in the design and the number of DPI does not matter, it does ensure that files do not become unnecessarily large. Also read this interesting article about DPI: https://daraskolnick.com/image-dpi-web/

It also prevents misunderstandings. For example, when the designer makes the entire design twice as small in pixels but produces a higher DPI. Due to miscommunication, something like this can be overlooked and, since the pixels are always leading for a developer, a site can be delivered much too small.

Colors

The colors you use in your design should always be RGB, never CYMK. This is because a screen basically only has 3 colors, namely red, green and blue. CMYK colors do not come out well.

Columns

Most sites are created based on columns. The most common is 12 columns where you set a 'gutter', or the distance between columns. These distances can be easily defined with separate CSS classes, which is easy for a developer.

Width and Responsive Designs

Most sites were designed at 960px wide a few years ago, as this was the most common size for screens at the time. Nowadays, most users have larger screens, or higher resolution screens, and designs are usually based on 1200px wide.

When you create a design you can choose to “mobile first” to design. This means that you take mobile as a basis and from there work out the rest of the design for tablet and desktop. You can choose to start on the smallest screen you can design on, which is 320px wide. (iPhone 5 etc). Keep in mind that on a slightly larger phone the dimensions of your elements will stretch somewhat.

Below is a handy overview of formats that you can use:

  • App design dimensions: 320 x 568px (iPhone 5)
  • Tablet design: 768 x 1024 (Portrait) – 1024 x 768 (Landscape)
  • Desktop: 1200px

“Above the fold” designs or “above the fold” designs

Above the Fold is the first thing the user sees when the site loads. It is everything that is visible when the user opens a site but does not yet scroll down. Sometimes a client or designer necessarily wants the user to see certain elements 'above the fold'. Unfortunately, that is not always possible.

On mobile and tablet, most screens are quite similar in terms of dimensions. The width and height are (approximately) the same on many devices. What the user sees when opening the site on mobile devices is approximately the same for everyone. This means that you are reasonably certain which elements are and are not visible when opening a site on mobile or tablet.

On desktop, however, it's a different story. The screen sizes vary considerably from user to user. This is because the user on a desktop has many more options to customize his own browser by adding extra toolbars. Think of favorites or toolbars of all kinds of add-ons. And for desktop there are of course many different types of screens of different sizes (from 11 inches to 5K screens of 31 inches).

What one user sees on the screen may be lost on another user because the sizes of the screens differ too much. In short: on mobile it is difficult to specifically design 'above the fold', for desktop that is nearly impossible.

Distances between elements

Every web design contains blocks, buttons, images or elements with a certain distance between them. Always use round numbers with 5 px increments for each distance and between each element (i.e. 10px, 15px, 20px, 25px, 30px etc). 

Do not use distances of, for example, 28px and 133px wide. This brings inconsistency, plus it is more difficult and more work for the developer to get everything 'pixel perfect'.

Illustrations

A website with many pictures and graphic elements is often the most beautiful and fun. When you export these images as PNG, JPG or other 'standard' image format, they look very sharp on one screen. But the exact same image can become very blurry on higher resolution screens. This is because PNG and JPG images are not 'vector'. 

Nowadays you can also export these types of elements as SVG images. The advantage is that these files are vector, so you can enlarge them to infinity without them becoming blurry. A developer can also animate these SVG images and further style them with code.

Programs to design with

Web designs can be created in multiple programs, each program has its advantage and each has its disadvantage. Below is a short and concise overview of the advantages and disadvantages of programs that we encounter in practice.

web design programs
  • Adobe Photoshop
    Pro: Many designers know and use it, have it in their possession/on their computer. Lots of tutorials available about it. Very suitable for designing websites.
    Cons: It has a lot of options, not all of which are web-friendly.
  • Adobe InDesign
    Pro: This is a great package for magazines and print.
    Cons: Dimensions can quickly deviate, difficult to export individual elements. It is not made for creating web/app designs.
  • Adobe Illustrator
    Pro: Completely vector based. SVG images can be exported more easily
    Cons: Can quickly become confusing within the different layers. Dimensions can vary quickly. Is not intended for creating web/app designs, more intended for graphic designers.
  • Adobe XD
    Pro: Completely based on web/app designs, plus you can already create a 'demo' model within the application. SVG images can be exported easily and quickly.
    Cons: Not many designers work with this package yet.
  • Sketch
    Pro: Completely based on creating web/app designs. Cheap to purchase. Provided with regular updates. SVG images can be exported easily and quickly.
    Cons: Only available for macOS. When using many images, files quickly become large.
  • Figma
    Pro: You can create designs together with multiple users. Is mainly web based. SVG images can be exported easily and quickly.
    Cons: Works in the browser, you must have an internet connection.