Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission...
-
Upload
dennis-bishop -
Category
Documents
-
view
215 -
download
2
Transcript of Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission...
![Page 1: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/1.jpg)
Designing a site (2/4)Conceptual Design – 1h
![Page 2: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/2.jpg)
Lazar’s Development LifecycleDefine the mission &
target users
Collect user
requirements Create andModify
Conceptual design
Create and modify physical design
Perform usability testing
Implement and market the website
Evaluate and improve the website
![Page 3: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/3.jpg)
Conceptual Design
• Navigation, Information Architecture
• Page Design
• Designing for Multiple Browsers (?)
![Page 4: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/4.jpg)
Navigation, Information Architecture (1/2)
• Organizational Structure of the Home Page– Topic grouping– Audience splitting– Metaphors
• Amazon.com
• Information Architecture– Tree structure: broad and shallow vs narrow and deep– Three clicks and you’re in– Chunking information: 7±2
![Page 5: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/5.jpg)
Navigation, Information Architecture (2/2)
• Navigation– Where, Oh Where, Oh Where– Topical sections – Path Analysis
• Multiple routes
– Technology– Screen layout
![Page 6: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/6.jpg)
Lost in Hyperspace?
• Where am I?
• How did I get here?
• What can I do here?
• Where can I get to?
• How do I go there?
• What have I seen so far?
• Where else is there for me to see?
![Page 7: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/7.jpg)
Page Design (1/2)
• Technical Considerations– Download– Plug-ins– Animation– Feature creep
• Design Considerations– Information overload– Backgrounds– Colour palettes– Text
• Styles
![Page 8: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/8.jpg)
Page Design (2/2)
• Content Considerations– Quality
• Layout considerations– Positioning– Resizing/Scaling
![Page 9: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/9.jpg)
Design Challenges• Designing for Accessibility
– Legislation– Web Accessibility Initiative
• The Browser Challenge– Explorer v Netscape v Opera etc.– Define a baseline specification or create alternatives ?– Currently much less of an issue with the dominance of Internet
Explorer• But what does Firefox introduce?
– Older incompatibility problems e.g. <object> vs <embed>, scripting languages, layers.
• Standardization– Markup languages get stricter (html xhtml xml)– de facto standards vs W3C
• Need for Testing– Early & Often
![Page 10: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/10.jpg)
Requirements Specification
• Mission Statement– Aims of Application
• Target User Analysis
• Contents
• Screen Layout Guidelines
• Navigation Guidelines
• Technical Requirements
![Page 11: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/11.jpg)
Navigation Maps
• Linear
• Hierarchical
• Non-linear
• Composite
![Page 12: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/12.jpg)
Linear
![Page 13: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/13.jpg)
Hierarchical
![Page 14: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/14.jpg)
Non-linear
![Page 15: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/15.jpg)
Composite
![Page 16: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/16.jpg)
History2
Team4
Simulation5
Equipment3
In-Out Structure
Museum Exhibits 6
Home Page1
![Page 17: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/17.jpg)
Storyboarding• A storyboard starts as a diagram.• It is a design, not a screen-shot• Shows where blocks of content go• Shows where local and global links are grouped• Labelled to show the result of clicking on links and multimedia• Label OFF the diagram! (Draw lines linking label to feature).• Labels tell what the multimedia does.• First draft drawn in schematic form by hand or drawing package
(e.g. MS Word, PowerPoint, Dreamweaver). • Later may become a detailed design using collage and better
drawing tools• Show a few possible solutions to client – who will invariably want to
make changes!• Coded only after design and approval
![Page 18: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/18.jpg)
Vertical Navigation System
![Page 19: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/19.jpg)
Horizontal Navigation Bar
![Page 20: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/20.jpg)
Vertical and Horizontal
![Page 21: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/21.jpg)
Example: A storyboard for a web home page
![Page 22: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/22.jpg)
Storyboards
![Page 23: Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify.](https://reader036.fdocuments.us/reader036/viewer/2022081519/56649e8e5503460f94b91215/html5/thumbnails/23.jpg)
Detailed Storyboard