A good website is created through good cooperation between all disciplines, especially design en queues. It is important that designers and developers work well together to achieve the best result. Working according to certain standards helps with this, because it ensures a smooth transition from design to implementation. As a designer, you can also make your work more transferable by following standard procedures, so that everyone in the team can work on it without any problems.
The use of color
In web designs you always use RGB, for print you use CMYK. That is quite easy to remember. But why? RGB and CMYK are abbreviations for the colors that are used for the technology behind it. RGB is mainly used for screens, these usually contain 3 colors that together can show almost every color that we can see. CMYK is used in print and because they have a different composition, these colors usually cannot be displayed well on screens.
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/ (tldr; It doesn't really matter, but definitely use 72dpi to keep the file size as small as possible).
It also prevents misunderstandings. For example, when the designer makes the entire design twice as small in pixels but delivers it in higher DPI. Due to miscommunication, something like this can be overlooked and, since the pixels are always leading for the web developers, a site can be delivered much too small.
Grid
Most sites are built on the basis of columns. The most common is 12 columns where you set a 'gutter', or the distance between columns. These distances can be defined well with separate CSS classes and that is easy for a developer. By staying within this grid you get clear, unambiguous neat websites.
Width and Responsive Designs
A few years ago, most websites were designed with a width of 960px, as this was the standard screen size at the time. Nowadays, most users have larger or higher resolution screens. Therefore, modern designs are often based on a width of 1200px to better fit current screen sizes.
When designing, you may choose to take a “mobile first” approach. This means that you start by designing the mobile version of your website and then expand the design to tablet and desktop sizes. Typically, you will start with the narrowest screen size, such as 320px wide (for example, an iPhone SE). Keep in mind that on larger phones, the dimensions of your elements may stretch, so the design may need to be adjusted for an optimal user experience.
The following formats are useful to have on hand when designing a website.
- App design dimensions: 320 x 568px (iPhone SE)
- 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
Nowadays, many illustrations are used on websites to indicate things. Think of a clock for a time, a hamburger icon for a menu and of course your logo. Previously, you used JPG for this if you wanted a small file format, or PNG if it had to be transparent.
Now that is no longer really possible, this because there are high resolution screens in abundance, think for example of the Retina Display from Apple, which has this in all iPhones. These screens act like normal screens, but the pixels are doubled so often, that images on old formats start to look pixelated.
The SVG format was created for this purpose, this format works well for icons and logos. SVG ensures that your illustration is in vector format, this means that it can be enlarged to infinity without losing quality. Which is of course nice, if your logo looks fantastic on every screen.
Programs to design with
web designs can be made in multiple programs, every designer has his preference and every now and then the web design world shifts to a new 'tool'. Each tool has its own advantages, but also disadvantages. We have collected a number of them.
Figma
Figma is currently one of the most used tools for web design. In recent years, Figma has added several new features that make it easier for designers to work in it. In addition, it is also easier to transfer the design to developers by using 'Dev mode'.
Pro:
– Works across operating systems, even in your browser!
– Collaboration is easy, you can even peek at what others are doing.
– Porting to developers is easy!
– Frequently updated with new features.
Cons
– Because it also works in the browser, Figma is online based, so you never work locally, which can be a disadvantage for some.
Sketch
Sketch comes from Dutch soil and is constantly updated with new tools. Is completely focused on apps and web design and has useful tools for everyone.
Pro:
– Frequently updated with the latest features that meet current needs
– Easy and clear interface
Cons:
– Only works on macOS
– Sharing files is a bit tricky.
Adobe Photoshop
The old-timers in the design world still know how to design websites in Photoshop. You create it, you slice it and you export it. You get a package from Photoshop that contains HTML and that shows your website, but you don't have much use for it yet. Photoshop can be used, but we won't recommend it.
Pro:
– You can follow many tutorials to master it.
– Very well known, but also infamous.
Cons:
– It is more suitable for photo editing, it has web features but that is not its primary function.
Adobe XD
We'll still mention it, Adobe XD. It was Adobe's response to Figma and was quickly developed to design websites easily, quickly and well. But was discontinued by Adobe earlier this year (2024), because they were busy acquiring Figma. Unfortunately (or maybe not), the acquisition of Figma failed and Adobe has decided to no longer revive Adobe XD.