In this weeks blog I’m going to step back and go to the basics of design and take a look at effective wireframe design and implementation. Wireframes are the backbone of a project and help the team of developers show their ideas on layouts, visual hierarchies, content, and information architecture. Wireframes use placeholders to represent the content that will come later in the development process. Building wireframes has a variety of benefits such as knowing where everything will go before implementing the exact details, the ability to create foundations early on in the process, and the wireframes simplicity allows for creativity and experimentation.
One of the best things about wireframes is the availability and ease of making one. While they do have specialized wireframing tools and image editors a wireframe can be simply made with a piece of paper and a pen.
The first step in making a wireframe the article suggests is to create a content inventory. The content inventory allows the developer to get all their materials in one place before building. Inventories are usually spreadsheets that list all the separate content that will be including on the page, this can include things such as a list of URLs with descriptions. The content should be organized by topic and should be allocated to the correct page. Next, it is recommended to create a visual hierarchy by marking each item by importance as primary or secondary.
We can then begin to make the wireframe itself. We start by making a content wireframe which will allow us to place all our content and prioritize the essential elements. It is recommended to start with a mobile-first approach when making an application for this reason, as you can always scale upwards if needed. Once all the content is generally in place, it is time to “sculpt” the wireframe by designating where individual links and icons will go and setting space and sizes for images. It is then recommended to turn the wireframe into a lo-fi prototype so that testing can begin. Certain platforms allow drag and drop interactivity which helps designate usability issues early on.
This method allows for rapid prototyping which involves creating prototypes quickly, testing them, and then incorporating the feedback into the next build. The design refines as you go instead of testing everything at once. This leads to much more efficient wireframes and overall applications.