UI Design Principles Learn to create beautiful and usable interfaces from scratch (Michael Filipiuk, (ed.)) (Z-Library)

📄 File Format: PDF

💾 File Size: 31.1 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

UI Design Principles Learn to create beautiful and usable interfaces from scratch eBook by Michael Filipiuk

📄 Page 2

Table of Contents Introduction 00 The Basics 12 Grid and layout 32 Typography 52 Color 77 Gradients 106 Shadows 113 Buttons 120 Forms 135 Icons 163 Photos 178 Illustrations 195 Cards 209 White space 219 Personality 234 Language 244 Navigation 252

📄 Page 3

Microinteractions 280 What’s next? 291 My UI Design process 296 Attracting clients and followers with your designs 305 Ending 316 Free bonuses, such as lists of my favorite fonts or tools I use to create UI Designs can be found in separate PDF files. This eBook is going to get updates in the future. I am planning to write chapters explaining popups, design systems, dark mode and a whole lot more. If you have an idea for a chapter, please email me! You can reach out to me at mikef1808@gmail.com. You bought the eBook, so you will receive all future updates for free :)

📄 Page 4

Introduction 00

📄 Page 5

0 1 Thank you and why I wrote this eBook Hey there! My name is Michael, and I am the creator of this eBook. I wanted to personally thank you for grabbing it. With so many resources to learn UI Design out there, you decided to get this one, so thank you very much! So... with so many resources about UI Design, why did I decide to write this eBook? A lot of the courses I watched about UI Design are just videos of how the creator designs a landing page step by step. He just shows you how to design, but does not explain anything! This eBook is different. You will not only know how to design amazing interfaces, but also understand your decision making. Regardless if you’re a beginner or a bit more advanced in the UI Design field, this eBook will help you gain new skills, knowledge and confidence. I really hope that you will enjoy it! This is me! Great to see you!

📄 Page 6

UI vs UX Before we begin, I want to make it clear that this book focuses on the UI Design - User Interface Design, and its core principles. User Interface Design (or UI Design) refers to the visual elements of a digital product, while User Experience Design (UX Design) refers to the overall experience the user has while interacting with the product - so for example his emotions - a feeling of satisfaction, or frustration. These two terms are two separate things, but if you really dig into the definition you will realise you can't talk about UX without talking about UI and other way around. A badly designed interface (e.g. bad contrast, a font that is too small, illegible text) will impact UX badly. Same as bad research done on the UX stage will impact UI Design decisions. Even though in this eBook I focus on UI Design, things you will learn will also impact the User Experience. UXUI 02

📄 Page 7

In this eBook I won't focus on UX and the whole methodology behind it, but only on the visual side - UI Design. Both are important, but personally I am passionate about UI Design and I feel like I can share the most knowledge in this particular field. Some people might disagree with what I said on the previous page about UI being a part of UX. I believe that at its core, it’s true - if you really break down the definitions of those terms you’ll realise that UX is impacted by UI. However, nowadays there’s a lot of confusion in terms of job titles. UX Designers generally don’t have to design interfaces and UI Designers don’t have to do research. In terms of job titles, UI and UX are not a part of each other. 03

📄 Page 8

UI vs Branding The discussion around UI Design vs Brand Design has been a cause of major confusion for me when I was early in my design career. Even though I knew that brand designers usually create a logo, color palettes, typography and language choices (and much more), working with them was not always the most pleasant experience for me. As a UI/UX Designer, I was used to selecting typefaces, creating color palettes and building scalable design systems myself. However, the choices regarding the style were rarely an aftermath of real research - just my and stakeholder's personal preferences. Of course, making a banking app we'd probably go with blue to indicate trust (more on that in the chapter about colors), but it's not what you call "research" And that's where a Brand Designer comes in. To describe his role in short: he does research on the target audience of the product, and based on his findings he decides on the visual appearance of the brand - a logo, colors, typefaces used, as well as language and even stationery mockups. Some of them also create some UI mockups, but these are rather for presentational purposes, not real usage on the market. The most proper order would be going from Brand Design to UI 04

