This should demonstrate your skills in interface design and in regards to aesthetic principles and embedding media assets.
The Brief: Dessert Recipe Website
A client has requested a treatment for a recipe web site. They require 3 HTML pages of content, plus a Cascading Style Sheet to ensure consistency of design and layout across every page. Their concept is for a general dessert recipes website where users can rate and comment on recipes as well as find out information about the history of recipes. To begin with, they want a design for the site based around a single recipe.
The client has supplied sample images and sample text-cop. (NOTE: you should adapt these to your design including editing the text if necessary):
Text Content: A text document with representative text (i.e. the main body text). This includes a recipe for Pavlova, some tips for cooking, an excerpt from a Wikipedia article about the origins of the Pavlova recipe and some sample comments for the site. These are unedited from the original source and will require some tweaks to make them read well for your site.
Image Content: An image for the body content - two pictures of Pavlova. You can either use the supplied images, or supply your own if you find an alternative that is a better fit for the design of your site. Also consider finding or generating images you may need for backgrounds and other design elements in your pages.
Graphic Identity: The client has requested that your design should reflect a clear graphic identity, suitable for a desert recipe website.
The General Process
1. Identify the main components that will make up the body text document (i.e. title and subtitles, ingredients, how to, origins, image, comments etc.)
2. Sketch on paper a rough layout for all of the components (try at least 3 different options/versions) based on the importance, size, proximity of the content. Consider the importance of each piece of information. Will the different pages link back to each other, in addition to the navigation, why?
3. Translate your rough ideas into a predominantly text based HTML/CSS website applying the skills you have learnt so far. Consider how you will apply the main components of the text to different pages. What other content can you add to the client’s copy (text) to make the content more interesting?
4. Add some graphics to your site either from the images supplied by the client, or from graphics you find yourself. Try to communicate a clear graphic identity as per the client's request.
This material may consist of step-by-step explanations on how to solve a problem or examples of proper writing, including the use of citations, references, bibliographies, and formatting. This material is made available for the sole purpose of studying and learning - misuse is strictly forbidden.<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="mycss.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 9]>
<img src="img/logo.jpg" alt="The AUS & NZ recipes" />
<li><a href="recipe.html" class="current">recipes</a></li>