Final Project
Research. Write. Map. Wireframe. Design. Code.
Objectives
Research the project. What is a web site? What do they look like? How are they used? What do you think your visitors want to experi- ence at this site? What do you think they want to know?
Explore the form of the website and its pages. Sketch patterns and relationships between your text and your images. Refine and re-work ideas as needed to solve the problem.
Balance/integrate the system you create. Each page of the web site is part of the system. How do they relate to the topic?
Build the site as a mock-up first. Show your ideas in early stages
Reflect on your process, your use of typography.
Design and create a web site about a topic you are interested in that relates to typography. If you don’t have a topic you are interested in, you can design a website for a gallery that is having a show highlighting the work of a typographer (in which case, you need to pick a typographer for the project).
Content must include (but can include more!)
- Your introduction/writing for the topic
- At least one other piece of writing related to the topic.
- Images related to the topic
- Resources (linked from text/images used in your web pages)
Rules/Constraints
- Main-container width must be 990px or less
- Site must be responsive.
- Site must have more than one page.
Anatomy of a Page
- Navigation: links take us to other pages in the site. How do we know which page we are on?
- Main_container (or wrapper): wrap the elements in a div. Content, navigation live here.
- Background/frame: the space around the main container extending out to the edge of the browser.
- Footer: a great place for copyright info, a notice that this is a school project, and that all text andimages you use belong to the people you give credit to!
Things we are not going to learn to make this site
(unless you are in or have taken Interaction Design already!)
- Animations, light boxes
- Javascript and other scripts (if you already know how to work with various scripts, you are welcometo do so, but your work will be evaluated on type/layout/systems/color and so on first).
Process
- Decide on a topic. Gather texts, images, brainstorm ideas. What kind of site would you like to make about this topic? What kind of site would be appropriate?
- Pay attention to web sites you use daily or weekly, as well as the sites you use to research your topic. What sites do you like? Why? What sites don’t you like? Why not?
- Keeping in mind your over-all topic, develop a site map and sketch out wireframe ideas. Think about who might come to this site and what they need from it, as well as the grid, composition, hierarchy, voice, image/text relationships, color, where on the pages the navigation will live, use of the main container and the background, and so on.
- Design an mock-up of your site in InDesign. This will help you show your colleagues what your site will look like even before you code it.
- Build a working wire-frame of your site in HTML/CSS, then style it to your specifications.