Why Create a prototype f os y ov r pr ok ects? WIRE FRAMING Create a - PowerPoint PPT Presentation

WIRE FRAMING Why Create a prototype f os y ov r pr ok ects?

WIRE FRAMING Create a l ox -fidelity prototype f os y ov r pr ok ects - To give your idea a certain shape - Keeping it abstract - Resolution & size - User interface UI - Hierarchy Read: http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302 http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/

WIRE FRAMING Do webdevelopers and designers know what you want as a user?

WIRE FRAMING Human cent es ed The fast es a Prototype is made the fast es y ov will get results ab ov t the us es

Do they know what the user: Think, want, see, hear and smell

- as a process for problem solving We are all designers

UI User Interface

How to start? Can’t Build A House Without A Foundation - You don’t see home builders putting up a house without a blueprint

How to start - Sketch Brainstorm Target group? From Who? Main message? Content ? Visuals ? Text? .. Links? Subpages? it's function over form at this point.

SITEMAP FLOW CHART Mind Maps are useful tools to create a scheme from ideas Organize, and prioritise making visual connections Help the productivity in the creative process Order to the chaos

SITEMAP FLOW CHART http://mattdsmith.com/wireframing-with-illustrator-and-indesign/

Sketching.. Sketching is necessary for click through prototyping - it helps to organize the prototype and provides linkable assets. In participatory design, sketches record site maps, UI screens, user journeys and other early artifacts that form the project. Sketching has no technical barrier to entry

Sketching Communicating with the hole team • Whiteboard sketching as a team • Capturing ideas individually via paper templates • Brainstorming with a mobile application

How to start ? - Different programmes for wireframing Jot Pro ($30), Prototyping on Paper(or POP) app iPad, iPhone, Asus Transformer, Galaxy Tab and many more devices.

Balsamiq http://balsamiq.com/ http://balsamiq.com/products/mockups/mybalsamiq/ Web, Tablet or smartphone

Axure Workshop Axure The grandfather of wireframing tools, Axure was one of the first professional-class wireframing/prototyping tools. Until recently, it was only available on Windows - one of the most used tools http://www.axure.com FREE TRIAL

Hot Gloo www.hotgloo.com/ FREE TRIAL

Adobe Photoshop Save for Web to downsize your images

Adobe Photoshop + other programmes 1. Styles – you can save type and object styles and re-use them throughout, just like CSS. 2. It's easy to modify, move or scale multiple objects. 3. It a ff ords easy transition to Photoshop later.

Adobe Illustrator Good for quick, and complex wireframes, with no need for interactivity

Adobe Illustrator http://mattdsmith.com/wireframing-with-illustrator-and-indesign/

Wireframing 1. Creation 
 Create original artwork in a flexible and robust environment, where any shape or style of object imaginable can be created easily Concept & Repetition in your Design 
 Design once, and have the changes cascade throughout the whole document Interactivity 
 Create di ff erent states of a design in which the user can actively engage with the design and change the states of the prototype Animation & 
 Navigation Set up transitions between various states of an application http://www.smashingmagazine.com/2013/03/07/creating-wireframes-and-prototypes-with-indesign/

Adobe InDesign Just press “w” for preview mode Grids off or on

Adobe InDesign Supports animations Continue with the Layout http://www.smashingmagazine.com/2013/03/07/creating-wireframes-and-prototypes-with-indesign/

Adobe InDesign Change InDesigns application level settings before creating a wireframe Shortcut for preview mode W key http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399

Android smart phones resolution

Apple Iphone’s resolution Resolution size for Apple Iphones 2 ways: Responsive webdesign or customised mobile version

Resolution Resolution refers to the number of dots a screen shows per inch - some devices have a higher resolution than desktop computers and most operating systems allows users to adjust the resolution of their screens iPhone 4 13” MacBook 27” IMac iPad 2 Resolution: Resolution: Resolution: Resolution: 960 x 640 pixels 1280 x 800 pixels 2560 x 1440 pixels 1024 x 768 pixels Illu. TOF

