What is a wireframe

Wireframes are the least costly and least reproducible design representations. It mainly has the following design structure.

1. Groups of content
2. Placement of content
3. Description of content and relationship between interfaces

Advantages of creating wireframes #

1. You can organize information.
   1. You can organize the layout (arrangement of contents) in advance.
   2. You can organize in advance how to display the information, images, text, and other content.
2. Recognition matching is possible.
   1. It can be used as a communication tool between engineers, designers, and customers to prevent mutual misunderstandings. As a result, man-hours can be shortened.
3. It can be used as a base for startup as an idea or a draft.

Notes on creating wireframes #

1. Don’t use inappropriate colors
2. Don’t overdo the design
3. Avoid Ugly Images, Icons and Wacky Fonts
4. Don’t overdo the colors (because wireframes don’t have to be colorful)
   1. Use shades of gray for interface and content wireframe structures
   2. Visually suggest hierarchy and use different shades of gray to set order in the wireframe
   3. Images and icons are always gray (if you don’t want them to be visually obtrusive)
   4. Appropriate contrast between elements, especially text needs to be legible
   5. You can use blue for links, red boxes for alerts, green boxes for confirmations, blue boxes for information, yellow for warnings
   6. Avoid black For example black borders and wireframe clutter.
5. Use actual size. (use existing smartphone size, e.g. 980px
6. Do not include signs or codes that other people cannot understand.
7. Imagine and write comprehensible affordances.

Things to know before creating a wireframe #

1. Write useful screen-to-screen documentation. (Recommended for small documents like alerts and boxes
2. The design components used in the main are likely to be used in other places, and there is little rework Therefore, it is recommended to create from the main screen.
3. When the status changes, divide the screen and describe it.