In this article, I will explain the step-by-step process when I am engaged in application design with examples. This should help anyone who wants to learn or improve digital design skills.
I started learning graphic design when I was 13 years old. I learned how to design websites from online courses, and I am used to designing with Photoshop and Affinity Designer throughout the day. Those experiences taught me how to think like a designer.
I have been designing and developing applications for almost a year. I participated in a project at the Massachusetts Institute of Technology and worked with a team to develop Universeaty. Two months ago, I started working on a new application-Crypto Price Tracker, which I will release on January 28.
In this article, I will explain the step-by-step process when I am engaged in application design with examples. This should help anyone who wants to learn or improve digital design skills.
Design is not all about understanding how to use design software, and this article will not teach you how to use software. There are hundreds of high-quality tutorial resources on the Internet that can teach you how to use design software. To design well, you need to understand your product, be familiar with its features and functions, and always keep the end user in mind when designing. This is the meaning of this article.
designing process:
- Create a user flowchart for each page.
- Create/draw wireframes.
- Choose design patterns and color palettes.
- Create the model.
- Create a prototype of an animation application and ask people to test it and provide feedback.
- Give the final adjusted and determined model, and hand it over to the development to write the code according to the prototype.
Let’s officially start!
User flow chart
The first step is to figure out what functionality you want to implement in your application. Once you have your idea, design a user flow chart. The user flow chart is a very high-level representation of the user’s access through the app/website.
Generally, the user flow chart is composed of three shapes.
- Rectangles are used to represent pages.
- Squares are used to represent decisions (for example, click the login button, swipe left, zoom).
- The arrow connects the page with the decision.
User flowcharts are very useful because they give a good logical idea of how the application works.
Below is the user flow chart that I drew when I started designing the application.
User flow chart of the main interface
Wireframes
Once you have completed the user flow chart for each page and designed the user route, you can start making wireframes for all pages. The wireframe is essentially a low-fidelity representation of the appearance of your application. It is basically a sketch or outline of images, labels, buttons, and other elements, which will be laid out and positioned on the page. The sketch of your application will show how it is used.
I use the template printed by the UI template to draw the wireframe. It saves time and provides me with a good canvas for drawing and taking notes.
Below is an example of a wireframe I drew.
Wireframe of the main interface
After drawing the wireframe, you can use an application called Pop, and use the application to take pictures and archive the sketches, and then use the “link to” function to connect the sketches one by one. Show how the prototype actually works directly on the phone screen.
Design patterns and color palettes
This is my favorite part. It’s like shopping. There are a large number of design patterns and color palettes to choose from. I can choose the ones I like and feel the visual effects they bring to me.
The best platforms to find design patterns are Mobile Patterns and Pttrns . To find a good color palette, you can go to the ” Color Hunt ” platform.
Create a model
This is when you finally use design software. A model in the design sense represents your application in a high-fidelity form. It’s like entering this application when you actually use it in the future, and then you take some screenshots from it. It should look very realistic, very much like the real thing.
There are design software and tools for creating models. I use Affinity designer to create the model. The most commonly used tool in iOS design is Sketch.
Below are some examples of my early design of APP.
I used a variety of color palettes to design.
I shared the initial model with my friends to get their feedback. Many people seem to prefer gold gradients and black backgrounds.
I am willing to accept more feedback and try new suggestions! The way to get a better user experience is to communicate with end users more. When you talk to end users, you will find that users have a lot of wonderful ideas, instead of going crazy reading Dribbble or Behance.
So I redesigned the model and deleted the background image, because generating them is a technically time-consuming process, besides, they also reduce the readability. Below is how I redesigned the model.
The gold gradient and black background look great!
I am very satisfied with the color scheme, the icons on the tab bar and the overall layout. I continued to design the rest of the pages following the same design guidelines. This is a long and interesting process!
Once my page was ready, I made a prototype on Adobe XD and asked a few friends to use it and give feedback.
After the final touches, the following is the design interface that I determined.
This is the final main interface!
After all the pages were completed, I imported them into Xcode and started writing the application code.
This is what I want to share today! I hope this article can help you start to find inspiration when designing applications, or help you become a better designer.
