登录查看更多内容

What are the best practices for mobile design documentation?

由人工智能和领英社区提供技术支持

Mobile design documentation is a crucial part of any mobile app development project. It helps you communicate your design vision, goals, and decisions to your team, clients, and stakeholders. It also helps you ensure consistency, quality, and usability across your app. But how do you create effective mobile design documentation that covers all the essential aspects of your app design? Here are some best practices to follow.

此文章中的业界达人

由社区从 4 条内容中精选。了解更多

Alice Moutinho

Senior UX Designer

1 Define your scope

The first step in creating mobile design documentation is to define the scope of your app. This means outlining the main features, functions, and user flows of your app, as well as the target audience, platform, and device specifications. You can use tools like user stories, personas, scenarios, and user journeys to capture the user needs, motivations, and expectations of your app. You can also use a project brief or a product roadmap to summarize the project objectives, timeline, and deliverables.

添加您的观点

Alice Moutinho

Senior UX Designer
举报内容
If you are not starting something from scratch, but rather iterating on an existing app: Make sure to gather data and user insights and document any pain points the users are having, as well as currently unexplored opportunities - benchmarking other apps with similar audiences and purposes can be very useful for this.

已翻译

赞

2 Sketch your wireframes

The next step is to sketch the wireframes of your app screens. Wireframes are low-fidelity representations of your app layout, structure, and navigation. They show the placement and size of the key elements, such as buttons, icons, menus, forms, and content. You can use tools like paper, pencil, or digital sketching apps to create your wireframes. You can also use annotations, labels, and symbols to explain the functionality and interaction of each element.

添加您的观点

Peyton Randolph S.

Digital Marketing Consultant
(已编辑)
举报内容
From the moment I receive the project brief, I schedule a 15 minute call with the client to run through a 'Design Interview'. In this call, which is intentionally short, I ask questions related to their brand palette, colors, desired icons, preferred component placement and core application function. Immediately after that call, I build several lo-fi wireframes in Balsamiq, the tool where I map out how I visualize their application working. Iterating off of these lo-fi wireframes is much more efficient and clients are typically very engaged in the process, whereas they "leave it to the designers" when presented with hi-hi mockups. Once the client agrees that the lo-fi wireframes match their vision, I build hi-fi mockups in Figma.

已翻译

赞
Aurelian Curta

Ethical Product Designer
举报内容
I used to sketch wireframes with pen and paper. While it's a great way to generate ideas fast, one time I timed myself how long it takes to sketch a Mobile App screen, take a picture of it, air drop it to my Mac and adding it in Figma. It took 5 minutes, plus another 5 minutes to re-create it in Figma with only boxes and lines. I decided since then to sketch Wireframes directly in Figma or Sketch and I doubled the speed of creating a screen sketch, and removed any doubts from clients that didn't understood my bad drawings sometimes.

已翻译

赞

3 Create your mockups

The third step is to create the mockups of your app screens. Mockups are high-fidelity representations of your app appearance, style, and branding. They show the colors, fonts, images, graphics, and animations of your app. You can use tools like Photoshop, Sketch, or Figma to create your mockups. You can also use guidelines, grids, and patterns to ensure consistency and alignment of your design elements.

添加您的观点

4 Prototype your interactions

The fourth step is to prototype the interactions of your app screens. Prototypes are interactive simulations of your app behavior, feedback, and transitions. They show how the user can interact with your app, such as tapping, swiping, scrolling, or zooming. You can use tools like InVision, Marvel, or Framer to create your prototypes. You can also use gestures, states, and triggers to define the logic and rules of your interactions.

添加您的观点

5 Test your usability

The fifth step is to test the usability of your app screens. Usability testing is a method of evaluating how easy, efficient, and satisfying your app is to use by real users. It helps you identify and fix any usability issues, such as confusion, errors, or frustration. You can use tools like UserTesting, Lookback, or TestFlight to conduct your usability testing. You can also use metrics, feedback, and recommendations to measure and improve your usability.

添加您的观点

Alice Moutinho

Senior UX Designer
举报内容
This step is a must and good preparation is crucial. But at times, budget, lack of available researchers or tight deadlines made it difficult. In those cases, I resort to "guerrilla user testing": I prepare my scenario, hypothesis and key research questions, take my prototype and go around the company to see how the app is actually used. A few times i even resorted to testing in the local shopping mall, to make sure i didn't get biased opinions. Whatever it takes, do not skip this step!

已翻译

赞

6 Document your guidelines

The final step is to document the guidelines of your app design. Guidelines are a set of rules and standards that define and document your design decisions, such as colors, fonts, icons, images, graphics, and animations. They help you maintain and update your design consistency and quality across your app. You can use tools like Zeplin, InVision DSM, or Figma to create and share your guidelines. You can also use examples, references, and best practices to illustrate and explain your guidelines.

添加您的观点

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

Mobile Design

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

What are the best practices for mobile design documentation?

1

2

3

4

5

6

7

1 Define your scope

2 Sketch your wireframes

3 Create your mockups

4 Prototype your interactions

5 Test your usability

6 Document your guidelines

7 Here’s what else to consider

Mobile Design

给文章评分

感谢您的反馈

更多Mobile Design相关文章

更多相关阅读内容

What are the best practices for mobile design documentation?

1

2

3

4

5

6

7

1 Define your scope

2 Sketch your wireframes

3 Create your mockups

4 Prototype your interactions

5 Test your usability

6 Document your guidelines

7 Here’s what else to consider

Mobile Design

给文章评分

感谢您的反馈

查看其他技能