230 likes | 610 Views
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.
E N D
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
Conceptual Design • Navigation, Information Architecture • Page Design • Designing for Multiple Browsers (?)
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
Navigation, Information Architecture (2/2) • Navigation • Where, Oh Where, Oh Where • Topical sections • Path Analysis • Multiple routes • Technology • Screen layout
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 Design (1/2) • Technical Considerations • Download • Plug-ins • Animation • Feature creep • Design Considerations • Information overload • Backgrounds • Colour palettes • Text • Styles
Page Design (2/2) • Content Considerations • Quality • Layout considerations • Positioning • Resizing/Scaling
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
Requirements Specification • Mission Statement • Aims of Application • Target User Analysis • Contents • Screen Layout Guidelines • Navigation Guidelines • Technical Requirements
Navigation Maps • Linear • Hierarchical • Non-linear • Composite
History 2 Equipment 3 Team Home Page 4 1 Simulation 5 Museum Exhibits 6 In-Out Structure
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