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.
Content and discovery
Look for two or more Wikipedia articles. Think about whether there is are good images available, about the possible conceptual direction for the website, and about the problem’s complexity. Send your instructor an email that describes your choices for approval—a paragraph for each article will do.
Once we’ve agreed on a final article, look at related websites so that you understand the landscape.
Once you understand what the site needs to do, start on design. Plan the site’s organizational structure. Produce a site map. (You can do this on paper.)
Start thinking about how pages might work. Make sketches. Do initial sketches as thumbnails (small, not a full sheet of paper!). Different pages should share the same structure, for consistency and ease of development. Aim to have two or three layouts that repeat across the site, populated by different content.
You can present colors and type using style tiles. You might want to start with a copy of the style tiles template in Figma.
Development and content
Start planning the layout. Sketch out your DIV structure on paper. Produce your this layout in HTML/CSS, starting with the basic site (ZIP). Don’t add the content yet—move empty placeholder DIVs around the page.
Start on one key page. Add a small amount of text content. Set small samples of type in HTML/CSS, and refine your typographic decisions.
Still working on this one page, bring in images and the rest of your content. Aim to get this page to a polished state before you move on.
Create the rest of the pages and add in their content.
You can (and probably should) refine your design in code, but do more sketches on paper to help plan out layout changes, and aim for a stable design before you start bringing in substantial amounts of content.
For due dates, look at the class schedule.
When you move to HTML/CSS, work from the basic site. Save versions of the project in progress—the entire folder, ZIP-compressed and dated.
For this project, you may borrow code from the textbook, assigned readings, examples, and MDN—but cite all of that borrowed code in comments or in the
readme.md file, and be able to explain everything. Otherwise, you must write every line of code that you use.
Find an article that provides enough content for a multipage website. As a guideline, you might look for articles of 6–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.
Perhaps supplement the Wikipedia content with additional freely available images, or images of your own creation. As always, cite your sources.
Deliverables and specifications
- 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.
- As with every project, you must choose your fonts from the list of fonts for this class.
- Use Grid and Flexbox for layout. Do not use float for layout.
- The site should work well on laptops and on desktop monitors, but it does not yet need to adapt for mobile devices.
- Consider code style, adherence to web standards, and interoperability and accessibility.
- 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.
- 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
- Apply CSS Grid to a more complex site
- Create a design for a website that provides a readable, usable, and compelling frame for content
- Organize a large body of text, images, and time-based media
- Learn to set type for readability and legibility
- Design navigation systems and layouts for a multi-page site
- Evaluate a website for usability
- Write HTML for use across browsers and with assistive technologies