UI design and UX design are two of the most confused and conflated terms in web development, not only in Sri Lanka but around the world. The confusion is often facilitated by the fact that they tend to be grouped together in a single term, UI/UX Design. We also found that it’s often hard to find solid descriptions of the two that don’t descend too far into website development and design jargon. It also doesn’t help that for anyone without a background in web development, on a surface level they appear to be describing the same thing. But fear not! By the end of this article, you will have a good understanding of what UI design is and how you can create a stunning UI yourself.
If you’ve gone to school for UI design, dream of perfectly kerned typefaces, always think in golden ratios, and strongly believes color theory will one day save the world, this article might not be for you. Consider this article a non-artsy guide for creating gorgeous UI written specifically for non-artsy people- we are looking straight at you developers and UX designers.
This article is definitely not rooted in deep design history theory, but rather purely based on our observations over the years. It’s an assemblage of what works based on our time with UI design. We have shortlisted 7 principles that we think will help you understand the importance of aesthetics and how to apply this aesthetics to your next web development project.
Before we dive head first into 7 principles that will change your UI game, let’s first understand what UI design is. The UI in UI design stands for “user interface.” It is concerned with the aesthetics and the graphical layout of an application. In other words, it’s all about paying attention to the shape of the buttons users click on, the color of the text they read, the images, sliders, layout, transitions, animations and all the rest of the items the user interacts with. Any sort of visual element, interaction, or animation must all be designed by UI designers. They are tasked with ensuring the application’s interface is attractive, visually-stimulating and themed appropriately to match the purpose and/or personality of the company. And they also need to make sure every single visual element feels united, both aesthetically, and in purpose.
On the contrary, UX focuses on the entire spectrum of the user experience. One analogy is to picture UX design as a vehicle with UI design as the one in the driver’s seat.
White space is as underrated as silence between musical notes. But if it’s done properly, it could save your layout from looking un-designed. If you just open your HTML code without any styling, you know that it is not easy on the eyes; everything is smashed together at the top of the page with no font variations, no visual cues to guide you through the page and no room for your eyes to rest. If you want your UI to look like its designed, you need to have a lot of breathing room, almost double, sometimes triple, the space you think you need.
We are often working backwards these days to de-clutter the layout, when in reality we all start with nothing but white space. Be meticulous with how you place the different visual elements on the layout; including typography, icons, images, etc. Think of them as the painted bits on canvas. In UI, the white space on your layout is the canvas holding all the elements together.
White space can often cause problems between designers and clients though. Aesthetically white space looks good, but many clients consider white space – wasted space. But stand up for white space. Good, generous whitespace can make some of the messiest interfaces look inviting and clean.
Note: Put space between your lines, put more space between your elements, and put even more space between your groups of elements.
Color can speak, as powerful as language, when used appropriately. However before even being able to see red, blue and green colors, humans were able to see black and white and distinguish dark and light. Our ability to detect the contrast in our surroundings has been evolving for thousands if not millions of years. Thus, before you introduce colors to your design, you should always start solving design problems with black and white first. It will, by default, force you to clarify your thinking and design decisions. It allows for you to start by solving the harder part of the puzzle like usability, size ratios, spacing and simplicity without clutching on to the power of color to save your day.
We recommend you introduce color at the very end of your design process, and even then, only do it with purpose. Color theory is a whole other complex and complicated topic, we have saved for another time, another article.
Note: be cautious when introducing color to ensure you don’t clutter the layout.
If you’re a non-artsy person, shadows are perhaps the most vital thing for you to learn from this article today. Most contemporary aesthetics, especially dominant industry trend “flat design” exercises two dimensional ascetics, but that doesn’t mean you can skip this principle. We have over the years invested a large amount of effort into making 2D elements have depth and perception, properties native to the 3D world, even in our 2D pixel worlds. We assure you, mastering shadow and the source of this virtual light, the sky, will help you create realistic, familiar and ultimately more user-centric layouts.
Note: if the source of light is from above, always remember that even on smaller elements like buttons should reflect this principle; the tops are lights and the bottoms are darker. Many users shy away from using shadows because they’re overused- but when wielded properly, shadows serve as powerful visual cues that are unmistakable to all users.
Hierarchy is critical for styling your copy. No matter what design you’re creating, chances are you’ll be working with some text. When it comes to typefaces, most of us understand and utilize the usual elements used to create contras, such as: color, size, italicization, letter spacing, capitalization, font weight and margins. Sometimes however, even these tried and true methods fail us, and its usually because you haven’t found the right combination of competing properties.
Creating contrast with type isn’t as hard as you think. Essentially you should use big, bold text to help it stand out against small, less contrast text. With the exception of page titles, which can be all prominent, everything else has to be a combination of “prominent” and “ordinary” text. This will create hierarchy within your text and prevent it from being copy-heavy and overwhelming for your user.
Styling text on the other hard is rather difficult task because there isn’t one way to play this game. It’s about finding balance between your “prominent text” and your “ordinary text”. You can play with big copy in lowercase contrasted against smaller, bold more spaced out text, or your most prominent letter could be written in lowercase against everything else that is in uppercase. To get better at styling, you will have to keep experimenting to see what makes the most sense and what creates the most cohesive contrast.
Note: not everything on the page needs to be screaming for attention.
As a ballpark number, there are over 300,000 fonts in the world, and not all of them shine the way you want it to. A font’s primary job is to inform and facilitate legibility, however we also command some heavier psychological requirements from a font these days like: personality, tonality, expression, emphasis and engagement to name a few.
Different fonts can definitely be used to accentuates different personalities, but don’t shy away clean and simple. Don’t get carried away with font trends, because it might actually be the answer to your UI needs. When choosing any font however, it’s always best to take a look at the whole family. Look at how uppercase, sentence-case, and the full range of weights look against one another. Sometimes you can find enough variation within one family to create all the contrast you want within your text.
Picking the perfect font is never easy. And when your choice could make the difference between a delightful, easy-to-use interface and the new app everybody loves to hate, it only becomes more challenging. Fonts can also be very expensive to purchase, but there is also a plethora of free fonts for your eyes to feast on. Explore sites like Google Fonts, Font Squirrel and even Behance to see what’s out there.
It everywhere, from inspirational quotes on Instagram to beautifully manicured website layouts. Layering text on images is definitely something good UI designer do well, and bad UI designers just can’t get right. The placement and arrangement of your text in relation to your image can make or break a design, so pay close attention to balancing the both. If the text is too small, the background too busy or distracting, or anything else is compromising readability, your design won’t be as effective or visually appealing.
When you’re layering text with images it’s always important to create a focal point. Once you’ve chosen your image wisely, you can employ methods such as: darkening the image in the background, having text inside a box, blurring the background image or by having a black fade at the bottom of the image to guide the use to your focal point: the text. It’s important that you know that these are different solutions to a single problem. For the text to jump out, we’ve noticed white text on images works the best. There is however no single solution answer, feel free to just experiment and see what works best for your layout.
The good news is, most of the basics you’re trying to do has been done before to some extent. Which means you’re not having to reinvent the wheel every time you want to design a button or a chart or a form.
It’s important to note that there is so much that goes into making even smaller UI elements like a button look good that we can’t cover in just one article. However, you can always see how others have achieved it, analyze it, and then see how it can apply to your layout. Even we, with multi years of experience in the industry, are constantly scanning websites such as Behance, Dribble, and Pttrns to see what other UI designers in Sri Lanka and around the world are doing, how they have solved specific design problems and how we can be inspired by them.
Note: we are in no way encouraging you to steal another designer’s work, but rather encouraging you to mimic successful designers till you become THAT successful designer.
We hope that this article has helped you awaken your artistic side and build a more creative UI life beyond wireframes and HTML codes. With these seven principles, we hope you can now create mesmerizing UI design, one pixel at a time. But as with any passion, it’s about continuously learning; learning from your mistakes, remixing and reimagining your own work and schooling yourself through the work of others.
Whether you’re a developer or a UX designer, I hope this article has helped you understand the importance of aesthetics, for your app as well as your users. The world of UI is nothing but stagnant thus we will continue to find new ways to create and build interfaces that engage users and build meaningful experiences. This list of principles are definitely expanding, but in the meantime, use these 7 principles to analyze the layout you want to engage with and design the app you want to spend your time on. Always remember that the goal of a good UI designer is to create beautiful experiences for our users. Happy designing!