Objective
You have established a look and feel for your company, have found and built imagery for it, and have some products and tangible items which display the visual theming you’re proposing. A logical next step is to establish an online presence for your company in the form of a website.
The feedback that you have received on all the other elements you have worked on should be considered and applied where applicable in the design of this site. You are not required to build this out as a functional site, you will be just be designing it. Be sure and create your design at 100% at a reasonable size. You should also create your layouts in Illustrator, as it’s easier to quickly move your layout elements around and for me to quickly help you resolve structural problems.
Specifications
- Website design of at least 3 pages, (including three different page styles; home page, general interior page, contact page with form ) with the content taken and adapted from the company’s existing site and materials.
- Contact form with at least the following fields: Name, Email, Comments, Submit Button
Instructions
You are to sketch, organize, design and code a website for your company using the content that already exists for your company and any new content that is necessary for the site to reflect your vision for it.
Step 1
Gather content for your website, both visual and informational. You should have a good portion of this already in the form of your brochure and the elements you have designed. Your content should come first, otherwise your sketching and designing of the site are meaningless.
Step 2
Create pencil and paper sketches for how you plan to not only lay out your website and organize your content, but how your identity will work itself into the way you present your content. You need at least two sketches to show how you plan to draw viewers into the interior of your site: an interior page layout, and a home page layout. The home page should share common elements with the rest of the site, such as general structure, header and footer elements. But it should serve as more of a storefront, using callouts and prominent imagery, typography, banners or other visually powerful element to draw the viewer into the more content-heavy pages of your site (the interior). Your sketches must be approved before moving forward, and you should be able to discuss what content you are indicating in your sketches.
Step 3
Create your layouts in Illustrator. You should have layouts for every page variation (home, interior and contact at least) that you will create*, as each page should have different visual elements that need to be viewed before deciding to code them up.
*An exception to this would be if you had a vast series of pages whose layout didn’t change, only the content, such as a list populated by a large database. This is not likely to be the case with any of your sites.
If you decide to code up your site, your layouts must be approved and turned in before moving forward. Working as a web designer, it is ridiculous to start coding a site whose design hasn’t been signed off on, and you will eat any time wasted on a design that is not approved.
Step 4
Begin developing your website. If you are unsure about how to best structure your html or approach the styling of your site, create a framework layer to be reviewed by me prior to beginning development. This will save you a lot of time, and will allow me to assist you if you run into problems building your site. Make sure that you know what is going on in your code; html comments would be a good idea.
Development Specs
- Your site should use lean, semantically sound code, and take advantage of classes where appropriate
- Each link should have a hover and active state in addition to their default styling.
- Your site should pass xHTML validation or HTML5 validation if you choose to code your site in that way. If you code using HTML5 standards, I still want all your elements closed (<li> and <p> elements, for example ).
If any of the content discussed here is foreign to you, it is your responsibility to freshen up on your coding abilities. I will be here to help to a limited degree, but plan on spending a significant amount of time outside of class working on this project and the final project, which is to present this site and the rest of your materials to the class.
Submission
Have your entire site ready to present by the beginning of class on the due date, labeled [lastname_f_Campaign-Website].