Designing Web PagesBusiness Web Page Design

Types of WebsitesPortal: provides a variety of Internet servicesInformational: contains factual information, such as research and

statistics (Governmental agencies)Business/Marketing: content promotes or sells products or servicesEducational: provides avenues for formal and informal teaching and

learningEntertainment: contains music, games, video, sportsSocial Network: online community that encourages members to share

interests, stories, photos, music and videos with other members Personal: published by an individual or familyWiki: collaborative site that allows users to create, add to, modify or delete

the site’s contents.Blog: regularly updated journal format to reflect the interest, opinions and

personality of the author

Structures of Web SitesSITE MAP: visually displays the layout of the siteLINEAR: user navigates sequentially from page to pageWEB: consist of a number of topics of equal importanceHIERARCHICAL: good way to organize complex bodies of

information

Designing Attractive Web Pages

ConsistencyCONSISTENCY means making everything match.It’s about looking professionalINCONSISTENCY forces people to spend extra time trying to figure out

the site and to find answersKeep layout of pages consistent to avoid confusion

Placement: Navigation bar in the same place; other objects in same placeLinks: links operate the same wayAppearance: Same color scheme, headings, fonts, shapes, button stylesSidebar and navigation boxes use the same color to tie the navigation elements

togetherUsing CSS style sheets can help make a consistent design from page to page

Repetition, Rhythm and HarmonyBringing Everything Together

REPETITION/ RHYTHMRepeating 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 shapeRepetition of two or more elements used in a type of patternProgressive repetition of an element for example going form the very small to the

very large or from dark to light

HARMONYSimilar fonts and colorsPictures which match the topicGraphics which are similar in toneVariety can be used to harmonize by spreading interest throughout the design

keeping it lively and interesting

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 designThree ways of obtaining UNITYPROXIMITY: putting objects close to one another SIMILARITY: similar textures, colors, or shapes visually connects

the part of a pageCONTINUATION: when vision is directed by a line that travels

around the composition.

Clarity

Pare the message down to absolute essentialsKeep language compatible with intended audienceKeep sentences shortUse bulleted lists formUse active voice rather than the passive voiceAvoid negative statementsUse informal languageUse pronounsUse examples with which your audience is familiar

Simplicity

Keep message simpleUse only the amount of text and graphics as is absolutely

necessary to get your point acrossAn overabundance of fonts or colors can distract rather

than assist learning

BalanceBALANCE 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 (lightness-darkness)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 designLess interesting

ASYMMETRICAL BALANCE: (Informal): composition is balanced using difference elements, objects or figures on each side. More difficult to do.

PrecedenceThe 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 precedencePosition: where something is on a page influences orderColor: bold and subtle colors catch the eye differentlyContrast: being different stands out; same makes them secondarySize: big take precedence over little

Scale and ProportionRelationships between elements affect the Precedence—

the path a user takes through the page.SCALE: the actual size of the elementsPROPORTION: the ratio of size between two elementsThe 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 divisionsPassive white space: wasted space

TypographyText is the most common element so a lot of thought

should go into itFont choices: fonts communicate a toneFont sizes: text must be readable, and proportionateSpacing: spacing between lines of text and between lettersLine Length: the longer the line the harder they are to readColor: contrast with the backgroundParagraphing: use left justified text; justified text causes

weird gaps between words

UsabilityMaking 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 linkTasks that the user may need to do must be clear to the

userDon’t use text colors associated with links

AccessibilityMaking 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.

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

Color SchemesANALOGOUS 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. http://colorschemedesigner.com

Caution When Using Complimentary Colors

Do not place complementary colors on top of each other. IIt 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.

Color SchemesMONOCHROMATIC COLOR: mixing

white with a pure color for a TINT; or mixing black with pure color for a

SHADE.

http://colorschemedesigner.com

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: 00, 33, 66, 99, CC, FF