Wireframing

Written on 30 December 2016, 10:38pm

Tagged with: , , ,

These are some notes that I took while skim-reading The Guide to Wireframing.

What are wireframes?
Wireframes connect the conceptual structure to the visual design of a website/app.
They communicate 3 main points:
– Content
– Structure / Information Hierarchy
– Behavior / Functionality

How to do wireframes?
– paper drawing (sketching)
– whiteboard drawing
– paper kits (cutouts)
– digital drawing (Wacom devices)
– word processing software (Word, Google Docs, etc)
– presentation software: PowerPoint, Keynote
– graphic design tools: Adobe Illustrator, Adobe Photoshop, Sketch
– dedicated wireframing and prototyping tools: Balsamiq, proto.io, Axure, UXPin, InVision

Advantages of the dedicated wireframing tools
– element libraries
– flowcharting and user flows
– interaction with the wireframe: some wireframing tools offer the possibility to interact with the wireframes in order to showcase the behaviour (click-thgrough experience)
– collaboration (comments, feedback)
– presentation (pdf/ppt or standalone presentation mode)

Final point to remember
Delivering wireframes is not a goal in itself. The goal of wireframing is to deliver the final product, not the wirefames. So don’t aim for the perfect wireframe: as long as your wireframe delivers the intended message, move on.

Little details

Written on 15 April 2014, 09:20am

Tagged with: , , ,

Since reading Designing for emotion I’ve been paying attention to the emotional component of the web. Most of the times it’s not present, some other times is very visible, and in some cases, it’s hidden. The people at Balsamiq Floris Dekker created LittleBigDetails.org – a place where they collect the small, hidden, fascinating details that contribute to a great user experience. One of the latest impressive things I found there is the float label pattern – that changes the placeholder to a label on focus (initial idea from @mds, see demo).

Back to the little big details, I started to see them myself. For now, here are two:

1. Flickr link to jobs page

If you view source you’ll see an ASCII text logo and a link to the flick jobs page: “You’re reading. We’re hiring. https://flickr.com/jobs/

flickr view source

2. Hidden swoosh in dutch football shirt crest

The Netherlands football kit designed by Nike feature a lion crest with the tongue forming a subtle Nike swoosh. The new lion is present on both home and away kits, and the lion head is quite different from the KNVB (Dutch Fooball Federation) logo:

swoosh 1swoosh 2
swoosh 3swoosh 4
swoosh 5

The lion has has been a focal point of the Dutch kits for more than 100 years, appearing in both black and white over the decades. Recently, the KNVB crest had portrayed just the head of the lion with a crown over it. Nike have changed that with a “rampant” lion that is white and enlarged, taking a very prominent spot on the shirt and immediately drawing the viewer’s eye to it.
sbnation.com