ITM 407: Human and Technology Interaction Management Chapter 9. Design Production Dr. Evren Eryilmaz

Introduction 2

Wireframes Wireframes are a visual representation of an interface Simple block diagrams that show placement of elements in an interface One of the best ways to encourage stakeholders to provide comments is to follow the basic rule of "show, don’t tell." Popular practice in industry for designing web sites 3

Wireframes answer Structure: How will the pieces of a web site be put together? 4

Another Structure Example Breadcrum 5

Wireframes answer Content: What will be displayed on a web page? 6

Wireframe content Looks good but… 7

Wireframes Answer Information Hierarchy: How is information on a page organized and displayed? 8

Wireframes Answer Functionality: How will the interface work? 9

Wireframes Answer Behavior: How does the user interact with the application/ website? 10

Wireframes Answer 11

Wireframes do not This is a bad Wireframe! 12

Usage Show clients, designers, developers and other stakeholders the design. Helps get validation on the design before the visual design and development phases. Creators work hand-in-hand with those creating the business requirements (sometimes they are the same people). 13

Who uses Wireframes? 14

Who uses Wireframes? 15

Wireframing in Agile Projects Wireframing fits perfectly with the Agile mindset It encourages team members to actively communicate and work together across different disciplines. It results in lightweight, easy-to-digest wireframe diagrams instead of verbose, comprehensive documentation. It promotes early and ongoing feedback from users and customers. It allows for an iterative approach beginning with rough sketches that evolve into the final design. 16

Advantages of Wireframing Improvements in team working Clear communication A more engaged client Numerous, cost-effective wireframing tools available 17

Advantages of Wireframing A basis for testing A greater willingness to change Faster and cheaper projects 18

Different Varieties of Wireframes Low-Fidelity Wireframes 19

Different Varieties of Wireframes Medium-Fidelity Wireframes (Mockups) 20

Different Varieties of Wireframes High Fidelity Wireframes 21

Practical Wireframing Tips Get feedback early and often Don’t get too attached to your wireframes Take the user’s perspective Don’t be afraid to experiment different layouts 22

Practical Wireframing Tips Use annotations and notes where needed 23

Practical Wireframing Tips Create storyboards to visualize interactions Don’t hand out wireframes without proper explanation Know when you are done 24

Wireframing Example 25

How to start? Step-1 26

Representing Pictures in Header Step-2 27

Header and Footer Step-3 28

Information Below Header Step-4 29

Content in Internal Table Step 5: 30

Content in Internal Table Step 6 31

Putting Annotations Step 7 32

Free Online Wireframing Tools MockingBird Page 1 Linked to Page 2MockingBird

Free Online Wireframing Tools MockingBird Page 2MockingBird 34

Free Online Wireframing Tools Moqups Page 1 with Annotations and Linked to Page 2Moqups 35

Free Online Wireframe Tools Moqups Page 2Moqups 36

More Free Wireframing Tools ng-tools/ 37