Create a prototype f y r pr ects? - WordPress.com · Balsamiq Web, Tablet or smartphone. Axure...
Transcript of Create a prototype f y r pr ects? - WordPress.com · Balsamiq Web, Tablet or smartphone. Axure...
http://www.smashingmagazine.com/2010/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
WIRE FRAMING
Read:http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302
Create a low-fidelity prototype for your projects
- To give your idea a certain shape
- Keeping it abstract
- Resolution & size
- User interface UI
- Hierarchy
Human centered
WIRE FRAMING
The faster a Prototype is made the faster you will get results about the user
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 - SketchBrainstorm 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
http://mattdsmith.com/wireframing-with-illustrator-and-indesign/
SITEMAP FLOW CHART
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..
• Whiteboard sketching as a team • Capturing ideas individually via paper templates • Brainstorming with a mobile application
Sketching Communicating with the hole team
Jot Pro ($30), Prototyping on Paper(or POP) app
How to start ? - Different programmes for wireframing
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
http://www.axure.com FREE TRIAL
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
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 affords easy transition to Photoshop later.
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
http://www.smashingmagazine.com/2013/03/07/creating-wireframes-and-prototypes-with-indesign/
InteractivityCreate different states of a design in which the user can actively engage
with the design and change the states of the prototype
Animation &Set up transitions between various states of an application
Navigation
Adobe InDesign
http://www.smashingmagazine.com/2013/03/07/creating-wireframes-and-prototypes-with-indesign/
Continue with the LayoutSupports animations
Adobe InDesign
Change InDesignsapplication level settings before creating a wireframe
Shortcut for preview modeW key
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399
Resolution size for Apple Iphones
Apple Iphone’s resolution
2 ways: Responsive webdesign or
customised mobile version
13” MacBook 27” IMacResolution: Resolution:1280 x 800 pixels 2560 x 1440 pixels
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
Illu. TOF
iPad 2Resolution:1024 x 768 pixels
iPhone 4Resolution:960 x 640 pixels
Resolution
http://www.kylejlarson.com/blog/2012/iphone-5-web-design/
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.
Resolution - also for scrolling
What - are we using it for?
GamesE-mailSocial networkingWatching video’s/moviesReading news?Browse the WebShopping related
Sizes
Minimum hit-size 44 x 22 pxMin. space between hit-sized elements 12 - 22 pxIcons 29 x 29 px (with a 5 px borderadius
Finger tip targets 44 x 44 pxiPhone icon (for the home screen) 57 x 57 pxiPad 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)
Buttons - for fingers
Tapping - sizes
http://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
• Use typography to show hierarchy and importance
• Features are logically displayed
• Large buttons are used to make interactions actionable
Designing for mobile devices
Avoid:TMN = Too Much NavigationLarge number of navigation options gives each less space
1: Consider
Simplicity2: Consider
White space
Fingertip spacefor Touch screen44 x 22 pixels minimum for iphone44 x 44 best size
Designing for mobile devices
Fun Entertainment Serious Tool
3: Consider
Images (or lack of )
Designing for mobile devices
4: Consider
Prioritize your content
Pick the most used features and highlight
Focus on the user: Don’t try to be all things to all people. It’s more important to measure functionality
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
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.
The Photoshop “Save For Web” utility allows two options for saving PNGs:
To compress files further - use www.8bitalpha.com
ASSIGNMENT:
Create a Wireframe for1. Fictive Fruit Company or a 2. Personal website for a Sportsperson
Make the wireframe for 2 different devices: first mobileShow 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 et1. Firma, der sælger frugt eller2. Personlig hjemmeside for en atlet/sportsudøver
Lav en wireframe/prototype til 2 forskellige (mobil og web): først mobil
1.Sitemap af siden2.Hieraki (Prioritet 1, 2 & 3)3.Indholds bokse med overskrifter4.Vis det til din klassekammerat og byt opgave5.Giv feedback til hinanden6.Lav den anden opgave
Paper prototyping
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399
Links - wireframing
http://www.smashingmagazine.com/2013/03/07/creating-wireframes-and-prototypes-with-indesign/
http://mattdsmith.com/wireframing-with-illustrator-and-indesign/
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/
Try for free:
http://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
http://www.lynda.com/Photoshop-tutorials/PNG-8-website/162712/168346-4.html
http://quirktools.com/screenfly/
TRY for different devices