Turning brilliant ideas into beautifully designed user interfaces for web and mobile apps is a time-consuming and often difficult task for developers and tech founders to undertake.
It might seem like it should be a straightforward process after the ‘eureka!’ moment, but the reality is that a lack of design experience in even the most technical of engineers can prevent an product from performing at the top of its game – at least as far as users are concerned.
At this stage, I'm going to assume you've conducted some user research or at the very least, spoken to potential customers to test your assumptions. That way you'll be much better positioned to turn your ideas into actual design.
This simplified guide breaks the process down into logical steps for those who just can’t afford the time to get their heads around all the complexities of UI and UX design.
What is the problem at hand from a UI design point-of-view?
The starting point is always to not only define the problem you’re trying to solve, but to understand it from your customers’ perspectives – and there will, of course, be many perspectives in your target audience.
A founder’s vision can only work if it is designed in such a way that customers can actually use it and this depends heavily on their ability to articulate the idea to the right people with the right set of skills.
It may sound simple, but the real issue is typically in the lack of design expertise at tech companies– it can be a poor use of crucial resources to step onto a steep learning curve at such an early stage of the product’s development, so the first issue you have to solve is how to address the problems your customers are facing in the quickest, smartest and most efficient ways.
Once you’ve done that, you can work on how to turn those ideas into genuinely useful UI designs.
...the first issue you have to solve is how to address the problems your customers are facing in the quickest, smartest and most efficient ways...
Develop a simple design process for your product
The crux of it lies in forming a straightforward process for the UI design of your product – here are the steps I always recommend:
- Create a user-flow diagram
- Research different design patterns and styles
- Create wireframes
- Create mock-ups
Create a user-flow diagram
Start by taking a top-level view of the ways in which users might interact with your product.
How might they achieve the specific goals they have? What are the potential paths they might take to realise them? Can you easily visualise all of the possible user journeys within your product in a user-flow diagram?
It’s critically important to keep things as simple as possible by reducing any clutter and removing any unnecessary steps – a bird’s-eye view of this can really help to inform your UI design from the outset.
Some of the tools I like to use are the flow chart templates by Miro, Milanote and Whimsical. You can easily shape the journeys by understanding the three typical shapes you will find in flow charts:
- Rectangles: Used to represent different screens within the product
- Diamonds: Used to represent decisions the user will make within the product
- Arrows: Used to display the connections between the screens and the decisions
This image illustrates a user-flow diagram for the pre-design phase of a product. You can explore other common user journeys and filter through a wide range of screenshots from iOS, Android and Web apps here at Page Flows.
Research different design patterns and styles
Planning makes the implementation easier, so I always break tasks down into smaller, more manageable parts to be able to achieve my design goals for products.
Creative instincts will come into play here for UI designers with years of experience under their belts, but it’s easy for founders and developers to fall into the trap of calling upon their daily routines to inform these decisions, such as taking too much influence from the products they simply use on a regular basis.
...break tasks down into smaller, more manageable parts...
It’s important to see this as more of a starting point on your research journey. Use the insights to research different UI design patterns in different industries, such as forms, menus and tables. Draw upon the insights to not just replicate what works for your audience, but to improve upon it to make your product as good as it can be.
A great source of information about this is UI Patterns; it’s a brilliant resource for getting familiar with the most commonly used design patterns, including how and when to employ them.
Once you have gleaned a deeper understanding of which components you might need to include in your own product, check out sites like Behance and Dribbble for more inspiration. You might want to take what you see on Dribbble with a pinch of salt, though, because much of what you see on there is conceptual as opposed to the finished product when it comes to real products.
Here are some more great resources for screenshots for popular products with industry-leading designs:
These are fantastic sources of visual inspiration for the design of new web and mobile apps.
Create your wireframes
Now, here’s where we can start getting creative. Wireframes are a crucial part of the design process, so they shouldn’t ever be skipped.
If you are familiar with a prototyping tool, that’s the preferred option for helping you achieve the best design for your product. If that’s a whole new world for you, then you might want to go old school and revert back to the classic pen and paper. The time it takes to get used to the new tools will only slow you down, so don’t be afraid to go retro.
Wireframes are a crucial part of the design process, so they shouldn’t ever be skipped.
Have a look at SneakPeekIt for a large range of device templates that you can print off to use for your sketches. They are a completely free way to get the inspiration you need to get your designs off the ground.
Be sure to check out Balsamiq, Whimsical and OmniGraffle, too, for more variety in terms of the pre-build components you need to make a start on the hierarchical structure of your web or mobile app.
Your first UI may well come from an amalgamation of a few different design templates from these sites, so checking them all out in depth will only stand you in good stead for optimising your in-app experience.
If you’re an engineer or tech founder in the early stages of design, don’t be tempted by the urge to skip wireframing – you need to fully comprehend every angle of the product's user journeys by visualising them before it’s too late to change them further down the line.
Create mock-ups of your product
Once the hierarchy is in place and the structure of each screen is defined, you can move onto software like Figma or Sketch to design your product. Figma is a cloud-based UI design tool that’s built for teams which is ideal for bringing wireframes to life at this stage of the process.
.png)
Initial design mock-ups will help you more effectively realise your vision and give your product the look and feel of a real product. It should be able to be used as a true reference point for developers when it comes to building the product, so don’t be concerned about spending a tad more time on this stage – the greater the detail, the better.
Are you still struggling with your UI design?
If you feel like you have done all you can with your idea and you need help turning it into real UI design, you might want to call upon a product designer to help you.
Rather than ploughing on through it and risking mistakes, I can apply my decade of experience in design to carry out the robust process required to put your idea in front of real people.
If you would like a consultation on your project, whether it is the full design of your web or mobile app or ongoing UX design support, I’d love to provide my expertise and integrate with your development team to realise the best end-product possible.
