Figure out what sort of website you want to make for this class. You'll still have time to adjust/change your mind, but I want to start nudging you to commit to the type of site you'll be making. Is it going to be a photography portfolio site? A site to sell apparel? A travel blog? A journalistic site? An art site?
Decide what "genre" of site you'd like to make, and find three examples of well-designed websites that already exist in that genre. So, if you're making a design portfolio site, find three portfolio sites for designers. And then:
Decide what "genre" of site you'd like to make, and find three examples of well-designed websites that already exist in that genre. So, if you're making a design portfolio site, find three portfolio sites for designers. And then:
1. Write and print out a list: what were the elements you liked about the sites you picked? What are the elements you disliked about the sites? What elements would you like to incorporate into your own site? The could be use of palette, organization, navigation, use of images, use of fonts, etc.
2. Create a wireframe for the homepage of JUST ONE of the sites you picked, as well as a wireframe for one of the "second level" pages (that is, one of the pages you get to by clicking on the nav bar), and a flowchart for the site (refer to the the images below for visual references).
2. Create a wireframe for the homepage of JUST ONE of the sites you picked, as well as a wireframe for one of the "second level" pages (that is, one of the pages you get to by clicking on the nav bar), and a flowchart for the site (refer to the the images below for visual references).
I usually use illustrator for doing up wireframes and flowcharts -- if you have any familiarity with Illustrator, it's a good tool for dealing with text, lines, and boxes.
Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Pencil or ballpoint pen on unlined paper would be great (and if you need to, you can steal some unlined paper from the copier on the second floor). Just make sure the names for all the navigation and content are legible.
The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. The rationale for asking for two wireframes stems from most sites having homepages that function differently than their "interior" pages, so it's necessary to have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.
A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.
The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).
Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Pencil or ballpoint pen on unlined paper would be great (and if you need to, you can steal some unlined paper from the copier on the second floor). Just make sure the names for all the navigation and content are legible.
The wireframe is to give an idea of all the pieces of content you need on a particular page. There might be some layout information in it, but it's far more about content than design. The rationale for asking for two wireframes stems from most sites having homepages that function differently than their "interior" pages, so it's necessary to have at least two wireframes (for first and second tier page functionality) to give an idea of what's going on.
A flowchart, on the other hand, doesn't give an idea of everything that's on a page, but rather gives an idea of how the site as a whole is organized -- how the menu breaks the site into various sections, that may or may not have subsections. You don't need to draw out every single page, but you do need to draw out each section or subsection of your site.
The reasoning behind this exercise is to get you to dig deeply into the site architecture of a site that is trying to solve the same sorts of problems you'll want to solve for your own website. It will hopefully give you some ideas on how to organize your own site (or how not to organize it, as the case may be).
Here is a wireframe example (click to enlarge):
Here is a website flowchart example (you can do a google image search for "website wireframe" and "website flowchart" to see more examples). Click to enlarge:
At the end of the day, the wireframe and flowchart are just boxes – or buckets for the content to be thrown in. You'll eventually make a wireframe and flowchart for your own site, and that will give you a solid guide to know what content you need to assemble and produce to make the site feel "filled out."
No comments:
Post a Comment