Wireframe Swap

Get a partner! You are each going to make a wireframe for a web page, then switch and build each other's designs.

The design should include a navigation menu, a logo, and layout and positioning for media. Beyond that, the content can be anything you choose. Make the wireframe with outlines, elements, and sizes. They will probably be a little rough - I want us to devote most of the time to building the sites in HTML and CSS.

Whoever creates the wireframe should also create the images and assets for the page. In other words, you should provide your partner with all of the "raw materials" necessary to build your design.

Don't be afraid to challenge yourselves - it's the only way to learn!

When everything is finished, I'll collect both the wireframes and code files to see how you did.

Here are some generic layout ideas to get you started:

manuscript
2 column left
3 column "holy grail layout"
2 column grid
header grid
left grid
main graphic log
splash grid

How to Submit When Finished

  • This project will be collected and graded off of the Google Drive as usual, but it should also be uploaded to your splash page.
  • Make sure your project folder has an offline/ and www/ folder in it. Wireframes and raw materials go in the offline/ folder and won't be uploaded to your server. All the web files for the page you build go in the www/ folder.
  • Name the wireframes according to who created them. E.g. I would name the wireframe that I create BrandonRodkewitz.ai, wireswap-BrandonR.ai, or similar.
  • Take a screenshot or export a png of the wireframe that your page is based on.
  • Your splash page should include a link to both the wireframe image(s), and the web page you created.
  • You can do this with two links on your splash page. Or, if you want to keep your splash page layout consistent with just one link per project, create an "intermediate" page.
    1. Splash page points to intermediate page
    2. Intermediate page points to the two parts - wireframe image(s), and the project page itself. This intermediate page doesn't have to be beautiful - just the two links.