Wireframing

Design

Wireframing

🙋 Need help? Ask an expert now!

Wireframing

Wireframes are schematic content simulations of each screen. Flat designs in black and white that transmit the concept design, showing ideas through screens and functionalities.

The wireframes are not designs, nor a way to test designs, but the idea of how an interface works and how it is organized, with a clear information architecture and functional design. They need to transmit details about functionality, size or proportion of different elements, etc.

They could bring different level of detail, but they need to show clearly…

  • the hierarchy of the elements on each screen.
  • Information for each screen.
  • Real content and Labeling
  • Interactive elements behavior.

When creating wireframes, think about managing information in blocks, and inside of them; inside of each element and element group. This will make the whole ecosystem easier to handle.

1. Header block
    1. Logo
    1. Navigation Menu
        1. Menu elements you want to show
    1. Secondary menu
        1. Help
        1. Contact
    1 Access
        1. Login
        1. Register
1. Content
    1. Internal content blocks you want to show
1. Sidebar
    1. Internal content blocks you want to show
1. Footer
    1. Internal content blocks you want to show

Recommended to get some inspiration to understand how to proceed and get some ideas.

NOTE: Design is a organic process and designers are used to following different steps in order to translate project requirements into visual ideas. In my case I usually draw or sketch first in order to understand and think freely. Some others start directly with wireframes or code. There is no a single rule or situation, and each project requires a different solution based on the time and effort you have to spend.

Edit Me on GitHub!