Visual Design Progress

The dash­board and prop­erty details over­all struc­ture and visual design is complete.

Here’s the evo­lu­tion of the design of those pages from wire­frame to final design.

Property-Details-Rates-Prototype8

Edit prop­erty rates page on 8th ver­sion of the wire­frame pro­to­type cre­ated with Axure

PropertyRatesEdit_prototype10

Detail of edit prop­erty rates page on 10th ver­sion of the wire­frame pro­to­type cre­ated with Axure

RatesPageFinal

Edit prop­erty rates page final design

Dashboard_prototype8

Dash­board page on 8th ver­sion of the wire­frame pro­to­type cre­ated with Axure

prototype10_dashboard

Dash­board page on 10th ver­sion of the wire­frame pro­to­type cre­ated with Axure

Dashboard_Final

Dash­board — Final Design

 

Dashboard_Exclusive_Hosting

Dash­board with exclu­sive host­ing turned on — Final design

Interactive Walkthrough Prototype Plan

I fin­ished the plan­ing for the inter­ac­tive pro­to­type that I will present on the Final Review on May 17th.

It con­sists of an inter­ac­tive walk­through with 4 sce­nar­ios and 16 indi­vid­ual tasks. It is divided in two sec­tions for the dif­fer­ent tar­get users: guests and hosts.

The users will be taken through the pro­to­type with popup guid­ing mes­sages made with jQuery. All the user have to do is fol­low the instruc­tions that pop up.

Click on the image to see the info­graphic (plan) in large format.

Interactive Walkthrough Prototype Plan

Design process example “20 Things”

This is a great video show­ing the design process behind the cre­ation and pre­sen­ta­tion of the inter­ac­tive web­site “20 Things I Learned About Browsers and the Web” by inter­ac­tive design agency Fi — Fan­tasy Inter­ac­tive.

Fi’s process of cre­at­ing design for “20 Things I Learned About Browsers and the Web” inter­ac­tive book.

See full cas­es­tudy.

Project typeface — Museo Sans by Jos Buivenga

I decided to use one sin­gle type­face for the appli­ca­tion: Museo Sans by Dutch type designer Jos Buiv­enga.

Museo Sans is a sturdy, low con­trast, geo­met­ric, highly leg­i­ble sans serif type­face very well suited for any online dis­play and text use. It comes in 4 weights: 100, 300, 500, 700 and 900. The type­face is based on the famous Museo by the same designer. Jos Buiv­enga also cre­ated other type­faces that I admire like Cal­luna, Cal­luna Sans, Museo Slab (used on this blog’s head­lines), Anivers, and Fer­tigo Pro.