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 app 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.
Identifying the Problem
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 startups—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.
Developing a Simple UI Design Process
The key lies in forming a straightforward process for the UI design of your app. Here are the steps I always recommend, which I’ll explain below:
- Create a user-flow diagram;
- Research different design patterns and styles;
- Create wireframes;
- Create mockups of your web or app.
Step 1: Create a user-flow diagram
Start by taking a top-level view of the ways in which users might interact with your app.
How might they achieve the specific goals they have? What are the potential paths they might take to realize them? Can you easily visualize all of the possible user journeys within your app 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 your whole system can really help to inform your UI design from the outset.
- Rectangles: Used to represent different screens within the app.
- Diamonds: Used to represent decisions the user will make within the app.
- 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 an app. 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.
Step 2: 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 apps.
While creative instincts will come into play here for experienced UI designers, it’s easy for founders and developers to fall into the trap of calling upon their daily routines to inform these decisions. For example, a common mistake is taking too much influence from the apps they simply use on a regular basis.
It’s important to see this as a starting point on your research journey. Research different UI design patterns in different industries, such as forms, menus, and tables. Don’t simply replicate what you find; draw upon these researched insights to improve upon what has historically worked for your audience.
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 app, 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, however; much of what you see on there is conceptual, as opposed to the finished product when it comes to real applications.
Here are some more great resources for screenshots of popular apps with industry-leading designs:
Step 3: Create your wireframes
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 digital prototyping tool, that’s the preferred option for helping you achieve the best design for your app. Check out Balsamiq, Whimsical, and OmniGraffle for more variety in terms of the pre-build components you need to start on the hierarchical structure of your web or mobile app.
If full-digital prototyping is too new-world for you, then you might want to go old school and revert back to the classic pen and paper. Don’t feel bad for going analog; the time it takes to get used to the new tools will only slow you down, so don’t be afraid to go retro. 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.
Your first UI will likely be an amalgamation of a few different design templates from these sites, so checking them all out in-depth is worth it when hoping to optimize 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 app’s user journeys by visualizing them before it’s too late to change them further down the line.
Step 4: Create mockups of your web or app
Initial design mockups will help you more effectively realize your vision and give your app the look and feel of a real product. Your mockups will be used as a true reference point for developers when it comes to building the app, so don’t be concerned about spending a tad more time on this stage. The greater the detail, the better your engineers can make build it.
In order to craft these mockups, you can use 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.
By following these steps, and seeing the task from both sides of the process, I promise that your engineers (and subsequently, your customers) will thank you for time well-spent perfecting your UI. If you have any more tips, or want to share your experiences in designing UI, feel free to leave a comment below!
Simon McCade is a UI and UX designer that specializes in helping startups design better digital products without hiring a full-time designer. Find out more about how he does it at simonmccade.com.