My Summary: The First 3 Chapters of Refactoring UI by Adam Wathan & Steve Schoger
Every designer new and experienced get really excited when their frames or design ideas are really coming together. For the newbies, there is an adrenaline rush to throw in the colours, shades, images, etc, paying no mind to the necessary dictates and rules of user centred designs.
“Refactoring UI” is a 200 pages long book with catchy titles for every chapter, it comes highly recommended to new designers and a good reference point for experienced designers.
All design Figmates were assigned a task by the coaches of the Friends of Figma boot camp Uyo to read and review the first three chapters of Refactoring UI book.
The first three chapters cover
Chapter 1 — Starting from scratch
Chapter 2 — Hierarchy is everything
Chapter 3 — Layout and spacing
Reading through this book, feels like I am having a sit down chat with an experienced developer and listening to every bit of design advice accrued over the years and experiences working on several projects.
Starting from scratch
“Start with a feature, not a layout”
This clearly stands out as a rule every new designer should have in mind when approaching a new design challenge, why start with a feature first? According to the book, it is best to start designing with a piece of actual functionality which in a thought process includes answering questions like:
What are the key features that are necessary for this project?
How will the navigation work?
What is the necessary information that is needed for these features?
To avoid being frustrated before the actual design begins it is safe to avoid designing the “shell” of the app before considering the features of the app.
After the features have been duly decided on, it is time to sketch a plan of what the layouts will look like, it is a rough sketch hence the “details comes later”. In this early stage of design, it is best to avoid getting hung up on low-level decisions like shadows, typefaces and font styles, it does not mean they don’t matter to the design, but that will be later on, so there is no need to obsess over the littlest details at this point.
Reading through this book is really fun as the words are written in the easiest and most understandable way with awesome accompanying images that make my creative mind run wild.
As a new designer, I know I have tried some rustic designs during my practice times and I have always hated the outcome after, which got me thinking; why do I hate it after so much effort? byreading this book I have realized that I took the colour dive too early as advised in this piece it is best to “hold the colour” as it will help with the spacing, ensure good contrast and decide on the right font size thereby leaving you with a strong hierarchy. So it is advised to design completely in greyscale and then add the colour later.
Over investing time on sketches and low fidelity wireframes that will be disposed of later is one way to waste more time than necessary, designing too much by overthinking on a feature that is not ready to be built should be kicked to the curbs, why waste time designing a feature that won’t be built right away? This seems to be a problem for some people and sometimes makes them feel overwhelmed while working on a project, they feel there is too much to handle at a time, then it is advisable to work in cycles; where you design simple features and then take on other features little by little as you finish the previous ones.
Every excellent user centred design has a personality to it, and it is okay to give your design a touch of a certain feel depending on the end users you are designing for. A good font choice goes a long way to make your design have the desired feel to the end users same as the colours used as well as the radius of the borders used in the design, the language which can speak a formal, neutral or a playful feel.
It is easy to be overwhelmed by the choices to be made while designing, hence the need to limit your choices by having a set pattern of fonts and sizes to choose from when designing.
Hierarchy is everything
As all fingers on your hands are not equal, it is also okay to note that not all elements are equal when designing and this is known as visual hierarchy, which refers to how important elements are represented in the layout in relation to other elements. It is significant to ensure that all the elements are not competing with each other for attention.
As much as all elements are not equal, “size is also not everything” in design; relying excessively on the font size when designing or as a major hierarchical determinant is a major mistake, instead it is best to use the weights to depict hierarchy. One common mistake is using grey coloured texts in coloured backgrounds which creates a reduced contrast and while on this it is also better to emphasize the active button by de-emphasizing which can be done by adding a colour to the active button and using a grey colour for the inactive buttons on the layout, this makes the active button pop and gives it the attention required.
One other key things to note is that it is important to “separate visual hierarchy from document hierarchy, balance the weights and contrasts especially when working with icons by giving icons a softer colour which will make heavier elements feel lighter even though the weight hasn’t changed”.
This chapter also points that semantics are secondary, especially when multiple actions can be taken by a user on a page, but hierarchy is still a top player of every action in the pyramids of importance.
Layouts and spacing
Having a design that gives an easy and welcoming feel to a user is key, and one way of achieving this is to give every element room to breathe this can be done by giving each element too much space which is then rearranged until one is happy with the result. In order not to get confused or have a mix-up in spacing, it is best to establish a “spacing and sizing system” by limiting yourself to a constrained set of values and this will help you create a better design with less effort and spend less time doing and undoing sizes of elements.
While designing there is usually a temptation to put in as many elements to make the screen feel heavy, and this will make your design look like a piece from a depressed Picasso, you don’t have to fill the whole screen when designing, give each element the space it needs and do not force it to match something else.
Every great design is achieved by following some concise design rules to ensure that not only is the design pleasing to look at, but the designs are fully effective and user centred.
Reading through the book “Refactoring UI” has given me a better insight into what a good design should look like, as the examples presented in the book are presented in the before and after. Refactoring UI does not deeply explain the theory of colour and the design psychology, but it provides lots of rules and visual examples that even someone with zero knowledge in design (like me) can learn how to design their work and take it to the next level.
I will love to hear from you and how awesome you find the book kindly drop a comment below, to read more articles, follow my medium page and Twitter handle.
Read more about my journey as a Newbie in tech here
