Designing a Webpage.pdf

Designing a Webpage genda Agenda Agenda Agenda Agenda Agenda Agenda Agenda Agenda Agenda Anganda Agenda Agenda Ag Topics Covered Emphasis Contrast Typo...

Designing a Webpage genda Agenda Agenda Agenda Agenda Agenda Agenda Agenda Agenda Agenda Anganda Agenda Agenda Ag Topics Covered Emphasis Contrast Typo- graphy Elements Of Webpages Colors Navigation Visual and Balance Graphics hatdog  1. EMPHASIS Communicates your message effectively Highlights placement of most important topics Determines information organization on the page  COMMON WAYS TO EMPHASIZE Use of white space to make elements stand apart:  COMMON WAYS TO EMPHASIZE Bold, big, italics, different colors, borders, etc. Effects (drop, shadow, glow, texture), shapes, etc.  2. Contrast Generates visual interest by making page appealing Enables easy navigation and directs user to desired part of the page  COMMON WAYS TO CONTRAST Use of white space, reverse text, larger size, italics COMMON WAYS TO CONTRAST Borders, different colors, and effects  3.) TYPOGRAPHY Refers to the arrangement of text on a page Enhances readability and increases user friendliness Complements graphics and images to cultivate an image in the reader’s mind  TYPOGRAPHY Assists in conveying message you intend to convey (professional, recreational, whimsical, etc.) Make content easily readable Choose between mono-spaced and proportional text spacing and stick to the choice TYPOGRAPHY Maintain a clean look by mixing serif and sans serif fonts Use fonts no bigger than 14-18 pts or smaller than 12-10 pts for body text Avoid dancing letters and words TYPOGRAPHY Choose fonts that: 1.) Fit the character of your site 2.) Are easily readable on a computer screen 3.) Are widely available across many browsers and operating systems 4.)Provide alternatives for unsupported fonts on different browsers  TYPOGRAPHY Use Cascading Style Sheets (CSS) to define and set characteristics and effects to text (to be discussed in the future) Define formatting of features in a web page such as fonts, color, weight, line spacing, indents, text transformation Apply styles to a page using cascading styles hierarchy (to be discussed in the future) Generate inconsistent results on different platforms due to lack of uniform browser support EXAMPLES OF TYPOGRAPHY  4. COLORS AND GRAPHICS Defines character and identity of the web page Draws eyes to page elements and enhances readability Impacts and influences reader’s mind and opinion of the website (flashy or subdued) Adds recall value and draws association to ideas or brands (blue and yellow of Ikea.com)  4. COLORS Color - Rules to remember: Understand the color wheel and how to use color schemes Limit mixing complementary colors such as blue and orange, green and red Use black and white when in doubt Test color schemes for readability by visually impaired readers Provide alternate schemes for old computers WHAT ARE COLOR SCHEMES? EXAMPLES OF COLOR SCHEMES:  WHAT ARE COLOR SCHEMES? EXAMPLES OF COLOR SCHEMES: Monochromatic: uses only ONE color with different shades (mostly website back- grounds) WHAT ARE COLOR SCHEMES? EXAMPLES OF COLOR SCHEMES: Analogous: uses THREE to FIVE colors next to eachother on the color wheel  WHAT ARE COLOR SCHEMES? EXAMPLES OF COLOR SCHEMES: Complementary - uses colors opposite to each other on the color wheel to provide stark contrast.  GRAPHICS RULES TO REMEMBER: Use the right file format for different images Graphic Interchange format (GIF) for non-photographic images up to 256 colors Joint photographic experts group (JPEG) for photographs and images with rich and complex color variations  GRAPHICS Place buttons and boxes at the top of the page Use small but standard icons for recognizable concepts such as mail, home page, money, etc. Provide matching text links for every graphic link to help low bandwidth users Use browser-safe colors for graphics and backgrounds Make animated graphics turn off automatically to minimize distraction Avoid dancing or flashing images  5. NAVIGATION Refers to the way a web page is structured for use Directs users to desired destination by providing visual clues Maintains user focus Makes all website features accessible Uses various tools depending on nature of content and target users  5. NAVIGATION Rules to remember Group navigation tools in one place Keep tools vertically or horizontally aligned Present all available features as buttons, bars, tabs, text links to help visual direction Maintain consistent use of tools and terminology  5. NAVIGATION Place ‘bread crumb trail’ visual clues to where the user is Provide meaningful and relevant links Divide browser window into separate frames or sections to view graphics clearly Create uniform information presentation to provide for different monitor settings Use a site map or an index  6. VISUAL BALANCE Refers to the combination of visual elements such as lines, images, text, shapes, and color on a page Keeps elements evenly distributed without leaning too much on any one in particular  6. VISUAL BALANCE Common ways to achieve visual balance: Placing elements based on how eyes scan and follow Considering alignment, repetition, and proximity of elements Using text links, navigation tools, graphics such as arrows, pointing fingers, curvy lines, etc. PRINCIPLES OF WEBPAGE CONTENT  PRINCIPLES OF WEBPAGE CONTENT 1. Clarity Communicate the purpose of the page clearly Use simple but appropriate language Make content self explanatory Keep information well organized and labeled.  PRINCIPLES OF WEBPAGE CONTENT 1. Clarity Communicate the purpose of the page clearly Use simple but appropriate language Make content self explanatory Keep information well organized and labeled. 2. Brevity Use short sentence structures and small words Write visually scannable text Use bold phrases and bullet lists Write a blurb or summary of the page  PRINCIPLES OF WEBPAGE CONTENT 1. Clarity Communicate the purpose of the page clearly Use simple but appropriate language Make content self explanatory Keep information well organized and labeled. 2. Brevity Use short sentence structures and small words Write visually scannable text Use bold phrases and bullet lists Write a blurb or summary of the page PRINCIPLES OF WEBPAGE CONTENT  PRINCIPLES OF WEBPAGE CONTENT 3. Informality Maintain an informal and conversational tone. Make content interesting to explore Experiment with design and layout to distinguish page Provide forms for reader response and feedback  PRINCIPLES OF WEBPAGE CONTENT 3. Informality Maintain an informal and conversational tone Make content interesting to explore Experiment with design and layout to distinguish page Provide forms for reader response and feedback 4. Accuracy Check facts and figures before publishing Eliminate typos and grammatical errors Provide references for source material Eliminate misleading links and materials PRINCIPLES OF WEBPAGE CONTENT  PRINCIPLES OF WEBPAGE CONTENT 5. Relevance Identify target audience and customize pages to suit their needs Place the most relevant information at the top Keep informatiofn current and well updated Provide language options to make content reach a wider audience PRINCIPLES OF WEBPAGE CONTENT  PRINCIPLES OF WEBPAGE CONTENT 6.Consistency Use standard terminology and key words Use a consistent organization style for topics and headings Follow a style guide and use it uniformly EXTRA: DO'S AND DONT'S EXTRA: DO'S AND DONT'S DO'S:  EXTRA: DO'S AND DONT'S DO'S: Address the target audience directly Customize pages to suit different users Communicate with visual elements, such as white space, contrast, layout, etc. Provide alternate graphics and multimedia versions for low bandwidth users Keep the design user-friendly Provide consistent navigation tools  EXTRA: DO'S AND DONT'S DO'S: Provide ‘breadcrumb’ trails Provide links to other relevant sites Get consent before publishing outside material. Test the site early and often to check functions, active links, and relevance Ask for user response or feedback Update often and publicize the site  EXTRA: DO'S AND DONT'S DONT’S Don’t restrict or limit your audience. Don’t make users think – make everything obvious and self explanatory. Don’t abuse the reader’s patience; keep information straight forward. Don’t make your site hard to navigate. Don’t use large images/files that slow down browsing speeds.  EXTRA: DO'S AND DONT'S DONT’S Don’t overuse multimedia and graphics Don’t fill pages with too much information Don’t use jarring colors and fonts Don’t keep inactive links Don’t publish outside content without consent  Thank you! This concludes our lesson. Goodluck! hatdog  SHORT QUIZ hatdog hatdog hatdog hatdog