Web-app developer’s essential workflow to create amazing UIs
By: Lucas Bauche
Tags: Web, HTML, Coding, CSS, UX

For the last 10 years, I have been working on various web and app projects including leading the development of a rather complex angular web application. Driven by a strong passion for design, I’ve developed a skillset to create beautiful UIs very efficiently in HTML & (S)CSS. My colleagues used to say I am „scrubbing down“ UIs, because of my speed.

I often see junior and mid-level web developers struggling with their approach to create a new UI (or UI element) from a mockup and getting it implemented perfectly. I felt it’s a good idea to share my knowledge and wrote down my workflow on how I nail every UI I implement.

The workflow is independent of any coding language or framework. Just focusing on HTML and CSS. Of course a proper (G)UI cannot live without any coded logic, but I’ll skip it here to be more generic. I am pretty sure the code for the UI logic isn‘t a challenge for you anyway. 😉

If you master this workflow and you’re „scrubbing down“ your next UIs in a high-quality and fast way, your career will definitely advance soon.

But before diving into the workflow, let me put some emphasis on the design of UIs and why the job of a front-end developer is crucial for the success of any customer-facing software product.

Why you should fall in love with design

UI design is the creation of the interface between a human being and a machine. The API is the interface for the developer and the machine. It’s the designers job to concept a UI which works for the user. It’s the front-end developers job to make this concept come alive and successfully communicate between user & machine.

Great design is not a matter of taste

How complex a UI is allowed to be and who is capable of using it, vastly depends on the use-case and the target group of the product. For some engineers using a command line interface is not a big deal — for non-engineers using a command line tool is a mystery.

Despite the fact, that user interfaces might be different for different groups of people, they all have one thing in common: to make the user achieve her desired outcome — which is never just operating your software.

Besides achieving this desired outcome, a great UI keeps the cognitive drain as low as possible.

The cognitive resources of our brain are limited per day. Wasting this limited resource on friction is harming the user experience, leading to frustration and making people spend valuable life-time on unnecessary things. You probably know the difference between a seemless online shop checkout experience and one where you aren‘t sure what you bought in the end.

Users don‘t want to operate your software. They are looking for a desired outcome by using your software. That’s why the design and an intuitiv UI are essential to keep the cognitive drain low and give the user more energy to focus on her actually intended activity. This increases the acceptance of your software and your product is perceived as valuable and maybe gets recommended.

Not sure what can be done wrong in “just a simple web UI”? Try to accomplish this flow 👉 https://userinyerface.com

How do you feel now? Just some HTML & CSS has the potential to screw you up big time. Imagine this frustration while you try to buy a new pair of headphones while waiting for the bus. No new headphones I would say and definitely no shop recommendation.

Great design increases the perceived value

This is valid for the product, but this is also valid for you as a developer. Great-looking results and appealing presentations will increase the perceived value of your work.

It’s called the perceived value bias. We perceive the value of a product or service based on how it looks or how it’s served. Design is more important for the success of your product than you probably think. That extra space, wrong border color, and misaligned text — they all impact your conversion rates.

Creating high quality front-ends increases the perceived value of your product and therefore helps your business succeed.

The UI is your product

The UI is often everything the user is in touch with of your product. Lots of people think Instagram is just an app. All the things happening on servers in the background are easily forgotten. That’s different compared to a car, where you see everything that belongs to the car besides the cockpit (the user interface). For services which work via apps it’s therefore even more important to shine with a great app. That’s likely everything the users will ever assume your product is.

Coming up with a great UI is the designers job. From user research to a tested UI flow. But there is tech needed to make a UI come alive and communicate between user and the API. That’s where the front-end developer comes into play.

Let’s assume the designer gave you a great mockup. Here is my workflow to make the UI come real.

9-Step workflow to create amazing UIs

Understand your UI Chunking Layout Appearance Content behaviour Interaction states Transitions Testing & polishing Clean up

1. Understand your UI

Keep in mind, not every mockup carries all the information of every state of the UI in it. For example, different data situation, screen sizes, interaction effects, transitions, etc. It’s your responsibility to build the UI regarding all these uncertainties. Plan these details in advance and clarify open questions with the designer or the team to avoid costly loops later on.

Check the mockup and be aware about the UI in all states and understand all possible actions. Here is a brief list of not-so-obvious things you should be aware of besides the basic functionality and user flow.

Small screens / mobile views

Long, short and missing names & text

Cursor interactions

Animations & transitions

Color themes / dark-mode

Currently hidden elements

Loading and empty states

Validations and confirmations

Permission relevant actions

Understand the UI you are starting to develop

Clarified everything? Perfect! Let’s head to the next step and break down the UI into manageable work packages.