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 fos yovr prokects?

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 lox-fidelity prototype fos yovr prokects

• To give your idea a certain shape
• Keeping it abstract
• Resolution & size
• User interface UI
• Hierarchy

WIRE FRAMING

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

Human centesed

WIRE FRAMING

The fastes a Prototype is made the fastes yov will get results abovt the uses

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

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

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/

Interactivity


Create 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 Layout

Supports animations

Adobe InDesign

Change InDesigns application level settings before creating a wireframe

Shortcut for preview mode W key

Android smart phones resolution

Resolution size for Apple Iphones

Apple Iphone’s resolution

2 ways: Responsive webdesign

• r

customised mobile version

13” MacBook 27” IMac Resolution: 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 2 Resolution: 1024 x 768 pixels iPhone 4 Resolution: 960 x 640 pixels

Resolution

Resolution - also for scrolling

What - are we using it for?

Games E-mail Social networking Watching video’s/movies Reading news? Browse the Web Shopping related

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

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 Navigation

Large number of navigation options gives each less space

1: Consider

Simplicity

2: Consider

White space

Fingertip space for Touch screen

44 x 22 pixels minimum for iphone 44 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 start right away!

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

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

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