Skip to content

CSPC2006/02. Creating Wireframes and Prototypes

 Published: 2 hours read

To Understand what wireframes and prototypes are in UI/UX design. To Learn how to create wireframes and prototypes using popular tools. To Gain experience in translating ideas into visual layouts.

alt text

In web development, wireframes and prototypes are essential tools in designing user interfaces (UI) and user experiences (UX). They serve as visual representations of a website or application’s structure, guiding developers and designers in creating effective, user-friendly interfaces.

Table of contents

Open Table of contents

What are Wireframes/Prototypes?

Key Differences

  • Wireframe: Basic layout, static, focuses on structure.
  • Prototype: Interactive, closer to final product, focuses on user interaction and experience.

Step by step instructions

Planning Your User Research: In this part, you’ll define what information you want to gather from users and design a method to collect this data.

1. Define the Layout and Scope

Determine the page structure, including header, footer, navigation, and content sections.

Outcome: Clear understanding of which elements are needed and where they should be placed.

Tip: Use pen and paper or simple online tools for this initial stage.

2. Choose a Tool for Wireframing

Recommended tools:

  1. Wireframe.cc - Simplified wireframing tool.
  2. MyDraft.cc - Free tool for creating simple wireframes.
  3. Wireframer - Easy to use for quick layouts.
  4. Draw.io / Diagrams.net - Advanced tool for complex wireframes.

3. Create a Wireframe

  1. Open your chosen wireframing tool.
  2. Start with basic shapes to represent different sections (e.g., rectangles for images, buttons, or text blocks).
  3. Label each section to identify its function.
  4. Don’t focus on colors or specific designs; keep it simple and structural.

4. Move from Wireframe to Prototype (Optional)

5. Submission

Conclusion

Wireframes and prototypes are crucial in UI/UX design for structuring and testing user flows and layout ideas. Wireframes provide a basic skeleton of the design, while prototypes add interactivity for a more realistic simulation. Using these tools helps create effective, user-centered designs while minimizing development time and costs.

Key Takeaways

References


Previous Post
Mapping of GECA's academic resources
Next Post
CSPC2005/01. Construct and Execute a C Program Showing the Use of Pointer to Structure