css

01. Wireframing πŸ‘©β€πŸ«πŸ§‘β€πŸ«

Create a Wireframe (Instructor)

The following image shows the start of a wireframe for the mini-project for this unit:

Example of an unfinished wireframe with its row and columns highlighted.

  • The areas outlined in red represent rows.

  • The areas outlined in blue represent columns.


Notes πŸ“–

Why !?

Pros of Wireframing: 1. It helps you focus on the structure of a website or app and make sure it’s easy to use.

  1. It allows you to quickly identify any problems with the design before you start building it.

  2. It saves time and money since you can easily make changes to a wireframe before investing in coding and design.

  3. It makes it easier for everyone involved in the project to understand what the final product should look like.

  4. It helps you work smarter, not harder, by getting the most out of each design decision.

Cons of Wireframing: 1. It can be time consuming to create and update wireframes, which can slow down the design process.

  1. It can be difficult to communicate complex interactions and features using only a wireframe.

  2. It can be hard to get an accurate representation of how the final product will look without seeing it in action.

  3. It can be hard to get a good visual representation of the design without seeing it in color.

  4. It can be difficult to make sure all the elements on a page are properly aligned and spaced out.