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.
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.
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.
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.
Jennifer Blatz explores the world of UX through words and imagery