Resolution - also for scrolling The density of the screen resolution is measured in "Pixels Per Inch," or PPI. The pixel density helps measure how much information is in each square quadrant of the phone. The iPhone 3G has a PPI measurement of 163, while the iPhone 4 has a PPI measurement of 326. http://www.kylejlarson.com/blog/2012/iphone-5-web-design/

What - are we using it for? Games E-mail Social networking Watching video’s/movies Reading news? Browse the Web Shopping related

Buttons - for fingers Sizes Minimum hit-size 44 x 22 px Min. space between hit-sized elements 12 - 22 px Icons 29 x 29 px (with a 5 px borderadius Finger tip targets 44 x 44 px iPhone icon (for the home screen) 57 x 57 px iPad icon (for the home screen) 72 x 72 px Declarations to put in your header <meta name=“apple-mobile-web-app-capable” content=“yes” /> (removes Safari standard navigation) <meta name=“viewport” content=“width-device-width, user scalable=no” /> (disables scalability) <link rel=“apple-touch-icon” href=“_images/touchicon.png” /> (adds the icon for the user’s home screen)

Tapping - sizes http://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

Designing for mobile devices • Use typography to show hierarchy and importance • Features are logically displayed • Large buttons are used to make interactions actionable Avoid: TMN = T oo M uch N avigation Large number of navigation options gives each less space

Designing for mobile devices 1: Consider 2: Consider Simplicity White space Fingertip space for Touch screen 44 x 22 pixels minimum for iphone 44 x 44 best size

Designing for mobile devices 4: Consider 3: Consider Prioritize your content Images (or lack of) Fun Entertainment Focus on the user : Don’t try to be all things to all people. Serious It’s more important to measure functionality Tool Pick the most used features and highlight

Navigation? - phones / web SmartPhones Horizontal or vertical or both Tablets both directions possible For web only one direction important to show functionality

Exporting graphics for web

Exporting graphics for web The Photoshop “Save For Web” utility allows two options for saving PNGs: PNG-8 i it uses 8 bits for a maximum of 256 indexed colors. It supports transparency in the same way that GIF does: each pixel can either be visible or invisible. File sizes are often slightly smaller than GIF. PNG-8 is often preferred over GIF. PNG-24 is analogous to JPG, in that it uses 24 bits per pixel (8 for red, 8 for green, and 8 for blue) for a full range of color possibilities. It also supports full alpha-channel transparency, meaning rather than representing each pixel as either fully transparent or invisible, it can properly represent partially transparent pixels. File sizes are much larger, so this format should be used sparingly. In cases where full-alpha transparency is required, this is the format of choice. To compress files further - use www.8bitalpha.com

I will start right away!

ASSIGNMENT: Create a Wireframe for 1. Fictive Fruit Company or a 2. Personal website for a Sportsperson Make the wireframe for 2 different devices: first mobile Show it to your classmate next to you, and then see if there might be corrections… 1.Sitemap of site 2.Hierarchy (Priority 1, 2 and 3) 3.Content 4.Show it to your classmate next to you. 5.Can your classmate improve the site? 6.Switch assignments Paper prototyping

ASSIGNMENT: Lav en Wireframe til et 1. Firma, der sælger frugt eller 2. Personlig hjemmeside for en atlet/sportsudøver Lav en wireframe/prototype til 2 forskellige (mobil og web): først mobil 1.Sitemap af siden 2.Hieraki (Prioritet 1, 2 & 3) 3.Indholds bokse med overskrifter 4.Vis det til din klassekammerat og byt opgave 5.Giv feedback til hinanden 6.Lav den anden opgave Paper prototyping

The Golden Ratio A good measurement to use

Links - wireframing TRY for di ff erent devices http://quirktools.com/screenfly/ http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399 http://www.smashingmagazine.com/2013/03/07/creating-wireframes-and-prototypes-with-indesign/ http://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ http://mattdsmith.com/wireframing-with-illustrator-and-indesign/ Try for free: http://balsamiq.com/products/mockups/mybalsamiq/ Font awesome icons http://fortawesome.github.io/Font-Awesome/ http://fortawesome.github.io/Font-Awesome/cheatsheet/ http://fortawesome.github.io/Font-Awesome/icons/ http://www.lynda.com/Photoshop-tutorials/PNG-8-website/162712/168346-4.html