Back to Top

Tag Archives: ui design

website-design-seo-ux-business

Bad website design: Bad for SEO, UX and business

Updated on by

Are these design elements slowing your download times and keeping your website from doing what you need it to do: earn you more business?

I tell my clients two things to frame organic search discussions around content and user experience:

  1. Search engines want to provide answers to their users in one click or less.
  2. If you design your website with the idea of getting answers to visitors’ questions as efficiently as possible, your site should earn more attention in organic search

Search engines must keep their users happy to retain and/or grow their market share. Therefore, it’s in their best interest to send people to websites that they calculate will give users a good experience. 

Bounce rates increase 32% when download times went from 1 to 3 seconds, according to Google. Also, bounce rates increase dramatically at 3 seconds, while page views also drop off, according to Pingdom.

Both of these stats are a bit old, but there’s no evidence to suggest people are any more patient today.

The challenge I most often run into with brands is that they design their websites in a way that hampers the “one click or less” goal. They incorporate things into their designs like:

  • Large autoplay videos (sometimes with sound).
  • Large hero images that push informational content far below the fold (add heroes that rotate through a slideshow and the experience is even worse).
  • Custom fonts that are not likely to have been installed on the local machines of their visitors.

All of these design elements (and others) detract from user experience, conversion optimization and accessibility standards. 

Examples of bad design and UX

Both of these examples show the filmstrip view of the page load over time on WebPageTest.org, a popular site for testing download times that has been recommended by some Googlers. I simulate a Galaxy S7 smartphone over an LTE connection in both examples.

Charity website

This website has a large autoplay video on its home page that pushes much of the main content below the fold. 

In the tests I ran, nothing appeared in the viewport until 3 seconds into the load. The CTA at the top of the page is visible, but only the logo’s alt text shows. Some text is hard to read because it is light gray; it is intended to display as an overlay on the darker video. 

Visitors may even miss that they are on the right website because the logo does not display until 4.5 seconds into the load and the alt text is difficult to read.

If we are to believe the data from Google and Pingdom, it’s quite likely that unless someone taps on the CTA at the top of the page, they are quite likely to bounce before getting the main message of this organization. 

Well-known brand website

This website has a large hero image pushing content below the fold and a custom font that must be downloaded before anything displays. 

You can see from the example that nothing other than the hamburger menu displays until 4 seconds into the load. 

Here’s a hint: If you have to include some sort of download timer to let people know something is on the way, it’s too big. 

Part of the reason the content takes a long time to display is that the custom font alone takes around 4 seconds to download. No text appears until 6 seconds into the load, and that’s only the cookie notice. 

All told, it takes longer than 10 seconds for this page to completely download. When the page finishes loading, the only thing you can see other than the hero image is the cookie notice.

To be fair, there is a lot more going on in these examples than large videos, huge heroes, and custom fonts. There are also JavaScript and CSS files, third-party tracking, and more also jamming up the download streams. Those are likely a subject for another time.

Why bad UX happens

When I talk with designers and developers about challenges like this, I’m often given the same justifications:

  • “Everyone else is designing their websites like this.” This kind of excuse didn’t work when we were kids. Why do some adults think it’s still acceptable?
  • “The search engines are unfair in how they judge download times. Our tools tell us everything is OK.” There are many reasons to believe that the search engines are being unfair about evaluating download times. In the end, it really doesn’t matter. If we want to compete, we need to be faster!
  • “But … branding!” Yes, branding is important. But is it so important to risk losing potential customers because the website is too slow?

Avoid these pitfalls

It’s our job to help our clients, partners, and colleagues create engaging sites that download quickly and meet the expectations of website visitors while still looking good. 

Doing so will help earn more attention from organic search results and increase business.

If you are interested in original article by Elmer Boutin you can find it here

The 10 Most Important Web Design Advice for Your Website in 2022

Updated on by

When someone clicks on your ad, what do they see? Do your blog’s layout and content reflect the most recent updates? Future profitability of your official site?

The 10 essential web design tips in this article can help you transform your 2022 website from an outmoded and uninspired one into a brand-new one!

Reasons Why You Should Upgrade Your Website

