“Design is not just what it looks like and feels like. Design is how it works”

-Steve Jobs

In this post, I’ll share the step-by-step design process I follow along with examples of an app that we designed at Copper Mobile. This blog will help anyone who wants to either learn or improve upon their digital design skills.  

We will discuss in detail how one should design and what are the things to keep in mind while designing an app. Firstly, you must understand that design is about understanding the product inside out, its features and functionality, and designing while keeping the end-user in mind. That’s what this post is meant to teach.

Design Process:

  • Create a user flow for each screen
  • Create wireframes
  • Choose design pattern, color and create mockups
  • Next you can create an app prototype
  • Give final touch ups to the mock-ups to have the final screens all ready to begin coding.

Let’s start!

User-Flow Diagram

The first step is always figuring out the feature list for your app. Once you have an idea, you can begin with the user flow diagram which is a high level representation of the users journey through your app.

A user flow diagram is usually made with 3 types of shapes.

  • Rectangles are used to represent screens.
  • Diamonds are used to represent decisions (For example, tapping the login button, swiping to the left, zooming in).
  • Arrows are used to link up screens and decisions together.

These diagrams are very helpful as they give a brief introduction of how the app would function. Here’s a user-flow diagram for reference-

User-flow diagram for the Main Interface.

Wireframes

Once you have completed the user flow you can go ahead with the wireframes. These are low-fidelity representations of how your app will look. Wireframes is an outline or positioning of images, labels, buttons, and stuff will go, with their layout and positioning. A rough sketch of how your app will work.

Here’s an example wireframe.

Design Patterns and Color Palettes

This is an exciting step as it includes lots of colors and design patterns. You browse through lots and lots of color palettes and you can pick a few and experiment with them.

This is my favourite part. It’s like window-shopping. Lots of design patterns and colour palettes to choose from. I go about picking the ones I like and experimenting with them.

Mock-ups

This is the step where you move to high fidelity representation of your design. It give you an actual look and feel of how they app will function when it is fully developed. It should look realistic and like the real app.

There are design software and tools for creating mock-ups. But, at Copper Mobile, we make the prototype from scratch by coding without any tool or software. Here’s an example of some of the early designs of the app.

The mockups should be open for feedback and experimenting before it is pushed to development. After final touches this is what the final design looks like. Once the design is ready and approved by the client. You can move towards the development side and start coding the app.

I hope this post will help you get started with app designs.

 

WE WOULD LOVE TO HEAR YOUR THOUGHTS.






Contact Us