Thursday 19 February 2015

  1. Prototyping, Wireframing , Mockups

  • Need for Prototyping:
Whether it’s just a quick sketch in your notebook or a post-it note, a wireframe made using your favorite graphics software, or a high-fidelity mockup created by a web app — incorporating some form of prototyping within your workflow is a critical step. Checkout some reasons why prototyping is an integral part of the design process.

  • Understanding difference between Sketching, Wireframes, Mockups and Prototype.
Diff between Wireframe Prototype n Mockup.jpg
Confusing wireframes with prototypes is like assuming that an architectural blueprint (a detailed plan of a building-to-be) and a display house are the same thing.
A detailed article that talks about what exactly are wireframes, prototypes and mockups and when to use each one of them.

There are hundreds of wire-framing tools in the market, some online, some desktop-based, some free, and some paid.However choosing which one to use is a tricky decision.Taking advantage of trial downloads or free software and finding the one that fits in with the way you work is the only way of finding out which one is right for you.

What features do we look for in UI tools?

1. Web based application
2. Possibility of adding team members (clients included)
3. Comments available for all users
4. Variety of mockup creation components
5. Responsive design availability
6. Easy and fast file uploading
7. Compatibility of all mockups in a project. (a possibility to copy, move components)

Based on features each tool offers, here are top five tools for each step of UI design that I think may fit most of the design needs.
Sketching : Balsamiq, POP , White Boards
Wireframing : Balsamiq, Moqups ,Invision. Wireframe.cc , Lumzy
Mockups : Invision, Moqups , Lumzy, Gomockingbird
Prototyping : UXPin, Invision, Hotgloo, Proto.io, Solidify
Brief Description about each tool:
  1. Balsamiq :
Pros:
  • User-friendly interface that lets you drag and drop elements
  • It comes with a lot of prebuilt controls commonly used in web design saving you time and speeding up your output.
  • Intuitive to use with almost no learning curve so you can get started straight away.
Cons:
  • Balsamiq’s only flaw is the wireframes can look a little childlike and unfinished. However it succeeds in being the missing link between the sketch pad and computer.

  1. Moqups :
  • Plenty of Drag and Drop elements available.
  • Screens and buttons can be linked so you can publish a demonstration for your clients to view.
  • Images can be exported for specification diagrams.
  • Moqups help develop your projects whether they are browser-based or designed for mobile devices.
  • The two most engaging features about Moqups compared to other solutions is the unlimited team members that can be added to any project and the capacity to integrate with Google Drive and Dropbox.

  1. UXPin:
Pros:
  • Collaborative online design tool
  • Allows you to create wireframe and prototypes that are interactive.
  • UXpin will appeal to advanced users who want to spend more time creating beautiful full colour wireframes.
  • It’s intuitive and transparent interface offers wide range of features like rulers or guides just like in Photoshop.Also, they allow user customization which is very convenient.
  • Uses Javascript n HTML5 which is lightweight and reliable.
When it comes to work on mockups in a team, UX Pin ticks all the above features listed for a good UI tool.
Cons: The one thing which may bother someone is pricing. It’s $14,99 for one user only and there are no team packages.

  1. Solidify:
It is a complete tool that lets you create clickable prototypes specially oriented for user testing. You can test interfaces at any phase of development. It's possible to create responsive prototypes and connect with testers around the world. The tool gives you reports on highly valuable data about user behavior, such as where users click and other usability reports. You can try the app for 30 days. Monthly cost $19.

  1. Invision :
Pros:
  • Allows you to upload working designs and create interactions by using hotspots, just like any real application.
  • Invision App has been really useful for communicating the design transitions and journeys between screens to other team members.
  • One of it’s standout features is the ability to send clickable designs to your phone via SMS, underlining the importance of being able to test your designs yourself in context. Support for Android phones has also just been announced.

  1. Proto.io :
With proto.io you can create high-fidelity prototypes that work exactly like your real app would. Select devices and add components to create your interface. Proto.io was specifically created for mobile, so it can emulate screen transitions, orientation changes or touch gestures.

  1. POP (Prototyping on Paper) :
POP is a mobile app for Android and iOS that lets you import your sketches by taking a picture. POP automatically adjusts brightness and contrast to make sure your sketches are legible and clear.

  1. Hotgloo :
HotGloo helps you from low- to high-fidelity, from wireframes to prototypes - with HotGloo you can finally achieve great concepts in a fast, simple and beautiful way. Mock up an idea, gather feedback, review and improve over time.
Pros:
  • Plenty of Drag and Drop elements available.
  • Every component within HotGloo provides quite a bit of customization. Each control can be manipulated by position, size, border color, fill and much more in order to provide the exact look and feel for which you're looking.
  • Additional pages can be added to the project in order to allow you to present a flow of what an individual may experience when visiting the site. For example, you can develop the first page to be a login screen while subsequent pages provide a look that is experienced once a user has gained access.
  • Images can be exported for specification diagrams.
Cons:
Uses Flash- which, for this particular usage, is an out-dated technology. According to reviews available online it causes fans in Macs spins like crazy and reliability & speed might be an issue.

  1. Wireframe.cc :
Wireframe.cc has a super-minimal interface that give you an easy way to create elements. You can change the color of wireframes and create clear layouts to share.

  1. UX Resources:


  1. Information Sources for UI/UX :
  • LinkedIn :
  • UX Magazine (Company) : UX Magazine is free a community resource exploring all facets of experience design. They work closely with practitioners and industry leaders versed in all areas of UX to provide a steady stream of engaging and useful content.
  • Usability Matters (Showcase Page)
  • Usability Matters.Org (Group)
  • Usability.Org
  • Stack Exchange : UX :
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.Link : http://ux.stackexchange.com/

  • User Experience Professionals Association : UXPA :
The User Experience Professionals Association (UXPA) supports people who research, design, and evaluate the user experience of products and services.
UXPA holds yearly international conferences, publishes new findings through both the Journal of Usability Studies (JUS) and through User Experience Magazine, and has 50 chapters around the world. In 2004, UXPA established World Usability Day, which in 2011 was celebrated in 44 countries.
  • UX Mastery : Community : UX Mastery is an online resource for aspiring user experience designers.They are passionate about teaching others how to design websites, mobile apps and desktop apps that are useful, usable and delightful. They occasionally offer in-person training, but the main goal is to share experiences online—through blog, email newsletter, and their popular ebooks.. Link : http://community.uxmastery.com/
  • UX Booth : The UX Booth is a publication by and for the user experience community. Their readership consists mostly of beginning-to-intermediate user experience and interaction designers, but anyone interested in making the web a better place to be is welcome. Link : http://www.uxbooth.com/
  • Nielsen Norman Group : NN/g conducts groundbreaking research, evaluates user interfaces, and reports real findings – not what's popular or expected. With their approach, NN/g will help you create better experiences for real people and improve the bottom line for your business.They have some very useful articles on usability and its trends.Link : http://www.nngroup.com/
  • 28 Resources for Getting Started In UX : http://www.measuringu.com/blog/getting-started.php

1 comment:

  1. great article, you have done pretty good research on all the tools, one high fidelity prototyping tool that comes to my mind is Adobe Reflow you should check it :-) . It creates responsive prototypes and can be used for wireframing / mockup purpose too.

    ReplyDelete