What does simple design really mean?

Starting your design system from the right place.

Yolk UI kit

Simple. It’s a cliche. We all pretend to aim for a simple design. It sounds the same as the “Make the world a better place!” phrase in Silicon Valley. Like “minimalistic” and “clear,” it seems like these hype words have the power to increase the value of our design just by spelling them. But what does simple design mean? Unfortunately, I think it means different things for different people.

It’s the same with beautiful. How can we define what’s beautiful? What’s the magic formula?

“Do you know that humans are attracted to things and people they find aesthetically pleasing, to the point that studies have shown that both adults and children are more likely to trust someone they find attractive? The same theory seems to be true of apps and websites: people are more likely to give a beautiful application the benefit of the doubt.” — How Visual Design Makes for Great UX

Yes, we trust the beautiful.

Every morning I browse the latest Dribbble shots. I love it. I believe the UI trends are born there. Some time ago, when I was more actively uploading, I was trying to understand what’s the pattern. What’s that thing that makes the shots from the popular page look so much better than the rest. We all feel it — yes, these look great! But can we explain why?

Have you ever wondered what genuinely makes our design beautiful? What’s the magic dust that makes the difference? Do you think you’re able to describe it and list some rules about it? Does it mean that someone following those guides could build a beautiful design? I don’t think so.

Well, there are tons of books and thoughts on this matter. It’s a philosophical question people have been thinking about for centuries, from Plato, Socrates, Aristotle, and Pythagoras to the present days.

The Analysis of Beauty by William Hogarth

“Attempts to define beauty can be divided into two main groups: theories that regard beauty as a form of order and theories that regard beauty as a kind of pleasure.”

I was particularly impressed by this — beauty as a form of order. I think it best explains the need for a UI kit. It helps to get all our styles in order.

Kick-off

Define, Found, Shine. These are the three stages. We’ll go through them, and I’ll explain in full all the steps so, in the end, you’ll be able to do it yourself following the same process. And I’ll share how to download the UI kit and use it for free so that you could kickstart your new app design project.

You should plan it very carefully because there are some pitfalls:

I mentioned the three main phases it takes, and each one consists of some secondary, minor steps in a specific order. It sounds like a straightforward step-by-step linear process. I mean something like step 1 and then step 2 and then step 3, and then we’re done. We built it.

Strictly linear process

But it’s not exactly a linear process. Not at all. Or at least that’s how I see it. I believe it’s not all strict rules but more like guides. Don’t think of them as set-in-stone rules. These steps are fundamental, and they help by guiding us, but we should go back and rethink some decisions many times. It’s essential to clarify this before starting because you need to have a specific mindset while working. Every single guide you set has an impact on all other items. Remember that.

Why do we need this constant iteration? Because I simply can’t predict if the components would perfectly fit and feel consistent when placed on a single screen. I can’t tell the future. I’ve seen on some tutorials how people start with a color scheme and set of typography styles, and they build their pages based on it. I believe it’s wrong. The segments complement each other, and they feel entirely different when combined. The best way to decide is to see it in an actual working design combined with all the kit pieces. If you don’t have that imagination superpower, those early rules will constrain you. Don’t think of it as something like the e-commerce checkout pattern process where we pass strictly defined steps and complete it in the end.

So the process looks more like that:

No “Done” step here

We need to follow the steps but continuously going back to review if all our foundation components still work together.

Define

First, I set clear goals. It helps me to focus on my direction. They are critical because, in each step, I’ll mention any of those I’ll define now. So here are my goals for the simple UI pattern library.

Goals

• Multi-purpose
• Friendly & casual look
• Balanced — not too plain or corporate, not too fancy
• Distinct design and unique feel (something different than the standard Helvetica/SF form)

These goals are similar to the proto personas in the UX design process. It helps us keep our clear direction.

Methods

Keeping our clear goals in mind, we should determine our methods as a next step.

There is a widespread misunderstanding about the amount of information we could display on a single page. Some people strongly believe the more content on a single page, the more valuable it gets. Wrong.

“In 1956 there was a paper written that became one of the most highly cited papers in psychology. Titled, The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information, it was published in 1956 by the cognitive psychologist George A. Miller of Princeton University’s Department of Psychology in Psychological Review. The crux of the paper suggests that the number of perceptual “chunks” an average human can hold in working memory (a component of short-term memory) is 7 ± 2. This is frequently referred to as Miller’s Law.” — The Most Important Rule in UX Design that Everyone Breaks

