You only have 3s to make a good impression. Your website also has the same 3s to be judged by users or your company so Design is really important and powerful to improve your brand or your company.
4 Pillars of good web design
- Color theory
- User Interface Design
- Typography
- User Experience Design
Color Theory
Color theory is Art and science of creating right pallette for your website. When you pick colors, you have to be aware of the mood of your color pallette.
- Red : love, energy, intensity ex) racing car website
- Yellow : joy, attention ex) headLines, logo(not good for you have to look at for a long time)
- Green : freshness, growth, safety ex) grocery companies
- Blue : stability, trust, serenity ex) papal
- Purple : rotality, wealth, femininity ex) payday loan companies
What you have to think when you pick a color
- You must think what message am I trying to convey to users before choosing appropriate color.
- which different color to combine? You can refer to here -> https://colorhunt.co/
Typography
Fonts really do matte and it's important to consider not only their mood but also how to combine different fonts and it makes your designs look very professional and really stick
Serif family
It has feet because the serif typeface were inspired by the marble carvings of days or yore
- mood : serous, authentitative, older
ex) letterhead for legal company, megazine
San serif
There is right angle that makes the san serif family look so easy to read.
- mood : friendly, approachable, novel, contemporary
ex) body text
User Interface Design
Hierarchy
Apply the rule of hierarchy!
- Font for Hierarchy
Most important information gets conveyed over first and hierarchy makes sure to understand important information.
- Color for Hierarchy
Colors that really pop and stand out and have contrast with that background tend to be used for high hierarchy
- Size for Hierarchy
Bigger items often draw your eyes to it
Layout
create more interest by creating a block of text and then interspersed with pictures then create some different size and different shapes and different hierarchies to make your design look more interesting.
- Line Length for Layout
If it is too long, The paragraph would be too hard to read and tedious. If it is too short, The paragraph will be too choppy and awkward to read. Optimal size is from 40 to 60 characters for a line.
Alignment
How you position each of the elements on the screen relative to each other. Let's draw lines of alignment in google search.
As you can see, You can draw 2 lines that represent the alignment of this website. The more you reduce these lines, the more You can make people easy to read your website.
White space
Empty space that is around your texts and elements can make UI design better. so Space things out.
Audience
Think about your audience and also Think about what would appeal to them and what is important to convey to them.
User Experience
UX is meant to be invisible and unobtructive. User has to feel everything is easy and effortless.
Simplicity
- Keeping things simple is always better than making it more complex and more cluttered.
Consistency
- Keep your design consistent but also keep the functionality of your product consistent.
- All the pages of designs in a same website have to be consisted.
Reading patterns
- F-pattern
Eyes start at the top of the left corner and tracks the right and then it flips back again in browsing down the left gutter.
- Z-pattern
Eyes go from left to right and then zig zagging down all the way the webisite.
All platform design
- You have to thnk about mobile.
- Your website has to be responsive to the viewport.
Don't use your powers for evil!
- We call these dark patterns.
- It is Patterns which get a user to perform an action or behavior that is beneficial to the company or the designer.