We think you have liked this presentation. If you wish to download it, please recommend it to your friends in any social system. Share buttons are a little bit lower. Thank you!
Presentation is loading. Please wait.
Published byKenyon Slaymaker
Modified over 2 years ago
1 Interface Design- Wireframes
2 Wireframing Lo-Fi design Hi-Fi design Concept design Prototyping Usability Testing *Fidelity refers to the level of detail
3 Interface Design- Wireframes Depending on the need, i.e. for the client’s understanding, you can present a wireframe to illustrate the interface design.
4 Interface Design- Wireframes Lo-Fi Design Basic structure Minimal labels Use of Placeholders
5 Interface Design- Wireframes
6 Hi-Fi Design Detailed structure Formal or final labels Use of Placeholders Images if possible
7 Interface Design- Wireframes
8 From your wireframe you can flush out your interface design.
9 Interface Design- Wireframes
10 Interface Design- Wireframes
11 Interface Design- Wireframes Wireframes allow you to: Do a low level usability test Test your interface Find omissions Make low-cost changes
OLD Organization 1.1 <> 1.2 <> 1.3 <> <> <> Book Chapter Title Group Number, Group Member names New Organization 1.1 <> 1.2 <> 1.3 <>
Define Wireframes, Mockups, and Prototypes Techniques Low vs. High Fidelity Sketchy vs. Polished Exercise: Define the Process.
What is a wireframe? What features are important? Which wireframe tools might you want to try?
Common Page Design. Graphics and Tables Uses: Objects Numbers Concepts Words.
CMSE323 HUMAN COMPUTER INTERACTION CHAPTER IV on LOW FIDELITY PROTOTYPING HUMAN FACTORS IN INTERFACE DESIGN DR. ADNAN ACAN.
User Interface design Teppo Räisänen
Lesson Objectives 1) Review the steps involved in problem solving 2) Review the stages of the System Life Cycle 3) Describe what prototyping is and the.
University of Washington HCDE 518 & INDE 545 Lo-Fidelity Prototyping HCDE 518 & INDE 545 Winter 2012 With credit to Jake Wobbrock, Dave Hendry, Andy Ko,
P2-WIREFRAME Presented by Rahul Potghan Sonal Kulkarni.
User Interface Structure Design Chapter 10. Key Definitions The user interface defines how the system will interact with external entities The system.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® DESIGN PROJECT PRODUCTION PHASES.
Wanderlust Ari Ashkenazi, Vince Blas, Brandon Bond, Sheena Kapur, Carolyn Scoville.
© 2007 AT&T Knowledge Ventures. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Knowledge Ventures. Interactive Solutions & Design Group.
PowerPoint Presentation for Dennis & Haley Wixom, Systems Analysis and Design Copyright 2000 © John Wiley & Sons, Inc. All rights reserved. Slide 1 Systems.
SE 431 Human Computer Interactions Jamal Nasir. How to design & build good UIs UI Development process Usability goals User-centered design Design discovery.
User Centered Web Site Engineering Part 2. Iterative Process of User-Centered Web Engineering Prototype Evaluate Discovery Maintenance Implementation.
User Interface Design Process Lecture # 6. CS Structure Understand the User Interface Design the User Interface Evaluate the User Interface.
The Dutch House of Representatives – a new corporate website Tessa Kelder – senior communications advisor / team leader.
Planning a Website Web Technologies I. The Site Design Process DEFINE Goals & Audience Content/Asset Collection Content/Style Information Delivery Requirements.
Part 4: Evaluation Chapter 20: Why evaluate? Chapter 21: Deciding on what to evaluate: the strategy Chapter 22: Planning who, what, where, and when Chapter.
A Design Process © 2011 Project Lead The Way, Inc.Introduction.
Motion. How DO drinking Birds work? Perpetual Motion.
Webinar December 2012 Presentation by Ulul Ilmi Computer Education and Instructional Technology Fatih University Wireframing & Prototyping UX.
High Fidelity Prototype Presentation Red Team. Requirements.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 26, 2004.
User Interface Design Process Gabriel Spitz. User-Interface design Steps/Goals Understand who are the users and what do they do Articulate how will users.
Usability & Prototyping Uday M. Shankar Yahoo! Bangalore India.
+ Privileged & Confidential Page 1 + Rich User Experience Documentation John Yesko.
UI Design without Prototypes ala Holtzblatt et al ITM 734 Fall 2006 Corritore.
Portfolio Anil Sutar Team Lead (User Interface Design) CUA (Certified Usability Analyst - HFI Mumbai)
Immersion Team Research Plans Afua Gyasi Kim Amin Kim Monti Matthew Mariani Rahel Woldehanna.
Single Sign-On (SSO) Single Sign-On (SSO) Strong Authentication.
UX Portfolio Derek Smith. Overview Slides to walk through the UX activities of a sample project Present key design elements of the sample project Some.
UX Homepage Wireframe with annotations – Rohit Maddipudi – 04/22 Legend: - Annotation; - Clickable object for display of more sectional information.
Web Page Layout Design Techniques From Moodboard to Mock-up.
Merja & Pauli Rapid prototyping & other stuff.
ToldNot Ideation, concept, wireframes, UI design in 2 days. 0.
Prototypes, Storyboards, and Flowcharts Ike Choi.
E-Library User Interface Redesign Sandra Davies Communicators’ Group Meeting 29 November 2005.
Web Design Graphical User Interface Navigation. Website Prototyping Plan your website Take time to plan the goal And outcome for your site Based on target.
Wireframes in Physical Design Yonglei Tao. 1-2 Website Wireframes A visual guide that represents the framework of a website Created for the purpose.
Computer/Human Interaction Fall 2015 Northeastern University1 Name of Interface Tagline if you have one Team member names and schools/years Team member.
Usability Tools & Testing. The Process Tools & Software Commercial OpenSource Hosting How to wireframe.
AN OVERVIEW BY JAMIE STARKE The Role of Prototyping.
CS4026 Formal Models of Computation Running Haskell Programs – power.
Computer –the machine the program runs on –often split between clients & servers Human-Computer Interaction (HCI) Human –the end-user of a program –the.
Requirements Information and data which need to be displayed or accessible to the user Sitemapping (Site Map) Flow Chart models of site structure displaying.
Usability presented by the OSU Libraries’ u-team.
Nothing fits the hand better then a glove. So I came up with the concept that the best form for the hand would be a glove. Thus a glove made into a mouse.
© 2017 SlidePlayer.com Inc. All rights reserved.