Miller’s Law teaches us that humans have a finite amount of information they can process and that information overload will lead to distraction that negatively affects performance.

Simplicity Model by Jeff Davidson

Psychologist Mihaly Csikszentmihalyi coined the word flow to illustrate this concept. He describes the concept of flow as the state of concentration or ‘absorption’ with a specific task that humans ultimately find rewarding, pleasurable, and fulfilling. The flow indicates the optimal state where we perform at our best and truly live ‘in the moment.’

Aiming to enhance the performance by ‘empowering’ with more features, we kill the flow. Adding more tools doesn’t help but distracts. When it comes to completing tasks, less is more.

Limit the number of visual elements per screen. Organize chunks of information in less than five categories.

This is our first method. It’s a bit tricky to decide how much is enough, I know. I use a simple technique for this. It’s like blurring your sight.

(It’s a blurred image. It’s not your internet connection.) Are you able to guess what the information architecture is on the left screen? Do you think you could point the what is essential at a glance but without reading it?

We have seconds to convey the information on the screen before users leave. So I believe the best way to get closer to the same feeling of seeing something for seconds is by blurring the screens. Doing so feels like processing the information at first glance. So, now when you don’t have the time to read (and you don’t want to) every piece of content, do you feel what the information architecture is on both screens?

If we try to make everything look “important,” we reach the point where nothing is important.

What’s the prime information, and what’s the second, the third level? Do you think it’s clear? Do you think if you build a hierarchy with more than 7 (I would say more than 3) chunks, users would be stubborn enough, stay and get it? I don’t think so; that’s not simple for me.

⚠️ It is not fair to redesign someone else’s work without having the context and requirements. I know. But yet, focusing strictly on the visuals and the impact on UX, Yolk UI kit redesign on the right side. Following the goals and methods, I set earlier.

More white space (micro and macro)

I know, you have to fight for this one.

Most people tend to think, and they assume the users would carefully go through all the details we’ve placed on the screen. Well, guess what — they won’t. People are overwhelmed by information and all the ads they are exposed to in their daily life. They can’t process it all, so they don’t care, and if you try to sell them more of that, they would simply leave. Simple as that.

“Despite what some clients may tell you, empty space in a design isn’t space that’s waiting to be filled with content or (gasp!) banner ads. Whitespace is just as important as your company logo. Claude Debussy once said that music is the space between notes. Similarly, good typography is as much about the space between the letters as the letters themselves.” — On Web Typography

White space contributes to the overall design tone, and websites with larger amounts of macro white space may reflect minimalism and luxury. It is a great tool to balance design elements and better organize content to improve the visual communication experience.

Bolder more prominent visual elements

By doing so, we would ease the scannability even further so everything would be apparent at first sight.

Less, contrasting font styles

Our goal here is to minimize the cognitive load. Having two distinctive styles is straightforward: ok, this is the title, and this is the secondary text. We don’t even think about it; we instantly get it. But then, let’s compare it to the “Terms and Conditions” pages, for instance — by seeing more than six slightly different text styles, you already know you’re never going to read that stuff.

No flat

Honestly, I never liked the flat design. I think it sacrifices clarity to follow a visual trend. Strictly following the flat design plainly for the sake of being trendy and minimalist leaves out many important visual clues. Clues that tell people where they can click, where they can go in an interface.

To me, the old, 2013 look is much easier compared to the 2015 redesign

The input text fields are, in my opinion, the best example of the flat design flaw. Do you remember about five years ago when all across the web, we saw those stroke-fields? For a good reason, the Google team redesigned them.

Google Material Design Guidelines. The two new text field styles seem better to me.

You can’t attach a specific chunk of input information to a single stroke. How could a user distinguish which label or input data belongs to which field? (Even the word says it. It’s supposed to be a field but not a stroke.)

The only difference between the “Width” & “Height” input fields and the “Scale” select is the tiny chevron in the far right corner.

It’s even worse if you imagine this approach on a busy interface like on any Adobe product, for example.

Does it feel like an improvement?

I’d go for a more balanced approach instead of following the new radical skeuomorphic or neomorphic as they call it on Dribbble. Let’s play safe here and don’t try some kind of UI revolution but just tweak it a bit.

Keep it consistent

Consistency, I’ll try to go too far here. In my opinion, nothing pays off as much as digging deeper into consistency. I believe this is the spell for a visually appealing interface. We should pay attention to every small detail in each stage and step and make sure all items compound and fit each other to serve the same purpose. Think of those bits as atoms that build our user interface. To create something unique and authentic but yet following all common patterns, we should touch the minor attributes in the grid, icons, colors, textures, typography, shadows, and shapes, and when all combined, the change would be invisible but yet, the overall appearance will stand out.

