Tips For Web Designers
In this tutorial, I will go over common beginner mistakes in web design. This post is made for beginners but it could also apply to intermediate designers. I've been designing websites and other graphics for about 15 years now. It takes a while to learn the small details that can make your design go from "meh" to "nice". Let's jump in!
White Space
When you visit a website your eyes will try to adjust to the layout. If your elements are too close together, it takes much longer for the eyes to adjust to take in the information. Spacing is the most important thing when it comes to good design in my opinion. Even though you maybe think it's better to see all the content at first glance, it's not always the case. It could be good to leave out white spacing if you have a website with A LOT of data. Then you need to find a more balanced way. When it comes to regular websites (corporate, personal, etc) white space should always be part of all your design decisions.
In the image above you can clearly see how a cramped design with unstructured white space looks weird. There is no structure. People generally like structured and pretty things. It's worth taking the time to really think over what you do with your white space.
Shadows
You should spend time on your shadows in CSS. It really makes a difference. Beginners often think the more effects, the better. This is far from the truth! Shadows should be subtle on bright backgrounds.
The first box use a black default color for the shadow without alpha. The second box uses a black shadow with opacity set to 15%. In the third box we use a slightly blue color (to match the background), opacity set to 15%, and then blend mode set to multiply. This way we can create a more natural shadow.
Colors
Colors are a great tool. You can use it to make the visitor focus on certain items. But don't use too many colors, keep it simple. More than two contrasting colors can make your website seem chaotic. See the image below to see what I mean.
Choosing the right colors along with having a well-structured layout can be enough to make your design look professional. Colors can represent passion, professionalism, royalty, calm, or energetic feelings to your brand identity. The meaning of the colors isn't always that important but if you want to add extra punch to the theme of the website or identity, it's good to know about this.
- Red - Passion, Love, Anger
- Orange - Energy, Happiness, Vitality
- Yellow - Happiness, Hope, Deceit
- Green - New Beginnings, Abundance, Nature
- Blue - Calm, Responsible, Sadness
- Purple - Creativity, Royalty, Wealth
- Black - Mystery, Elegance, Evil
