The Guide to Wireframing

sketching wireframes

The advantages of hand-drawn wireframes are speed, flexibility, and minimal distractions. Designers can quickly pick up pen and paper and begin conceptualizing, unconstrained by tools and shortcuts, making them ideal for brainstorming and early exploration. They can also freely switch between macro and micro details on the same page, without being constrained by pre-set components. Without having to worry about fonts, colors, or styles, they can focus more on information architecture, content, and functionality. However, wireframes also have some significant drawbacks: Components or templates cannot be reused, leading to duplication of effort when making changes. Wireframes have low fidelity, making it difficult to easily express interactions and animations, and they cannot link multiple pages. Furthermore, because they are typically paper-based, they lack collaboration and version control, hindering real-time collaboration and tracking of changes.

wireframe software

The advantages of wireframing software lie in its speed and accuracy, rich functionality, and ease of collaboration. Because these tools are specifically designed for wireframing, they allow for quick copying and adjustment of components, making them more efficient than hand-drawing. They also come with a wide range of built-in UI elements, templates, flowcharts, and animations, making it easy to create high-fidelity interactive prototypes. Furthermore, they support real-time editing, commenting, and sharing by multiple people, greatly enhancing team collaboration and communication. However, they also have certain drawbacks: for beginners, it takes time to learn how to use the software, and in the early stages of creative expression, overly structured environments can limit creativity.

A Wireframe Style That Suits Me

I chose to use a combination of grey boxes and annotated wireframes. Grey boxes allow for quick identification of layout and information hierarchy, while annotations facilitate explanation of interactions and functionality, helping the team quickly reach consensus. This approach is efficient and clear, making it ideal for producing discussion drafts in a short period of time.

Wireframe Images

Zirui Li

internet-stuido.netlify.app

Homepage Wireframe

Homepage
Homepage: Primary navigation, Hero/CTA, key content blocks, and footer.

Blog Page Wireframe

products page
Products page: products list, filter/categorize and pagination.

Article / About Page Wireframe

Aabout us
About page: Title and author information, body paragraphs/illustrations, recommended reading section.

Contact / Video Page Wireframe

contact us
A contact page with a form (input, select, radio/checkbox, button).