The first line of defense for your company is a fantastic website. As a result, it’s critical that you pay attention to both the content itself and the overall design of the website.

Having said that, site design is more than just aesthetics. It involves careful preparation and envisioning the idea you’ll use for your website. The typefaces, colors, and visuals are all part of this. A website’s design must also be balanced.

A website with too many elements, out-of-date content, or even broken links and pages is not something you want to visit.

Here are some straightforward design recommendations you should abide by to boost your website.

Keep it as simple as you can

Keep in mind that your website’s main objective is to convey your main message to your target audience. It should be straightforward and simple to use so that your visitors can process your material more effectively and quickly locate what they’re looking for.

Put readability first

Will your intended audience comprehend what you have to say? Are they ordered, or is the information cluttered? You should think about how simple it will be for your audience to understand what you are writing. Avoid utilizing blocks of text while doing this. To make the text easier to read, use lists and bullets.

Use only top-notch pictures

65% of people are visual learners, according to the Social Science Research Network. Additionally, our brains receive 90% of the information we take in visually. Therefore, instead of merely utilizing words, your website needs to feature high-quality photos to properly express your message.

Additionally, using visuals to explain your written information in greater detail will help you connect with your audience. High-quality photos also convey authority and professionalism.

Put words and phrases in the title of your article.

Avoid using ambiguous, wordy headlines that could mislead your viewers. Use terms or phrases to draw the visitor’s attention while being as direct and clear as you can.

Keep in Mind Your CTA

CTAs, or calls to action, are essential for your business, particularly on your website. Be specific about the following actions that visitors to your website will take. But be careful not to overdo it. Avoid placing CTAs at the top of your page.

It is usually preferable to place the CTA at the bottom of the page because not every visitor to your website is prepared to take the following step.

Pay attention to your 404s

Make sure your website’s visitors who are your target market don’t see 404 errors. 404 indicates that no one can find your page. And one of the main reasons for this could be that the URL is incorrect or that the website was relocated or destroyed.

Keep in Mind Your CTA

CTAs, or calls to action, are essential for your business, particularly on your website. Be specific about the following actions that visitors to your website will take. But be careful not to overdo it. Avoid placing CTAs at the top of your page.

It is usually preferable to place the CTA at the bottom of the page because not every visitor to your website is prepared to take the following step.

Watch where you place your social links.

Your social media profiles should always be listed on your website so that visitors may connect with you there. Do not place them at the top of your page because they may distract visitors and cause them to leave your website.

Conclusion

The design hints mentioned above are only a few of the many elements you can use to create and enhance your website. The objectives of the design update you are performing will determine everything.

If you are interested in original article by Livia Neistta you can find it here

web-design-trends

The best (and worst) web design trends of 2022

Updated on by

What’s the year been like in web design so far? Web design expert Irwin Hau reveals all…

We’re heading towards the end of the year now, which means it’s time to pause and assess the web design trends that have defined 2022. It’s been an eventful year, with a number of trends emerging and evolving, while others have dropped off the scene entirely. See our roundup of web design trends of 2021 to compare.

In terms of commonalities between these trends, we’re seeing a growing love of retro fonts and aesthetics, a bigger focus on homemade/less polished elements, and a continued push towards ever more interactive, playful interfaces. We’re also seeing a bigger push towards finding a balance between looks and speed: the latest web design statistics(opens in new tab) show users have higher expectations post-Covid, and this includes both loading times and aesthetics; a balancing act we’re all just figuring out.

When it comes to things that are on the way out, “poor UX remains the biggest driver, along with a few trends we’ve just seen a bit too much of these past few years”, says lead conversion specialist at Neon Bright(opens in new tab), Alice Khau. They say the opposite of love is indifference – so if you want to capture eyes and hearts, boring your audience must be just about the worst sin there is.

So, without further ado, let’s take a look at the best and worst web design trends of 2022 so far. First up, some of the best…

01. Memphis design

Here’s some IRL Memphis design in the form of Kartell’s flagship store tribute to the aesthetic

