The Easy Way to Design Top Tier Websites

- In this video, Speaker A teaches the key design principles and practical tips to build top tier websites. The rules are as little design as possible, use the law of similarity and proximity to simplify the design, and use a design system. - The system is there to help you pick a value quickly so you can play with different values and see what works best. A better way is to set the values as variables and assign them as global variables. - It is important to emphasize the most important elements on the page to help users navigate and find important actions. To emphasize important elements, use size, weight, color, and contrast.

In this video you will learn the key design principles and practical tips to build top tier websites. Consider this a guide to creativity because creativity is a process, not a moment. Being creative isn't about being the first person to think of an idea, it's all about connecting ideas. You don't have to create new designs from a blank slate. Top designers take what is already present and combine those elements in a unique way. But to be able to do that, you need to know the rules of the game. Rule number one, good design is as little design as possible. It means focus on essential features and make them better and useful for the users. It also means less colors, words and clutter on the screen. Here's a common mistake when designing a website. You start with the header and then go down from there. Or you are thinking about the overall structure. How many sections do I need? How wide they should be? How should I design the buttons? That's a lot of hows. Each of these questions will slow you down and drain your creativity. Instead, ask whats the key functionality or the main selling point of this website? For a lot of websites, it could be a heading, input field and a button. Start from there. At this point, design as little as possible. Chances are that's all you needed anyway. Don't complicate websites by adding too many elements that frustrate users and looks ugly as well. Our brain has evolved to simplify things and looks for key visual information only. So why not choose the easy way and keep things simple? It's a win win situation. Rule number use the law of similarity and proximity to simplify the design. You can use shape, size, color and spacing to group elements. Gestalt theory emphasizes that the whole of something is greater than its parts, focusing on how our minds perceive patterns and wholes rather than just individual elements. Our brain first processes the information as a whole and as we spend more time looking at something, we start to notice the small details as well. So your first goal is to make the design simple enough to be understood as a whole. In simple words, the design should be scannable within seconds. This ties nicely with the first rule as well. The law of similarity not only makes the design better and consistent, it's easier to implement as well. The law of proximity, on the other hand, gives you a better understanding of layout and spacing. Rule number three, elements need more spacing than you think. When you are focused on designing a specific element, the space might seem too much to you, but the users scan the whole UI before focusing on individual elements. So start with a lot of spacing and look at the design as a whole. Then start to remove it until you are happy with the results. But doing this manually becomes boring and repetitive, so you need a system in place. Rule number four, use a design system, especially if you are designing a big and complex website or app because it's made up of essential elements and components. There are multiple ways to create a design system for a simple website. You just need to define key design elements and you are good to go. For UIS, you need more complex and detailed design system that covers a lot of scenarios. Once you understand the basic design principles behind these systems, you don't really need a CSS framework to style your websites. Let's start with spacing. You can use this list to get started or create your own system. Just have the values that are divisible by four. Now spacing totally depends on the context. It's a very bad idea to design with Lorem ipsum or vague data because a spacing that is perfect for this card can be a disaster for this one. The system is just there to help you pick a value quickly so you can play with different values instead of trying random values on the fly. In the previous example, we started with a lot of spacing, like 40 pixels, then bring elements closer that belong together. To do that, pick a value from this system. Let's try 20. It's still pretty big. Let's try twelve. Perfect. But generally we use REM units for font size and margins so the design can adapt to the user's system preference. To assign REM values, just divide the pixel value by 16. The new system will look something like this. A better way is to set these values as variables so you can play with different values and see what works best. Same thing for your fonts and colors. Hand pick few values and assign them as global variables. You can get started by picking any one font and type scale that fits your project. There is no real science in choosing colors, so don't fall for those tutorials or articles that teach you the psychology of colors. Just pick a dark and light color for your text and background, and two more to add some personality. Just make sure the colors are legible and don't overwhelm the users for the same reason, avoid text align center, especially for paragraphs and smaller text size. One more line height is inversely proportional to the font size. That means smaller text needs greater line height for better legibility. Greater line height also acts as margin top on text elements so you don't have to assign spacing between all text elements. It's already done for you. Now that you have your fonts and colors in place, design the key elements start with the links and buttons. You generally need two types of one for primary actions and one for secondary actions. Once we have a design system in place, we can start the actual design process. Web design is all about putting the right elements at the right place with the right sizing. That brings us to rule number five. Hierarchy is everything. We need to emphasize certain elements on the page to help users navigate and find important actions. To emphasize important elements, we can use size, weight and color, but it's very easy to overdo these things, so start small. You will be surprised to see how little changes can make a big impact on the overall design. Now, to emphasize an element, ask yourself what's the first thing the user will look for? I guess it's the title, so we need to emphasize it. Let's start with the color, but white on black has a pretty good contrast ratio, so let's reduce the contrast from the secondary information. Sometimes to emphasize something, you need to de emphasize other competing elements. In our case, it's not enough. So let's add more contrast by increasing the font weight. It's almost there, but you can go a step further and increase the font size as well. And when you are done with the design, zoom out to see if the title stands out from the secondary information. We do this because the users will scan and look for key information to focus on. If the design isn't scannable, you need to do some adjustments. It could be choosing different font size, a darker color, or simply a bit more spacing. Do whatever you can to emphasize the elements you know the users will look for. Sometimes it could be labels, and sometimes it could be values or maybe an icon. It all depends on the context. Not all h one tags will have the same size and margins. Same thing is true for other tags as well. Sometimes the h three or a paragraph tag could have a bigger font size than the h two tag. It all depends on the context. Just emphasize the most important elements and keep the rest of the design as it is. Good design is less design, and more design is almost always results in uglier design. But like everything in life, there are few exceptions to this rule as well. Introduce depth to add some character. Use colors and shadows to elevate important elements. Shadows can also be used to replace solid borders. The closer something feels to the user, the more it will attract their focus. Speaking of focus, use your accent colors to highlight important elements. One easy trick to add a bit of excitement is by replacing a solid color with a subtle gradient. You could also work on your lists and tables to make them more fun and engaging for the users and try using cards for bland elements. But the question is how do you get these ideas? In the beginning I said creativity is a process, not a moment. Now it's time to explain that process. Step one know the basics that we have covered already. Also read these books. They have some really good practical tips to build top tier websites. The second step is finding a source of inspiration. You can look at the top tier websites and study their style or check out some amazing work on Figma community. I personally use Mabin to take design inspirations for my projects so I asked them to sponsor this video and thankfully they agreed. Say you are designing a testimonial section for a finance app. Go to filters and search for testimonial section, then set the app category to finance. Now we have the testimonial section for some top tier apps in the world. Now look around and save the ones you like to your library. Whether you are designing for mobile or a full blown web app, Mabin has a huge library of tried and tested designs, so definitely include it in your design process. Once you have gathered enough inspirations, it's time to work over those designs in your mind. Trust is crucial for finance apps, so the designers must have spent a lot of time and research on the testimonial section. Let's try to look at these as users and make a note of key things you like about these designs. For me they were simple and unique. I really like the ones with a human face and simple language. I hate generic testimonial sections that have a bunch of reviews with no emotions. So I have few ideas. Now we need two to three good reviews, ideally with great images, and we need big and bold text to emphasize them. But dont go designing yet. Once you have some initial ideas, try to step away from the problem and do something else. This is a very important step in the creative process. This is not just limited to design. If you are stuck with a problem, watch few tutorials or read some articles than think of these potential solutions in your mind, but don't act on it. Just take a break and do something else. I promise when you revisit the problem, new ideas will come naturally to you. If this doesn't work, it means you are under a lot of stress lately or not getting proper sleep. So work on that. First. Let's say you got some new ideas and finished your design. Step five is to not fall in love with it. We all have personal biases and see things in a certain way. So first, test your design by showing it to your friends or colleagues. If they like it, test it with your users and always be open to adjust the design based on feedback. Sometimes you have to design several terrible websites just to discover that you designed one good pricing section. In the third design, just finish something, anything. Stop planning and thinking to design and just design. It doesn't matter how good or how bad it is, you just need to prove to yourself that you have what it takes to produce something. Creativity is not just a process, it's also a state of mind.