Web Design - PowerPoint PPT Presentation

Loading...

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



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Web Design

Description:

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
Category:
Tags: design | graphic | web

less

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

Title: Web Design


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

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

3
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

4
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

5
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

6
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

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

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

9
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
    usability).

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

11
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

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

13
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

14
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

15
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

16
Navigation Syntax
  • Individual navigation link text-based links,
    icon, buttons, switches, and geographical
    metaphors
  • 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
    functionality

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

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

19
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
    same)?

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

21
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?

22
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?

23
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