📄 Page 9

Design. This makes a job easier for the UI Designer and improves the possibility of positive feedback from the target audience. The product will also be more recognizable. It's common sense, really. Hours spent on research really pay off. However, if the client's budget is limited, he often skips the Brand Design stage, and it's fine. The UI Designer can easily select colors and typography on his own. There's just less confidence that they're the best fit. After reading this eBook you won’t need to rely on a Brand Designer. You will know how to select typefaces, colors and much more for the project you’re working on. 05

📄 Page 10

UI Design Mindset If you type "UI Design" on Google or Pinterest, you will find many really beautiful interfaces. They look stunning and might make you jealous (I know they made me when I was new!), but before we begin you should adopt a certain mindset about UI Design. It's common to think that UI Design refers to making things "look good", which is already extremely subjective, but in reality it has a deeper purpose. Users that will use the UI you design don't care about how pretty it is. They care about getting their tasks done with minimal effort. Aim for your design to be "invisible" - a non-intrusive one, that does not catch all attention, but rather redirects it to the main purpose of the app. This just looks sooooo beautiful! Work by Gavrisov Dmitri (Dribbble) and Tran Mau Tri Tram (Dribbble). 06

📄 Page 11

I can bet some serious money that at some point in time, we've all used an app that was designed fantastically. Some apps that we use daily were designed by huge, skilled teams that did everything in their power to make the experience fantastic. As a designer, you can notice these little decisions that they made to make the experience better, but the regular user won't. Hundreds or thousands of human hours were spent designing something, just so that the user won't care. I like to use the salt analogy when talking about UI/UX Design. When something doesn't taste right in your meal, you add some salt to it, or when you eat with friends/family you say "please pass the salt". However, when it tastes well, you don't say "it doesn't need salt. perfect!". You just carry on eating. Same with design - most users will notice bad design, but the majority won't notice a great one. TL;DR - No matter how pretty your design is, the user won't care if it doesn't help him solve his problem or complete his tasks. 07

📄 Page 12

Some of my Dribbble shots. I focused on making them pretty, not usable. Pretty work catches attention. I wouldn’t make something like that for a real product. 08 The screens that you see above are shots that I made for the sake of Instagram and Dribbble. Posting pretty work is a good way to build an audience and reach clients, but never forget that it’s not the most important aspect of a well-designed product.

📄 Page 13

“Good design is obvious. Great design is transparent.” Joe Sparano 09

📄 Page 14

10 So... does that mean I can just design ugly stuff? Not really. Even though usability should be your number one priority, people also tend to trust products which look good. Even the most usable application out there with an outdated design can make users frustrated and switch to the competition. Both of these screens do the exact same thing. Which one do you like more? We can deliver food everywhere We can deliver food everywhere Trends in UI Design come and go. That’s a fact. Anyway, the example above has nothing to do with trends. The text on the left is hard to read, and the button looks completely off. The design on the right is not only better from the UI perspective, but also from the UX side. In this eBook you will learn how to make sure that your design not only looks great, but is also usable.

📄 Page 15

11 A quick disclaimer The version that you are reading right now is the very first version of this eBook, and obviously not the last one. This eBook is going to get many updates in the future - I am going to be updating it with new chapters, as well as correcting mistakes that I did in this one. I believe that all information I share in this eBook is valid and verified. There are not many opinions in it - mostly proven and frequently used principles and practices. That being said, if you believe that something in this eBook is wrong or false, please reach out to me so that I can correct it quickly. At the end of the eBook you will find the email address at which you can reach me. If you bought this version, you will receive all future updates for free. Thank you for your support :)

📄 Page 16

