A few days ago, I published a post on Typography, a post on Color Theory, and a post on designing mobile apps from scratch. They received a good amount of attention, and people shared with me how helpful the posts were to them in understanding design better.
So, I decided to write another post that’s a quick introduction to two very broad topics: User Interface Design and User Experience Design. The knowledge from previous articles and this one can help you become a better designer.
First off, let’s answer the question: What exactly are UI design and UX design, and what is the difference between the two?
Simply put, UI is how things look, UX is how things work. UX is a process, while UI is a deliverable. Let’s elaborate further…
User Interface (UI) design is a large field. In theory, UI is a combination of content (documents, texts, images, videos, etc), form (buttons, labels, text fields, check boxes, drop-down lists, graphic design, etc), and behavior (what happens if I click/drag/type).
It takes a good eye, a lot of practice, and a lot of trial and error to get better at it. As a UI designer, your goal is to create a user interface that is engaging, beautiful, and also creates an emotional response from the user to make your products more lovable and beautiful.
When I started out, something I learned from my mentor is to take a tour guide journey to your product. Imagine your app/website as a journey. Every user that downloads your app right from spotting it in the App Store/web, through using it, achieving goals or completing tasks within the app is taken on a journey. And that journey should be a delightful one.
And you, as the app designer, are the craftsman that designs this journey. So you don’t want to throw all the information on the screen hoping that the user will pick it up. That’s the very opposite of a good UI.
Instead, you’re the tour guide that takes the user on a wonderful journey through your app. And in order to this, you have to be able to shift and move their attention from place to place guiding them.
Design isn’t all about learning to use design software —although that’s certainly important. Software is like a designer’s sword. You need the sword to fight the battle, but that’s not all you need to learn to use. You need to learn the strategies, processes, tricks and tips of the fight/game to be able to win it. In UI design, you need to brainstorm, experiment, test, and understand your users and their journey throughout using your product.
The benefits of having a well-designed product is that you’ll have a higher user retention rate.
This is human nature. Our attention is programmed in such a way where we see the biggest, the boldest, and the brightest first. And then it moves to smaller, less bold, and less bright things.
As a designer, you can use this information to curate the experience of your user.
2. The Importance of Alignment.
Alignment is a fundamental aspect of UI Design. And an important design principle is: minimize the number of alignment lines. It improves readibility and makes the design more pleasing to the eye.
In the images above, the image on the left has 1 alignment line. While the image on the right part has 4 alignment lines.
Here’s another example of how fewer alignment lines can make a great difference in improving the design.
There are two fundamental types of alignment: Edge alignment and Center alignment.
Depending on the usecase, you’ll choose one or the other. Usually, edge alignment is considered better. It’s quite easy to align elements in design software like Photoshop. Most design software will usually provide a ruler/guide to edge align all the elements.
3. Become an attention architect.
Here’s two ways to interpret this: 1) You need to grab the user’s attention with your design. 2) You need to pay attention to every little thing in your designs.
To be a great designer, you need to do both. The latter lets you achieve the former.
UI Design is about tailoring the experience for your users by guiding their attention towards different important things.
Ways to use text to grab user’s attention:
The most important thing when designing is testing! Make sure you try out different everything: colors, fonts, tones, angles, alignment, layout, etc. Experiment with different designs so that you can architect a user journey using various ways of commanding attention.
User Experience (UX) design is about creating pain-free and enjoyable experiences.
Here are 7 questions to ask yourself to know if the UX of your product is good:
I hope the article helped you understand basic concepts in UI and UX design. I’d love to hear any feedback or any thoughts on the post. You can send me an email at firstname.lastname@example.org!
You can also download my app here. All of these learnings were only possible because I wanted to build a beautiful and useful app for cryptocurrency price tracking, alerts, and portfolio management. The journey of building that app taught me important lessons and improved my skills, and I’ve been sharing about that in my posts a lot. :)
Ending the post with one of my favourite quotes about design…
“Design is not just what it looks like and feels like. Design is how it works”-Steve Jobs