Refactoring UI Book Review.

Refactoring UI by Adam Wathan & Steve Schoger

I honestly have lost count of how long it took me to finish this book but it was sincerely worth every hour put into it. Alright, let’s dive right into the content of this Gold Mine I found a few months back.

OVERVIEW

‘Refactoring UI’ embodies the step by step solution to whatever design problem you have encountered as a designer or a developer, whether as a beginner or a professional. It properly refines your understanding of Design or what you think design should portray.

This book has 9 Chapters which STARTS FROM SCRATCH to help you know the first few but important steps you should consider when designing, Helps you understand the laws of HIERARCHY, reminds you that a good design should have a proper LAYOUT and SPACING, shows you that in TEXT DESIGN your font choice plays a major role in your design's overall personality, teaches the correct way to ratio COLOURS and how to use Shadows to convey elevation and CREATE DEPTH, proper use of IMAGES, adding FINISHING TOUCHES and finally helping you to LEVEL UP where you're taught to hone your skills and add more tools to your tool belt.

Let’s start with the first chapter

1. STARTING FROM SCRATCH

The first chapter summarises how you should organise your work and some of the most common mistakes when starting out on a project

*Start with a feature, not a layout

An app is basically a collection of features of functionalities. Your worries shouldn't necessarily be whether your app should have a sidebar or a top nav, these are referred to as the 'shell’, start with the main features then the extras should come later.

*Details come in later In the earliest stages of designing a new feature, It is important you don't get hung up making low-level decisions about things like typefaces, shadows, icons. Of course, it is important, but details should come in later. Paint a picture of your functionality before you jump into detailing.

*Hold the colour This buttresses the ‘details come later point’. It is much better to design in greyscale first. It helps you focus on your spacing, contrast and size although it's a lot more challenging but you end up with a stronger hierarchy that's easier to enhance with colour later.

*Don't over-invest The point of designing in low fidelity is to be able to move quickly from there and get into the main thing as soon as possible. So don't over invest in your sketches and wireframes, yes they are useful but quickly get to your proper designs.

*Don't design too much It's very easy to want to figure out how every feature in a product works and how they should interact but you'd be setting yourself up for frustration if you do that. E.g How should this screen look like if the user has 20,000 contacts

*Work in cycles Instead of designing everything upfront work in short cycles. Start by designing a simple version of the next feature you want to build. I feel like you can just gradually complete your designs (different screens) In short cycles you don't necessarily need to have completed one screen before you move on to the next. You have to keep iterating on the designs until there are no more problems to solve or screen to fix.

*Be a pessimist Don't imply functionalities in your designs that you're not ready to build. Keep in mind when designing a new feature expect it to be hard to build. Designing the smallest useful version you can ship reduces the risk considerably. If part of a feature is a ‘nice to have’ design it later. Design the simple version first and you always have something to fall back on.

*Choose a personality Every design portrays or has some sort of personality. For example; A Banking App will most likely want to communicate security and professionalism while a friendly new startup might have a design that feels fun and playful. A few factors that help with giving a design a particular personality includes ;

1. Choice of font
2. Colour
3. Border radius
4. Language.

2. VISUAL HIERARCHY

Have you ever been on a website where you find it difficult to find the main information being passed, or maybe you can’t even find where the CTA’s are or you can’t tell if a link is clickable or not? Then their interface might be missing proper visual hierarchy cues.

The Book explains that not all elements of an interface are created to draw equal attention from the user. To make it easier for a user to navigate an app, UI designers emphasise or de-emphasise elements using one or more of the following which includes; Size, Weight, Colour & Contrast and finally your Placement.

1. Size: You point out the relevance of an element by increasing or decreasing its size. But, as the authors repeatedly mention, don't overdo it. Not even for section titles. Just because it makes sense semantically for something to be a H1, it doesn't mean you have to fall into the trap of making titles bigger than they need to be, you should keep in mind the content, not the title, should be the focus of the page, but your titles should be big enough to catch a user’s attention first.

1. Weight: Whether fonts or icons, weight is a good alternative to size for making things stand out. If increasing the size creates too big of a difference between major and minor content, keep it the same size and make it bold. With this, you create almost the same effect as resizing but without disorganizing the design.

