Wednesday, July 31, 2013

Role of a UI Designer

When people ask me what do I do? I try to explain them in all sorts of manner to impress and be proud of something great I do. And they accept me as a photoshop designer... phew!! It is so difficult to make them understand the myriad capacity of a Designer. The Design process is crucial to be followed as each step adds quality to the final output.

Mainly the Product Development Life cycle has 4 phases:
Discover, Design, Develop and Deliver.
Although as the name suggests, the involvement of a UI designer is not only in the Design Stage but also expected in the Discovery Stage. Lets take a brief understanding.

Step1: Understanding

UI Designer needs to work closely with a cross-functional team that includes product development, business analysis, quality assurance and marketing teams to provide his experience in creating elegant UI.

Customer Touch Point Analysis

A Graphic Designer, is not expected to have in-depth knowledge of Usability, hence he is not involved in the discussion.

Step2: Wireframing

Once the UI team receives the Product Requirement Document, they study them to make a low fidelity Wireframe(Experience in tools like Balsamiq, Axure or even a sketch on white board).

Rough Sketch Wireframe

Wireframe is the backbone of the Interface. It is important to adhere in there
  • the main groups of content (what?) 
  • the structure of information (where?) 
  • a description and basic visualization of the user – interface interaction (how?) 

The fastest way to get something out of our heads is to grab a pen and a sheet of paper and quickly sketch it out.


Step3: Prototyping & Designing

These wireframes are approved and detailed pixel perfect UIs and interactive Prototypes are created then. Focusing on usability the team need to leverage rapid prototypes.

Here the Graphic/Web Designer(Experience with InDesign, Photoshop, Illustrator)'s role is crucial. He needs to create color palettes, set Grid Layout, choose the right typography, create detailed iconography and deliver the design with final production assets.

Wireframe to Prototype


Many a times the Project Manager pushes to follow the Use Case. But there is a need to understand that at times part of use case may fail. A UI expert is expected to understand when to tweak the laws.

Step4: GUI documentation

The UI designer needs to make a Design Guideline / GUI document simultaneously for maintaining
consistency of design. It may contain more or less the following:
  • Language /Tone Style
    • Mission, vision, and value proposition
    • Target audience description and persona
    • Brand attributes
    • spelling and punctuation, numbers, capitalization, lists
  • Visual Style
    • Logo: colors, minimum size, clear space
    • Fonts
    • Service description and tagline
    • Brand vocabulary
    • Web elements: color, size, style

Logo and UI Guideline

The visual design specifications need to be documented for project managers, programmers to refer on timely basis. 

Step5: Front-end Development

The UI developers (Fluent in UI modeling tools like Adobe Suite and Languages like HTML/CSS/Jquery) work with the development team to implement front-end design into actual code.

Developer's job done easy
  

Step6: UI Testing

UI designer also does the usability testing through direct observation and A/B testing.

If you’re the stereotypical “technical” or “business” founder of a startup, partnering with a designer co-founder can give you an important advantage and help you achieve early success.

Source: designerfounders.com also designstaff