Interactive wireframes

The first step of coding a website is creating the interactive wireframes and prototypes. They are simple layouts to express the responsiveness using grids, modular type, modular spacing, and a few media queries.


Referenced lessons

This layout and series of videos combine together all these different lessons—so they should be watched first:

  1. All devices setup
  2. Media queries
  3. Grids
  4. Modular typography

Video list

  1. Interactive wireframes: setup grids & type
  2. Interactive wireframes: header
  3. Interactive wireframes: footer
  4. Interactive wireframes: banner
  5. Interactive wireframes: meat-/plant-eater section
  6. Interactive wireframes: favourites section
  7. Interactive wireframes: second page setup
  8. Interactive wireframes: simple banner
  9. Interactive wireframes: quick facts section
  10. Interactive wireframes: intelligence section
  11. Interactive wireframes: bunch of dinosaurs section
  12. Interactive wireframes: push & pull
  13. Interactive wireframes: grid offsets
  14. Interactive wireframes: stretch & content fill
  15. Interactive wireframes: simplified syntax