1. Colour & contrast: Well sometimes weight doesn't do the trick, you can adjust visual balance through colour and contrast. Colour is a great way to create a hierarchy for text because you don't need to sacrifice readability by making the font smaller. Reducing contrast makes heavy elements feel lighter, even though the weight hasn't changed.

1. Placement: Sometimes we find out that minor content competes for attention with major content on our design. The easiest solution to this is to simply place the secondary content directly on the page background. Sometimes, all you need in order to emphasise an element is to de-emphasise the surrounding ones.

   Ultimately, what visual hierarchy does is to:

   a. Create balance for your designs, make it less noisy and chaotic.

   b. Helps emphasise the major messages, actions or elements in your design and de-emphasize the minor.

   c. Improve readability

3.LAYOUT & SPACING

One of the easiest ways to clean up a design is to simply give every element enough space to breathe. There are simple ways to help you have better layout and spacing and this includes;

1. Remove white space and not add them; The best way to have proper spacing in your design is to start by giving your design way too much space and then gradually remove it until you’re happy with your results, rather than doing it in reverse then adding margin or padding.

1. Establish a spacing and sizing system; However, keep in mind that size is relative rather than absolute. At the small end of the scale (like the size of an icon, or the padding inside a button), a couple of pixels can make a big difference. Whereas, at the large end of the scale (like the width of a card) a couple of pixels make virtually no difference. So, when defining a sizing and spacing system, the authors suggest starting with a base value and then building a scale using factors and multiples of that value.

2. Don't force it. Not every decision you make needs to be based on a system. Sometimes, trying to force everything to follow the same rules leads to monotonous or downright bad design. For example, making something full-width just because you have the space for it might make your design harder to follow. Or making something full width (e.g. login card) just because another element on the page is full-width (e.g. navbar).

1. Avoid ambiguous spacing between elements. When groups of elements are not separated by a border or through the background colour, things can get confusing. Users might even end up accidentally filling in data in the wrong field. In these cases, the UI should make it very clear which element belongs to which group by properly spacing labels and inputs.

4. DESIGNING TEXT

Your font choice plays a major role in your design's overall personality, before you even consider using Comic Sans for the website of a Banking App make sure you have gone through Chapter Four of this book.

1. Define a type system. Choosing font sizes without a system is bad for two reasons It leads to inconsistencies in your design It slows down your workflow

You might want to choose a scale; For interface design, a more practical approach is to simply pick values by hand. You don’t have to worry about subpixel rounding errors this way and you have total control over which sizes exist.

Here’s an example of a scale that works well for most projects;

12px (smallest)

14px

16px

18px

20px

24px

30px

36px

48px

60px

72px (largest)

1. Use good fonts. With thousands of different typefaces out there to choose from, separating the good from the bad can be an intimidating task. When choosing fonts try to play it safe; use fonts your users are already familiar with e.g Neutral san serif- like Helvetica. The authors recommend not using typefaces with less than five weights because typefaces that come in a lot of different weights tend to be crafted with more care and attention to details than types with fewer weights. Trust the wisdom of the crowd most times if a font is popular it’s probably a good font.

1. Figure out the proper alignment and align with readability in mind. Aligning text can be a little tricky. Centre alignment can look great for headlines or short independent blocks of texts, but if a text extends more than two or three lines, it’ll most likely look better left-aligned. When it comes to numbers and tables, right-aligning numbers makes them easier to compare at a glance, because the decimal will always be in the same place. Line length, line height and font size play a big role in how easy it is to read texts.

5. COLOUR

This chapter teaches you tips and tricks on how to manipulate colours to get what you want. It’s really easy to use one of those colour palette generators you find online, but please don’t do that. What you actually need is a colour palette that consists of;

Maximum two primary colours with 5-10 shades for each (used for primary actions, active navigation elements etc.) 8-10 shades of grey [used for text, backgrounds, panels, forms etc.] Trust me you’d be needing more greys than you think. Around three, four accent colours with several shades for each [used for various semantic states like new items, destructive actions, warnings, positive trends] you might need even more accent colours if you’re creating something where you need to use colour to distinguish or categorise similar elements.

