why
play

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

May 27, 2023 •356 likes •805 views

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

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

  3. 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/

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

  5. 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

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

  7. - as a process for problem solving We are all designers

  8. UI User Interface

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

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

  11. 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

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

  13. 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

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

  15. 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.

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

  17. 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

  18. Hot Gloo www.hotgloo.com/ FREE TRIAL

  19. Adobe Photoshop Save for Web to downsize your images

  20. 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.

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

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

  23. 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/

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

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

  26. 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

  27. Android smart phones resolution

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

  29. 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

  30. 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/

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

  32. 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)

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

  34. 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

  35. 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

  36. 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

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

  38. Exporting graphics for web

  39. 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

  40. I will start right away!

  41. 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

  42. 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

  43. The Golden Ratio A good measurement to use

  44. 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

Recommend

More recommend