I started learning graphic design when I was 13. I learned to design websites from online courses and used to play around with Photoshop and Affinity Designer all day. That experience taught me how to think like a designer.

I’ve been designing and developing apps for almost a year now. I attended a program at MIT where I worked with a team to develop Universeaty. Two months ago, I started working on a new app, Crypto Price Tracker, which I launched recently on 28th January.

In this post, I’ll share the step-by-step design process I follow along with examples of the app I worked on. This should help anyone who wants to learn or improve upon their digital design skills. Design is not all about knowing how to use design software, and this post won’t teach you how to use it. There’s hundreds of good quality tutorials online to learn. Design is also about understanding your 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.

我从 13 岁时开始学习平面设计。通过网上教程慢慢学会了设计网站,并习惯于每天使用 Photoshop 和 Affinity Designer 软件。这些经历教会了我如何像设计师一样思考。

我坚持设计和开发应用将近有一年时间。我参加了麻省理工学院的一个项目,是与一个团队合作开发 Universeaty。两个月前,我开始研究一个新的 Crypto Price Tracker 应用,并于最近(1月28日)将其发布。


Design Process:

  1. Create a user-flow diagram for each screen.

  2. Create/draw wireframes.

  3. Choose design patterns and colour palettes.

  4. Create mock-ups.

  5. Create an animated app prototype and ask people to test it and provide feedback.

  6. Give final touch ups to the mock-ups to have the final screens all ready to begin coding.

Let’s start!


  1. 为各个用户展示界面创建一个用户流程图。

  2. 创建/绘制线框。

  3. 选择设计图案和调色板。

  4. 创建模型。

  5. 创建一个动画应用程序原型,并要求体验人群对其进行测试并提供反馈。

  6. 给模型做最后的调整,在最后的界面准备好后开始编码。


User-Flow Diagram

The first step is to figure out the features you want in your app. Once you’ve got your ideas, design a user-flow diagram. A user-flow diagram is a very high level representation of a user’s journey through your app/website.

Usually, a user flow diagram is made up of 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 link up screens and decisions together.

User-flow diagrams are super helpful because they give a good logical idea of how the app would function.

Here’s a user-flow diagram I drew when I started out working on the design of my app.




  • 矩形用于表示屏幕界面。

  • 菱形用于表示用户的选择(例如,点击登录按钮,向左滑动,放大)。

  • 箭头将屏幕和用户选择连接在一起。




Once you’ve completed the user-flow diagrams for each screen and designed user journeys, you’ll begin working on wireframing all the screens. Wireframes are essentially low-fidelity representations of how your app will look. Essentially a sketch or an outline of where images, labels, buttons, and stuff will go, with their layout and positioning. A rough sketch of how your app will work.

I use printed templates from UI Stencils for drawing the wireframes. It saves time and gives a nice canvas to draw on and make notes.

Here’s an example wireframe.

After sketching the wireframes, you can use an app called Pop and take a pic of all your drawings using the app and have a prototype by linking up all the screens through buttons.


完成每个屏幕的用户流程图和用户流程设计后,你将开始制作所有屏幕的线框图。 线框本质上是粗略的,表现你的应用程序的外观。 本质上是一个用户将会浏览到的草图或轮廓图像,标签,按钮和素材,和它们的布局和定位。是一张你的应用将如何工作的粗略草图。

我使用 UI Stencils 的排版模板来绘制线框。 它大大节省了时间,并提供了一个很好的画布来绘制和做记录。


绘制线框后,你可以使用名为 Pop 的应用程序,并使用该应用拍摄所有的绘图图片,并通过按钮连接所有屏幕界面来制作原型。

Design Patterns and Colour Palettes

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.

The best platforms to find design patterns are Mobile Patterns and Pttrns. And to find good colour palettes, go to Color Hunt.


This is when you finally move on to using design software. A mock-up in the design sense is a high-fidelity representation of your design. It’s almost like you went into this app in the future and you took some screenshots from it. It should look realistic and pretty much like the real thing.

There are design software and tools for creating mock-ups. I use Affinity designer. The most commonly used tool for iOS design is Sketch.

Here’s an example of some of the early designs of my app.



找设计模式的最佳平台是 Mobile Patterns 和 Pttrns 。要找好的颜色调色板就去 Color Hunt 吧。



有用于创建实体模型的设计软件和工具。我使用 Affinity designer 。IOS 最常用的工具是 Sketch 。

这有些早期为我的 APP 设计的例子。

I experimented more with various colour palettes.

I shared the initial mockups with my friends for their feedback. A lot of people seemed to like the gold gradient and black scheme.

Be willing to take feedback and experiment with new suggestions! You’ll find amazing ideas come from your users when you talk to them, not when you frantically scroll through Dribbble or Behance.

So I redesigned the mock-up and removed the background graphs because generating them was a technically time-consuming process and they reduced readability. This is what the redesigned mock-up looked like.



我愿意接受他们的反馈并尝试新的建议!当你与他们交谈时,你会发现用户的奇妙想法,而不是疯狂地翻阅 Dribbble 或 Behance 网站素材。


I was pretty satisfied with the colour scheme, icons on the tab bar, and overall layout. I went ahead and designed the rest of the screens following the same design guidelines. It was a long, but surely fun process!

Once all of my screens were ready, I put together a prototype in Adobe XD and asked a few friends to experiment and give feedback.

After final touches and such, this is what my final design looks like.


等我所有的屏幕界面都准备好了,我就在 Adobe XD 上制作了一个原型,并请几个朋友进行试用并给出反馈。


After all the screens were completed, I imported them into Xcode and began coding the app.

That’s it! I hope this post will help you get started with app design or help you become a better designer. And if you like my app, you can download it here.

I’m ending the post with one of my favourite quotes about design.

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

在所有的界面完成后,我将它们导入 Xcode 并开始编写应用程序。

就这些了!我希望这篇文章能够帮助你开始学习应用程序设计,或者帮助你成为更好的设计师。如果你喜欢我的 APP ,你可以在下载。


“设计并非外观怎样,感觉如何。设计是(解决)它是怎样工作的。”- 史蒂夫·乔布斯