1. Defining your shades upfront ; You should define a fixed set of shades upfront that you can choose from as you work by choosing a base colour first ( this is the colour that your lighter and darker shades are based on) In the case of primary and accent colours, pick as the base colour something that would work well as a button background.

1. Choose accessibility over aesthetics but this doesn't mean your design has to be ugly. To meet the recommended accessibility contrast ratio, the background colour needs to be quite dark, especially when working with white text. This can create a hierarchy problem if that element isn`t the focus of the page, as dark-coloured backgrounds tend to grab the user's attention. And it doesn't look great either. You can solve this problem by flipping the contrast and having dark coloured text on a light coloured background.

1. Don't only rely on colours as the only means of communication. Always use colour to support something that your design is already saying, never use it as the main carrier of information. Make sure to add + and - signs for trends, instead of relying on colour alone. Colours can be accompanied by texts this makes it much easier for colour-blind people to read your design and get the right information being passed.

6. CREATING DEPTH

1. . Small shadows are used for buttons, while large shadows work great for modals, where you want the user`s full focus. Use shadows to convey depth and interactivity cues. As in real life, the smaller and less blurry the shadow is, the closer to the background that element appears to be. Larger and blurrier shadows make elements feel more elevated and closer to the user. Besides creating a sense of depth, shadows can also be used to indicate an interactive element. For example, adding a shadow to a row item when a user clicks it makes that row pop out and it also makes it clear to the user that they can drag that element. Similarly, you can make a button feel ‘pressed’ switching to a smaller shadow or even removing the shadow altogether.

2.. Overlap elements to create layers. One of the easiest ways to create depth is to overlap different elements to make it feel like a design has multiple layers. The most common example is a card that crosses between two different backgrounds. You can also overlap images by giving them an invisible border, so there's a small gap between them.

7. WORKING WITH IMAGES

Bad photos will ruin a design, even if everything else about it looks great. So the best way to integrate pictures into your designs without causing chaos is to ;

1. Add a semi-transparent overlay Lower the image contrast Colourize the image with a single colour Add text-shadow to elevate the text from the background

1. Even if they don`t lose in quality, scaling icons meant for a different size can end up looking unprofessional. Icons that were drawn at 16–24px are never going to look very good when you double or triple their size because they lack detail and they will always feel disproportionately “chunky”. Alternatively, downsizing a detailed icon to favicon size will turn it into a mess as the browser tries to render that level of detail in a tiny square. Everything has an intended size.

3 Beware of user-uploaded content. That is content that you cant control in terms of styling. However, there are some things you can do to make sure uploaded content doesn't completely ruin the design. You can control the shape and size of uploaded content through fixed containers or prevent background bleed (when someone uploads something with a similar colour to your UI's background) by using a subtle inner box-shadow.

8. FINISHING TOUCHES

You don’t always have to add new elements to a design to add flare. Small adjustments and tweaks will make a big difference.

1. Add a more visual twist to what's already there. Replacing bullets with Icons(checkmark or even arrows), changing the colour and font-weight of links or something as fancy as a thick colourful underline that partially overlays the text, using custom checkboxes and radio buttons in place of boring ones.

1. Use fewer borders. Shadows, colour and spacing are the best ways to create a distinction between elements without making the interface look disorganised or chaotic. Stick with box shadows, different background colours or add extra spacing rather than separating elements with borders

1. We understand that less is more but your background doesn't have to be boring either. Don't be afraid to decorate backgrounds. Add some excitement by changing the background colour, using a slight gradient or even a subtle repeatable pattern or a background shape. It doesn't have to be across the entire background.

9. LEVELLING UP

It’s almost impossible to cram all the good ideas that there is in one book. There are other ways you can learn and continue to hone your skills out of this book and this includes When you see other designs, look for decisions you wouldn’t have made, ask yourself; ‘’Did the designer do anything here that I never would have thought to do’’? This is a great way to discover new ideas that you can apply to your design. Rebuild your favourite interfaces. The fastest way to improve your designs and find out the details that make up a great design is to recreate your design from scratch without peeking at the developer’s tools.

‘’By continually studying the work that inspires you with a careful eye, you’ll be picking up design tricks for years to come”

This is my review of ‘’Refactoring UI” by Adam Wathan and Steve Schoger. I hope you enjoyed it.