Contents
Designing from Scratch
Grade Rubric
Overview
This is a two-part project where you’re going to create a web Design Comp and then create a website of HTML pages based on that design. Once it is completed you need to upload the following into your project4 folder:
- A layered Photoshop file for the Design Comp
- All HTML and related files (CSS, images, etc.)
Part 1
Create a Design Comp for your website. It is best to start with wireframe sketches to get your structure figured out, then determine your visual elements (even gathering them) before you dive into Photoshop. The Design Comp needs to be a layered Photoshop file that looks exactly like how you want the client’s homepage to look once completed (you would save a flattened JPEG to show the client for approval, but I want you to turn in the layered Photoshop file).
Build this page in Photoshop with these specs:
- 1000 pixels (wide)
- 750 pixels (tall)
- 150 pixels per inch (ppi) for resolution
- RGB colorspace (8 bit)
Part 2
Using the Homepage Design Comp as a guide, build an HTML page matching the design. Next, build an HTML page for a secondary page (sharing CSS with your homepage). You can then duplicate that secondary page for your additional pages. You need to create at least 4 pages**used to be 5**, all linked together as a website, with significant, unique content on each page (no greeking or placeholder text).
Upload your files directly into the project4 folder (treat it as your Root Folder).
In the footer of your homepage, add a text link to your Design Comp (layered Photoshop file) so that I can check it and give you credit.
After uploading and checking your files, don’t forget to submit your assignment in Canvas. | Turning in an Assignment video
The following Technical Specs apply to all assignments (so don’t forget them)
- Use Dreamweaver to create your pages (all code, HTML and CSS, should be generated by Dreamweaver).
- All CSS is to be in shared, external file(s).
- Eric Meyer’s CSS reset rules need to load first.
- Use meta viewport on all pages.
- Create your pages as fluid layouts (using percentages for all widths).
As always, this project needs to have a unique design that does not duplicate fonts, colors, or images used in the class demo. This project is more creative than any of our previous projects and will be graded as such.
Extra Credit
After creating the Design Comp for your homepage, create a Design Comp for a secondary page (typically you would do this in your design process).
Video Tutorials
If you’re new to Photoshop you should watch some Photoshop Tutorials to become familiar with it: