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.

You 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, your partner should provide you all of the "raw materials" necessary to build their 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.

On your server space, upload a link to some screenshots/png's of the wireframe you had to work from, along with the site you built. (Don't upload the wireframe Illustrator files themselves, since most users won't be able to view them properly.)

Here are some generic layout ideas to get you started:

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

  • Make sure your project folder has an offline/ and www/ folder in it. Illustrator/wireframe files go in the offline/ folder and won't be uploaded to your server. All the web files go in the www/ folder.
  • Name the wireframes according to who created them. E.g. BrandonRodkewitz.ai, wireswap-BrandonR.ai, etc.
  • Take a screenshot or export a png of the wireframe you worked off of (not the one you created).
  • Your server 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 homepage. Or, if you want to keep your homepage layout consistent (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 page doesn't have to be beautiful - just the two links.