Content Focus: Receiving a massive amount of content, that has little to no focus, is a common design problem. Designers will often act as editors, who strategize what should get used, what's important, and what needs to be left out. Read and analyze the text content from the following Word text content. Note: You must use the text matter given to you, but you may add information if it fits your approved site concept, and if the instructor has approved it. The above text content should be thoroughly read to help you understand the material and the client. Sort, group, organize, and filter content into a cohesive and understandable framework. And you should also review the text for any errors that may be present. You may add to, edit, amend, or substitute content from that Word Document, but do not get too bogged down in that process, especially since so many components exist for this project.
LATCH: Parse through the many and varied pieces of content in your assigned Word document and consider how LATCH can help you. Richard Saul Wurman, the self-titled information architect, proposed LATCH in his book "Information Anxiety 2" as an organizational tool (also called hatrack) that can help make a system of many appear fewer. Use post-its, index cards, or any other moveable/sliding vehicle to aid in this exercise. Can you find similarities and/or differences to help you arrive at an overal site structure and/or theme?
- Location
- Alphabet
- Time
- Category
- Hierarchy
All 20 of your ideas should be different; do not come with one idea about football grilling food, another about summer grilling food, another about winter grilling food. Make sure each of your 20 is unique, and not similar to another one in your list. This should not be in the same topic/theme as what you did for Project 1. Think about what kind of recipes you would include on the site, and if they are included in the assigned food Word Document. If you want to add additional text to that Word Document, you can later, but you do not need to have those recipes for this deadline.
Your ideas should be typed up and prepared to hand in: PDF, RTF, TXT, DOC, or DOCX will be acceptable. Hand in your 20 written ideas to Turnstile2 and be sure to have your name in the document and also part of the document's title. You do not need an explanation of each idea, but should have a topical sentence that explains who your food site would be for, what food it would include, and the kinds of recipes. Make your list easy for somebody to understand just by having them read it.
When thinking about what 20 topics you will deliver, think broadly. There are a number of media outlets for food such as magazines, books, TV shows, news papers and radio, so many in fact that it seems natural to consider the web as a way to distribute more information about food. This is a cultural phenomenon not only for Americans but also for people around the world. Much of the world economy is centered on food, food production, and food distribution. Political problems concern food such as the wheat and dairy commissions as well as the poultry board and the beef council. Some social advocates look to make slow food versus fast food freaks and every one in between. The Atlantic magazine offers a wide range of articles about food, health, and food production/processing.
Subsequent Milestones and Deadlines Will Include
- website topology, such as LATCH: different systems, web, tree, linear, cluster; organize your content by audience, market need, or a combination
- audience definition, using a persona, crafted as a written document: consider the content you've been given; and also consider external factors such as economics, social constructs (families, friends, or a combination), trends, cultural issues, health (allergies, well being, old age, young age)
- mood board, to define creative direction
- wireframe of website structure, with menu hierarchy
- frontend design, layout in color, Illustrator or Photoshop; professional, well structured, visually appropriate to the organization
- final HTML and CSS website with Javascript component
Project 2 Components:
- audience definition and their goals (written and visual research)
- defined scenarios to aid in the design that reaches said audience
- topology of the site (your site map and wireframe)
- appropriate look & feel (aesthetics, color, imagery, fonts)
- well-structured, appropriate, and approved layout based on accepted fluid (a.k.a. liquid or floating) 960-pixel wide framework, designed with "table-less" CSS using DIVS to markup overall structure
- CSS layout using absolute, floats and relative, or a combination of the aforementioned positioning; no tables for structure
- CSS should be a linked file called in the <head> and you can have 1 CSS for fonts and 1 CSS for layout, and a 3rd CSS for just tables; even a site that has 3-4 different layouts can still have everything in 1 CSS layout
- use of HTML 5, including use of header, nav, section, article, and footer elements (the overall structure must be designed as "table-less")
- 12-page web site
- functional links that get users to each of those 12 pages
- unified link styling
- one form element
- one Javascript element, may be the menu (see below)
- menus may be one of the following (a) Javascript or (b) straight CSS/HTML such as ul and li elements; if menu is CSS/HTML, a Javascript element must be used elsewhere in the site
- Font referencing using Google Web Fonts for your h1, h2, h3, h4, h5, h6 fonts; use common, web safe sans serif and/or serif for your article and running text
- typography sizing matrix done entirely in ems or % percentages (no absolute measures with points, pixels, inches)
- typographic readability (how easy it is to read large bodies of text)
- typographic legibility (whether we can tell what letters are, and what words are formed)
- typographic unity and variety
- high quality images placed within your page, and sized proportionally with proper aspect ratio
- proper spelling, grammar, diction
- other layout schemes must get instructor approval
- clean file structure/architecture
- final site posted to the Design.Birdnest server that functions across major browsers including Chrome, Firefox, Internet Explorer, Safari; phone and/or tablet browsers are not required
Project 2 Rubric:
- 14% written research, persona/audience interview
- 36% verified HTML/CSS
- 20% navigation
- 30% design appropriateness, includes mood board and layouts
