Designing Web Pages. Business Web Page Design

Transcription

1 Designing Web Pages Business Web Page Design

2 Types of Websites Portal Informational Business/Marketing Educational Entertainment Social Network Personal Wiki Blog

3 Structures of Web Sites SITE MAP: visually displays the layout of the site LINEAR: user navigates sequentially from page to page WEB: consist of a number of topics of equal importance HIERARCHICAL: good way to organize complex bodies of information DEEP: free flowing of ideas and pages; can be confusing

4 Designing Attractive Web Pages

5 Consistency CONSISTENCY means making everything match. It s about looking professional INCONSISTENCY forces people to spend extra time trying to figure out the site and to find answers Keep layout of pages consistent to avoid confusion Placement: Navigation bar in the same place; other objects in same place Links: links operate the same way Appearance: Same color scheme, headings, fonts, shapes, button styles Sidebar and navigation boxes use the same color to tie the navigation elements together Using CSS style sheets can help make a consistent design from page to page

6 Repetition, Rhythm and Harmony Bringing Everything Together REPETITION/ RHYTHM Repeating an element creates a sense of movement, or flow. In art, rhythm can be felt as well as seen. Three ways to use repetition to create rhythm Repetition of the same element such as a type of line, figure, or shape Repetition of two or more elements used in a type of pattern Progressive repetition of an element for example going form the very small to the very large or from dark to light HARMONY Similar fonts and colors Pictures which match the topic Graphics which are similar in tone Variety can be used to harmonize by spreading interest throughout the design keeping it lively and interesting

7 Unity/Harmony Ensuring that all items on page appear to belong together; a feeling of oneness Different pages in the site are similar in content and design Three ways of obtaining UNITY PROXIMITY: putting objects close to one another SIMILARITY: similar textures, colors, or shapes visually connects the part of a page CONTINUATION: when vision is directed by a line that travels around the composition.

8 Clarity Pare the message down to absolute essentials Keep language compatible with intended audience Keep sentences short Use bulleted lists form Use active voice rather than the passive voice Avoid negative statements Use informal language Use pronouns Use examples with which your audience is familiar

9 Simplicity Keep message simple Use only the amount of text and graphics as is absolutely necessary to get your point across An overabundance of fonts or colors can distract rather than assist learning

10 Balance BALANCE distributes visual weight throughout the space so design doesn t feel lopsided. An unbalanced screen creates a feeling of tension. Balance can be affected by the object s size and value (lightnessdarkness) SYMMETRICAL BALANCE: ( Formal): items on one side of the screen being similar in shape, size and color to the items on the other side of the screen. Easier to design Less interesting ASYMMETRICAL BALANCE: (Informal): composition is balanced using difference elements, objects or figures on each side. More difficult to do.

11 Precedence The amount of visual weight different parts of your design so the user is led around the screen in a series of steps by the designer. What does the user see first, second and so forth? For example usually the first thing a user sees at a site is the Logo/brand then to a primary statement, next to a punchy image, then to the main body text with navigation and sidebar taking a secondary position Tools for achieving precedence Position: where something is on a page influences order Color: bold and subtle colors catch the eye differently Contrast: being different stands out; same makes them secondary Size: big take precedence over little

12 Scale and Proportion Relationships between elements affect the Precedence the path a user takes through the page. SCALE: the actual size of the elements PROPORTION: the ratio of size between two elements The scale and Proportion draw your attention to the main focal point. WHITE SPACE: the areas that are open and contain no elements. Active white space: useful in creating divisions Passive white space: wasted space

13 Typography Text is the most common element so a lot of thought should go into it Font choices: fonts communicate a tone Font sizes: text must be readable, and proportionate Spacing: spacing between lines of text and between letters Line Length: the longer the line the harder they are to read Color: contrast with the background Paragraphing: use left justified text; justified text causes weird gaps between words

14 Usability Making the web site usable to users means making it do what your users expect it to do by adhering to Standards! Underline text is expected to be links so don t confuse them by underlining text that isn t a link Tasks that the user may need to do must be clear to the user Don t use text colors associated with links

15 Accessibility Making web pages accessible to users with disabilities WAI Web Accessibility Initiative: The part of the Word Wide Web Consortium (W3 C) responsible for publishing web page guidelines to promote accessibility by all Internet users. Visually Impaired: underline links; use ALT text that the reader will read to describe the images Auditory Impaired: use text descriptions of the audio portions of the web page so reader can read what is happening.

16 Color PRIMARY COLORS: black triangle Yellow, Red, Blue SECONDARY COLORS: grey triangle; mix a 2 primary colors = Secondary color: Orange, Purple, Green TERTIARY COLORS: mixing a Primary Color with a Secondary Color blue green red purple yellow orange

17 Color Schemes ANALOGOUS COLORS: colors adjacent to each other on the color wheel all colors between two points of either triangle (yellow to red, orange to violet, red to blue, etc) COMPLIMENTARY COLORS: colors directly across from each other on the color wheel (yellow-purple, blue-orange, green-red) SPLIT COMPLIMENTARY: color is paired with the two adjacent colors of its compliment.

18 Caution When Using Complimentary Colors Do not place complementary colors on top of each other. I It creates an illusion of movement Colors not quite across the wheel like cyan and red are known as discordant. They promote discord. Discord is not good for a web page.

19 Color Schemes MONOCHROMATIC COLOR: mixing white with a pure color for a TINT; or mixing black with pure color for a SHADE.

20 Web-Save Colors 216 Web-Safe Colors: Colors that will look the same on all browsers. Less Important now because most systems can display 16-bit and 32-bit colors which allows for millions of colors to correctly be displayed. Uses a Hexadecimal Base of 16 digits: 1,2,3,4,5,6,7,8,9,a,b,c,d,e, and f Colors with these pairs are part of the web safe colors:

21