1 / 23

Designing a site (2/4) Conceptual Design – 1h

Designing a site (2/4) Conceptual Design – 1h. Lazar’s Development Lifecycle. Define the mission & target users. Collect user requirements. Create and Modify Conceptual design. Perform usability testing. Create and modify physical design. Evaluate and improve the website.

Jimmy
Download Presentation

Designing a site (2/4) Conceptual Design – 1h

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing a site (2/4)Conceptual Design – 1h

  2. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify Conceptual design Perform usability testing Create and modify physical design Evaluate and improve the website Implement and market the website

  3. Conceptual Design • Navigation, Information Architecture • Page Design • Designing for Multiple Browsers (?)

  4. 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

  5. Navigation, Information Architecture (2/2) • Navigation • Where, Oh Where, Oh Where • Topical sections • Path Analysis • Multiple routes • Technology • Screen layout

  6. 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?

  7. Page Design (1/2) • Technical Considerations • Download • Plug-ins • Animation • Feature creep • Design Considerations • Information overload • Backgrounds • Colour palettes • Text • Styles

  8. Page Design (2/2) • Content Considerations • Quality • Layout considerations • Positioning • Resizing/Scaling

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

  10. Requirements Specification • Mission Statement • Aims of Application • Target User Analysis • Contents • Screen Layout Guidelines • Navigation Guidelines • Technical Requirements

  11. Navigation Maps • Linear • Hierarchical • Non-linear • Composite

  12. Linear

  13. Hierarchical

  14. Non-linear

  15. Composite

  16. History 2 Equipment 3 Team Home Page 4 1 Simulation 5 Museum Exhibits 6 In-Out Structure

  17. 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

  18. Vertical Navigation System

  19. Horizontal Navigation Bar

  20. Vertical and Horizontal

  21. Example: A storyboard for a web home page

  22. Storyboards

  23. Detailed Storyboard

More Related