While it’s easy to blame the development team for the poor performance of a website, designers are just as responsible for the end result. Too many design elements can overload the website and result in poor performance whilst too few elements might not satisfy the client’s request. That’s why it’s important to find a balance between design and performance. 

In this article, we’re sharing six design tips that will improve the performance of the website. 

Animations come at the cost of performance!

Smooth transitions, a slide-up here, a pop-up there. Altogether it might feel good on a prototype and click dummy. But if animations aren’t implemented well, they hurt the website rather than making it feel good.

Animations might work well on a laptop, but on a two-year-old phone, the animations just come across poorly. When this is the case, the user is not upset about their output device, but about the page, which in their eyes is poorly done. And that’s the impression that lingers.

Coming up with animations is cool if performance allows it!

Don’t use too many different fonts

How many different font styles are really necessary? Does it have to be 10 different types, or is it enough to just use Arial for the body text? This is already pre-installed on 98% of all computers in the world and does not have to be loaded from the server.

If you don’t have to create a typography website, you can use one or two font families with two fonts each as a guideline. Standard fonts like Arial or Helvetica are often a good alternative if you don’t want to include external fonts.

It also helps to simply open Google Fonts and select a font family. Google will tell you in advance how fast or slow the font you are using is likely to load.

The more fonts you use, the longer a page will take to display. So decide early in the design process how different a text really needs to be displayed.

Flat vs. Skeuomorphism

The change to a flat and rather simple design was not only a topic of discussion for many San Francisco web design companies, it was actually not that bad from a performance point of view. Many sites today are designed in a more reduced way, which also helps to focus on the essentials.

You should ask yourself: How real does an element need to look? Do I necessarily need shadows or color gradients? The simpler the elements on a website are, the less code needs to be loaded.

Exporting images correctly

There’s a countless amount of designers that don’t think about whether embedded images are too big and how to embed them properly. Not everyone has an endless flat rate with a fast internet connection on their smartphone. Moreover, the number of images is usually the main factor for long loading times.

Every web designer has the right tool to reduce the kilobit count of images. You can use Sketch or Photoshop for this purpose. But you can also test how much compression is still possible on your image with online compressors.

Consider different display sizes

The layout must not only look good on one screen. We design for different display sizes which are used in different ways. To start a layout without thinking about Responsive Design is not possible nowadays. 

The layout must also be adapted to other sizes. This shows you and the development in advance which elements may simply not make sense on mobile devices and therefore do not need to be loaded. A design decision here also has an influence on how well the performance is received by the audience.

Design and development must work together

An overview of all elements, modules, and content helps development to get a quick overview. It shows how much really needs to be programmed and what might have more influence on performance and what less. But this is not only good for the implementation. It also helps you to see if your layout is harmonious overall. 

Too many different design elements are not good, but easy to overlook! From time to time compromises have to be made.

Conclusion

The points here are basically not meant to be guidelines you should use with every layout. But they will help you expand your horizons and think beyond your own workspace. Each point is independent of the others. Study your audience first and then decide how elaborate your site really needs to be. As long as you can justify your decisions logically, the customer will continue to nod at you and not be sad if there is no slideshow this time.