Tools

Before starting, we should know what’s the scope of devices the interface should work on. Is it Android or iOS, or should it be fluid, or we’ll create a version for each device. I’d suggest you make your components flexible so you could easily resize them.

In this case, I’ll create a version for iPhone 12 Pro. I’ll use the Sketch app, but I think the principles are more or less the same in Figma. You could find tons of tutorials about organizing your symbols and producing your libraries for those tools, so I’ll direct more on the concept approach about how we connect each piece to build a design system and develop our specific visual look.

Found

It’s critical to note I’ll start with no colors. The colors are so powerful they manipulate not only the users but the designers themselves. Or at least me. They distract me, and I can’t see some of the issues on a very fundamental level. So I strongly advise you — start with as few colors as possible, like generic, neutral grey.

I can’t set the grid, the typography, and the base screen designs in a strict, step-by-step manner, because they’re all connected.

The grid

It is fundamental for consistency and typography, so I believe we should start with it.

I downloaded the iOS file from apple.com to use the human design guidelines and make sure the kit fits them. I have to admit I’m an Apple fanboy, no question, but in terms of defining guidelines, I think Android material design guides are much more detailed, and yes — they are better. Unfortunately, Apple doesn’t use a strict grid for their devices, so I created my own from scratch.

When the grid layouts became so popular in web design some years ago, the most popular frame was the 960px grid, and the content was divided into 12 columns. Later, when we moved to mobile, I tried with the same bold approach, but it doesn’t work because we have significantly less space, and those kinds of bold units reduce our options, so we need narrower columns. I’d still try to keep some prime bolder grid layout for the foundational templates, but we need a finer grid with smaller increments, like the space between an action button and its label at the navigation bar. In this case, a 15pt gap is too much, so I’d go for 5pt instead. I’ve mentioned those trade-offs down below.

The iPhone 12 pro screen’s width is 390pt, so I’d divide it to 26 columns of 15pt width.

iPhone 12 Pro. 26 columns. 15pt each.

The height is 844pt. According to the iOS human design, The home indicator occupies 34pt. I go to the bottom navigation, which is 83pt high in iOS guidelines, so I’ll try to keep it close.

Then I move to the top bar. We need more than one standard type of header. The status bar height is 44pt. The next step is to set the space for the buttons on both sides and the title in the middle.

Horizontal grid

You should try and play with it until it works. What we need in the end is a consistent baseline rhythm, typography, grid, icons, and the Apple guidelines. They should all fit.

After defining the height of all the top bars, we could set our vertical grid to 5pt.

Yes, I know. It’s vital to mention this is not the best approach because, in X code, you don’t set these dimensions in pixels, but this is how it works in Sketch and Figma. Despite the disclaimer, our only way to structure the design is by using pixels (points).

Typography

I keep the iOS human design in mind, but I try to make them all compatible with a vertical 5pt baseline rhythm grid.

I always start with the most applied body text, and I use it for setting the vertical rhythm. The most noteworthy difference from a standard UI is the bolder body text and large line-height (micro white space). This approach would help to enhance its distinctive final appearance.

To achieve the “friendly and casual” goal, I’ll avoid the flat square vision and apply nicely rounded corners. So, to be consistent with this form, I’d pick the FF Din Rounded Pro. It’s beautiful. I love it. And I’ll show you how it would match the shape of our icons.

Here we should recall what we set, as a rule, earlier — bolder and more easily distinguished segments.

Basic Layout

At this point, we should be cautious with all our goals and methods and build our foundation. These main layouts should guide us in creating those more detailed pages.

We should combine the following components:

• top bars
• bottom bars
• 1, 2, and 3 column cards

It’s something more like a wireframe look at this stage, yet I should be concerned about some details. I mean the space between the edge of the screen and the cards, the distance between the columns and the rounded corners, and the grid, of course. At this step, you very much set the micro and macro space pace of your design.

In the end, this is what they look like:

Some trade-offs here. In those specific areas, the layout doesn’t fit the 15pt grid. In general, we have to follow the rules, but please pay attention to each case and decide if you might need something slightly different. Following our goals and methods, I increased the space between the edge of the screen and the navigation bar content.

Icons

If done right, they would help a lot in shaping our definite style. A great approach to strengthening the consistency across the different pages is to make the icons fit the typography. To follow the friendly & simple definition from the very beginning, I would follow these rules for my custom icon set

