Responsive Editorial due May 17, 2019
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
- Invision
- 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.
Deliverables Checkpoints
Monday 4:30pm (10 min review with TAs, 2 groups together)
20-minute session
- Project plan
- Content audit
Tuesday 3pm (20 min review with Nevan and TA team, 3 groups together)
1-hour session
- Navigation structure, based on card sorting
- Style tile (at least three options)
- Layout sketches of article page, section page, and homepage
Wednesday 2pm (2 group crits, 3 groups together, 30 minutes per group)
90-minute session
- First visual design mockups of at least three screens, with three options each, at mobile and desktop sizes (18 artboards)
Thursday at 11am (submit for feedback from Franci and Héctor)
Feedback notes returned by 1pm
- HTML structure and content for at least one page
Thursday at 2pm (20 minute crit)
1-hour session
- final design mockups of three pages at mobile and desktop sizes
Friday at 11am (submit for review by Franci and Héctor)
Feedback notes by 1pm
- CSS for your HTML page, responsive
Friday at 2pm (20 minutes with a TA)
2 rehearsal blocks per TA
- rehearsals
Friday at 4pm (downstairs, invite other classes)
- 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?
Give feedback to your peers!
