User Interface Design

For your UI/UX project you will be choosing a non-profit organization and designing a single page mockup in Adobe Photoshop.  This project will be broken up into two phases. The first phase will the desktop browser phase. The second phase will be the mobile design phase.   You will use much of the same content in each phase. You may use an existing non-profit website text and any images you find released under a Creative Commons license (creativecommons.org), or any image with permission of the visual artist.

  • 30% of your final grade (total)
    • 15% for desktop design
    • 15% for mobile design

 

Phase One – Design for the Desktop – Due Friday, August 7 @5pm
(see details below)

You will start by creating a communication/creative brief that answers the question of who your target audience is. You will then take that knowledge and create a skeletal representation (wireframe) of your site to help you understand the information architecture (narrative) of your site. From there you will create the polished mockup using the 1170 Bootstrap template as a base to design inside.

  • Creative brief with a user story
  • Polished Mockup for Desktop –  PSD file
  • .JPG file of Final Mockup
  • Self Evaluation form
  • Wireframe
  • Drafts & Sketches
    • At least 10 unique wireframe concepts
    • At least 5 draft mockups

Phase Two – Design for Mobile – Due Friday, August 14 @5pm

In phase two of our UI/UX project you will take your feedback and materials from phase one to create a mobile view of your website. As you begin your mobile design start by creating a creative brief that addresses your target audience user website usage and behaviour patterns. As much possible do research into the specifics for your target audience. How (and where) is your user interacting with your website? Think, how do you use mobile?

  • Creative brief with a user story
  • Polished Mockup for mobile – PSD file
  • .JPG file of Final Mockup
  • Self Evaluation form
  • Wireframe
  • Drafts & Sketches

Deadlines

Phase One

  1. Thurs, 8/5 – Lab – Draft Creative/Communication Brief
  2. Friday, 8/7,  10AM – Wireframe
  3. Friday, 8/7,  1PM – Rough Mockup
  4. Friday, 8/7,  5PM – Final Project Due on server
  5. Friday, 8/7,  5PM – Final Due on blog

 

Phase Two

  1. Thurs, 8/13– Lab – Draft Creative/Communication Brief
  2. Friday, 8/14,  10AM  – Wireframe
  3. Friday, 8/14,  1PM – Rough Mockup
  4. Friday, 8/14,  5PM – Final Project Due on server
  5. Friday, 8/14,  5PM – Final Due on blog

Create Empathy, Tell A Story : Know Your User,  A Fellow Human

  • Think of your site like a story
  • Create empathy

Remember, you’re trying to connect with another human at the end of this series of tubes.  They may come from a specific culture, part of the world, or economic status. They might be on a packed subway using their smartphone or sitting in their office working on a large monitor. How should your story be created to pull that specific group in, what makes them interested, what are their hot cultural buttons? Make them care. Keep it simple. Try and think of scrolling through your site like the reading of a good story. Stories have chapters, websites have menus. Have fun with this idea. Include some tension and surprises in your design/image/type choices. What will makes your audience care/smile/cry/scream? Do that.


 

The User Story, Solving A Problem

  • A brief statement that identifies who the user is, what she/he needs, and why she/he needs it.

The user story usually follows a pattern such as:

A <type of user>, I want <some goal(s)> so that <some reason>.

“Martha is an accountant traveling on the subway who is concerned about fracking. She wants to learn more so she can have the feel better about getting involved.”


Learning Outcomes

  • Information architecture
  • User interface and experience design
  • Use of storytelling and creating empathy in website design
  • Use of grids in design
  • Responsive design techniques and theory
  • Creation of a user story

Grading Criteria

  • Compelling use of images and type to address the target users (human/usable – desktop & mobile)
  • Appropriate use of the 1170 and 750 Bootstrap grid template (desktop)
  • Mobile focused UI/UX (mobile phase)
  • Concise and professional creative/communication briefs and self-evaluations
  • Well labeled and organized .PSD files (name your layers and use folders!)
  • Simple and well organized PSD wireframe
  • Turned in properly on the blog and class server

The Assignment Breakdown

  • You will be designing a one-page website in two phases for a non-profit organization of your choice.
  • You can select a non-profit organization that has a poorly designed web site.
  • You can not copy an existing site design, but feel free to be inspired!
  • Try going to idealist.org, click “Organizations” and put in keywords for the type of non-profit of interest.
  • Research that non-profit, figure out what the web site needs to accomplish.
  • See if the non-profit has any images/graphics they will send to you, or create your own to use
    in your design.
  • You will decide how many sections of the one-page design are needed to accommodate the needs of the non-profit’s website, and you will decide how best to accommodate those pages in the navigational system that will take you down the single page design.
  • Preliminary design in any program you choose, but final design will be in Adobe Photoshop.
  • The height of your design will be determined by your content.

 


 

Advice

  • Look at the content of that non-profit, keep the pertinent information, but do not have so much content that it overwhelms the user.
  • Use the 1170 & 750  Bootstrap PSD grid/column structure for your desktop website to assist you in designing and laying out the structure of the web site.
  • Use a typeface created for the screen, Google Fonts; look at the pairings tab for good combinations.
  • Think about how you have been trained to view information. Print design presents linear information while interface design presents non linear information. Experiment with that while designing your site.
  • Choose your colors to set the appropriate tone.
  • Keep core content the same on mobile and desktop.
  • Test your mobile wireframe or design on a mobile device, popapp.in or invisionapp.com
  • Choose your typefaces carefully. Small serif type does not work well in web design.
  • Usability is a necessary condition for survival. If a web site is difficult to use, people leave. If users get lost on a web site, they leave. If a web site’s information is hard to read, or doesn’t answer user’s key questions, they leave. Note a pattern here? There’s no such thing as a user reading a web site manual or otherwise spending much time trying to figure out an interface. There are plenty of other web sites available. Generally speaking, leaving is the first line of defense when users encounter any difficulty.

 

On your class server

  1. Place all your files inside a folder labeled “LastName – FirstName – User Interface Project”
  2. Name files with your last name, the project, and a version number, no spaces and cap every word: “Sanefski-Darren-Interface-Final.psd” is acceptable — but not “Darren’s Website Thingy.psd”
  3. Create individual folders for the following items:
    1. .psd version of your final Photoshop file
    2. .jpg file of your final mockup.
    3. .jpg wireframes for entire page.
    4. Five thumbnail sketches of different layouts: cell phone images or scans of sketches.
    5. Creative/Communication Brief
    6. Self-evaluation

On the blog

  1. Screenshot of page
  2. Creative/Communication Brief
  3. List of links you used for inspiration, at least 3
  4. Wireframes for each page designed
  5. Categorize your blog post appropriately

 


 

THE CREATIVE/RATIONAL BRIEF

The creative brief (communication brief) is the bases for most future decisions in your project. Think of it as your touchstone for the next phases of your project, if they do not make sense in the context of your creative brief then readjust and rethink your decisions. Creative briefs can include thumbnails of more polished mockups and site details. The scope of the brief should be dictated by budget and complexity of the project.

Don’t forget to include the following:

  1. Design strategy: you MUST explain the reasoning behind the design you chose.
  2. Choices of typefaces (Including some you tried but didn’t use).
  3. Choices of colors and images.
  4. Source your images.
  5. Explain why you think the original site (if there was one) is ugly or has a poor design.
  6. Include at least one user story.

 


 

General Resources

One Page Website Inspiration – Think Storytelling

Creative Commons Image Resources