Responsive Editorial
With your team you’ll have a week to (re-)design an editorial website, for a magazine or newspaper of your choosing.
In this project you’ll be putting more information architecture, content strategy, and responsive layouts into practice. You’ll also be responsible for coding at least one of the templates using HTML and CSS so that you can properly demonstrate how the layout will change on different size screens.
Setup
- Teams of 2–3
- 4 class days
Materials
- Sketch
- Principle
Getting Started
- As a team, quickly decide on an existing publication that you’d like to design a website for. If they already have a website, you’ll be redesigning it. If they only exist in print, you’ll be designing their first website.
- Audit the existing content. It will probably be too time-consuming to perform an exhaustive audit, so focus on breadth as supposed to depth.
- Do some card sorting to figure out a sensible navigation for the content. Prepare cards with a subset of articles across a variety of sections of the publication. Each card should have a title and perhaps the first sentence or two of the article so that your test subjects will know what that content is about. You’ll want about 50 cards to perform a good set of open and closed card sorts.
- Once you’ve got a good handle on how the site will be organized, start sketching screens. I recommend working on mobile layouts first, as it will be easier to scale these designs up than to scale desktop designs down. Start with core parts of the site first, like an individual article or the subscription sign-up form.
Suggested road map
Monday
- Project plan
Tuesday
- Content audit
- Navigation structure, based on card sorting
- Style tile (at least three options)
Wednesday
- Layout sketches of article page, section page, and homepage
- First visual design mockups of at least three screens, with three options each, at mobile and desktop sizes (18 artboards)
Thursday
- Group Crits
- HTML structure and content for at least one page
- Final design mockups of three pages at mobile and desktop sizes
Friday morning
- CSS for your HTML page, responsive
- Rehearsals
Friday afternoon
- Presentations (6 minutes)
Presentation (6 minutes)
Your presentation should answer the following questions:
- What variations on your design did your group explore?
- How does your design is improving the existing site being re-designed?
- What would you do differently next time?