The Best Mockup Tool – HTML5 based

Love exploring and searching Prototyping tools. Today I have came to know about – https://moqups.com/#!/  from one of my friends, this is exceptional HTML5 based.


I have just tried couple of template to understand/explore these tool, first impression is really great. It has all the basic and very regularly used elements.


How it works – very smooth and fast :), just matter of drag and drop | double click edit | linking pages | publishing in png or PDF format.


NOTE – This works good with CHROME, FIREFOX and SAFARI

Radio Button to Toggle Button

if we are looking for solution where you need Radio button as Toggle button, here is one interesting solution. This we can achieve with just CSS. I have got this solution from http://jsfiddle.net/RkvAP/596/

Copy this Style in Header
body {
    font-family:sans-serif;
}

#bounds {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:5px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#bounds label {
    float:left;
    width:2.0em;
}

#bounds label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#bounds label input {
    position:absolute;
    top:-20px;
}

#bounds input:checked span {
    background-color:#404040;
    color:#F7F7F7;
}

Copy this Style in Body
div id=“bounds”
    <label><input type=“radio” name=“toggle”><span>Onspan>label>
    <label><input type=“radio” name=“toggle”><span>Offspan>label>
/div



Solution for Vertically Lengthy Pages

HTML5 Rocks is one of the best site on Internet for HTML5 learning, examples and articles. While visiting this site today, have noticed one very interesting feature which can be very useful for any site/portal which has tons of information and vertical scroll bar on interface.
Attaching two snaps here,
1. we can see one SMALL FLOATING “+” symbol/icon
2. onclick this shows ALL THE TOPICS of page, user can easily move from one section to another.

Great Great feature, believe this can be big selling point for portals/sites. I believe Wikipedia should implemetn this, it will make user job easy to scan/read content.

UI Guidelines reference

as a part of UX Process and Design process, coming with Design Guideline document is very important part. This is very important for client sign off and for dev process. This is great way to set standard and define mood of brand/application. while searching for some reference on net, got to see a great place where i can get some of the best guidelines of different companies.
love to share here –

http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-style-guides/

please have a look and book mark this one

PowerPoint – Great Prototyping Tool

I have been big fan of powerpoint prototyping.. in most of the projects to do IA i have taken PPT approach.
Strong reason, very easy tool to handle and share with others. Beauti which makes PPT more useful/powerful its universal kind of app for maximum users, it makes Customer/reviewer  job easy to give comments on your wireframe/story. For them its just matter of putting Block and writing their comments with in that. Yes, you can do low to high fidelity in prototypes.

Recently Microsoft has launched PPT Storyboarding feature with Visual Studio 11. There are great blogs, request please have a look at http://msdn.microsoft.com/en-us/library/hh409276(v=vs.110).aspx.

First time when I came to know about this, question was
Do I need to have Visual STudio to have Storyboard feature and tools in my PowerPoint?
Answer – NO


Yes, we can just install .msi and ll be ready with our Storyboard feature within Microsoft PowerPoint.

I started using this for my couple of projects, believe me its great experience. I started loving this.
here is very good article + downloadable file – http://www.codeproject.com/Articles/267121/StoryBoard-Template-in-Powerpoint

If you are interested to read Storyboarding concept, please have a look at my own thoughts/concept – http://artsmaths.blogspot.in/2010/04/storyboarding-great-concept-we-addapted.html

Same IA for two popular websites

I have been big fan of Cleartrip, very neat and simple app…  as user when I go with my goal to this app, it tells me minimum way to achieve that.
Today I thought of trying out Expedia,, was shocked by seeing that both have same Information architecture and interaction pattern + look and feel too.

If we hide header, no way to know on which site/app we are. I am not sure if its from same company or not.





What is Metro Design

There are definitions on net, from my understanding its design canvas where each element has its own Information and Interaction. It sounds very similar to Vector definition (A quantity having direction as well as magnitude).

one of the best beautiful part of it, that this stands out from crowd. Even Metro concept has came from Railway station and Airport where we can find signboards whch stands out from these heavily public places and guide us to achieve our goal. 

Motion Design | Motion Animation

I was looking for some material which talks about Motion Design, yes there are plenty of information on net… again while doing research (SEARCHING AGAIN AND AGAIN – RE – SEARCH ), got great  materials

– Video – http://motion-plus-design.com/english/
– Article – http://motiondesign.wordpress.com/2009/04/12/tv-graphics-education-information-design/ please use Translator to understand this.

One of the very important i realize being in UX domain.. i think its applicable for everyone that we need to always promote our domain and create awareness for others. There are different ways to do it, one of the easiest way in the world is having Meaning ful POSTERS.

If you folks are looking for some ideas or references, yes we have tons of information on net 🙂 but if you ask me one place where you can get abstract material.. here you go http://www.lukew.com/ff/entry.asp?156

These are from my fav Lukew