1 / 23

Web Design

Web Design. Humor…? Design Development: Wireframe Working on Project 6 – Navigation “Site”. Humor…?. Technology changes so fast… sometimes it’s difficult to “keep up”!. Wireframe…. Developers use wireframes to get a concrete understanding of a site’s functionality.

carina
Download Presentation

Web Design

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. Web Design Humor…? Design Development: Wireframe Working on Project 6 – Navigation “Site”

  2. Humor…? Technology changes so fast… sometimes it’s difficult to “keep up”!

  3. Wireframe… Developers use wireframes to get a concrete understanding of a site’s functionality. Designers can use them to push the user interface (UI) process. “User Experience Designers” and “Information Architects” use wireframes to show navigation paths between pages.

  4. Wireframe…A Design Beginning

  5. Wireframe… Business stakeholders use wireframes to ensure that requirements and objectives are met through the design. Other professionals who create wireframes: • Business Analysts • Information Architects • Interaction Designers • User Experience Designers • Graphic Designers • Programmers • Product Managers[6]

  6. Wireframe… Since wireframes signify a “bare bones” visual, it is difficult for designers to assess how closely the wireframe needs to depict actual screen layouts. Another difficulty with wireframes is that they don’t effectively display interactive details.

  7. Wireframe…

  8. Wireframe… Modern UI (User Interface) design incorporates various devices such as expanding panels, hover effects, and carousels that pose a challenge for 2-D diagrams. Wireframes may have multiple levels of detail and can be broken up into two categories in terms of “fidelity”, or how closely they resemble the end product. Low-fidelity or High-fidelity

  9. Wireframe…Low-fidelity Resembles a rough sketch or quick mock-up Have less detail and are quick to produce For simple or low-fidelity drawings, paper prototyping is a common technique. Since these sketches are just representations, annotations—adjacent notes to explain behavior–are useful.

  10. Wireframe…Low-fidelity Help a project team collaborate more effectively since they are more abstract, using rectangles and labeling to represent content. Dummy content, Latin filler text (loremipsum), sample or symbolic content are used to represent data when real content is not available.[9]

  11. Low-fidelity…

  12. Wireframe…High-fidelity Often used for documenting because they incorporate a level of detail that more closely matches the design of the actual webpage, so they take longer to create. For more complex projects, rendering wireframes using computer software is popular. Some tools allow the incorporation of interactivity including Flash animation, and HTML, CSS, and JavaScript.

  13. Wireframe…High-fidelity

  14. Wireframe…Elements • The skeleton plan of a website can be broken down into three components: • information design • navigation design • interface design • Page layout is where these components come together, • Wireframing is what portrays the relationship between these components.

  15. Wireframe…Elements

  16. Wireframe…Info Design • Information design is the presentation—placement and prioritization of information in a way that facilitates understanding. • Information design is an area of graphic design, meant to display information effectively for clear communication. • For websites, information elements should be arranged in a way that reflects the goals and tasks of the user.

  17. Wireframe…Info Design

  18. Wireframe…Nav Design • The navigation system provides a set of screen elements that allow the user to move page to page through a website. • The navigation design should communicate the relationship between the links it contains so that users understand the options they have for navigating the site.

  19. Wireframe…Nav Design Often, websites contain multiple navigation systems: • a global navigation, • local navigation • supplementary navigation • contextual navigation • possibly courtesy navigation

  20. Wireframe…Nav options

  21. Wireframe…Interface Design • User interface design includes selecting and arranging interface elements to enable users to interact with the functionality of the system. • The goal is to facilitate usability and efficiency as much as possible. • Common elements found in interface design are action buttons, text fields, check boxes, radio buttons and drop-down menus.

  22. Wireframe…Interface Design

  23. Web Design Project 6 – Navigation “Site” Project 7 – Create 2 wireframes of first Site 2 pages- “Home” & template of other pages

More Related