The Basics In this chapter you will learn what is UI Design, why it matters, what it consists of and what makes it good. This knowledge is crucial for every beginner. If you feel like you already know the basics, feel free to skip this chapter. However, you might also want to refresh your knowledge. Regardless - let’s begin! 12 Key content - What is UI Design and what makes it good? - What are screens in UI Design? - What are objects in UI Design? - Properties of objects - Perception and visual hierarchy

📄 Page 17

What is UI Design? User Interface Design (or UI Design) refers to the visual elements of a digital product. It focuses mostly on looks and style, and not the overall experience (like UX Design). UI Design has a big impact on the overall User Experience - you can think of it as a “surface” of a digital product. What makes UI Design good? Before you start designing user interfaces it’s important to know what actually makes them good. Don’t treat this part as a definitive checklist - more as a beginner’s guide to creating good user interfaces. The topic of UI Design is very broad and it can’t be broken down to “a few simple steps”. Two crucial elements of a great User Interface A great user interface has to be usable and delightful. The word “delightful” is quite broad and even subjective, so in other words, apart from being usable, user interfaces should also be likeable and enjoyable to use. While most skilled designers will always preach usability as the most important aspect of a well designed product (which I totally agree with), making the interface delightful and enjoyable to use is also very important. On the next pages I’ll dive deeper into the topics of usability, as well as making UIs enjoyable. 13

📄 Page 18

Usability Interaction Design Foundation Usability is a measure of how well a specific user in a specific context can use a product/design to achieve a defined goal effectively, efficiently and satisfactorily. I couldn’t have defined it better myself, so here’s a definition from Interaction Design Foundation. To give an example: just think about it - why do you use any digital products? Do you use them because they have fantastic design, or because they help you complete certain tasks? I bet it’s the second one. It’s a common opinion that usability relates to the UX field, and “delightfulness” - to the UI field. I believe that it is, quite frankly, bullshit. I’ve said it already and I’ll say it again - a poorly designed user interface will impact user experience poorly. Period. A lot of these misconceptions have probably derived from all the mess caused by different job positions, such as “UI Designer”, “UX Designer”, “Product Designer” etc. Just accept it - even if you’re “just” a UI Designer, you still impact the user experience, or UX. One thing that I agree with is that usability of a product depends highly on people who conduct research - they find out what the user needs and expects from the product, and based on this knowledge they can make better design decisions. 14

📄 Page 19

Delightfulness While usability is (and most likely will be) the priority for users, making the interface fun and engaging is also very important. We obviously all have very different definitions of fun, and that’s why proper research is important. Users judge your design really quickly. Even the smallest usability issue can put them off and annoy them. It’s the same for looks - if they’ll hate they way your UI Design looks, they just won’t use the application, or will have trouble coming back to it. It’s commonly said that “the best interface is no interface”. Quite depressing, right? Well, that’s true. The simpler a UI Design is the better. A good example of this is Domino’s Zero Click app. A popular pizza restaurant chain Domino’s has once released an app to order pizza with literally zero clicks needed. 15

📄 Page 20

Yup. Literally. The only thing you had to do before using this app was to create an account on Domino’s website and choose your favorite pizza, payment method and delivery address. After that, whenever you’d open the app pizza was automatically ordered. Design is a great communication channel. It’s a great place to use brand colors, typefaces, brand’s tone of voice and other assets. A good experience that the user has inside a specific product is definitely memorable, so after having this good experience he’ll associate it with the colors, typefaces and logo that he saw while using the app. This works both ways though - if the user has bad user experience, he’ll dislike the brand. In this book I focus on UI Design - so just the “looks” of a digital product. I’ll show you how to properly design various different elements and put them in a layout using grids. But first, let’s start with the basics - screens and objects. Now, what can we learn from it? Just ask yourself: did this app have many stunning gradient buttons with drop shadows? No! Did it have animated 3D illustrations? Nope. Was it usable? Hell yeah! While having large selection is nice, being able to complete a desired goal by just opening the app is the pinnacle of great user experience, at least in my opinion. Good design should include brand assets 16