Web Design & Best Practices

Web Design & Best Practices

memorize.aimemorize.ai (lvl 286)
Section 1

Preview this deck

Creating Visual Consistency 1

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

0

Favorites

0

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (12)

Section 1

(12 cards)

Creating Visual Consistency 1

Front

Implementing a Colour Scheme •Choose one colour to be dominant •Use other colours in the colour scheme as accent colours-headings, subheadings, borders, list markers, etc .•Use neutrals such as white, off-white, Gray, black, or brown •Verify Sufficient Contrast-When you choose colours for text and background, sufficient contrast is needed so that the text is easy to read. -Use online tools such as this one to verify contrast:

Back

Identify Site's Purpose

Front

•every site must begin with a purpose •a site without a purpose should not exist •when working with a client, the site's purpose should be a primary part of every discussion •the designer should be able to state that purpose clearly and easily in a single sentence

Back

Draw Wireframes

Front

A sketch or blueprint of a web page •Shows the structure of the basic page elements, including: -Header -Navigation -Content -Footer -Image locations

Back

Graphics Best Practices

Front

Use only necessary images •Reuse images •Use the alt attribute to supply descriptive alternate text •Be sure your message gets across even if images are not displayed •Goal: image file size should be as small as possible with acceptable display quality -Try to keep overall web page file size down •Use animation only if it makes the page more effective and provide a text description.

Back

Know Your Audience

Front

Be clear on who you are building for. •Understand their needs. •User testing, market research, focus groups. •Feedback from users -Watch what users do, not what they say. •As target audiences increase, difficulty of Web design increases.

Back

Design "Easy to Read" Text

Front

Choose a font that matches the sites purpose and audience •Use common fonts: Arial, Helvetica, Verdana, Times New Roman •Use appropriate text size: medium, 1em, 100% •Use strong contrast between text & background •Use columns instead of wide areas of horizontal text •Users don't "read" web pages the way we read books. Most users scan the page by jumping around it (Planning for Scanning

Back

Choose Appropriate Web Site Organisation

Front

•Hierarchical •Linear •Random (sometimes called Web Organisation)

Back

Identify Target Audience

Front

people who you think are most likely to want to visit this site •be as specific as possible•include all of the following: -age -gender (if relevant) -hobbies and interests •age of typical user -children -teenagers -young adults -adults -elderly

Back

ColourSchemes Based on The colourWheel

Front

•Monochromatic -shades, tints, or tones of the same colour •Analogous -a main colour and two colours adjacent to it on the colour wheel •Complementary -two colours that are opposite each other on the colour wheel •Split Complementary -a main colour, the colour opposite it on the colour wheel (the complement) and two colours adjacent to the complement •Triadic -three colours that are equidistant on the colour wheel •Tetradic -two complementary colour pairs

Back

Text Considerations

Front

Carefully choose text in hyperlinks -Avoid "click here" -Hyperlink key words or phrases, not entire sentences •Chekyurspellin(Check your spelling) •Avoid long blocks of text •Use bullet points •Use headings and subheadings •Use short paragraphs

Back

Creating Visual Consistency 2

Front

Create a consistent layout for all pages -Header(across the top) -Navigation(Menu to navigate through pages) -Footer(across the bottom) -Section(Main content) -Sidebar(column along the side) •A good interface is intuitive: -user should figure it out easily -it should be obvious and clear -it must be usable by beginners, newbies, and children

Back

Navigation Design

Front

Make your site easy to navigate -Provide clearly labelled navigation in the same location on each page -Most common -across top or down left side •Consider: -Second Navigation Bar in Footer -Breadcrumb Navigation -Dynamic Navigation -Site Map -Site Search Feature -Keep colours consistent

Back