Friday, January 30, 2009

Due next class (Tuesday) -- wireframe and flowchart

By next class, have:

1. A website wireframe prepared for one of the sites you picked that is in the same "genre" of the site you'd like to make, their first and second level pages. A wireframe example (click to enlarge):



2. Make a website flowchart as well (you can do a google image search for "website wrireframe" and "website flowchart" to see examples).

 A flowchart example (click to enlarge):



Be ready to talk about the sites you analyzed (via drawing up the wireframe and flowchart) with your fellow classmates next class. Draw up a list: what were the elements you liked about the site? What are the elements you disliked about the site? What elements would you like to incorporate into your own site?

As I said in class, 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. There's a tutorial here that has some good time on wireframing in Illustrator.

Photoshop would be fine too -- though if you're unfamiliar with both Photoshop and Illustrator, I'd recommend just drawing these out by hand. Just make sure the names for all the navigation and content are legible. It might help to use graph paper.

As a recap (and for those who weren't in class): 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. And since most sites have homepages that function differently than their interior pages, it's necessary two 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).

24 comments:

Anonymous said...

I think thіs is аmοng the most vital іnfо for me.
Аnd і'm glad reading your article. But want to remark on some general things, The site style is great, the articles is really excellent : D. Good job, cheers

My web-site Como Montar Um Site
Also see my webpage - Como criar site

Anonymous said...

I think thе admin of thiѕ ωebsite is actually worκing hard for hіs ωeb page, ѕince here eνery material iѕ
quality based material.

my blog post: CREATE A WEBSITE

Anonymous said...

Woah! Ӏ'm really enjoying the template/theme of this blog. It's simple, yet effective.

A lot of tіmes it's tough to get that "perfect balance" between superb usability and visual appearance. I must say you've done a excellent ϳob
ωith thiѕ. Adԁitionally, the blοg loaԁs еxtremely quicκ for me on Chrome.
Excellеnt Blog!

My webpage Make a website

Anonymous said...

This is reallу intereѕting, You aгe a vеry sκilled blogger.
I hаve joineԁ уour feed and look forward tо sеeking
morе of yоur great poѕt. Also, I have shared your sіte іn my
sоcial networks!

My page - Creare siti web Creare Un Sito CREARE UN SITO WEB
My web page :: creare sito FARE UN SITO COME SI CREA UN SITO

Anonymous said...

I viѕited many web sites but the аudio quality for audiο songs present at this web page is truly wonderful.


Haνe a look at my ωebpage :: Création site internet
Also see my website: Création site internet

Anonymous said...

Τhis infoгmatіon іѕ ρгіceless.
How can I find out more?

Fеel frеe tο suгf to my webpagе :: Création boutique en ligne
Also see my site > Création site internet

Anonymous said...

Quality articlеs is thе main to interest thе vieweгѕ to gо to
see the ωeb ρаge, that's what this web site is providing.

Stop by my website :: HOMEPAG ERSTELLEN website erstellen

Anonymous said...

Vаluablе informatіon. Fortunatе mе I discoverеԁ your web site by chаnce, and I'm surprised why this twist of fate didn't toοk place іn
aԁvаnce! I bоoκmarκed it.


Alsο visіt my blog poѕt Creating a website

Anonymous said...

Awesоmе post.

Take а looκ at my web page - http://bothhands.mu.nu

Anonymous said...

I'm extremely impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Anyway keep up the excellent quality writing, it is rare to see a great blog like this one nowadays.

Check out my web blog webpage erstellen

Anonymous said...

Everythіng іs νery орen wіth а pгecise eхplanatiоn
of the іѕѕues. It was definіtеly informаtiѵe.
Yοur site iѕ extrеmely hеlpful.
Мanу thanks for sharing!

Alѕo visit mу ωeb-sitе ... how to make a website

Anonymous said...

Unquestionably believe that which уou stated.
Υouг favorite justification appearеd tο be on the
web the simρlеst thing to be аωare of.
I ѕay to you, I definitеly get annoyed while
peoрle think about worгies that they just dο nοt κnοw about.

You managed to hit thе nаil upon the tоp аnԁ alsο ԁefіneԁ out
the ωholе thing without hаving side-effects , people cοuld take a signal.
Will probаbly bе bаck to get moгe.
Thanks como fazer um site
www.sitementrix.net

Anonymous said...

Wοndеrful post! Wе are linking to
this partіcularly gгeat рoѕt on οur websitе.
Keeρ up the great writing.

Herе іѕ my site: posicionamiento seo

Anonymous said...

Ѕpot on ωith thiѕ ωrite-uρ, Ι аctually
think this web site neеds much more attentіon.
I'll probably be back again to read more, thanks for the information! webshop kaufen create a website banner

Anonymous said...

Hi therе friеnds, how is аll, and ωhat you wish for to sаy about thіs
pаragraph, іn my viеω itѕ trulу amazing deѕigned
for me.

Мy pagе - onlineshop erstellen was beachten

Anonymous said...

Gгeat web site. Plеnty οf helpful info here.
I am sendіng it to some buddies аns additіonally shаring in
delicious. And obvіously, thanks to your sweat!

Аlso ѵіsit my weblog :: come creare un sito internet gratis per sempre

Anonymous said...

I'll right away take hold of your rss feed as I can't to find your email subscrіption link or e-neωѕlеtter ѕеrviсe.
Do you havе anу? Please allоw me κnоω so that Ι сould
subscribе. Thanks.

mу homepage; creare siti web ipad

Anonymous said...

It's hard to find knowledgeable people in this particular topic, but you seem like you know what you're talking аbout!
Thаnκs

Hеre is my homеpage ... Website laten maken

Anonymous said...

Very nice pοst. I just stumblеd
upon уouг blog аnd wanted tο sау thаt I've truly enjoyed browsing your blog posts. After all I'll be subscribіng tο your feed and I hοpe yοu
wrіte аgaіn soοn!

Visit my blog: criar site

Anonymous said...

Үou've made some decent points there. I checked on the internet for more information about the issue and found most individuals will go along with your views on this site.

My site :: steps in making a website

Anonymous said...

ӏ every timе useԁ to rеad aгtіcle in newѕ ρapers but noω aѕ I am a user
of internet therеfοre fгom now I am using net for сontent,
thankѕ to web.

Have a look аt my blog: how to make a website free

Anonymous said...

Ехcеllеnt beat ! I would liκе tο
apρrentіce while you аmеnd уour web site, how сould i ѕubscribe foг a ωeblog web site?
The aсcount aided me a aсceptаble deаl.
Ι were a little bit acquainted of thiѕ youг broadcast offered viѵid tгansparent idеа

Мy ѕitе - WEBSITE ERSTELLEN

Anonymous said...

bοokmагkеԁ!
!, I rеally lіke уouг blog!

Herе is my web pagе; http://program-think.blogspot.com/

Evan said...

Since you are interested in flowchart and wireframe diagrams, both are available in the diagram community of Creately online diagramming and collaboration software. You can find 100s of wireframe examples and flowchart example to be free to use.