Memphis takes inspiration from the 1980s. It’s popular now because it’s a departure from the minimalist, more ‘tasteful’ formal looks that have found favour among the design crowd in recent years (plus all things ’80s have been having a bit of a moment these past few years – looking at YOU, Stranger Things – see our Stranger Things fonts roundup to get in on the action). 

Memphis design is fun, colourful, and chaotic – so use it when you want to add some personality and playfulness to your site. Fashion and lifestyle brands, food retailers, and so on – go right ahead. Funeral directors and banks – this one isn’t for you. Unless… well, you do you. 

02. Retro looks

’90s-style sites are having a revival – get the look with this pack from Craftwork Studio

We’ve already touched on the ’80s revival that’s happening in web design (and beyond). This year, we’re seeing a similar trend emerge with other decades – most notably the internet aesthetic of the ’90s.

Now obviously ’90s sites weren’t known for looking, shall we say, chic (it’s a love/hate thing), so we’re not recommending you copy them to the letter – but they did have some elements you can pinch.

Notably, bright colours, geometric shapes, retro fonts, and purposefully pixelated icons. Ahh, sweet nostalgia! This trend is perfect for fashion brands, music retailers, and anyone else who wants to add a bit of fun and personality to their site, while giving an ironic nod to the sites of yesteryear.

03. Visible borders

This trend’s been around for a while, as Anastasia Fesiuk shows in this design

This is a trend that’s been slowly bubbling away for a few years, but it’s now becoming more mainstream. The idea is to use borders around elements on your site to make them ‘pop’ and help them stand out. 

It can be used sparingly to add some interest and focus to key elements, or more broadly across the entire site. Be careful though – too much of it can make your site look ‘busy’ and cluttered. 

See above for an example done well: the visible grid provides a sense of order and cohesion, and helps the viewer pick out relevant information quickly. 10/10! 

04. Grainy gradients

This piece by Brad Hanson shows off this trend perfectly

Gradients have been around for a while, but they’re now becoming more complex and experimental. Designers are playing with a wider range of colours, as well as more unusual colour combinations and textures. This trend is perfect for those who want to add some visual interest to their site, without going too crazy with patterns or colours.

05. Glassmorphism

Could a glassy sheen like this from Rudi Hartono be in your next design?

This is another new trend that’s starting to emerge. It takes inspiration from 2020’s neumorphism trend, but adds a ‘glassy’ sheen to elements. So, buttons might look like they’re made of glass, or websites might have a ‘sparkling’ effect. Again, it’s early days yet, but we think this trend has some potential.

Designers can use this effect to add some visual interest and uniqueness to their site. It can be used sparingly to create a focal point, or more broadly across the entire site. Be careful though – too much of it can make your site hard to read.

06. Behavioural design

Behavioural design is a relatively new trend that’s starting to gain traction. The idea is to use design to influence and change user behaviour. For example, you might use gamification techniques to encourage users to stay on your site for longer, or you might use ‘exit intent’ pop-ups to try and stop them from leaving.

This trend is perfect for those who want to increase engagement and conversions on their site. However, it’s important to use behavioural design techniques in a way that feels natural and unobtrusive. Otherwise, you risk annoying your users and driving them away. (Find out more with our UX design course)

07. Neo-brutalism

Andrea Jelić shows us how this trend is done

Neo-brutalism is a new trend that’s starting to emerge. It takes inspiration from the ‘brutalist’ style of architecture and applies it to web design. The result is a raw, stripped-back aesthetic that celebrates function over form. This trend is perfect for those who want to create a simple, impactful site that’s easy to navigate and use. It also feels edgy, making it ideal for lifestyle brands. Think clubs, fashion retailers, and festivals. 

08. Parallax scrolling

Parallax scrolling is a trend we picked up on in 2021 – and guess what? It’s still going strong. Essentially, it’s a way of adding depth and dimension to your site by making elements ‘scroll’ at different speeds. This can create a really immersive and engaging experience for your users. Be careful though – too much movement can be disorienting and off-putting. See our best parallax scrolling page for examples of what to do.

09. Moving type

Go to vitaarchitecture.com for a great example of this trend

This trend combines static imagery with small, subtle movements to create something that’s both eye-catching and engaging. Cinemagraphs are a type of moving image that’s becoming increasingly popular, as they’re easy to produce and can be used across a variety of platforms (including social media).

