Web Design - PowerPoint PPT Presentation


PPT – Web Design PowerPoint presentation | free to view - id: 21ff7-ZjAwN


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Web Design


Aesthetic design. look and feel of WebApp (graphic design) Content design ... Aesthetic Design:Graphic Design. Layout. Color schemes. Text fonts, sizes, and styles ... – PowerPoint PPT presentation

Number of Views:1254
Avg rating:3.0/5.0
Slides: 24
Provided by: BMA2
Tags: design | graphic | web


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Web Design

Web Design
  • CIS 376
  • Bruce R. Maxim
  • UM-Dearborn

WebApp Design Goals
  • Simplicity
  • Consistency
  • Identity
  • Robustness
  • Navigability
  • Visual appeal
  • Compatibility

WebE Design Activiites
  • Interface design
  • describes structure and organization of the user
    interface (screen layout, interaction modes, and
    navigation mechanisms)
  • Aesthetic design
  • look and feel of WebApp (graphic design)
  • Content design
  • defines layout, structure, and outline for all
    WebApp content and content object relationships

WebE Design Activiites
  • Navigation design
  • navigational flow between content objects
  • Architectural design
  • hypermedia structure of WebApp
  • Component design
  • develops processing logic required to implement
    the WebApp functional components

User Concerns
  • Where am I?
  • Interface should indicate which WebApp is running
  • Interface should indicate users location in
    content hierarchy
  • What can I do now?
  • Interface helps user understand current options
    (live link and relevant content)
  • Where have I been and where am I going?
  • Provide user with map showing paths through the

WebApp Interface Concerns
  • Minor server errors are likely to cause user to
    leave WebApp and look for an alternative site
  • Reading speed on monitor is about 25 slower than
    for hardcopy
  • Avoid "under construction" signs
  • Users prefer not having to scroll to read content
  • Navigation menus and headers should be designed
    consistently and be available on all pages
    available to the user

WebApp Interface Concerns
  • Do not rely on browser functions to assist in
  • Aesthetics should never take precedence over
    application functionality
  • Navigation should be obvious to causal users

Interface Design Tasks
  • Review and refine analysis information
  • Develop rough sketch of WebApp interface layout
  • Map user objectives into specific interface
  • Define set of user tasks associated with each
  • Storyboard screen images for each interface
  • Refine interface layouts and storyboards using
    input from aesthetic design.

Interface Design Tasks
  • Identify user interface objects required to
    implement user interface.
  • Develop procedural representation of users
    interaction with the interface.
  • Develop a behavioral representation of users
    interaction with the interface.
  • Describe interface layout for each state.
  • Review and refine the interface model (focus on

Aesthetic DesignGraphic Design
  • Layout
  • Color schemes
  • Text fonts, sizes, and styles
  • Use of multimedia elements (audio, video,
    animation, etc.)

Content Design
  • Representations for content objects and their
    relationships (Web engineers)
  • Analysis content objects modeled by UML
    associations and aggregations
  • Representation of information within specific
    content objects (content authors)
  • As content objects are designed they are
    chunked to form pages (based in user needs and
    content relationships)
  • Aesthetic design may be applied to get the proper
    look and feel for the information

WebApp Architectural Structures
  • Linear structures
  • Grid structures
  • Hierarchical structures
  • Networked or "pure" web structures

WebE Design Patterns part 1
  • Cycle
  • user is returned to previously visited node
  • Web Ring
  • implements a grand cycle that links entire
    hypertext into a tour of a subject)
  • Contour
  • for interconnected cycles, allowa navigation
    across paths defined by cycles
  • Counterpoint
  • hypertext commentary used to interrupt content to
    provide additional information

WebE Design Patterns part 2
  • Mirrorworld
  • content presented using several threads, each
    with its own perspective or point of view
  • Sieve
  • user guided through a series of decisions to
    specific content
  • Neighborhood
  • uniform navigation is provided to user regardless
    of position within the WebApp

Navigational Design
  • Identify the semantics of navigation for
    different users based on
  • perceived roles (i.e. visitor, registered
    customer, or privileged user)
  • goals associated with these roles.
  • Define the mechanics (syntax) of achieving

Navigation Syntax
  • Individual navigation link text-based links,
    icon, buttons, switches, and geographical
  • Horizontal navigation bar lists major content
    or functional categories in a bar with links
  • Vertical navigation column
  • Lists major content or functional categories
  • Lists every major content object in WebApp
  • Tabs variation of navigation bar or columns
  • Site map provides all inclusive table of
    contents to all WebApp content objects and

Web Quality
  • Usability
  • Functionality
  • Reliability
  • Efficiency
  • Maintainability
  • Security
  • Availability
  • Scalability
  • Time-to-market

Web Quality Visible to Users
  • Volatility of content
  • Content cohesiveness
  • Working links
  • Content matches user expectations
  • Accuracy and consistency
  • Response time and latency
  • Performance

Assessing Web Quality
  • Can the scope and depth of the web content be
    determined to ensure that it meets user needs?
  • Can background and authority of contents authors
    be easily identified?
  • Is possible to determine content currency and
    date of last update?
  • Is content location stable (e.g. URL stays the

Assessing Web Quality
  • Is the content credible?
  • Is the content unique?
  • Is the content valuable to users?
  • Is the content well organized and easily

WebApp Quality Assessment
  • Is the WebApp interface usable?
  • Are the aesthetics of the WebApp pleasing to the
    user and appropriate for the information domain?
  • Is the content designed to impart the most
    information for the least amount of effort?
  • Is navigation efficient and straightforward?

WebApp Quality Assessment
  • Has the WebApp architecture been designed to
    accommodate special goals and objectives of
    users, content structure, functionality, and
    effective navigation flow?
  • Are the WebApp components designed to reduce
    procedural complexity and enhance correctness,
    reliability, and performance?

Aesthetic Design Layout Issues
  • Use white space generously
  • Emphasize content
  • Organize elements from top-left to bottom-right
  • Group navigation, content, and function
    geographically within page\
  • Avoid temptation to use scroll bars
  • Take differing resolutions and browser window
    sizes into account during design
About PowerShow.com