• Line icons
• Similar stroke width (similar to the typography stroke)
• Rounded corners
• 5pt grid

A great article by Slava Shestopalov on optical effects in UI

Iconography is a vast topic, but I’m not an illustrator so that I won’t go deeper into this. However, we should mention some elementary and foremost notes about it. Those basic shapes help build an icon set, so each icon occupies the same area and feels consistent.

Now, following those guides, I could smoothly build my set:

Templates

After walking through all the phases, the next one is to define the basic templates that should be our guiding framework for all we’ll add later. I picked some standard pages I believe are significant for all kind of apps:

• Login
• Settings
• My Account
• Post List
• Images List
• Article
• Prime Navigation Menu

It’s essential to set these first because when you visualize the components next to each other, more or less, you’ll validate if they work, and you could move forward. Or if they don’t, it won’t take that much to go back and fix anything. Once you like it, you could move on and create more specific screens.

Thoughtfully adding some colors and fine details. I mean carefully and slow.

Basic components

Now it comes the time for our root components, and we carefully start to apply some fine details, like colors, shadows, and rounded corners. I’ll notice more about it later when we dig deeper into the fine details.

So these are all the necessary components:

• Input fields
• Toggle Buttons
• Sliders
• Buttons
• Card Containers

Same screens, the same information. Some fine details added.

Shine

We have the foundation, and it’s time to polish our UI kit. Now we do our magic and make it stand out by refining all the tiny details. At this point, we need to do some research and answer the following questions:

• What’s the category of my app? (Is it Finance, News, E-commerce, or Music app?)
• Which are my competitors?
• What are the colors they use?
• What are the trends at the moment?
• What are the images I need?
• Should I apply any textures?
• What kind of Illustrations do I need?
• What’s the overall tone of voice I’m aiming for?

Research

Working on it, I don’t have a goal to create a specific app or something. My goal was to build a generic design library, so I just selected the most popular app categories, and I tried to follow some of the latest Dribbble trends for the visual style.

Usually, when you move to a particular theme app creation, you’ll need to think of the standard components. Now you might need to repeat the steps we did before with the key segments and basic templates.

In my opinion, these are the most popular topics:

Based on these topics, I chose the basic screens I’ll need.

Screens

• Music Player
• Finance Assets List
• Gallery
• Profile Screen
• Chat
• Checkout Steps

Components

• PIN Login
• Music Player components
• Asset Chart Card
• Charts
• Checkout Item Cards
• Calendar

Colors

I’m a massive fan of the white containers on a light pale grey background, and I set it as a primary container screen background.

For the accent colors, I applied one of my favorite colors from Dribbble. As some of these examples, they’re already a bit old school, but I think they still work. The dark ultramarine/indigo combined with the vivid and bright aqua/cyan is just exceptional. I love it. I usually go through my favorite Dribbble designers and quickly pick the best shots for a simple mood board.

Scrovex / Cloud Security, 3D Arcade / iOS, #2017#Visual kei poster, 10Clouds ebook, Song Lyrics App Design, C Homepage Header Exploration, DOMO / SMM Agency web site

If you are working on an app for a specific brand, now is the time to apply their brand colors. Once you do it, you could easily compare any additional color you’re about to add and see if it matches the brand colors.

We need standard green, red, and orange kind of colors for our messages as well.

I already use the black color since the beginning, but here’s the right time I should note something about it. You should bear in mind, as a rule, 100% black is never a good idea. There are some interesting articles on that topic but let’s say that pure black text on a white background doesn’t help the readability. On Android Material Design Guidelines, they suggest using 87% opacity black as a primary body text color, but in my case, it’s 86% #262626. It’s slightly lighter, and it supplements our specific design system form.

Setting the correct number of opacity styles is not an easy job, so I suggest using the Material Design or Human Design approach as a model and carefully add or remove styles from your list. We could strengthen our consistency by keeping small borders, bullets, chevrons, and other graphic details the same color and opacity as our icons and typography styles.

You could already see how we dive deep into details. Those are the delicate touches that define the look and feel.

Textures, Shadows, Rounded Corners

There is no specific order about these. You should start playing and see if they look fine together. If you’re not happy with the look, go back and iterate until you do it. It helps to set some guides about the radius for the corners, the size and opacity of the shadows, and the specific texture. It’s useful when the project grows, and you’ll need more pages and components. They might be conceptually different, but your visual guides will support your consistent vision.

Light Skeuomorphism

