User Interface Design

Download Project Package | ZIP

Learning Outcomes

  • Develop a basic understanding of Adobe Photoshop.
  • Develop a basic understanding of good User Interface (UI) & User Experience (UX) best practices.
  • Create an appealing website mockup that conveys information clearly to the target audience.


Assignment Overview

You have two choices. You can design a web site for a not-for-profit or a portfolio site for yourself.  All information should be factual. You can also take information provided by the organization in printed or electronic form and rework it, rewrite it, edit it to your own use.

You will create the home page and all the linked pages for your site. The number of pages should be based on your needs. In conceptualizing, first think of all the information that your event needs to have presented. Map it out on paper before you begin. You are learning the technical aspects of this project in lab.

If you think about this design as a series of “containers” it should help you to decide how to proceed. This should be something you map out on paper before building the site. You will build the site in Photoshop and you’ll produce print outs of both the home page and the linked page for submission.

Keep in mind that you must create all the links that your site would require. So decide what information your event needs for the reader before building your site.

Your pages can especially use quick reads including bulleted lists, numbered lists, maps, etc. to provide information. This is not a news site.

All the rules about good design that you have learned and employed on previous projects will apply here: good typography, strong use of color; readability; hierarchy; accuracy; use of image; appropriateness of information.

You can create separate elements in any program such as Illustrator, and bring those into your document. You can Place pictures and graphics as in InDesign. You can scale, but make sure you aren’t stretching proportions.

I will allow you to use any appropriate typefaces. Although in actual production you would have to embed those fonts inside your web page and users would have to download them.

Interface design is a non-linear process. So consider how you will move your reader around the site in a logical and appropriate way. Also consider how appropriate the design you create is for the event and or organization supporting it.  Visual continuity should be present.

This is a brief introduction to web design. There are many steps, some of which can be an entire career in themselves. Take some time to consider each step of the process before you set down to start on your mockup. Be sure to go through a process of drawing a series of wireframe sketches in which you experiment with different aspects of the design, positioning, etc. This should help you when you go to the computer lab to begin working on the assignment. Include your wireframe sketches on the server. I want to see a transition in the thinking.

No Printed work is required for this project.



  • Use Photoshop
  • Use the 1140 Grid .psd template (use it properly!)
  • Well thought out creative brief
  • Full set of mockups
  • Full set of wireframes
  • Standard project turn-in requirements (see Project Turn-in Guidelines page)


  • Creative Briefs on Server (work folder) T 03.05
  • Wireframes on server (work folder) TH 03.07
  • Draft Homepage Mockups on Server (work folder) TH 03.21
  • Full Turn-in T (UI drop folder) 03.26
  • Rational; Who’s your audience?
  • Self Evaluation
  • List of Links used for tutorials and inspiration
  • All Fonts used if not done with Newhouse Lab fonts


  • Mockup design
  • Quality images
  • Use of grid
  • Typography
  • Choice of content
  • Information architecture
  • Naming conventions
  • Blog post
  • Wireframes
  • Organization
  • Consistent spacing
  • Turned in properly

WHAT’S DUE ON THE SERVER (Final turn-in Drop Folder > UI)

  • Folder of drafts
  • Creative Brief
  • Wireframes for each page (PSD)
  • Final polised Mockups (PSD)
  • Rational; Who’s your audience?
  • Self Evaluation
  • List of Links used for tutorials and inspiration
  • All Fonts used if not done with Newhouse Lab fonts


  • JPD/PNG of each final mockup
  • List of Links used for tutorials and inspiration
  • Creative Brief
  • List of fonts used

Other Resources