Project Introduction

Wireframes can be compared to a classic blueprint that would be used in any type of construction project, except ours is for planning how interactive web based pages or apps would work. It creates a clear guide for our design staff of how an app or website will work, in broad strokes.

Wireframes are meant to be a practical, easy to understand road map of exactly how our app or website will work. It does not focus on the “design” elements, like images, colors, typography and so on. We are making this so that our design team (and the client, of course) can see exactly what we plan to do, and what is going inside the project. These can be incredibly handy for a design team for not just the product development part, but also as a clear form of communication of the project scope and expectations. By using a wireframe early in the process, we have a quick-and-dirty estimate of exactly what we will need to design and code later on.

Our wireframe will focus on three major components:

1. The Architecture: This will organize our project into every piece of future content, and what visual elements will be needed to make sure that our users have a great UX (or, User Experience for those who don’t know).
2. The Navigation: Our wireframe will show both the primary and secondary navigation components that our project will need. We need to make sure that our users can move around easily, without any “pain points”.
3. The Layout: We will be building a low fidelity wireframe with bare bones visual elements of how the app or website works, not focusing too much time on what it will look like with final art, images, colors, etc.

The Landing Page Wireframe should serve a single purpose: Let a visitor (one of your User Personals, in the ideal case) find and download our upcoming app with little to no distraction. There are literally thousands of examples of good landing page designs out there for you to use as a guide!

The App Wireframe should fully explain how the app works. What button press goes where, what is the signup process, are there search functions, etc. Ask yourself what you would want the app to do, or how you would like it to function… then plan it out and wireframe it!

“You might ask why we are spending so much time PLANNING and not BUILDING. The good old “measure twice and cut once” phrase should clear that right up. Let’s not waste our time by coming up with a DESIGN and not even knowing how it should FUNCTION. Keep your horse in front of the cart on this one…” – GD

Sample Wireframe for Landing Page and App

Use these examples as a guide of what you are expected to produce, both visually and planning wise. These images provide solid examples of what your work should look like at this point. Be sure you look back at these examples and ask yourself, “are mine just as good if not better?”. If the answer is no… try again! The landing page should 

Project Requirements & Helpful Links

• You will submit both an App Wireframe, and a Landing Page Wireframe for our project.
  • App Wireframe
    • The app wireframe should include all of the navigation and flow structure of how the app will function, easy enough to understand that a person with no experience should be able to understand the plan.
    • The app wireframe will be a single graphic, high enough resolution that the text is readable and shows the navigation paths. You may use Illustrator, InDesign, Photoshop… whatever you wish.
    • Feel free to use a Free Wireframing Kit to get you going. There is no point in designing these elements from scratch… why waste the time if there is already an attractive kit ready to go? There are many places to search for these, not just the provided link. 
  • Responsive Landing Page Wireframe
    • We need three wireframes for our Landing Page. These should show how your page will appear on a Screen, Tablet and a Smartphone. After all, every single web page should be responsive!
      
      • Fullscreen: 1920×1080+
      • Tablet Portrait: 900×1440+
      • Smartphone Portrait: 480×960+
        • The height of the wireframe will depend on if you want your page to be able to “scroll down” for more information. The above height dimensions are minimum.
  • The images will be uploaded to your Portfolio as mockups to make them nice and presentable, but also have the full resolution images ready to be downloaded to showcase them in full scale. Zip them up, and have a download link ready for use by the Instructor.
• This project needs to be to a professional standard. The expert use of repetition in your wireframes is fully expected at this point. Unattractive wireframes will see a greatly reduced grade!

---

Project Grading Rubric

The grade for this project is weighted heavily on the full extent of work done. Not only are these wireframes expected to be professionally designed and attractive, but they need to serve a functional purpose of explaining how the app and landing page will work. 

AMAZING 90-100	GREAT 80-89	GOOD 70-79	SUB PAR 60-69	POOR <60
You showcased an complete understanding of the wireframing process, and created attractive and fully explained wireframes.	Student was slightly off either what the project required, or created acceptable but not professional quality wireframes for their project.	Student did a basic job, but not outstanding whatsoever. Poor use of a starter kit, or incorrect exports/uploads to the portfolio.	Student followed directions, but provided very poor examples of mastery. The student did not provide a proper set of wireframes.	Student did not follow directions, did not produce remotely acceptable work, or didn’t cover all the requirements.