Designers can use it (sparingly) to create a focal point, or more broadly across the entire site. Be careful though – as with all things, too much of any one trend can make your site look busy and cluttered.

10. Oversized typographic hero image

Go big like Gil or go home

Big, bold, and impactful – that’s what oversized typographic hero images are all about. This trend is perfect for those who want to make a statement with their site. These giant typographic statements take the place of imagery, and can be used to communicate a brand message or call to action. 

Be careful though – this trend can easily be overdone. Use it sparingly (too many messages makes it feel like all the ‘voices’ on your website are talking at once), and make sure the text is easy to read.

11. Handmade graphics

Get the handmade look with this collection of illustrations from Graphics Collection

2022 is all about embracing the imperfect – and while we all love digital tools for creating images and typography, we’re after something a little more homemade. 

As such, we’re seeing a trend towards more handmade, organic graphics. This is in contrast to the clean, flat designs that have been popular in recent years. Designers are using hand-drawn elements and illustrations to add personality and charm to their site.


When it comes to aesthetics, what one person loves, the other might hate – but in web design and UX in particular, there are agreed things that work, and things that don’t. Every entry on this list falls into the latter camp – aside from a few that made the list simply because they’ve been overdone to death. 

01. Pop ups

Advertisement

We all know them, we all hate them. And worst of all, they’re still here. 

Pop-ups are generally intrusive, annoying, and often completely irrelevant to the user. Also, why are you asking me to subscribe/allow notifications when I have literally JUST landed on your site. I don’t know you. I have no idea what you want from me. This is the socially awkward equivalent of a stranger walking up to you and asking to be BFFs. Take note, web designers!

Beyond subscribe popups, advertising pop ups are also rife. You know the ones – you’re minding your own business, reading an article, when all of a sudden a giant ad pops up and blocks half the screen. Or how about those video ads that start playing automatically (with sound!) as soon as you land on the page? Yeah, we hate those too.

The solution? Pop-ups should only be used sparingly – and even then, only if they’re relevant to the user. If you must use them, make sure they’re easy to close and that they don’t block the content. And please, for the love of God, don’t have automatic sound. Speaking of which… 

02. Auto-playing video and audio

We get it, you want us to watch/listen to your latest video/podcast episode. But do you really think we’re going to do that when we’re at work, in a public place, or just trying to read an article in peace? No, we’re not. We’ll close the tab faster than you can say ‘shut it.’

The solution? Don’t auto-play video or audio content on your site. If you want people to watch/listen, give them the option to do so, don’t force it on them. On the flip-side, if you do it well, you can have a positive impact: According to recent conversion rate statistics(opens in new tab), the average session duration is around three minutes – so if you make that video/ audio engaging, you can easily bump this up.

03. Slow loading sites

No one likes a slow website. A slow loading site is not only frustrating for users – it also has a negative impact on your SEO. 

The solution? Make sure your site is optimised for speed. This includes compressing images, using a caching plugin, and reducing the number of plugins you use.

04. Too much text

We live in a world of sound bites and short attention spans – so it’s no surprise that long blocks of text are a major turn-off for users. No one wants to read a wall of text, no matter how well written it is. But what about SEO, we hear you ask! Well contrary to popular belief, you don’t need miles and miles of text to rank. Just enough to provide real value to your readers. 

The solution? Hire a copywriter so your text is pithy and to the point. Oh, and break up your content into shorter paragraphs, and use headings, bullet points, and images to break up the text.

05. Complicated navigation

A complicated navigation can be a major barrier for users. Things like too many options, or pages titled non-obvious things are a no-no. If your navigation is confusing, chances are people will just give up and go somewhere else.

The solution? Keep your navigation simple and easy to understand. Use clear, descriptive labels for your links, and organise them in a way that makes sense.

If you are interested in original article by Irwin Hau you can find it here

UI-design

Master the golden rules of UI design

Updated on by

Create effective interfaces with these essential UI design rules.

There are certain UI design rules that can help ensure effective user interface design. When they get broken, it’s often because of a misunderstanding of what UI design is about. UI design is not only visual design, nor is it UX design in its entirety – but it does combine elements of each.

