Web Design
Basic Design Elements and Techniques
Design is not just what it looks like and feels like.
Design is how it works. Steve Jobs
Elements of good web design.
- Easy Navigation: The navigation should be consistent and clear.
- Responsiveness: The site should work well in all browsers and devices and that includes selecting the right image size for the different devices.
- Consistency: There should be a sense of continuity across all pages. That include the use of the same fonts, the color scheme, and the overall tone of the page.
- Content Clarity: Make sure that the user will find the information fast.
- Performance: Make sure your site loads fast and that you are not using unnecessary elements.
- Legibility: Make sure the content is readable. (color contrast, font size and style) Keep the rule of max amount or characters per line between 45 and 90.
- Readability: Keep tone consistent with your audience and make your point quickly.
- Comprehension: Create content that is easy to read and understand.
COLOR
On average, product assessment takes only 90 seconds and between 60% and 90% of this judgment is made on the color alone!
- Red: bold, active, passionate, lovable, exciting, and energetic. (Coca-Cola)
- Orange: sociable, happy, affordable, and friendly.
- Yellow: Confidence, logical, forward-thinking, optimistic, and playful
- Blue: security, trustworthiness, calmness, honesty, care, and strength
- Purple: Nostalgic, creative, royal and imaginative
- Green: fresh, growth, earth, natural, healthy and organic.
- Black: luxury, sophistication, authority, formal, and seductiveness.
- Brown: solid, much like the earth, resilience, dependability, security, and safety. (UPS)
- Violet: Luxury, spirituality, healing.
- Gray: Intellect, maturity, neutral.
- White: Cleanliness, nimplicity, clarity.
Color Selection
Color is one of the most powerful design elements on a website.
On average, product assessment takes only 90 seconds and between 60% and 90% of this judgment is made on the color alone!
The Color Palette
- A color palette is a combination of colors used in a design.
- A color palette can be just one color in many shades, called (monochromatic)
- You can use upt to 8 colors that complement each other.
- Pick a core color and work around it.
- You can also use an image to get a color palette.
Typography
Over 95% of information on the web is text.
- Low Contrast Text: hard to read.
- Too Wide Paragraphs: they should be between 40 to 70 characters.
- Too little Space between lines: line-height should be at least 1.5 times bigger than the font size.
- Walls of text: Give enough space, use multiple paragraphs and inline elements to make the text easier to scan.
- Small font size: Une minimum 16px.
- Overly Decorative fonts: Use them sparingly.
- Using Core or System Fonts: Try not to use them.
- Using Too many fonts: Try to limit the use of fonts to 2.
Font Selection.
Font selection is very important in your website. It helps set the tone of your site.
Font Pairings
- Use no more than 3 font families in your project. 2 is better.
- You can use one family if you combine available weights and widths.
- Use contrast.
- Guide to font pairing basics.
- Google Font Pairing suggestions.
- Font Pairing best and worst practices.
White Space, Margins and Paddings.
That white space between and around the elements in your page.
- White space helps maintain focus by driving your eye to a specific element.
- It improves visual organization.
- It improves readability.
https://medium.com/wayfair-design/more-padding-please-b95e19422acc
Your content should be readable
When designing your content, keep in mind that ic can be viewed in screens of any size.
Yopu want your site to be easy to read.
- 45 to 80 characters (per line) is the ideal line length for text on websites.
- Font size should be at least 16px.
- Line spacing should be around 150% of the size of the font.
- Dark text in a light background is easier to read.
- This site is hard to read.
- If you use light text on a dark background, make sure the size is big enough.
- Website Readability Guidelines.
