webDesignBasics_visual.md

Web design basics - Visual

Typefaces

Font

• To keep the page's consistency, the number of typefaces should be 2, or at most 3
• For the page's legibility, Serif, Handwriting, and Display fonts in Google Fonts should be used carefully

Style

• Again, for the legibility, Italic style should be used carefully

Size

• 16px is the modern font size
• There are so many units e.g., px, em, rem, etc. You should know the difference, pros and cons.

Colour

• Be careful the contrast between the letter and background colour, especially header text
• Think what to be emphasized

Theme design

Use of colours

• The number of base colours on a website should be around 4. See colour schema for example
• Use consistent colour for links, to tell where is clickable
• User assumes each colour has some context. e.g., Blue text is a link, red background is error etc. Pay attention what colour to use

Effects

• Using mouse over (hover) effects is not recommended - As mobile users don't use a mouse
• Animation - Use slightly, using many animation effects is simply annoying. User will miss what we really want to tell

Text on an image

• This should be text. Shouldn't be part of the image. Because you have to use photoshop to edit the text, not search engine friendly, not responsive

Component usage

Carousel (Slider)

• it shows many things at one part, but it doesn't at the same time
• It doesn't stay, means that it will miss the opportunity to tell what it is to users
• If it doesn't have animation, it forces user to click to see other images
• Basically, this component is hiding other contents you that want to show. Unrecommended to use

Modal

• It tells users where they are
• It let users expect they can go back to the base page
• It gives users the way go back
• It should not let user go somewhere else by clicking a link on the modal
• Using this for the purchase flow is terrible, because it allows user to go back - do you want customers to cancel the purchase?

Dropdown

• It shows options in a limited area
• It will not be accessible enough sometimes, use carefully

Table

• Think what the value is, in order to align the item
• If the item is number, it can be good right-aligned, if it is text, left-aligned

Form

• Form validation should tell what column has what problem
• Radio button is used only when one item can be selected
• Check box is used only when multiple items can be selected