UX Design Techniques

Sketch

Sketching consists of drawing the structure of the pages and their single elements (as menu, carousel, call to actions...)
Benefits: it's the perfect way to share first ideas with colleagues / customers.
Suitable for early brainstorming: the ambiguity and lack of details in this phase is positive because it allows us to bring out new ideas.

Sketching  for a multilevel magazine

Wireframe

The wireframe are schematic illustrations of the main pages of the site, composed of clean lines and without graphics.
Benefits:

  • Focus attention only on the product architecture and pages content without the distractions of graphics

  • They are the basis of the prototype

  • Help graphics and developers to understand which elements and functions will be built.

Best wireframe tools

Wireframe for a Game APP (tool: Balsamiq)

Wireframe for a Game APP (tool: Fireworks)

Flow-wireframe

Wireframe + flowchart for Game App: is my favorite method to show pages' layout + user flow + the structure of the product at the same time

Prototype

madamuse.gif

Prototypes for a exhibitions site "Madamuse" (Adobe Xd)

Understand if we are building the right thing: where do users get confused? Which parts are not clear? Which are complicated to build? Which parts are too simple? Unnecessary?
Prototyping helps greatly to solve the problems we are planning for. It allows to check if your products are ok in each stage of the design process and in all the devices.
Last but not least it's the main method to check also interaction design features as feedback, transition, animations in response of users' input.
I use Balsamiq Mockup, Invision and Adobe XD mostly


 

There are a lot of tools to prototype: