Designers have a tremendous impact on site performance based on how they design for the web, before a single line of code is written. This article will cover how performance can be designed and what it takes to make it happen.
Speed is a fundamental part of user experience on the web. Web performance has been proven to have a direct impact on how people use a site and if they are willing to use it again. With the rise of mobile web usage, it is more important than ever to focus on performance.
Yet performance is often ignored by most designers. This happens for many reasons, but it often boils down to the fact that designers consider load times someone else’s job.
Designing Performance is About Mindset
There are plenty of articles that cover how to make a website faster and they almost always provide tips like minifying your CSS and optimizing your images. These tips are useful and important, but do not solve the underlying problem.
The more essential step is less tangible – it requires a shift in thinking. Creating fast websites requires restraint and focus. No matter how much time you spend on optimization, a website with three thousand lines of CSS, ten jQuery plugins and five full-bleed images is going to be slow. Performance can be improved, but you will not see great results until you make it a core design principle.
Designing for performance requires a commitment to maximize the necessities and strip out superfluous luxuries. A more utilitarian approach towards design is needed where each element has a tangible and net-positive impact on the end result. This does not negate the importance of aesthetics, rather it means that it should not given a blank check.
Aiming for Simple and Efficient
It goes without saying that designers know the importance of simplicity. However, efficiency is often overlooked in the designer’s lexicon. Simple and efficient are not necessarily related. Many “well-designed” sites are beautiful, clear, intuitive and absolutely bloated.
As designers, we want to make something that appeals to our visual senses. We are seeing a lot of sites using high-fidelity photography, textures and spit-finish details to achieve that end. It is often hard to argue with the results on a strictly visual basis. However, we have to question if those heavy-weight elements are working to solve actual experience problems or just looking good for the sake of looking good.
Designing efficiently forces you to create an equally meaningful experience with less. Can you capture the interest and imagination of your audience without resorting to a full-bleed image? I would argue that you can and that it is worth it.
An example of a simple, yet inefficient design is Karma’s home page. Karma’s design is gorgeous and clear, but weighs in at roughly 1Mb across 45 requests. Don’t get me wrong, I love how the Karma website looks, it just fails the performance test and is therefore ultimately lacking as a successful design.
An efficient design is not by nature stark and without personality. Rather, each element’s existence has been vetted and justified. Efficient designs do not lack style, there is just a very good reason why that style has been added. It’s easy to find something on Dribbble and add it to our designs because it looks good. A mindless approach to design creates inefficiency.
The Flat Design Aesthetic
There’s been a lot of talk about flat design. It seems like a minimalistic style would aid speed, but that is not necessarily the case. Flat design can make page footprints smaller, but it is no guarantee. The above example of Karma’s website is proof.
There are certainly visual styles that predisposed to better performance, but it comes down to execution and the style’s manifestation in the final design. Aesthetic is not a substitute to making performance a core goal.
Concrete Examples
Now that I’ve talked in the abstract, it may be time to get into some examples on how to apply it. Below are some tips:
Design Without Crutches
Try to start a design without relying on easy solutions. I begin the design process without using any images, custom typography and three font weights (regular, bold, italic). See how far you can get by using color, contrast and form. You can always add different fonts, images and textures later on.
Improve Your Writing Skills
The main goal of a designer is to communicate. There are few better ways to communicate an idea than the written word. Words can go a long way – far too often we add visual elements when a clear sentence will suffice. Try substituting a visual image with strong copywriting and well designed typography.
Focus on Solving Problems
It’s easy to get sucked into the nuances of design. I do it all the time. It is important to remember that the role of the designer is to solve problems, not make things look pretty. I am a firm believer that a strong aesthetic builds trust with a user and helps create an emotional response. However, aesthetics should always support the problems we are asked to solve (e.g., improved usability, higher task completion, etc.). Looking at design through this lens will help create a goal-driven approach and focus our thinking .
Learn to Code
The best way to understand your design’s impact on performance is to have a general idea of what kind of code will be necessary to create it. Modern browsers have a lot of hidden tricks that can make your site leaner and make your life easier. By knowing how to build a site, you will know what to avoid.
Hone Your Craft
Images (both raster and vector) can be produced to be smaller. We should think of creating an image like we think of creating a CSS file – get the job done with as small a footprint as possible. This subject could be a separate article altogether, but the gist is to avoid pixel artifacts in your raster images and unnecessary vector points in your SVGs. This will make a significant impact on a file’s size.
Conclusion
Web speed does not fall in the category of sexy. Performance does not win design awards and it doesn’t get your portfolio lauded by your peers. It does however impact the people that matter – those using the site you created. If you are not designing for performance, you aren’t doing your job.
Finally, performance is the only element of UX (which I know of) that is entirely objective and quantifiable. I find it refreshing in a business which can be so amorphous and subjective that there exists at least one metric where by making the number go down, I can guarantee that someone out there is having a better day.