Mini Project 1: CSS Design Mockup

Complete the following unit before you start this mini project:
Unit 2 - Introduction to Dreamweaver & the Web Layout Design Process

Purpose of this Assignment

A mockup design is the first part of the CSS Design Project. It is a necessary process that must be completed before we start creating CSS selectors and styles. The purpose of this assignment is to provide an opportunity to practice the web layout design process and create an actual mockup illustrating your design ideas.

Due date: See the course calendar for the due date.

What to do

1. Read this scenario

You are a web designer working in FancyDesign Co. The instructor of this class visited the FancyDesign Co. and asked the company to design a website to showcase students’ work throughout the semester. Your manager assigned you, to complete this task. You are asked to create a mockup(s) for the layout design and then turn the mockup(s) into an actual web page(s) using CSS in the second part of this project.

An example of the page content, as in "showcase.html" can be downloaded here (right click on the link, and select "Save Link As..."). This showcase file is a plain html file without any styling or formatting. It is only a template and example for you to create layout design ideas. Do study and understand the example content; however, you are NOT required or expected to change the actual content of the page. The clients do request and expect to see a 2 or 3-column design. Now is your chance to show the clients your design ideas by creating an image mockup(s) that demonstrates your understanding of layout design concepts and composition. Now it’s time to work and amaze your clients!

2. Create a Mockup

Mock-up Examples

These are some examples from students in previous semesters. You can demonstrate creativity in your design along with the information from the scenario. Feel free to add images and colors that represent your ideas. Do not copy elements from these examples, but rather think of usable and aesthetically pleasings ways of laying out your design in a unique way (your mockup should not look just like these examples).

Scott Homepage Example

Scott homepage example of Zone site mockup

Scott Standard Page

Scott standard example of Zone site mockup

Hayes Mock-up Example

Hayes Mock-up Example

3. Be aware of Copyright issues

Do not use any images or graphics that you did not create or that are not open licensed. If you find materials that do not specifically say that they are copyrighted, you must treat them as if they are copyrighted (all materials are copyrighted by default, so you cannot use them legally unless they specifically say you can, for instance with a Creative Commons license).

This CSS design project aims to allow students to practice designing web pages using CSS. The course instructor does not pursue any additional direct benefits from the design. All rights for contents in the “showcase” are reserved to the Digital Media ZONE. ZONE instructor(s) may use the product for educational purposes only.

NOTE: Double check the image size before submission. Try your best to keep the file size less than 1MB. If you have any questions, post them to the discussion board.

IMPORTANT: Each design must be ORIGINAL and thus will be different.

How to submit in Sakai

  1. Return to the "Assignments" menu and reopen the "1. CSS Design Project - Mockup" assignment.
  2. Submit the URL(s) to your mockup(s) in Assignments in the Sakai course site.
  3. Click the SUBMIT button for Instructor review. It will display in the Assignments list as completed.


Your CSS design mockup will be evaluated based on the following guidelines:


Possible Points Your Points Comments
Grading Scale: 1=Yes, 0=No
2 or 3-column design 1
Originality of the design 1
Grading Scale: 4=Very Good, 3=Good, 2=Acceptable, 1=Minimal, 0=Unacceptable
Professional appearance of the design 4
Total Points for CSS Mockup 6