On Wireframes pt. 1 (March 14, 2020)

This is the first of two blog posts I will discuss wireframes. In the  first blog, I will discuss one of the readings and the second blog will go in depth on how I used them in previous class and talk about how our group devised the wireframes for our InSite project in the second, which'll be done the road.

As we approach our own projects, we had to read up on wireframes. About half the class knew what the professor was talking about, as they had done wireframes before for computer assignments for him in other classes. I’ll just review what II know.

Wireframes are simple black and white layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for your website. In his article “What is a Wireframe?”, Nick Haas describes that they act “much like a blueprint” (p. 1) in creating a website. There are no pictures, logos, or colors. Everything is in black and white, but there are placeholders in where the pictures and/or website logos go. Haas also describes seven reasons why a wireframe design is important.

Wireframes act basically like blueprints for how an app for website is designed. There are several programs that the teacher discusses that does wireframes and are helpful tools: Figma, Balsamiq, and Axure. I’ve used two of them before for various assignments (Axure and Figma), and I must say they’re very useful in helping you create and design the look and feel of your products.

There were several reading assignments on wireframes, but I actually just read one that explained the seven steps that wireframes can be beneficial (aand it is)
1. Wireframes display site architecture visually
2. Wireframes allow for clarification of website features
3. Wireframes push usability to the forefront
4. Wireframes identify ease of updates
5. Wireframes help make the design process iterative
6. Wireframes save time on the entire project (it's true, as your designs are more clearly creative and you have a clear understanding on what design you are making)

7. Experience shows it works (BOOM! 'Nuff Said)

To emphasize my point, I will put some examples of my past wireframes and explain them

This is from my first class with Troy --- where we were designed to create our own apps. Here are two of the screenshots for my "Find My Bus" app, which I created because the bus I take for school, County Connection Link, sometimes has a habit of arriving late and sometimes the person on the other line doesn't give you a heads up on what time during the day the bus (or sometimes van) is scheduled to arrive. About two years later after I designed this, County Link was bought out by Transdev who created their own app that was similar to my approach. I'm still waiting for my royalty fees (lol)

This version was done using the Axure RP 8 program (which has recently been upgraded to version 9)

This one was to create a fake product for a website, and I'm especially proud of this. It's a v-chip that can be inserted into your television set and can easily spot fake news. It's called Treowo and was created using the Figma website.

This is for the website version

And here is the same format for mobile (yes, we had to do a mobile version too!)

When it comes down to the two, I prefer Figma. It's completely organized, and you can add pictures and/or images whereas Axure lets you put a placeholder where the image is supposed to go.