- Digital design tool
- Code editor
- Presentation software
- Click-through prototype
- HTML & CSS prototype
With your team you’ll have a week to (re-)design a website, for a local small business or organization of your choosing.
In this project you’ll be putting some information architecture, branding, and responsive layout techniques into practice. You’ll also be responsible for developing 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.
- As a team, quickly decide on a small business or organization that you’d like to (re-)design a website for. Keep in mind that for this project there’s no need to stick to their existing branding.
- Audit the existing content. It may be too time-consuming to perform an exhaustive audit. If so, focus on breadth (as many sections of the site as possible) as supposed to depth (all of the deep nested content within a section of the site).
- Do some card sorting to figure out a sensible navigation for the content. Prepare cards with a subset of content across a variety of sections of the website. Each card should have a title and perhaps the first sentence or two of the content so that your test subjects will know what that content is about. You’ll probably want 20 or more 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 the services offered, contact info, directions.
- Project plan
- Content audit
- Navigation structure, based on card sorting
- Brand attributes
- Style tile (at least three options)
- 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)
- Group Crits
- Desirability Testing
- HTML structure and content for at least one page
- Final design mockups of three pages at mobile and desktop sizes
- CSS for your HTML page, responsive
- Prepare your presentation
Your presentation should answer the following questions:
- What variations on your design did your team explore?
- How does your design improve the existing site?
- What would you do differently next time?