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.

How to Submit

• Name the wireframes according to who created them. For example, I would name the wireframe that I create BrandonRodkewitz.xd, wireswap-BrandonR.xd, or similar.

• Your assignment folder should separate the offline materials from the website itself.

  Create a folder called assets/ or offline/ for the wireframe and any notes and raw materials.

  Create a folder called www/ or wireframe-swap/ for the code files and processed images that appear on the web page itself.

• Take a screenshot or export a png of the wireframe that your page is based on. Include this with your website files. It does not however need to be linked to, or included on your web page. You'll use this when the project is uploaded to your splash page.

Layout Ideas

You can create any kind of layout you want, but here are some generic layout types to give you some ideas: