Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

GDS 120 Graphic Design I
Project 1: Website Mock Up


Instructor: Liza Wynette


To develop conceptual thinking skills. To communicate ideas visually and verbally. To become familiar with marketing principles. To explore illustration and photography styles. To apply design principles to real-world visual communication problems.

Secondary objectives

To utilize Adobe Photoshop as layout and production tool.


Redesign the visual look of an existing website in Photoshop (hint: choose a local, poorly designed site). Make improvements in any of the following areas: layout, logo, photography, illustration, typography, copy-writing, marketing objectives. Keep in mind who the target audience is. Your website mock-up must be a minimum of two pages:

  • Home page (a.k.a. "landing page")
  • Sample inside page (i.e. "about us" page, a.k.a. "template")

Today, there are several standard mock-up sizes to choose from. For this project we will use 1024 x 768 px (do NOT re-sample web mock-ups to 1000px for critique).

Your design must show an understanding of unity, emphasis, balance and color theory. When appropriate, utilize rhythm and depth as well.

Per our syllabus, you may ONLY use the standard "core" fonts installed in D019 for your assignments unless you obtain prior approval from the instructor (see Parkland's Core Fonts Specimen Sheet). Please talk to your instructor if you need to use a non-standard font from the Adobe Font Folio collection.

Note: Legal high resolution stock photos and illustrations are available from Photospin (contact your instructor for access). Students may NOT use illegally download images (see FAQ).

Also see: Photoshop Printing Tips


1. Research for inspiration:  Research existing award-winning websites. Be sure to review books, annuals, trade publications (Print, How, Communication Arts). Scan or take a screenshot of the front page and at least one typical inside page. Look specifically for creative concepts and creative use of typography, photography or illustration. Publish your research on your personal Process Page for critique (be sure to caption each image and cite the source). If the website is 'live', include the url. Be prepared to explain why these examples are successful.

2. Marketing research: Research your client. What is the client's history? Are there any unique selling points for this business? Who is the competition? If appropriate, visit the business. Analyze your research and write a written statement of objectives in the form of a memo (see sample brief). Be sure to include descriptive adjectives in the "character" paragraph (see vocabulary wheel). Have your brief reviewed by the Writing Lab, then email your brief as an attached Word file or a shared Google Doc to (instructions).

3. Incubation: Absorb the information you have gathered and sleep on it. Allow your unconscious mind to make connections for you.

4. Develop the concept: In your sketchbook begin to conceptualize ideas for this project (see examples of sketches). Make at least 10 sketches of all possible directions you might take this project. Edit your concepts down to your best three ideas and redraw them on 8.5 x 11 white paper using a felt tip pen (option: draw on this blank browser window). Scan and publish your concepts on your personal Process Page (no wider than 1000px) for critique along with a link to your client's current website. Be prepared to discuss how your design fulfills the marketing objectives outlined in your brief.

5. Proof: Based on the critique of the above, use the computer to execute at least two versions of your best idea (present at least one proof with an alternate font choice). Publish low-res PDF's (instructions) on your personal Process Page for critique. Be prepared to talk about what design principles are utilized in your design. Also print a high-quality color proof for your Process Book.

6. Final critique: Based on the critique of the above, fine-tune your designs (if needed). Submit high-quality color proof(s) for final critique (see printing tips). Prepare a presentation to justify your design decisions. Also publish a high-res PDF (instructions) on your personal Process Page.

7. Grading: Submit two copies of your work for grading. One proof will be returned to you after grading. File the graded proof in your Process Book for individual review along with all the preliminary work you did for the project (research, brief, sketches, preliminary proofs, final proof). Review your Process Page and make sure you have an accurate record of your process. Also submit one multi-page high-res PDF (instructions) via Cobra's dropbox. You will not receive credit for this project if any of the above elements are missing.

8. Portfolio preparation: If you are happy with the results of this project, consider including it in your portfolio. If necessary, continue to make refinements until you are 100% satisfied with the project. Be sure to save all your files for future editing.

9. Extra credit: Submit your project into the annual student show by printing your screenshots (use this Photoshop template) and mounting it on foam board. Submit your project using the online entry form at (digital media entries do not require a JPEG to be uploaded). Your project may win a cash prize and be published in a showcase of student work on Parkland's website.

Last updated: 1/25/18 • Webmaster: Paul Young