- Approx. completion time: many hours
- Deliverables: 1 HTML file, 1 CSS file (or more), images
Take an infographic created in an earlier class and convert it to a responsive interactive website.
Using the assets from the Adobe Illustrator infographic you created in David Bromley’s class, create a responsive website.
- You’re welcome to simplify it a little—maybe picking 2–3 of the best bits.
- There doesn’t need to be animations or transitions yet—but you’re welcome to add them.
- Try to put as much of the SVG code into your HTML as you can.
Follow the rubric’s specifics to make sure you’ve fulfilled all the requirements.
| Component | 0 | 10 | 15 | 20 |
|---|---|---|---|---|
| Markbot | Markbot not used | Passes all Markbot tests | ||
| Responsiveness | Barely or not responsive | Some responsiveness issues on all screens | Works well on small, medium & large screens | Responsiveness perfect on all screens: good text size, good hit areas, etc. |
| Content | Feels incomplete | Not enough content to be a complete infographic | Has enough content to represent a whole infographic | Lots of extra, detailed content |
| Design & usability | Poorly designed, rushed, not accessible | Non-matching components, poor type choices, poor accessibility | Good design, great type, but poor accessibility | Cohesive design, perfect content size & placement, great accessibility |
| Professionalism | Incomplete and prototype-y, looks cheap | Feels about halfway complete, could use more effort | Has the completeness of a real website, a client would pay for it | Good enough for Thomas to steal it an call it his own |
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.
