Zühlke – Empowering Ideas

UI design process

UI design process: why we need it

George Dan Foia

UI design: what UI design is as design principles, Layout, Colors, Negative space and typography
The purpose of this workshop is to raise awareness of what user interface design is, and how it can be done in terms of its principles.

Insight in brief

  • How does the UX process and the UI process looks like?
  • What are the best tools for each?
  • Where is the difference between UX, UI designer and UI front end developer?

The UI design process, and how it can fit into a software development project – the benefits, the tools, the outcomes, and the UI a designer works on

How the UI design process fits into software development: After UX research, prototypes, user testing and wireframes, there’s a good understanding of what UI design process is. This can help and empower the user’s experience of the product, whether that’s an app, software, or a website by providing the right visuals, affordance, and communicating the brand values.
Not too long ago, visual application design, what does it do? The SDLC is the most powerful SDLC in the world.

More modern SDLC methods include the UI as part of an iterative cycle as follows:

modern SDLC methods include the UI as part of an iterative cycle

Why the UI process is vital for the software development lifecycle

What are the benefits of this approach? The Stakeholders are in-sync with the future at all stages of the development lifecycle. They can be assured that the product communicates the brand values ??and that, visually, it supports business goals.
For the UI designers, it is much easier to validate their assumptions based on user testing, gathering feedback, identifying errors when it’s most expensive and time effective to fix, documenting different design solutions and variations.

The UI design process output is …

The result of the design process usually is the product design which can be just static mockups with no functionality and just a visual representation of the end product. The deliverables can range from flow diagrams to more high fidelity prototypes, which can be used for testing and sharing. Notice I’ve not written any HTML / CSS and JavaScript (Angular, React etc) work. This all lies within the front-end development.

UI design tools

Preferred UI design tools are: Photoshop , Fireworks , Sketch and … so I’ve been told, Illustrator.
Sketch is very popular due to its rich features (symbols – great to think in terms of patterns and widgets, artboards, mirroring and many more), at a modest price – £ 99 – as well as being fast and light.
For converting the designs into high fidelity prototypes, you can use Flinto , InVision , Origami (a brand new tool from Facebook), Adobe Experience, and for more complex prototypes, Axure .

Jack of all trades

There is a lot of confusion about what a UI designer is and what they do, what is the difference between a UX designer, a UI designer and a UI developer / front-end developer. 

From a UI designer’s perspective, the focus should be on designing user interfaces only, but in reality lots of UI designers write at least HTML and CSS code (knowing JS properly, is a full time job nowadays – interesting article), and are involved to some extent in UX work … All All All which is a good thing Actually.

UI designers are UXers by default –  “UX / UI designer” looks smart, doesn’t it? But when it comes to their UX skills, they are often non-existent: “User testing? Never heard of it!”
But apart from that, those extra skills are nice to have. The diagram below illustrates this well:

Overview over interfaces between UI and UX

We all know how to make the most of the work of the artist. In an ideal world, wouldn’t it be better to focus and hone your skillset to return more indepth and insightful results?

George Dan Foia

George Dan Foia

Lead UI Designer
Contact person for United Kingdom

George Dan Foia is a Lead UX consultant at Zuhlke London since March 2016. He has more than 15 years of experience in different software development areas, like UX and UI design, Front-End development and he is passionate about Product/Project management.