Cooking Site: Responsive Page Layout
The task is to create 2 example pages of a fictional cooking/recipe website (home page + recipe page example). You design the layout first and code it afterwards.
The recipe page should contain the recipe you experimented with in the previous assignment. But create a new design for this assignment since the dimensions are different and the recipe itself should just be part of the page layout in this case. Have one section of your home page be a link to your recipe page (this section on your home page could be “the recipe of the month”, for example). This will be the only “working” link for this assignment. Although technically we still need to create links for all navigation items in order to show mouseovers etc. Instead of linking to an HTML page (link to a URL) just use the # sign as a placeholder (I’ll explain).
In this assignment we’re focusing on a web page layout and it’s typical divisions. Often sections are divided as follows:
— Header (may contain site title/logo, big image area, navigation elements)
— Navigation (main links of the site, may contain site title/logo, can appear horizontally at the top of a page or vertically in a sidebar)
— Feature area on home page with big image
— Main content (your full recipe on the recipe page)
— Side bar(s) (may contain navigation links, site highlights, ads, embedded twitter feeds…)
— Footer (my contain site links, social media icons/links, copyright info, contact information etc.)
Divide your layout into those sections. Header and navigation sections may be combined. You may also add sections if necessary. Use generic images (dishes, food and ingredients only, no illustrations, no people etc.). You can use greek text for all copy and navigation links (except the one that leads to the recipe page).
Content suggestions for sections:
(all visible text has to be selectable HTML, no images for text elements or navigation). You can use greek text and generic food images (except the ones for your recipe).
Site title: Recipes.com (or any other title you can come up with)
Header: Site title and a few links (social media icons, contact, sitemap…).
Navigation: About, Featured Recipe, All Recipes, Tips & Tools, News, Blog, Contact (navigation could also go inside a sidebar)
On Home Page: Feature area highlighting one recipe as the “recipe of the month”, use a big image of your recipe on this section.
Main content for home page: highlight 3-4 other recipes (generic food images and greek text).
Main content for recipe page: Your recipe with Title, ingredients, instructions, cooking time etc.
Side bar (1 column, all greek text): “News” (3 news items with title and short excerpt, “Blog” (3 blog feed excerpts with date and title)
Footer (3-4 columns): copyright info, main navigation links, contact info, social media icons
Exercise 2_1: Wireframes
Exercise 2_2: Organize Site Content—site map
Exercise 2_3: Static Page Design
Exercise 2_4: Structure your HTML file
Exercise 2_5: Create the CSS file
The page layout should be based on a multiple column grid in combination with a 960px fixed width. 960 pixels is a common width for websites and can easily be divided into 12 or 16 column grids. Click here to download grid templates that you can use in either Illustrator, Photoshop or InDesign (your choice). These templates contain guides and will speed up the process overall. Open the template in your layout program and make a few layout variations for home page and recipe page. Draw rectangles in different shades of grey (see below). Think about possibilities on how to use the grid for your page divisions. Since we’ll be coding a layout for different screen sizes (desktop, tablet and mobile) you need to work on 3 versions for each page.
Desktop: 12 grid units, width = 960px. Tablet: 9 grid units, width = 720px, Mobile: 4 grid units, width = 320px.
“A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on “what a screen does, not what it looks like.” (from wikipedia)
left: home page, right: recipe page.
left: desktop, middle: tablet (iPads etc.), right: mobile device
Organize Site Content—site map
Static Page Designs
Structure your HTML files
Create the CSS files