Blog / News
BLOG / 12 Dec 2016 /

17 mistakes graphic designers make when designing for web

I’ve spent the last 20 years tinkering with websites and learning first hand about design, coding and user experience, with 5 of those years as Technical Director at The Jaden Group and Bonsey Jaden. Over these two decades there are many things I’ve seen, lessons I’ve learned, and best (and worst) practices I’ve been exposed to.

While there are many great designers out there, what I’ve come to realise is that web design itself if a whole different discipline; one that many traditional or graphic designers are not adequately prepared for.

With that, I’d like to share few insights and lessons (17 to be precise) which I feel every designer should understand and abide by, not only to reduce the design-induced frustrations of my own and others’ development teams, but to make the web a more friendly and functional place for everyone.

Fact 1: Web design is not an art

It may seem obvious, but a lot of web designers tend to think that they create art. Web design is not art, although it has some connection with taste and visual preferences. The purpose of a website is not to express one’s feelings (in most cases) but to provide information. People don’t visit websites in order to experience some kind of art form. That is a simple paradigm to follow.

Web technology is very limiting so a designer is not free to do as they please. A good designer is aware, educated and ready to create the best design possible, based on known limits. The fact is, a web designer is not an artist and he or she has to understand and follow rules, technical demands and limitations.

Fact 2: Web design is not print design

Once again this seems obvious, but over 80% (from my experience) of people who claimed to be web designers don’t understand the difference. Web design is, comparing to print design, oriented to screens and it deals with completely different issues such as browser types, screen types, screen resolutions, the technology used to display websites, browser settings and user behaviours, just to name a few.

The key is that web design has to answer to a set of an unknown number of requests and demands, and the only way to achieve this is to have consistent, well-crafted design and proactive approach. Web design has to consider that nothing is static, contrary to print design, which tends to provide invariability.

Fact 3: We all have different computers, monitors, OS, browsers and more

One very common issue with designers is that they don’t understand, or don’t want to understand, that people use different computers, monitors, devices, browsers, operating systems, settings, etc. The designer’s own view is completely irrelevant and doesn’t prove anything. A designer’s monitor is not the one most people will look at. Most likely the browser that designer uses is also not the one people will use. So making any assumptions based on a designer’s own setup/preferences is not possible, and yet it is all too common.

Fact 4: A browser is not a predictable environment

As I mentioned, it is not possible to predict which browser will be used or what its settings will be. Because of that fact, design has to ensure that the developer won’t be forced to use radical or high-end technology solutions that are not supported by all browsers. In this case, the developer would be forced to use hacks or separate solution for a particular browser which downgrade performances and increase development time.

Fact 5: Design affects website performances

One of the most important things when speaking about websites are performances. It’s not just a user’s experience, but also how Google rank websites. Believe it or not, developers don’t have the power to optimise anything if you put a bunch of huge images on the page. A developer can compress code, and speed up loading & executing of code, but media remains something that cannot be optimised.

Design affects performances in many other ways: complex layout will demand complex code. There are situations when a developer has to use JavaScript in order to achieve design, and that’s wrong on so many levels. A designer has to be aware of this to avoid making such mistakes.

Fact 6: Responsive doesn’t mean just mobile

In most of the cases when a developer gets a design for responsive it is only for mobile. So, what is happening on all screen sizes from “desktop” to mobile? There are literally thousands of sizes from 1440 to 360 and a website has to work well on all of them. A web designer has to think about every single case, and the best way to do this is to understand and use grid systems.

There are two main approaches to responsive issues: adaptive and responsive.

Adaptive design (AWD) uses determined breakpoints on which changes will happen and affect layout, for example 1440, 1024, 768, 480, etc.

Responsive design (RWD) provides a fluid and more natural experience, but it’s also demanding in terms of optimisation.

Choosing between the two must be done after content, not visual aspects!

Fact 7: Responsive is not a magic wand

As the name itself “optimisation” says, responsive is not a way to magically reorder elements on the page, but to optimise the way they are displayed. That means that design for mobile devices cannot have additional or new elements or too drastically reorder elements from the desktop version. In other words, you cannot just grab an element from the footer and put it in the middle of main content on mobile. One exception to this rule, however, is your navigation elements.

Fact 8: Grid is a MUST in web design

I think that this is a critical line that splits good and bad web designers. Understanding of a grid system is critical knowledge for a web designer, yet the high majority of designers I worked with don’t understand it.

Grid system is a simple set of vertical lines, which divides space into columns. In most cases, we use 12 columns, but there are other systems like 16 and 24 columns. The decision of how many columns is made after understanding how many details are needed on a website.

Besides columns, we have gaps between every column, so the basic unit of grid is column + half of gap on its left and right.

Fact 9: Grid is not a cosmetic add-on

Grid is only useful if it is used properly. Placing a grid after the design has been created will certainly render it useless. All elements need to be aligned to the grid if they are to respond to a screen.

Fact 10: Content is king!

A design does not begin in Photoshop but in wireframes, where a designer needs to learn about content. A lot of times designers put a paragraph of dummy text on an element only for a client, through the CMS, to later replace it with 5 paragraphs.

A designer is not in control of content, but the content is still something that must determine the design.

Fact 11: Font works differently in browsers

