Web Design Principles and Guidelines
Quiz yourself by thinking what should be in
each of the black spaces below before clicking
on it to display the answer.
Help!
|
|
||||
|---|---|---|---|---|---|
| web design | The concept of planning, creating, and maintaining websites.
🗑
|
||||
| shape | Element of design responsible for the creation of boundaries in design.
🗑
|
||||
| texture | Element of design that provides a feeling of a surface beneath.
🗑
|
||||
| direction | Element of design responsible for lending movement or motion.
🗑
|
||||
| intuitive | Having a simple to understand structure, free from cognitive load.
🗑
|
||||
| visual hierarchy | Order or sequence in which our eye moves and perceives the things it sees.
🗑
|
||||
| size hierarchy | Where the most important content or image is largest on a webpage and others are gradually smaller.
🗑
|
||||
| accessibility | Text must be legible, colors not harsh, background not overpowering, and easy for all users.
🗑
|
||||
| typeface accessibility | Selecting a font type and size readable to all and not too fancy.
🗑
|
||||
| color accessibility | Color scheme and contrast that have harmony and balance.
🗑
|
||||
| Hick's law | Law that states: With every additional choice increases the time required to make a decision (reduce options).
🗑
|
||||
| Fitt's law | Law that states: Time needed to move to a target is dependent upon the size of the target as well as the distance to the target (make buttons easy to reach).
🗑
|
||||
| communication | Providing written information, images, infographics, and audio/video or other media.
🗑
|
||||
| organize | Provide a clear and consistent layout or structure that is divided and consistent.
🗑
|
||||
| economize | Achieving more by utilizing less; deliver the most information by with less visual elements--free of clutter with high degree of clarity.
🗑
|
||||
| grid-based layout | Dividing content into columns, boxes, and different sections.
🗑
|
||||
| F-pattern design | Design a webpage that complements that natural reading behavior of visitors (up and over)
🗑
|
||||
| conventional designs | "Tried and true" designs that add a hint of trust, reliability, and brand credibility.
🗑
|
||||
| TETO | Test early and test often
🗑
|
||||
|
🗑
|
Review the information in the table. When you are ready to quiz yourself you can hide individual columns or the entire table. Then you can click on the empty cells to reveal the answer. Try to recall what will be displayed before clicking the empty cell.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
To hide a column, click on the column name.
To hide the entire table, click on the "Hide All" button.
You may also shuffle the rows of the table by clicking on the "Shuffle" button.
Or sort by any of the columns using the down arrow next to any column heading.
If you know all the data on any row, you can temporarily remove it by tapping the trash can to the right of the row.
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
Created by:
skindawg
Popular Computers sets