Sketching & Wireframing Activity

     This blog post is about the last week’s class activity in CGT 512.  And, I should say that this is by far the best class I have had in this course.  This makes me ask – Why not every class was designed like this, Dr. V ? :).  The activity was about Sketching and Wireframing for an iOS application for Purdue University Students to check their scores on Black Board.  Doek, Kanrawi and John are the people in my team.  It was very much practical and made us to implement our learning from the previous classes in this semester, this class would not have been enjoyable if we had not learned anything in them.  In short, this activity was like ‘Icing on the Cake’.  The 3 hours just flied.  What follows is the collage of our Wireframes , Sketches and our process in doing the  same.  In particular, I understood the importance value of ‘Brainstorming’ and gathering ideas.

1. Discussion of the Idea :

– Before moving in to the phase of Brainstorming, we first discussed the question. i.e., the core idea and theme of having the application.  This helped us understand the main goal of design first.

2. Brainstorming

– Then, we moved into the process of Brainstorming.  We took utmost care not to eliminate any ideas.  We gathered every idea from each of us and noted them down.

   a. Scenarios :

   First, we decided on the scenarios using the ideas.  But, for describing the describing the features – during the process, everyone came up with a mock up UI of their idea.  Every idea was different was different, unique but also sensible.

   b. Features :

   Using the scenarios, we were able to uncover the features of the application by understanding the needs of the persona in the specific scenario.  ( This is what I call, User Centered Design. ;). ).  At one point we had a confusion while discussing the features, because Me and Kanrawi were Android users, Doek and John were iOS users.  So, we had to unify the design language that we used to describe the features, navigation flow and button placements with respect to iOS.  Since, this was an iOS application.

3. Sketching & Storyboarding :

After unifying the design language of the application, everyone took a feature and started sketching the UI.  We did not have required flow and fluidity in the sheets of paper.  So, I divided the board into three sections.  One section is for everyone writing their ideas in specific categories.  The categories in one section were personas, scenarios and features.  This greatly helped us in defining the core ideas.  The other two sections were Storyboard and Wireframes.

4. Wireframing :

   Since, we had every source neatly organized in our hands and board, it was very simple to design the Wire frames.  Then, we organized everything in place for the visit by every other team that followed the activity.  Previously, in my workplace I used to draw wire frames. I felt difficulty in doing that.  Since, I was the only person who would both program and design interfaces, sometimes I would not have a clear vision.  I did not know about personas and scenarios then.  Now, I am sure that  it won’t happen again.

   Following the visit, I felt real happiness in the appreciations by the peers in the class, commenting on our storyboard designs and wire frame designs.

Thanks. :).

Advertisements

Cool Resources for UI Sketching & Wireframing

Friends, after this week’s reading about Sketching, Wire framing and Prototyping, I decided to post some cool resources which I have been using for a while now.  I am just going to post the 5 best resources according to me.  But,  this time according to the creams of every platform.  :).

01. Windows App (Sketching and Prototyping Tool):

Microsoft Sketchflow – http://www.microsoft.com/expression/products/Sketchflow_Overview.aspx

Adobe Fireworks CS4 – http://www.adobe.com/products/fireworks.html?xNav=WPFW

02. iPad App :

UI Sketcher App – http://uisketcher.com/

03. Web App :

DENIM (By University of Washington) – http://dub.washington.edu:2007/denim/

04. Apps for Mobile Prototyping :

DesignerVista – http://www.designervista.com

Proto.io – http://proto.io/

05. Resources – Wireframing & Sketching :

GUI Prototyping Tools –http://c2.com/cgi/wiki?GuiPrototypingTools

Smashing Magazine    – http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/

Konigi Wireframing    – http://konigi.com/tools/tags/wireframing

Konigi Sketching          – http://konigi.com/tools/tags/sketching

The Important ‘5’

     Greetings again, Friends.  I have tried to post this for a long time but today at last I found the time to compile everything.  Here is my list of best in everything of HCI, Interaction Design and Usability.  This compilation is completely my own views and the numbers next to the items just represent the order and not their ranking.

The ‘5’ Best UX Blogs to follow :

EverydayUX

UserInterfaceEngineering

bokardo (Social UX Design)

Putting people first

GraphPaper

The ‘5’ Best UX Websites to Learn :

Boxes & Arrows

UXMagazine

Smashing Magazine UX Design

UXMatters

A List Apart

The ‘5’ Best Books to learn the Rules of Web Usability :

1. Don’t Make Me Think By Steve Krug

2. Letting Go of the Words By Janice Redish

3. Information Architecture for the World Wide Web By Morville and Rosenfeld

4. Prioritizing Web Usability By Nielson + Horanger

5. The Big Red Fez By Seth Godin

The ‘5’ Tweeters to follow for Usability :

1. @jmspool

2. @ixda

3. @bokardo

4. @janepyle

5. @usabilitycounts

The Important persons in UX to learn the rules from :

1. Jakob Nielsen

2. Donald Norman

3. Jared Spool

4. Alan Cooper.

The best labs for Innovation in HCI :

1. MIT Media Lab

2. Human Computer Interaction Institute in CMU

3. Human Computer Interaction Lab in University of Maryland

The upcoming products in HCI that will change everything :

1. Google’s Project Glass

2. Oculus Rift VR Headset

Thanks, :-).  I sometimes wonder why I find it tough to navigate in Jakob Nielsen’s website even after being the best in the field.  Is it only for me or is it a Food for thought ?  Kindly, post your views in the comments, Friends.

Movies on ‘Typography’ & ‘Visualization’

     Friends,  I thought I definitely should share this.  There is a series of documentaries by independent film maker – Gary Hustwit, called as the ‘Design Trilogy‘.  All the three movies are must watch for Designers.  Of the three movies, Helvetica is a movie which is completely based on typography.  After last week’s presentation on ‘Typography’, I got reminded of Helvetica.  Mike Parker, the typographer of ‘Helvetica’ would have talked in the documentary.  I never knew that so much details goes into while designing a typeface.  It is visual treat to watch the details that goes into the alphabets while crafting them.  I have embedded the trailer below to get a sneak peek on the documentary.

Helvetica In Motion from Positive Pictures on Vimeo.

     Also, Edward Tuefte has posted the movie ‘Teaching To See’ in his Vimeo channel.  ‘Teaching To See’ is a movie on Inge Druckerey,  a teacher on Visualization.  This movie is all about the how she taught her students to Visualize.  :).  This is documentary movie is must watch for getting a different perspective on looking at designs.  I have the embedded the movie from ET’s channel below.

Inge Druckrey: Teaching to See from Edward Tufte on Vimeo.

Thanks. :).