Craft of UI Development: Why awesome UI Developers are key to creating a great product experience

Great idea+ great design + flawless execution= Gorgeous UI

What translates the design to a product is the execution and the quality of execution is what determines the quality of product. An architect’s sketches will remain sketches without the technology and the crew to realize it.

What is craftsmanship?

‘Craftsmanship is doing what you love and doing it right. No matter what you do—designer, baker, electrician, architect, author—your job is your craft. Learn to think of your work as practice towards becoming an absolute expert at what you do. Craftsmanship is not a destination; it’s a life-long discipline.’ – Dave Gamache

An awesome UI Developer has the following qualities of a fine craftsman

• Quality of work
  • Pays attention to details
  • Has an eye for nuances of alignment, typography and color.
  • Looks at quality of work as reflection of one’s self/brand
• Passion for betterment
  • Is receptive to dreamy design ideas and sees it as a way to push the boundaries of technology
  • Uses technical possibilities to broaden the design possibilities
  • Actively participates in design reviews and validations
• Experience
  • Is on the bleeding edge of UI trends/technology
  • Remembers the success and failure lessons from the past that teach you what works and what doesn’t and, how to fix something that’s broken

And of course…

• Has skills to code

Why product quality matters

• 105% is the new perfect -With the proliferation of great design solutions in consumer apps, the user expectation is high
• Interfaces have become super seamless and the tolerance level for sub standard design implementation is low
• Tarnishing a brand is super simple – Sentiments and criticism have no mercy in the age of social media
• Design is the differentiator – Competition is a lot higher and there are many people building similar or the same thing
• Product doesn’t look professional if finer details are compromised. The devil is in the details.

Taming the Devil – How to pay attention to details

• Copying is good – from UX Design Spec
• Observation – look at good designs beyond software
• Become design aware – dissect great UI designs
• Screen basics to follow while implementing a design:
  • Grids: Use grids to align objects
  • Font sizes – pay attention to visual specifications as they establish hierarchy
  • Use consistent styling for similar objects (ex.hyperlinks, buttons,etc)
  • Interactions, animations and transitions – they have meaning and are not just eye candy
  • Field labels capitalization: Follow consistent sylte of either title case or sentence style as per the guidelines
  • Text truncation – Visually indicate that text has been truncated and add tooltips
  • Responsive/adaptive layouts
  • White space is a good thing in the right amount (too less and it gets claustrophobic, too much and it is like kites floating in the sky at the mercy of the winds)

What are the roadblocks  to flawless execution of design?

• Design review phase
  • Thorough technical possibility checks are not always done at design phase
  • Hard to implement aspects of design are not identified at an early stage
• Design documents
  • Long and multiple UX Specs and Visual Design specs
  • The minor design changes are easy to miss in a live UX Spec
• Implementation phase
  • Unexpected and expected technical challenges
  • Resource crunch
  • Time crunch
• QA phase
  • When implementation is not in alignment with UX Spec
    • QA files a bug
    • UX files a bug for the same.
    • They get assigned to Dev.
    • Dev sees multiple bugs.
    • QA/Dev consolidates the duplicate CR.
    • The CR is fixed.
    • QA/UX needs to review and close the CR.
    • All this process for a CR that says ‘refer to Ux spec for the fix’
  • All this routing including the time of multiple folks could have been averted by that 10min check before making the implementation QA ready
• Lack of design emphasis at the company level

How small steps can make a big difference 

• UX Documents
  • Pick up the latest version of the UX Spec
  • ‘Copy’ the UX Spec
  • Refer to it before and after implementing
• While implementing
  • follow basic layout alignment rules
  • A few minutes of cross checking with the spec will go a long way to reducing the CR count
• After implementing
  • Follow the best practice of each developer testing not just the functionality but also UX before making the build available to QA.

Image credit: Source: https://eurofaselighting.wordpress.com/2014/05/26/the-art-of-craftsmanship/