Web Design Basics Key Concepts 1 Learning Outcomes Describe the most common types of website organization Describe principles of visual design Design for your target audience Create clear easytouse navigation ID: 667380
Download Presentation The PPT/PDF document "Basics of Web Design Chapter 3" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Basics of Web Design
Chapter 3Web Design BasicsKey Concepts
1Slide2
Learning Outcomes
Describe the most common types of website organizationDescribe principles of visual design Design for your target audienceCreate clear, easy-to-use navigationImprove the readability of the text on your web pages
Use graphics appropriately on web pages
Apply the concept of Universal Design to web pages
Describe web page layout design techniquesDescribe the concept of responsive web designApply best practices of web design
2Slide3
Design for Your Target Audience
3
Consider the
target audience
of these sitesSlide4
Web Page Design Browser Compatibility
Web pages do NOT look the same in all the major browsershttp://browsershots.org/
Test with current and recent versions of:
Internet Explorer/Microsoft Edge
Firefox
Chrome
Opera
Safarihttp://marketshare.hitslink.com/
Progressive Enhancement:Website functions well in browsers commonly used by your target audience
Add enhancements with CSS3 and/or HTML5 for display in modern browsers
4Slide5
Web Page Design Screen Resolution
Test at various screen resolutionsMost widely used: 1024x768, 360x640, 1366x768, and 375x667
Design to look good at various screen resolutions
Centered page content
Set to either a fixed or percentage width
5Slide6
Website Organization
HierarchicalLinearRandom (sometimes called Web Organization)
6Slide7
Hierarchical Organization
A clearly defined home page Navigation links to major site sectionsOften used for commercial and corporate websites
7Slide8
Hierarchical: Too Shallow
Be careful that the organization is not too shallowToo many immediate choices a confusing and less usable websiteGroup, or “chunk”, related areas
8Slide9
Hierarchical: Too Deep
Be careful that the organization is not too deep.This results in many “clicks” needed to drill down to the needed pageUser Interface “Three Click Rule”
A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks
9Slide10
Linear Organization
A series of pages that provide a tutorial, tour, or presentationSequential viewing
10Slide11
Random Organization
Sometimes called “Web” OrganizationUsually there is no clear path through the site
May be used with artistic or concept sites
Not typically used for commercial sites
11Slide12
Visual Design Principles
RepetitionRepeat visual elements throughout designContrastAdd visual excitement and draw attentionProximityGroup related itemsAlignment
Align elements to create visual unity
12Slide13
Design to Provide for Accessibility
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-LeeWho benefits from increased accessibility? A person with a physical disabilityA person using a slow Internet connectionA person using an old, outdated computer
A person using a mobile phone
Legal Requirement: Section 508 of Rehabilitation Act
Standards: WCAG 2.0
13Slide14
Design for Accessibility
Web Content Accessibility Guidelines 2.0WCAG 2.0http://www.w3.org/TR/WCAG20/Overview
http://www.w3.org/WAI/WCAG20/quickref
Based on Four Principles (POUR)
PerceivableContent must be
easy to see or hear
O
perableInterface components in the content must be operable by both mouse and keyboard
UnderstandableContent and controls must be easy to read and well-organizedRobustContent uses correct syntax and functions on popular operating systems, browsers, and assistive technologies
14Slide15
Writing for the Web
Avoid long blocks of text Use bullet points and listsUse headings and subheadingsUse short sentences and phrases
15Slide16
Design “Easy to Read” Text
Use common fonts:Arial, Helvetica, Verdana, Times New RomanUse appropriate text size and weight:
Medium, 1em, 100%
Use appropriate line length:
Between 50-75 characters is recommendedCheck text alignment (left vs. centered)
Use strong contrast between text & background
Use columns instead of wide areas of horizontal text
16Slide17
More Text Design Considerations
Carefully choose text in hyperlinksAvoid “click here”
Hyperlink keywords or phrases
Do not hyperlink
entire sentences
Chek
yur
spellin (Check your spelling)
17Slide18
Using Color on Web Pages
Computer monitors display color as intensities of red, green, and blue lightRGB ColorThe values of red, green, and blue vary from 0 to 255Hexadecimal numbers (base 16) represent these color values: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
18Slide19
Hexadecimal Color Values
# indicates a hexadecimal valueHex value pairs range from 00 to FF
Three hex value pairs describe an RGB color
19Slide20
Web Color Palette
A collection of 216 colors – web safe color palette Display the most similar on the Mac and PC platforms
Hex values:
00, 33, 66, 99, CC, FF
Color Chart : http://webdevbasics.net/color
20Slide21
Making Color Choices
How to choose a color scheme?Monochromatichttp://meyerweb.com/eric/tools/color-blendhttp://www.0to255.comChoose from a photograph or other imagehttp://www.colr.org
http://
www.pictaculous.com
http://www.colourlovers.comBegin with a favorite colorUse one of the sites below to choose other colorshttp://www.colorschemedesigner.com
http://www.colorsontheweb.com/colorwizard.asp
Vischeck.com – simulate how a person with a color deficiency experiences colors on a web page
21Slide22
Appealing to Kids & Preteens
22
Appealing to Young Adults
Appealing to Everyone
Appealing to Older Adults
Use of ColorSlide23
Use of Graphics & Multimedia
File size and dimension matterhttps://pixlr.com/editor/Antialiased/aliased text considerations
Provide alternate text
Use only necessary multimedia
23Slide24
Web Page Design Load Time
Watch the load time of your pagesTry to limit web page document and associated media to under 60KB on the home pagehttps://developers.google.com/speed/pagespeed/insights/https://www.webpagetest.org/
24Slide25
Navigation Design
Make your site easy to navigateProvide clearly labeled navigation in the same location on each pageMost common – across top or down left sideConsider:Navigation Bars
Breadcrumb Navigation
Using Graphics for Navigation
Dynamic NavigationSite MapSite Search Feature
25Slide26
WireframeA sketch of blueprint of a web page
Shows the structure of the basic page elements, including:HeaderNavigationContentFooter
26Slide27
Web Page Design Page Layout (1)
Place the most important information "above the fold"Use adequate "white" or blank space Use an interesting page layout
27
This is usable, but a little boring. See the next slide for improvements in page layout.Slide28
Web Page Design Page Layout (2)
Better
28
Columns make the page more interesting and it’s easier to read this way.Slide29
Web Page Design Page Layout (3)
29
Best
Columns of different widths interspersed with graphics and headings create the most interesting, easy to read page.Slide30
Page Layout Design Techniques
Fixed LayoutAKA rigid or “ice” designFixed-width often at left margin
More appealing if
fixed with content is centered
30Slide31
Page Layout Design Techniques
Fluid LayoutAKA “liquid” designExpands to fill the browser at all resolutions.
Adaptation:
Page content typically centered and
often configured with a percentage width such as 80%
31Slide32
Design for the Mobile WebMore
users will access websites using mobile devices than with desktop computersThree Approaches:Separate .mobi mobile siteHost the mobile site within your current domainConfigure your current website for mobile display using responsive web design techniques
32Slide33
Mobile Design Quick Checklist
Small screen size Bandwidth issuesSingle-column layoutMaximize contrastOptimize images for mobile displayDescriptive alternate text for imagesAvoid display of non-essential content
33Slide34
Responsive Web DesignEthan
Marcotte, noted web developerhttp://www.alistapart.com/articles/responsive-web-designProgressively enhancing a web page for different viewing contexts (such as smartphones and tablets) through the use of coding techniques, including flexible layouts and media queries.Examples:http://mediaqueri.es/
34Slide35
Web Design Best Practices Checklist
http://terrymorris.net/bestpractices
35
Page Layout
Browser Compatibility
Navigation
Color and Graphics
Multimedia
Content Presentation
Functionality
AccessibilitySlide36
Summary
This chapter introduced you to best practices of web design. The choices you make in the use of color, graphics, and text should be based on your particular target audience.
36