WIRE FRAMING

Why Create a prototype for your projects?

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

WIRE FRAMINGDo webdevelopers and designers know

what you want as a user?

Human centered

WIRE FRAMING

The faster a Prototype is made the faster you will get results about the user

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

- as a process for problem solving We are all designers

UIUser 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 - 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

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 affords 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

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

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

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

Android smart phones resolution

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

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

I will startright away!

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

The Golden RatioA good measurement to use

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