02 – Axure wireframes

1. What is a wireframe?

A Wireframe is a lo-fi design when clearly stated:

  • Content outline (what stuff)
  • Information structure (where)
  • Description of user interaction (how to operate)

Wireframes are not just meaningless collections of lines and boxes; All right, well, it looks like it, oops. You can think of the wireframes as the backbone and core of the design, carrying all the important parts of the final product.

Wireframes can help you balance fidelity and speed. Do not worry about details when drawing, but must express the design idea, do not miss any important parts. As for the project and the team members working together (development engineers, visual designers, copywriters, and project managers), it opens up a pathway to help understand the design. To put it more plainly, you are designing a city map that shows each street, but with a simplified rendering. A map shows the framework of a city, but not its beauty.

Draw wireframes with the emphasis on “fast”. Communicate with team members most of the time and do a lot of thinking. The aesthetic visual effect should be as simple as possible. Black, white and grey are classic colors, but you can also use blue for hyperlinks. If you spend a lot of time preparing your wireframe (e.g., selecting an icon, uploading an image), do it in a simpler way (e.g., use a placeholder: an image with an x and an appropriate description). We like to call a wireframes a lo-fi design.

Remember, a good wireframing can be crystal clear and convey ideas seamlessly to the team.

2. When to use wireframes

Wireframes are often used to illustrate projects. Due to its static design, interaction can only be demonstrated one interface at a time, so it is important to include instructions. (A short description or attached to a complex technical document is fine, if necessary.)

Also because it is quick and easy to draw, it is often used in informal situations, such as intra-team communication. If a developer asks you how to do something, respond with a quick wireframing. Wireframes are hardly material for user testing; You can also gather feedback if you care more about user opinions than testing methods.

Wireframes, despite all the gossip they’ve received in recent years, can be surprisingly effective throughout the design process and are essential in the initial stages of complex projects.

3. Design wireframes in wechat moments

At the beginning of the design is mainly reference to other people’s design products for their own imitation, and then on the basis of others for processing and improvement, now imitate the effect of wechat circle of friends, using Axure design wechat circle of friends effect diagram

  • Import wechat moments into Axure. For example, my mobile phone is Huawei Mate20 Pro, and the width of the screenshot is 1080px, while the largest text in Axure is only 72px, so I need to properly scale the screenshot

  • Wireframes are called lo-fi design drawings, which mainly reflect the function of completing the interface quickly. UI and color design of the page do not need to be completed in lo-fi design drawings. This stage is mainly about the location and function of the page. A

❝

Want to get more technical articles recommended partners, please long press the picture below, pay attention to the wechat public number ** “front and back end select”, or directly on wechat search “front and back end select” ** “can be concerned!

❞

! [wechat official account]

This article is published by OpenWrite, a blogging tool platform