Wireframe It!

Mobile - Blog Post 4.png

Once the information architecture has been finalized, it’s time to create wireframes. “A wireframe is a low-fidelity design layout that serves three simple but exact purposes:

1. It presents the information that will be displayed on the page

2. It gives an outline of structure and layout of the page

3. It conveys the overall direction and description of the user interface

Just like the blueprint of a building, a wireframe describes details clearly and specifically while giving the builders (you, other designers, developers, etc.) an overview of the project” (Fanguy).

It’s extremely important to make sure that your wireframes are accurate and detailed because it will help guide you towards creating your finished product. The ideas you had are finally visualized in an organized structure, which makes it simpler to navigate through your thoughts as well. I’m still not used to wireframing, but was able to create an array of them that seemed to have the organization that I relatively wanted. These wireframes were created on InVision, which is a design application that I’ve used scarcely. Since I’m redesigning a moon calendar app, I should make sure there are more visuals and functionality than information. I had a hard time figuring out what layouts I preferred when designing my wireframes, but, after a good amount of effort, I ended up not hating them!

Upon completing wireframes, I was also tasked with conducting thorough visual research. Visual research can include typography, color palettes, imagery, graphics, photography and many more aspects. It’s basically the inspirational process for your product’s aesthetics and overall appearance. This is one of my favorite parts to do because it involves a lot of creativity and conceptual thinking. I have a passion for color usage, so I enjoyed figuring out what colors work together and fit the app redesign’s concept. I want the redesigned app to go along with the moon theme, so I attempted to create color palettes with tones of blues and purples. I’m also certain that a serif font wouldn’t really fit with the app, so I played around with different types of sans-serif fonts. In particular, I liked the Bree font and Soleil font.

The visual research process requires a lot of information because it helps you formulate what you really want the product to symbolize. This is also why I really enjoy this part. There’s so many different ways to go about an idea, but it’s solely up to you and your creative thought process to produce the final design.

Previous
Previous

Visualize It, Design It

Next
Next

Information Architectures Are No Easy Feat