The decision of which font to use has to be made after several critical factors: client’s branding and language support, where language support takes priority over a client’s branding and other preferences. Many times I have seen designers use a font family that doesn’t support language, although this wasn’t apparent to them since the content was only in English. The problem only appeared when the client entered multi-language content and the chosen font couldn’t support Bahasa, Vietnamese, Thai etc.

Besides the choice of font family, it’s also important to understand that fonts are rendered differently in Photoshop compared to browsers. On the same browser but a different OS the font won’t be the same; even on same OS and same browser font doesn’t may not be the same, if a user has different settings. This is why design cannot rely on fonts.

The same principals go for readability – your OS and browser each render fonts differently, so some may look ugly or distorted in particular browsers.

Another important thing to consider is performance. Today we have font-faces that might include any possible font that can be converted in TTF, OET, OTF and WOFF. However, fonts have to be loaded and served to user so the designer has to make a decision (after character support) based on the size of the font. I recently made a website which had 20 MB just in fonts. Imagine the frustration when a user has to wait for 20 MB to be downloaded just to properly display their page.

The best option is always to use Google fonts, for many different reasons. For example, fonts hosted there are well tested, it’s clear which offer language support, and they are hosted on Google’s CDNs and most likely cached to user’s browser already.

The font for body text (content) should be a simple and usable Google font where possible, with headlines that fit the client’s branding. And be sure never to use more than two font families on a web page!

Sometimes designers increase/decrease letter spacing in Photoshop, in order to squeeze text to fit an element. This is not the right approach and will often create display issues, especially if the text comes from CMS.

Fact 12: Odd numbers are evil

It is very important to keep in mind that elements should use a size that is an even number. The reasons for this are many: if you have to split an element in half or divide it, odd numbers are evil. When you want to centre something, any odd number will leave you with a leftover.

Fact 13: Organisation is important

The thing that separates good designers from average or bad ones is the way that they organise their work. This mean how they arrange files, folders, structures, as well as how they deliver PSD file to the developer. In most cases, PSD files look like a cluster bomb just exploded and blew up the work into hundreds of random unnamed layers and folders.

Since web development is a technical thing, a designer has to obey strict rules and conventions and to make life easier for other people that may work with him.

As always, consistency is the key and it’s something that has to be followed. Design files should be kept only in one place (project) with clear structure and naming conventions. That means, that designer cannot have a file called “HOME_final_new_final_2.psd”. What does this mean to any person who needs to inherit/continue work? If you need to version files simply use “Home-1.psd”, “Home-2.psd”, etc.

Generally, when working in a team, a designer needs to separate his/her working files from the product that will be given to other people, because in most cases other people don’t need temporary files, but rather the final version of PSD.

In such a structure, it will always be clear that the only thing needed for the developer is in “Production” folder. Accordingly, a designer is responsible for keeping ONLY the latest version of files in “Production files” and to not have multiple versions of the same file.

The same goes for the PSD file itself. Photoshop gives a possibility for creating folders, and that is a must. For us developers, it’s important to have quick access to each individual element, plus the ability to easily separate it from other elements and the background, etc.

Fact 14: High-density screens are not optional

Being in digital today means being aware that there is some seriously awesome technology out there, and as a designer, in particular, you have to consider and cover as much of it as possible in your work. This means every new design for web has to be ready for high density screens (ie Retina).

In order to achieve this, it’s necessary to has to provide material that is at least 2x bigger than the actual display size. For elements like icons, logos, lines and other linear graphical elements, it’s crucial to use vector format so the size can be adapted and prepared for high density screens.

Fact 15: You must understand file formats

As a designer, it’s important you actually understand when an image should be saved as JPG and when to use PNG. Although it might sound obvious, most actually don’t really understand this. Knowing this is a very practical requirement: using the correct format will ensure the image is smaller (in terms of its weight), which directly affects website performance.

JPG is suitable when dealing with photography, and images that have a lot of colours and details.

PNG is suitable when an image doesn’t have a lot of colours, if it is based on vector drawing, or when the font is merged to the background. To remember this simply, use PNG if your image has sharp clear lines and distinctive elements.

GIF is rarely used nowadays, and with good reason: that format only supports up to 256 colours. This may be handy in some situations but in most cases, PNG will be preferable.

It is also important to understand that Photoshop’s compression algorithm is far from the best available, so when you really want to compress a file and save some bytes, go for external tools.

Fact 16: Elements on web page are blocks

No matter if you can notice or not, elements on a web page are built in the form of blocks. So every element has to be imagined as square/rectangle and their physical boundaries are different than visual boundaries. Elements cannot overlap each other without an absolute position, and that’s something that has a lot of limitation.

Fact 17: Text must not be merged with background in PSD

One of the most annoying (and even infuriating) things for a developer is to have text merged in the background, meaning it has to be manually re-typed. This is a waste of time for the developer, and an easy thing to prevent at the design stage.

Wherever possible it’s best to avoid typing text in uppercase; there’s a transform tool for this, and best practice is to use CSS property.

To Conclude

Design is not, and has never been, about simply making things beautiful. While that certainly plays its part, design (and web design in particular) is there to serve a very specific purpose – to communicate information in a clear, understandable and meaningful way.

Only once the core principals of web design are understood, followed and embraced can web design begin to fulfil its purpose, and web developers stop pulling their hair out in frustration and despair!

I look forward to discussing (and debating) with you in the comments section below!