I wrote a book on UI/UX, here are my 7 tips for a great web & mobile design

Hey Indie Hackers! 👋

My name is Elisa Paduraru and I am Chief Designer at Creative Tim. I have been following the web design industry in the past years and I've seen its evolution, how trends come and go, and learned how to adapt the products to keep up with the market. So, last year, me and my colleagues from Creative Tim, decided to write a UI/UX Design Book that will share what we've learned in a well-explained way.

Fundamentals of Creating a Great UI/UX by Creative Tim is a book for web designers or web developers who want to develop an eye for design, not just for code. The book includes six parts (chapters) that walk the reader through the process of designing a website, from the basic elements like buttons, cards to the macro elements like sections and pages. After reading it, you will learn how to Design & Use all the UI/UX design components for your Web Pages & Mobile Apps.

I am excited that many people showed interest in it, and, from the second week of pre-sale, the book was sold out and 300+ people pre-ordered it. The first book batch was already delivered, and, in June, we are delivering the second one.

With the experience I have from writing the book, I will present below 6 tips that every UI/UX designer should follow to create awesome designs for their web or mobile projects.

1. Use nature-inspired colors to create beautiful gradients

Nature’s color palette is so various and includes tints and shades. For a clean, natural, and well-proportioned design, it is advisable to use natural colors, because the user sees them daily and his eyes are accustomed to these colors.

2. Place the shadow at the bottom of the element to create realistic designs

Try to avoid placing the shadow at the top of the element. The sun is not positioned down to create this type of shadow, so naturally, the user's eyes are not used to seeing this. Notice the difference when the light comes from below and when it comes from above:

Here's how to place the shadow correctly:

3. Always use border-radius to create buttons

The article “Why Rounded Corners Are Easier on the Eyes” mentions that some experts say that rectangles with rounded corners are easier on the eyes than rectangles with sharp edges; it takes less cognitive effort to visually process. The shape corners create focus outside the rectangle, while the rounded corners create focus inside the rectangle which, in this situation, generates more focus on label and action.

The most common shape of buttons is square and square with rounded corners. The rounded corners are created by setting the value for border-radius.

4. The button placement should follow the F-Pattern or Z-Pattern.

The most common Layout Scanning Patterns are F-Pattern and Z-Pattern.
The placement of the buttons comes as an indication of the user's behavior, not to confuse him. For example, if the button is in the area where the user’s eyes can’t catch them, other visual aspects such as color and size might not work efficiently.

5. Make sure that the user always receives guidance

The text fields must change their appearance according to the user's interactions. The user will understand the result of their input through feedback - a message that will notify the user about the result is an excellent way. For example, the notification can be an error showing that the form was completed incorrectly: “Please enter a valid email address.”; or a success icon, indicating that the form was completed correctly.

Don't just tell users that something is wrong; describe specifically what is wrong and how they can fix it:

6. Set a reasonable click/tap area

Because these UI elements are small, it is essential to set a click area for desktop and a tap area for mobile. The mouse cursor is accurate on desktop, making it easier to interact with these elements. However, on mobile, the measure by a typical fingertip size should be at least 48px, and the interaction area should be larger than that.

7. Follow the "Rule of Thirds" to place the images.

The “Rule of Thirds” is a rule for composing. The guideline proposes that an image should be imagined as divided into nine equal parts by two equally spaced horizontal lines and two equally-spaced vertical lines. Also, the important compositional elements should be placed along these lines or their intersections.
Aligning a subject with these points can create more tension, energy, and interest in the composition than simply centering the subject.

Final thoughts

Thanks for reading this article! I hope these tips will help you in your next projects. If you want to see more tips on UI/UX design-related topics let me know in the comments section. I will be more than happy to help you!

Also, if you are interested in learning more insights about designing web pages and mobile apps, we've prepared a special book offer for the indie hacker community. Use this voucher "book-indie-30" and get "Fundamentals of Creating a Great UI/UX" with a 30% OFF price discount - both the physical and digital version!