You’re not designing a poster; consider different screen sizes

We come across this challenge fairly regularly – a designer has crafted a beautiful piece of digital perfection at 1440px (and to be fair, often at 375px) width. However, problems occur when they haven’t considered that screen sizes are endlessly changing.

When we receive the designs, we raise questions about screen sizes – particularly things like; will elements get too squashed at 768px, or spread too far apart at 1920px?

Taking these things into consideration at the start will save you a lot of time!

ALSO – don’t forget about device interactivity; an iPad Pro’s screen is as wide as the smaller Macbook Air’s but, because it is touch screen, there is no hover functionality. How would the beautiful drop down menu work, when your visitor cannot hover?

Now, I’m absolutely not saying developers need designs for every possible screen size – that would be madness. But considering what might look or act a bit weird beyond a standard desktop or mobile experience will save time and (ultimately) money in the long run!

(Image from GBKSoft)

There’s no technical magic wand; think accessibility, performance and sustainability

There seems to be a perception that accessibility and performance (site speed, etc) are entirely a technical challenge to be overcome. This actually couldn’t be further from the truth; they are at least 60% a designer’s responsibility.

It’s almost impossible for us to make an inaccessible design accessible.

In the same way, we cannot make an asset-heavy website fast (well not strictly true – we absolutely can – but invariably the end client has not signed off the budget required to do this)

Accessibility

If you want to meet WCAG 2.1 AA standard (“the Web Content Accessibility Guidelines are part of a series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the Internet” – Wikipedia), there are some important decisions to be taken at the design stage:

• Contrast ratio – this determines how readable the text is on a background:
• Black text on a white background is (almost) optimal
• Text over background images will almost always fail contrast ratio tests
• As will colours that are too similar – if it doesn’t feel like a stark difference, the contrast probably isn’t high enough
• Typography – how readable is the font?
• Can a user zoom in without breaking the design?
• Is the font better/worse for users with dyslexia, etc?
• On-page navigation – how easy can someone with visual impairments navigate the site?
• Is it clear which links are clickable, beyond the use of colour?
• Are all the hyperlinks descriptive, not simply “Click Here?”
• How much content shows with a hover state?

Performance

Particularly now that Google have a new focus on user intent and experience in search results, performance considerations must start at the design stage:

• Do you need video on the site? Does it have to play once the screen loads (such as background video) or is it video to be consumed, and thus loaded in via a third party, like Vimeo?
• Do you need to have huge images? Beyond video, these have the most impact on page load times
• Do you need that animation? Large animation libraries are huge performance drags.

This is something we can help you with whilst you’re still designing – we have an agency client who books in an “animation session” during the UX/UI design phase. This is a chance for us to discuss their animation inspirations against the client budget or timeline. It’s a super helpful meeting because it makes sure the end client isn’t surprised to find that work requires more budget/time/can’t be done once we quote for the development.

Sustainability

We’re moving into a world that is increasingly aware of its responsibilities to the environment. This is making sustainability in web design and development an important consideration going forwards. Sustainability also aligns very closely with performance goals – increasing website speed is clearly linked to reducing power consumption from a website:

• Videos are heavy files and require significant power draw to load and play
• Large photos, again, take an age to load and consume significant amounts of power
• Animations – these require power consumption during load and often whilst playing as well. Try considering if they are really necessary and whether an alternative could be used.

Are you creating coherence with reusable components?

We made the move to using Gutenberg, WordPress’ modular page editor, early after its launch and have seen huge benefits from using this tool. We really like the flexibility it gives clients to make new pages and blog posts (for example), all while maintaining brand coherence. Each block is structurally fixed but all content is editable, meaning no “creative license” can be taken by content teams – something I think you’ll appreciate as a designer!

Using Gutenberg also helps to lower web development costs – building 10 modules is cheaper and easier than building 6-8 templates!

All this Gutenberg hype is actually leading somewhere, promise.

The biggest thing you can do to improve UX, both visually for the user (but also for your developer) is using coherent, consistent components – don’t treat each page as a standalone experience. This is where getting to grips with designing for Gutenberg could really help you.

Some things to be especially conscious of:

• Component widths e.g. do all the cards across the site have the same width/height? If not, why not? Explaining your logic will make things easier.
• Font sizes – are all h1s the same, h2s, h3s, etc? Does body copy change across the site? If so, what is the reasoning behind these differences?
• Is there a clear colour palette across the site? Are all reds the same (or with clear hue changes for different use cases, eg part of a particular ‘hover state’ hex code that is consistent across the site?)

Treat Awwwards carefully

Okay, I know this one is a tough one.

Don’t get me wrong, we love Awwwards (and the other web awards websites) as much as the next person. They are an amazing place to gather inspiration and to explore ideas, the Pinterest of web design.

But.

It’s super important to be mindful of the budgets behind these truly outstanding projects. They are often “budget no limit” or a zero budget because they were a passion or an internal project.

Consider whether the small manufacturing client you have really needs that amazing animation that the freelance front-end developer used on their portfolio website…

Bottom line: Honourable Mentions and Sites of the Day on Awwwards are great inspirational examples as they tend to be more quotidien in their design and animation approach. However, think of the creative effort required to win a major accolade on a website of people who look at websites all day…

Try to design for flow, not “screens”

Very often we see designers who start with the sitemap and break it down into a series of screens, for example an ‘About’ template then a ‘Contact Us’ template.

However, as user experience becomes increasingly important, it is much more powerful to think in terms of user flows.

This ensures you don’t miss any key templates that might not surface on a sitemap. Some things to consider:

• If there is a search bar in the header, is there a search results template?
• If there is a contact form or sign-up area, is there a “thank you” notice or page?
• Is it possible that old links will expire? If so, ensure there is a 404 template that easily directs the user back to the homepage

We have many clients who ask us to look over the wireframes, highlighting any top level issues and/or raising any missing designs (such as a legal template, 404, etc) – we’re always happy to help during the design process and we don’t charge for this kind of consultation!

Please get in touch – ben@lattimoreandfriends.com – if you have any questions.

User flows also allow for a greater design coherence around related user flows. For example:

• If you are working on an ecommerce store, does the user flow feel consistent and logical?
• Do you expect users to explore a list of services sequentially? Think on how to ensure each service doesn’t feel too jarring from the one before/after

Designing for user flow will help you to create a more cohesive website and avoid last minute rushed designs!

Push boundaries but talk to us as well

We love to chat around ideas, inspirations, challenges and opportunities for potential web projects. If I’m honest, it’s the part of my job I really look forward to! Please get in touch if you have some ideas you’d like to run through.

‍