Exercise:
Make groups of two. Each group documents two websites from a category below:
-
Portfolios
-
Webstores
-
Arts & Culture
-
Type Foundries
-
Online Magazines & Journals
-
Radio Stations
-
Databases & Archives
Document the websites by taking screenshots. Here’s your checklist:
- Home page (website.com)
- Other index pages or lists, if they exist (website.com/section1/, website.com/section2/ etc)
- Single-page types — i.e. layouts for pages or entries under the different website sections (like website.com/page1, or website.com/section1/page1). Do up to 3 single-page types, w. minimum 2 examples for one page type. (If there are few overall page types, give more examples of the ones that do exist)
- Important menu and navigation elements.
- Interactive elements that are specific to the website category (like the type tester that type foundry websites have) — 2 examples.
- Any other interesting interactivity (hover states, animations, popups, favicons etc) that you noticed.
All of the above 6 things need to be documented at: * desktop, * tablet, and * mobile viewports (choose breakpoints that the website uses); and at the * start of the page, * mid-page and * end-page (or mid-carousel/ end-carousel ..) — document appropriate to the website without giving or losing too much information.
After browsing through the website and looking at the menu navigation, URL paths, and sitemap (if any), make an informed guess and chart out the file and folder structure of the website. Write down any other notes or annotation that you think is relevant to know along with the screens. (You’ll use these notes in the second exercise for the day, where you’ll be presenting these screenshots)