Build a small website about a subject that interests you, taking a Wikipedia article as the core of your content. See if you can organize the information into a story. This project involves the design of system of parts, with many pieces that support a single design concept. Explore ways to make individual pages stand out, but only after you have constructed the basic system, and working within the framework that you have constructed.
Look for two or more Wikipedia articles. Give a three-minute presentation about your candidates. You may show slides if you wish.
Decide on an article. Gather information about your article and look at related websites. Decide what the site needs to convey and to whom it needs to speak. This is going to be a modest-sized website, so it’s fine to cater to one or two audiences.
Once you understand what the site needs to do, start on design. Examine several different approaches. Think about typographic language, photography, color, and concept, and create color swatches, type samples, and image samples. Make sketches. Do initial sketches as thumbnails (small, not a full sheet of paper!), and more detailed sketches using wireframe templates (PDF) and tracing paper.
Plan the site’s organizational structure. Produce two site maps.
Refine your initial ideas. Create static wireframes/comps on paper or on the computer.
Pull content from the Wikipedia article, and gather any additional images or resources that you would like to include.
Produce the site in HTML/CSS, starting with the basic site (ZIP). Consider code style, adherence to web standards, and interoperability and accessibility.
Put the site on the web using the deparmental web hosting service.
For due dates, look at the class schedule.
Find an article that provides enough content for a multipage website. As a guideline, you might look for articles of 10–12 screens of text. If you can bring in more images, you might have a shorter article. You may also combine several related articles in order to generate enough content.
Plan on using all of the paragraph text of the original article. If you think that your audience would be best served by editing down the existing text, you may do that, but only with the instructor’s permission. You may leave out lists and tables, and you can modify the headlines. Link to the original article instead of providing footnotes.
Getting started with code
When you move to HTML/CSS, work from the basic site. Do not create your project from scratch. Keep your files under version control with Git/GitHub.
Write your own code. CSS frameworks like Bootstrap and Foundation are off-limits. Similarly, you must solve this problem without using parallax scrolling. The site must work well on laptops and on desktop monitors, but it does not yet need to adapt for mobile devices.
- Organize a website.
- Design using offline sketching processes.
- Bring color and images into a site.
- Create site markup using HTML.
- Format a site using CSS.
- Design a site as a single system, based on templates.
- For design documentation, research, and sketches, bring work on paper or as PDFs or images.
- The final deliverable is one website of 5-10 pages (or the equivalent, with the instructor’s permission), built with handcoded HTML/CSS.
- Usability of site structure and navigation
- Visual design, page layout, typography, and readability
- Use of templates and standardized code
- HTML/CSS quality; correct use of tags