UI design is about usability. That means that it’s not just form that’s important, but rather how form aids function. Great UI design is a mixture of clarity and efficiency, and the golden rules of UI design proposed below can help to achieve that through typography, colour palettes, CTAs, components, and design systems.

Below, we’ll look at 5 UI design rules, starting with typography. The rules apply whatever tools you’re using (see our guide to the best UI design tools for options, or alternatively our general guide to best website builders if you’re looking at UI for a personal website.

For more pointers, see our feature on the things you need to consider when designing a UI. And if you want to learn more about UI and UX, sign up for our online UX design course, UX Design Foundations.

UI design rule #1: typography is about accessibility

Simple but clear type systems can be beautiful (Image credit: Daniel Schwarz)

Great typography boils down to accessibility. In a design system for a UI, font size, line height, paragraph spacing and letter spacing should be designed in a way that enhances readability and legibility. Visual design – i.e., colours and fonts – certainly add to the user’s overall experience, but at the end of the day users are using the UI, not looking at it as art.

Legible letters result in clarity, and readable words are what help users digest content efficiently. Well-designed typography can still be aesthetically satisfying. In fact, you might be surprised at how beautiful black-on-white Helvetica (or a similar font) can be after only a few simple typographic enhancements to font size, line height, letter spacing, and so on. Similarly, ‘beautiful’ fonts can become ugly when they’re unreadable simply because frustration always trumps aesthetics.

Like many aspects of UI design, fine-tuning these individual styles isn’t really the challenge. The challenge is maintaining consistency through the entire UI design, since, as humans, we navigate the world (and our user interfaces) based on mental models, patterns, past events, and familiarity.

This is where design systems come in. They help maintain consistency and establish a clear visual hierarchy between elements of varying importance, which helps users understand our UI faster and digest our content more efficiently. And while design systems can be almost as elaborate as a Bootstrap-like framework, they start off more like a style guide. These are the elements to consider:

Font size

When it comes to legibility and readability, the minimum acceptable font size as defined by the WCAG 2.0 Web Content Accessibility Guidelines is 18pt (or 14pt bold). We couldn’t really tell you what font size to use as this largely depends on the font itself, but it’s important to be mindful of visual hierarchy and how this base size distinguishes itself from summarised text such as headings (<h1><h2><h3> etc.).

With your UI design tool of choice, create a series of text layers (T) and adjust the sizes to correlate with the following template:

  • <h1> 44px
  • <h2> 33px
  • <h3> 22px
  • <p> 18px

Next, choose the font. What you might notice with some fonts is that 18px <p> and 22px <h3> doesn’t look all that different. We have two choices here: tweak the font sizes, or consider using a different font for headings. Consider the latter if you anticipate that your design will be text-heavy. Keep in mind that visual UI design is often a gut-feeling approach, and nothing is fixed – everything is subject to change.

Line height

Optimal line height ensures that lines of text have enough spacing between them to achieve decent levels of readability. This is becoming more recognised as a standard, with even Google’s PageSpeed Insights suggesting it as a manual check or a flag if the text contains links too close together as a result of line height.

Once again, the WCAG helps us out with this one, declaring that line heights should be 1.5x the font size. So, in your UI design tool under ‘Line’ (or similar), simply multiply the font size by – at least – 1.5. As an example, if the body text is 18px, then the line height would need to be 27px (18*1.5).

Paragraph spacing

For paragraph spacing (or text spacing), you’ll probably want to manually align layers using smart guides for exactness. Similar to line height, the magic multiplier is 2x (meaning, double the font size). As an example, if the font size is 18px, then there should be a 36px space before leading into the next text block. In regards to letter spacing, this should be at least 0.12. 

If your UI design tool supports it, consider turning these typographic styles into ‘Shared Styles’ to make them rapidly reusable while ensuring visual consistency. This is usually accomplished via the inspector.

UI design rule #2: three colours is enough

Colour can be used for visual hierarchy in UI design (Image credit: Daniel Schwarz / InVision)

Colours can have a huge impact on a UI design and it plays many roles. It’s not necessarily about how beautiful the colours are though, or even about the specific colour that’s being used. It’s more about the type of colour. This may not be true when it comes to branding – since colour is used for emotional impact there – but with UIs, colour can be used for visual hierarchy.

Choose your colours

Colours hold meaning, so it’s important not to have too many of them. Too many means more things that the user has to understand and remember, and for the UI designer, it means more colour combinations to worry about. Generally speaking, this would be the recommended format to use:

  • A call-to-action colour (also the main brand colour)
  • A neutral light colour (ideal for text-heavy content)
  • A neutral dark colour (better for UI elements, and also for dark mode)
  • For all of the above, a slightly lighter and slightly darker variation

The final point on the list means that it’s easy to achieve the following:

  • Dark mode will be easily possible
  • Our CTA colour will never conflict with other colours
  • In any scenario, we’ll can emphasise and de-emphasise as we wish

Create a colour palette

With your UI design tool of choice, create one fairly large artboard (tap A) for each colour (named Brand, Neutral / Light, and Neutral / Dark). Then, in each artboard, create additional smaller rectangles displaying the darker and lighter variations of the colour and also the other colours themselves.

Generally, consider slightly lighter and darker as 10% extra white and 10% extra black respectively. When you’re done, display a copy of the typographic styles on each artboard. The colour of these text layers should be neutral light, except when on the neutral light artboard, where they should be neutral dark.

Check contrast levels

Ensure the contrast in your UI design meets accessibility standards (Image credit: Daniel Schwarz / InVision)

Next, we’ll need to check our colours for optimal colour contrast. There are a variety of colour tools that can do this, for example, the Stark Plugin(opens in new tab) for Sketch and Adobe XD or Contrast(opens in new tab) for macOS. However, an online solution such as Contrast Checker(opens in new tab) or Colour Contrast Checker(opens in new tab) will do just fine.

Check the colour contrast for each combination and tweak the colours accordingly. If you’re not sure which colours to use, try using Colorsafe’s recommendations(opens in new tab). Also remember that while colour in UI design can be mighty effective, it’s not always reliable for people who have visual impairments.

UI Design rule #3: CTAs need hierarchy

You’ll need different button variations for different situations (Image credit: Daniel Schwarz)

The majority of decisions made about our design lead the user towards an action – but this is only effective if the target looks clickable and communicates the visual hierarchy. Buttons and links, much like typography, should have a few variations. After all, not all actions are of equal importance, and colour is an unreliable method of communication, so it cannot be our main method of influencing visual hierarchy.

Size

Keep the text size the same when creating bigger buttons (Image credit: Daniel Schwarz / InVision)

As for size, it’s generally recommended that button text be declared as 18px (same as the body text), but have three variations in size. This allows us to make certain buttons appear more important without relying on colour, and also to nest buttons (for example, a button inside a minimal-looking form field):

  • Normal: 44px in height (rounded corners: 5px)
  • Large: 54px in height (rounded corners: 10px)
  • Extra large: 64px in height (rounded corners: 15px)

Shadows

Shadows should be used to increase depth, suggesting interactivity. A single shadow style for all variants of buttons and form fields is fine – no need for anything fancy.

Interactivity

Each button type needs a variation that indicates its hover state. This clarifies to the user that what they’ve attempted to do is totally fine and ensures they carry on without delay. This is actually one of the more complex aspects of creating a design system, because the colour is often the favoured style to change when creating a state. Luckily, these state changes can be relatively subtle, so it’s fine to change the colour into its slightly lighter or darker variation – that’s what they’re for. This applies to links as well.

Not doing this will lead to using a colour that either already has significant meaning, resulting in users becoming confused, or else deciding to come up with another colour. Deciding to use a secondary colour is fine, but it should be saved for marketing visuals rather than UI elements. Less is more (and easier). Remember to repeat this step for every artboard. Don’t include branded CTA buttons on the brand artboard – we’ll talk later about what happens when certain combinations don’t work.

UI design rule #4: design elements must be consistent 

Speed things up by turning elements into components (Image credit: Daniel Schwarz / InVision)

Converting design elements into components means we can reuse them, helping us speed up our workflow and maintain consistency across our design. Components are a huge time saver and all UI design tools offer this feature (for example, in Sketch, they’re called Symbols). In InVision Studio, you can create components by selecting all of the layers that should make up the component and using the K shortcut.

Using components

We can reuse a component by dragging it onto the canvas (this workflow varies depending on your UI tool). This method of creating design systems (and eventually creating the design itself) works especially well with modular/card-based layouts, although ‘common areas’ – such as headers, footers, and navigations – will also be excellent candidates for components. Like we’ve done with our typographic styles, colours, and buttons, we must remember to organise components carefully.

Establish rules

It’s important not to use branded CTA buttons on top of the brand colour, since branded CTA buttons will obviously need to stand out amongst everything else. This would be an ideal opportunity to go ahead and create a component – specifically, a heading + text + button combination with a neutral light ‘card’ backdrop to enable the use of the branded button. 

Similarly, the neutral light form field (form fields are usually white because of the mental model historically synonymous with paper forms) doesn’t look amazing on the neutral light background, so they can only be used on the neutral dark background – either directly, or within a neutral dark component. This is how we make our design flexible, whilst also obeying our rules and maintaining consistency.

Stress test

Advertisement

The quickest and most effective way of ensuring robustness in our design system is to stress test it. And that means being cruel. Let’s say that we have a navigation with [x] amount of nav items, because that was the requirement; in order to really ensure flexibility, try changing these requirements by adding more nav items. To really throw a spanner in the works, try also adding a nav item with a much higher visual hierarchy than the others. 

Do our size, typography, and colour rules allow for something like this, or, in order to offer optimal usability, do we need another rule? Bear in mind that there’s a major difference between adding rules and bending the rules. More edge cases mean less consistency, so it’s usually better to rethink the component.

Rule #5: Design systems must be organised

Designing systems means deciding and documenting when and where various styles are allowed to be used. Bold text for example can be used for extra emphasis, but… headings are already bold, so what happens in this case? Can we highlight specific words? When do we need to left-align, and when to center-align? 

As you create your rules, you need to document them for your own use or for anybody else who might work with the design system. Designers of all types know about design principles, but these rules are unique to our app or website, or our brand as a whole. Choosing title case over sentence case, for instance, can be the difference between formality and informality. But most importantly, these rules help us make meaningful but quick decisions in total clarity.

A design system is not a one-time task – it’s normal to be updating it constantly. Stay flexible and expect to make a number of changes as new elements, colours, and use-cases emerge. But for it to be useful, your design system needs to be well organised. This will often mean making files easily available in the right cloud storage option for you and your team.

Colours

Create swatches of all your UI design scheme’s colours (Image credit: Daniel Schwarz / InVision)

Step one is to save all of the colours to the ‘Document Colors’ swatch if you haven’t done so already – this will make them easier to access when we need to apply them in our design. This workflow is the same (or very similar) in all UI design tools. Open the colour chooser widget from the inspector, choose ‘Document Colors’ from the drop-down, and then click the + icon to add the colour to the swatch. 

Shared libraries

Next, we need to convert our document – complete with typographic styles, colours, buttons, common areas, and basic components – into a shared library. Essentially, this means that every element needs to be a component, even if it consists of only one layer. After doing this, it’s simply a case of clicking the +‌ button in the left-hand side Libraries sidebar and importing this very document into a new document. The very document we’re working on right now is the library itself.

Design systems at scale

As a design system expands, managing it inevitably becomes harder. There are various adjustments that we might want to make to our design system to make it more efficient. For instance, we might want to use text layers to annotate our design system as a means of explaining the rules and use-cases of various elements. For the typographic styles, we could even edit the text to be more descriptive (e.g. <h1> / 1.3 / 44px).

Design handoff

Finally, design handoff tools display the various styles used by every element in the design so that developers can build the app or website. These tools include an overview of styles, and also a copy of the ‘document colors’ swatch. Developers can copy these styles as code, which is excellent if you’ve created written documentation for your design system and like to include code snippet representations of the components. Getting this write can help enable a smooth handoff for your UI design.

If you are interested in original article by Daniel Schwarz you can find it here