We are getting so close to implementing actual design. I created a few drafts of a wireframe for an upcoming client meeting. Wireframes are a great way to communicate.
I love that wireframe can be used as a discussion point for so many things:
Take your sketch to the next level
In some instances, ad branding color and logo
Show basic flow of page
See if you and your client are on the same page
Illustrate some design ideas, and discuss interactivity or animation potential
Allow the client to modify concepts because you are both looking at the same thing
Working together in person to come up with a better solution
Though the original scope of the assignment was to design an app, I was also assigned the duty of designing a desktop version of a website that would be promoting the app. For this wireframe, I roughly laid out where the items would be on the home page.
This is the annotated wireframe for that desktop homepage.
After sketching a few ideas, one can take these rough sketches to the next level with wireframes. This is a great way to explore more ideas, yet not commit yourself to a high-fidelity design. I created this wireframe in Adobe InDesign because that program is quick and easy to use (for me) and has all the functionality one needs to create a wireframe.
Wireframes are a good middle step between touch sketched and a high-fidelity mock up.
I came across a great resource the other day that I would like to share with you. UXPIN is a paid service for wireframing websites, tablet and mobile pages online. Though UXPIN is a paid resource, they do offer several valuable and FREE resources. One resource I would like to mention now is their free ebook “The Guide to Wireframing.”
Some of the resources I like in particular are:
The pros and cons of various wireframing techniques and software
Provided UI patterns and resources
Common UI trends in today’s most-used apps
Yes, it is kind of a pain to have to provide your email to get the book sent to you. But for the UI pattern aspect alone, I think it’s worth checking out. Enjoy.
Maybe you’re interested in a career in UXD, but where should you start? This infographic from Schools.com looks at how to go about becoming a user experience designer.
I am not sure if I agree with all components of this graphic, but is an interesting way to present a lot of information.
Though these wireframes are not perfect, and I know that I still need to read the iOs developer handbook to improve upon the standards. I need to make my wireframes a bit more compliant to these standards. However, it is good to explore some visual options and get started by getting some ideas on paper.
As part of my class project, I also had to create a wireframe for a desktop version. Though my concept really focuses on just the mobile app, I was tasked with creating a computer version that would promote the app. Below is the wireframe for this desktop website that would be promotion the app and leading viewers on where they could download the app.
Hollywood Walking Tour App Desktop ad website
Jennifer Blatz explores the world of UX through words and imagery
