Refactoring UI: an essential guide

Refactoring UI: The Review

“Every design has a reward, it rewards the nobility of its designer, and the purpose it serves” Jude Oriko

As the first assignment on the Friends of Figma Uyo Virtual Learn Design Bootcamp slated for three(3), I started reading this book in a bid to review the first three(3) chapters, while still in course 6 of 7 of the Google UX design professional certification, a 7 parts course for design, research and empathizing with your users

Today my goal is to share notes from the book “Refactoring UI” written by Adam Wathan and Steve Schoger.

The book is mainly geared towards people who have no design experience but want to create great products.

I believe that it’s a handy book for designers starting their journey in this exciting field so let’s get straight to it.

Chapter 1: Starting From Scratch

· Start with a feature, not a layout: Since an app is made of a collection of features, it’s best to begin planning by their functionality, that way we build solution-driven systems.

· Details come later: Deploy freehand sketch if possible to resist or escape the temptation of so much detailing as you begin. Keeping the color to black and white use can help hold the color addition. As we all know sketches and wireframes are meant to help us explore lots of ideas quickly. Focus on building the real thing as soon as possible.

· Don’t design too much: You don’t need to design every single feature in the app before you move on to implement, in fact, it’s better you don’t. Work in a short cycle, instead of designing everything upfront, start by designing a version of the next feature you want to build.

·

Chapter 2: Hierarchy is everything.

· Visual hierarchy matters: focus on how elements in the interface appear in relation to each other, highlight elements that are the most important and d-emphasize secondary information.

· Size is not everything: don’t rely too much on size to control hierarchy.

Combine labels and data, sometimes a piece of data is not clear without a label so add a clarifying text.

Chapter 3: Layout and spacing

Starting with too much white space, one of the easiest ways to achieve a clean design is by giving every element room to breathe and that’s where white space comes in handy.

You don’t have to fill the whole screen.

It’s nice to not fill the whole screen but don’t force yourself to cram everything in a small space if it’s not necessary.

#fofuyo #fofafrica #figmaafrica #mybootcampstory

To be cont’d