I try to create something slightly modified to make it a bit more friendly and raise its authentic character. I’ll go back in years with a subtle skeuomorphism look, and I’ll follow the rounded corners approach we set earlier — something Apple did with their latest Mac os. I guess you remember how popular the “neumorphic” style was on Dribbble some months ago. Honestly, I think it’s way too much, so I mean something like Dave Ruiz when I talk about skeuomorphism. He’s one of the best examples of this style. He inspired me since I worked on our Kiddo WordPress theme (2011!), but shortly after that, Windows 10 and later iOS 7 started the “flat design trend” revolution.

I’ll add a subtle noise texture in the background because it helps the containers to stand out. A good example is the toggle buttons, the sliders, some delicate concave containers and small convex details, some of those CTA buttons from my Dribbble shots, and of course, the big, bold clock.

And again… white space! I already explained how important it is, and you could now see it as a prime trait in the design system style.

Illustrations

I’m not an artist, and it’s not that easy to come up with something genuinely original but what I do here is to follow what’s popular. These specific characters are already a bit overused across the web; I know, it’s a trade-off. This is something I could improve later. I need to add more pages and illustrations for the empty states screens, warning messages, placeholders, etc. This final touch helps a lot to strengthen the feeling of our design form.

For instance, what’s trendy at the moment are the 3D icons and illustrations. You could see it on Revolut as they recently applied it to their latest interface.

Images

I mentioned you should be careful with the colors, but this rule is multiplied for the images. This is why they come last. Be careful, and don’t underestimate the importance of the images in your design. It is something I learned the hard way. Usually, they take a good portion of your screen, so it’s crucial what kind of message you’ll convey with your images.

In my case, I don’t work on a specific app or a niche, and I’d use some very bright and colorful images to stick to the Dribbble style.

Yolk UI kit

Trade-offs ⚠️

⚠️ 8pt or 4pt grid is the most common grid you could find on other apps. It’s easier to use grid width columns and smaller increments inside the components like 2, 4, 8, 12, 16, 18, 24, 32, 36. In my case, it’s 5px, and it’s a constraint.

⚠️ Most of the icon sets are multiple of 4, like 12, 24, and 32 points. Therefore using a 5pt grid is a trade-off because it’s not that easy to apply any of their icons if I need them.

⚠️ Working on a size for iPhone 12 Pro and not testing how the components look on other iOS devices is not the best approach, but it works for explaining the process.

⚠️ Those skeuomorphism concave and convex buttons look impressive, but they are not so great for a multi-purpose design system as they are fixed size and fixed as colors for these specific screens. If you try to tweak the background slightly or add more content around, I’m not sure they would still look good.

⚠️ The 3D characters set I use is overused. Yet, I decided I better use something good than unique but rugged.

⚠️ I mentioned “design system” instead of “UI kit,” but it means something more extensive and detailed, and it requires more people participating in setting the guides.

Room for improvement 🔧

Of course, all the flaws I listed above might be on this list for improvements, but it’s a never-ending process, so I had to launch it at some point and see how it works the way it is.

🔧 I could add more details about the most appropriate type of images.

🔧 I miss a nice set of illustrations for onboarding screens, empty list screens, sign-up steps, success, warning, error states, etc. If I apply the color scheme and the same guides I used building the icons and typography, it would feel better.

🔧 I should try how it works with more typefaces.

🔧 The icons in the set are never enough. I need more of them.

Final Words

Having a well-organized style guide will not only save a lot of time but help you stay consistent and efficiently update any of your design components across multiple pages. Once you complete this flow, you could only slightly tweak some core segments, and you’ll produce an utterly independent vision without starting from scratch.

Alright, we’re done! This is what my process looks like, and as a final thought, I would say, please, follow the guides you’ve once set to keep your design harmonious but remember they’re not carved-in-stone laws.

It’s free to go and download the file for the UI kit I just created by clicking on the link below and use it as you wish. Go and explore in detail everything I explained.

👉🏻 Download Yolk

Credits:
How Visual Design Makes for Great UX
Beauty and Ugliness
The Most Important Rule in UX Design that Everyone Breaks
How Chunking Helps Content Processing
The power of white space
The Power Of Whitespace
Reading Online Text: A Comparison of Four White Space Layouts
Myth #28: White space is wasted space
Developing the Invisible
White space in UX design
The Evolution of Material Design’s Text Fields
Flat UI Elements Attract Less Attention and Cause Uncertainty
Optical Effects in User Interfaces

The UX Collective donates US$1 for each article published on our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.