A visual representation for content mapping.

Wireframes are a unique way to define content and requirements for design. For this project, the idea was to define the copy possibilities and guide the design stage on what was needed in terms of functionality.

These wires aid as well to get the approvals needed to start development in parallel with design. Since all teams can account for all the components needed it was a great way to place the team on the same page.

Tools in this project: Figma

Art school wireframes

Category: Prototyping, Wireframes

- The challenge -

In this particular project, the conceptual part of the site was left entirely to the wires. Without a sitemap or user journey, the end result had to anticipate all the potential needs for the site in terms of information and graphics

The solution

To resolve this, it was imperative to do an inventory of the most common sections across similar sites (educational) and spot which content would apply to the potential needs enlisted by the client. Once the overlaps were detected and categorized, they informed the particular needs of each page, which gave life to the skeleton of the site.

Previous
Previous

Foodies Network (Ui, Ux)

Next
Next

Animating the process (Illustration)