Scribd
Upload
48 views

Web Design Lecture-1B: Instructor: Vishal Chawla

The document discusses various topics related to web design including browser compatibility, screen resolution, website organization, visual design principles, accessibility, writing for the web, color usage, navigation design, wireframes, page layout, and mobile design. It provides guidance on testing pages in different browsers and resolutions, using a hierarchical or linear organization, applying design principles, making sites accessible, optimizing text, choosing colors, creating navigation, and designing for mobile.

Uploaded by

wojehon
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
48 views

Web Design Lecture-1B: Instructor: Vishal Chawla

The document discusses various topics related to web design including browser compatibility, screen resolution, website organization, visual design principles, accessibility, writing for the web, color usage, navigation design, wireframes, page layout, and mobile design. It provides guidance on testing pages in different browsers and resolutions, using a hierarchical or linear organization, applying design principles, making sites accessible, optimizing text, choosing colors, creating navigation, and designing for mobile.

Uploaded by

wojehon
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

Web Design

Lecture-1B
Instructor: Vishal Chawla
Web Page Design
Browser Compatibility
Web pages do NOT look the same in all the major browsers

Test with current and recent versions of:


◦ Internet Explorer
◦ Firefox, Mozilla
◦ Opera
◦ Safari
◦ Chrome
 Add enhancements with CSS3 and/or HTML5 for display in modern browsers

Source: Basics of Web Design (HTML5 and CSS3)


Web Page Design
Screen Resolution
Test at various screen resolutions
◦ Most widely used: 1024x768, 1366x768, and 1280x800

Design to look good at various screen resolutions


◦ Centered page content
◦ Set to either a fixed or percentage width

Source: Basics of Web Design (HTML5 and CSS3)


Basic
s of
Web
Desig
n Website Organization
(HT
ML5
and
CSS3
 Hierarchical
)  Linear
 Random
Basic
s of
Web
Desig
Hierarchical Organization
n
(HT
ML5
and  A clearly defined home page
CSS3
 Navigation links to major site sections
)
 Often used for commercial and
corporate websites
Hierarchical: Too Shallow

 Be careful that the organization is not too shallow.


 Too many immediate choices  a confusing and less usable website.
 Group, or “chunk”, related areas

Source: Basics of Web Design (HTML5 and CSS3)


Hierarchical:
7 Too Deep
Be careful that the organization is
not too deep.

◦ This results in many “clicks” needed to


drill down to the needed page.

◦ User 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.

Source: Basics of Web Design (HTML5 and CSS3)


Basic
s of
Web
Desig
n Linear Organization
(HT
ML5
and
CSS3
)

 A series of pages that provide a tutorial, tour,


or presentation.
 Sequential viewing
Basic
s of
Web
Desig
n Random Organization
(HT
ML5  Sometimes called “Web” Organization
and
CSS3  Usually there is no clear path through the
) site

 May be used with artistic or concept


sites

 Not typically used for commercial sites


Visual Design Principles

 Repetition
 Repeat visual elements throughout design
 Contrast
 Add visual excitement and draw attention
 Proximity
 Group related items
 Alignment
 Align elements to create visual unity

Source: Basics of Web Design (HTML5 and CSS3)


Basic
s of
Web
Desig Design to Provide for Accessibility
n
(HT
ML5
and “The power of the Web is in its universality. Access by everyone regardless of disability is an
CSS3 essential aspect.” – Tim Berners-Lee
)
 Who benefits from increased accessibility?
 A person with a physical disability
 A person using a slow Internet connection
 A person using an old, out-dated computer
 A person using a mobile phone

 Legal Requirement: Section 508


 Standards: WCAG 2.0
Design for Accessibility

Web Content Accessibility Guidelines 2.0


WCAG 2.0
◦ http://www.w3.org/TR/WCAG20/Overview
◦ http://www.w3.org/WAI/WCAG20/quickref

Based on Four Principles (POUR)


1. Perceivable
Content must be easy to see or hear

2. Operable
Interface components in the content must be operable by both mouse and keyboard

3. Understandable
Content and controls must be easy to read and well-organized

4. Robust.
Content use correct syntax and function on popular operating systems, browsers, and assistive
technologies.

Source: Basics of Web Design (HTML5 and CSS3)


Writing for the Web

 Avoid long blocks of text


 Use bullet points
 Use headings and subheadings
 Use short paragraphs

Source: Basics of Web Design (HTML5 and CSS3)


Design “Easy to Read” Text

 Use common fonts:


 Arial, Helvetica, Verdana, Times New Roman

 Use appropriate text size:


 medium, 1em, 100%
 Use appropriate line length
 Between 50-75 characters is recommended
 Use strong contrast between text & background
 Use columns instead of wide areas of horizontal text
Source: Basics of Web Design (HTML5 and CSS3)
More Text Design Considerations

Carefully choose text in hyperlinks

 Avoid “click here”


 Hyperlink key words or phrases
 Do not hyperlink not entire sentences

Chek yur spellin (Check your spelling)

Source: Basics of Web Design (HTML5 and CSS3)


Using Color on Web Pages
 Computer monitors display color as intensities of red,
green, and blue light
 RGB Color
 The values of red, green, and blue
vary from 0 to 255.
 Hexadecimal numbers (base 16) represent these color
values.

Source: Basics of Web Design (HTML5 and CSS3)


Web Color Palette

 A collection of 216 colors

 Display the most similar on the Mac and PC platforms

 Hex values:
00, 33, 66, 99, CC, FF

 Color Chart : http://webdevbasics.net/color


Navigation Design
 Make your site easy to navigate
 Provide clearly labeled navigation in the same location on each page
 Most common – across top or down left side
 Consider:
 Navigation Bars
 Breadcrumb Navigation
 Using Graphics for Navigation
 Dynamic Navigation
 Site Map
 Site Search Feature

Source: Basics of Web Design (HTML5 and CSS3)


Wireframe
 A sketch of blueprint of a web page
 Shows the structure of the basic page elements, including:
 Logo
 Navigation
 Content
 Footer

Source: Basics of Web Design (HTML5 and CSS3)


Web Page Design Page Layout

Place the most important information "above the fold"


Use adequate "white" or blank space
Use an interesting page layout

This is usable, but


a little boring. See
the next slide for
improvements in
page layout.

Source: Basics of Web Design (HTML5 and CSS3)


Web Page Design Page Layout

Better

Columns make the


page more interesting
and it’s easier to read
this way.

Source: Basics of Web Design (HTML5 and CSS3)


Design for the Mobile Web

 Predicted that by 2015, more users will access websites using mobile devices
than with desktop computers

 Three Approaches:
 Separate .mobi mobile site
 Host the mobile site within your current domain
 Configure your current website for mobile display
using responsive web design techniques

Source: Basics of Web Design (HTML5 and CSS3)


Mobile Design Quick Checklist
23

 Small screen size


 Bandwidth issues
 Single-column layout
 Maximize contrast
 Optimize images for mobile display
 Descriptive alternate text for images
 Avoid display of non-essential content

Source: Basics of Web Design (HTML5 and CSS3)

You might also like