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 simple logo, and layout and positioning for media. Beyond that, the content can be anything you choose. The wireframes 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.

Swapping and Submission

• Name your wireframe with your own name (not your partner's). For example, I would name the wireframe that I create BrandonR.xd, or BrandonR-wireswap.xd.
• Submit your own wireframe and materials in a folder labeled "for" + your partner.
• Submit the website that you build in a separate folder.
• Put both of these folders in your usual assignment folder on Google drive.

Here's an example. Let's say I, Brandon, am working with Sally. This is what I'll submit on Google drive:

10-wireframe-swap/
    for-sally/
        Brandon-wireswap.xd
        Brandon-wireswap-screenshot.png
        snowflake.svg
        spruce-tree.jpg
    wireframe-swap/
        index.html
        style.css
        tiki-hut.svg
        coconut.jpg
        Sally-wireswap-screenshot.png

• Include a screenshot of your wireframe in the materials you share with your partner.
• Include your partner's screenshot with your website files, but you don't need to link to it yet. We'll use the screenshots later when updating our splash pages.

Layout Ideas

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