Wireframe a website (portfolio or otherwise)

Planning and Process

Brainstorm your page
List the content that you want to include on the page you're wireframing. Remember to keep the list as abstract as possible so it can serve as a template.
Christopher Tobias created a mind map.
Organize your content list
Create relationships between the page content you've listed - what will you group together? What's highest priority to be read first?
Determine how you'll want to treat any actions on this page - how important is each and what preference do you want to convey to the user? (ex. button vs. text link)
Sketch your page layout
Include what content will go where.
Remember to consider type weight when creating hierarchy.
Share your sketch on your project page and offer feedback to your fellow classmates.
Kate Jera sketches their page layout.

Execution and Tools

Create your wireframe
Start wireframing! The medium is open ended, be it scanned in sketches, Powerpoint, Illustrator, HTML, whatever you have at your disposal and feel fastest in.
Add more pages
Wireframing a couple of pages is ideal. It can be any type of site that you want, though my example is for a portfolio website.
Finish your wireframe
Share your progress in your project section to get feedback from other students.
Yvonne Le shares their wireframe.

Additional Resources

Here are some questions you should be thinking through while watching the lectures for this unit:
- What do you want to get across to viewers of your site?
- What content belongs on your site? What's the relative importance of each piece of content?
- How can you use the language of wireframes and UI patterns to convey functionality, content and hierarchy?
See the full-sized examples referenced in the lectures here:
- Detail page
- Storyboard
Here are some links to helpful resources and tools to use when executing:
Resources
Itching to get started? Here are the resources that I've compiled that I find particularly useful as I'm wireframing. Please comment if you find any other resources that are helpful; let's get a big list going!
Video
Previously Recorded Q&A (56:03)
Originally recorded February 6th, 2013
________
Tools
Choosing a tool to execute your wireframes with is a personal decision; it depends on the level of fidelity that you're looking for and whatever you feel most comfortable with. What may work well for one person or project may not work for another. This post will be most helpful if you've watched video 5 of my lecture. Here are the tools I've curated.

Tri Nguyen

34