DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 05-29-2006, 06:05 PM   #1
ilox
Member
 
ilox's Avatar
 
Join Date: Aug 2005
Location: Adelaide, South Australia
Posts: 104
Default Creating a Storyboard for a site.

Hi folks, sorry that I have not been around much. I have been busy working on different elements for my college course on web design.
Here is one of my recent assignments which I am now keeping up so that it can be a test bed for new features and applications.
http://test.alrm.org.au/tsc

My current asignment is Creating a Storyboard for a site. The notes I have been given are crap (circa 1998) and the info out on the web is sparse and unhelpful.

I know that being able to storyboard a site is a useful skill and is part of the process of site building. I just don't have a clue what a current designer might do for their storyboard and how they would present it.

Here is what I have done so far. Please take a look and advise me what is right and especially what is wrong and any ideas you might have on how to make it work better.
http://test.alrm.org.au/tafe/storyboard/
PS: I have set it to open at the Assignment page so you have an idea what has been requested of us.
PPS: and if anybody can help me put a footer on the page that would be great. I cant get my CSS to do that properly - and show properly in both FF and IE.

   
__________________
Cheers, Ian
ilox is offline   Reply With Quote
Old 05-29-2006, 10:13 PM   #2
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by ilox
http://test.alrm.org.au/tafe/storyboard/
PS: I have set it to open at the Assignment page so you have an idea what has been requested of us.
Here are some thoughts:

I am greatly puzzled by needing to include "monitor pixel settings" in a story board - I assume they mean screen resolution: surely that's something you cannot design but will be entirely up to the visitor, and besides monitor resolution is irrelevant, it's browser window size that you need to take into account. So not something you can design, and definitely not for each page! Just a general statement about intended audience and expected minimum screen sizes might be in order (800x600 is still common, and expect very old machines and very new ones (PDAs!) to use even smaller screens).

Something like overall consistency also doesn't belong in a story board IMO - that would be a general design (a template, if you like), not part of the story board, but used by/referred to from each page in your story board. In fact, things like page layout, navigation, readability, accessibility, colors, and fonts all belong in a template to be designed first (taking target audience and expected smallest screen size into account). Story board pages for each page can then fill this in with specific graphics and content (don't forget headings) - and shouldn't the logo go on each page?

Also think about the "hierarchical" thrown in there. Would the site really be hierarchical? Or even need to be? Would people always land on the home page? Maybe "network" - especially for such a tiny site - is more appropriate; which would translte into an entirely flat menu structure. Your navigational diagram should indicate which page(s) give access to which other ones (I'd say every page from every other page). Only with many more pages will you need to think about how this may be subdivided into main areas and sections within those - but even with two levels you can have them all accessible from every page as long as you don't have many pages within each section.

Have a good template and navigational scheme and "ongoing maintenance" will be a doddle: creating a new page will be a matter of pouring new content into the template and creating an extra menu entry.

So where then does your template come from? Start by making a list of things that need to be on each page, and how much space you'll need for variable content. Then make some sketches (on paper) of different ways to put all that common stuff on a page and think about how it helps (or hinders) navigation to the other pages. Your template may include a "box" for variable graphics that will be different on each page but would "indentify" it as its own page - for the sake of consistency such graphical "identifiers" should appear in the same spot; an alternative would be a subtle background image, "vague" enough that it doesn't detract from legibility. In other words, graphics can be part of the template, even for (some) elements that may be different on each page (of course actual content can also contain graphics, like photographs of actual products or production process).

There would normally be some backwards-and-forwards when designing a template, but in general your template should come before the actual storyboard outlining different pages and how they "fill in" the template.

Finally, what's the difference between "feedback" and "contact us"? having two (in a menu) could be confusing; I'd make a single page with street address (possibly with link to generate route description), postal address (if different), phone/fax numbers and a feedback form to send "email" from.

So... that should give you some things to think about.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 05-29-2006, 11:44 PM   #3
ilox
Member
 
ilox's Avatar
 
Join Date: Aug 2005
Location: Adelaide, South Australia
Posts: 104
Default

Quote:
Originally Posted by iamback
Here are some thoughts:
And I really appreciate them.
Quote:
I am greatly puzzled by needing to include "monitor pixel settings" in a story board - I assume they mean screen resolution:
Agree completely. This whole course is a PITA with outdated concepts across the board. That's why I created a Commonality page to address the stuff that will appear on each page. I build to templates and the pages within those templates should be consistent except for minor differences.
Part of the Commonality page addresses resolutions and mentions that the site scales from 640 up to 1220. Who needs "monitor pixel settings"?
Quote:
Something like overall consistency also doesn't belong in a story board IMO - that would be a general design (a template, if you like), not part of the story board, but used by/referred to from each page in your story board. In fact, things like page layout, navigation, readability, accessibility, colors, and fonts all belong in a template to be designed first (taking target audience and expected smallest screen size into account). Story board pages for each page can then fill this in with specific graphics and content (don't forget headings) - and shouldn't the logo go on each page?
Again we are in agreement. That's why I built the template. I don't have to discuss Consistency, the site is built on a template so it is consistent.
Quote:
Also think about the "hierarchical" thrown in there. Would the site really be hierarchical? Or even need to be? Would people always land on the home page? Maybe "network" - especially for such a tiny site - is more appropriate; which would translate into an entirely flat menu structure. Your navigational diagram should indicate which page(s) give access to which other ones (I'd say every page from every other page). Only with many more pages will you need to think about how this may be subdivided into main areas and sections within those - but even with two levels you can have them all accessible from every page as long as you don't have many pages within each section.
Yep, there is no need to consider hierarchy with this small a site, next site might well be different.
Quote:
Have a good template and navigational scheme and "ongoing maintenance" will be a doddle: creating a new page will be a matter of pouring new content into the template and creating an extra menu entry.
Already planned for that.
Quote:
Your template may include a "box" for variable graphics that will be different on each page but would "identify" it as its own page - for the sake of consistency such graphical "identifiers" should appear in the same spot; an alternative would be a subtle background image, "vague" enough that it doesn't detract from legibility. In other words, graphics can be part of the template, even for (some) elements that may be different on each page (of course actual content can also contain graphics, like photographs of actual products or production process).
Yep, good ideas. I like that direction. I have lots of graphics off the web so could build that aspect into the site.
Quote:
Finally, what's the difference between "feedback" and "contact us"? having two (in a menu) could be confusing; I'd make a single page with street address (possibly with link to generate route description), postal address (if different), phone/fax numbers and a feedback form to send "email" from.
Yes, agree, they are pretty well the same concept. Should be the same page. Problem is that the silly Assignment specifies them as different pages. Might go outside the bounds on that one, too silly to make two different pages for the same basic thing.
Quote:
So... that should give you some things to think about.
Really appreciate the time taken to help with this.

   
__________________
Cheers, Ian
ilox is offline   Reply With Quote
Old 05-30-2006, 02:07 AM   #4
ilox
Member
 
ilox's Avatar
 
Join Date: Aug 2005
Location: Adelaide, South Australia
Posts: 104
Default And this is what my lecturer says...

Quote:
Hi Ian, You are heading in the right direction. Remember this is
storyboarding, you need to show layout so that people can see where
things will go (like graphics and content) instead of just writing about
it. For example, in the home page, you can move all the content down
and show me the general layout of the home page instead of me trying to
"visualise" it. That is, show me the "standard 2 column page" and the
"sidebar at the left of the page carrying Menu items and special notes
that might be included." that you refer to in your "Commonality" page.

I have attached a previous student's work on this so that you can get
some ideas. I am in no way suggesting that you do it this way. I would
like you to use what you have got and give me some "visuals" so I have
some idea of your layout. Hope this helps.
Umm, can somebody give me a clue what he might be asking for. I made a template. I designed the site to show the template in use. The graphic elements are in there... the whole site demonstrates the layout doesn't it?

What should I have done this in? PowerPoint? Word?
What do you folks use when you do your storyboards?

   
__________________
Cheers, Ian
ilox is offline   Reply With Quote
Old 05-30-2006, 04:19 AM   #5
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by ilox
What should I have done this in? PowerPoint? Word?
What do you folks use when you do your storyboards?
Paper! Using pencils, erasers, colored markers.... Make quick sketches of several possible approaches for a template; sketch at the top of the page, annotations (design choices, accessibility options, using colored markers) below that. Using that paper-and-pencil approach you can much quicker go through layout design questions, what to put where, visibility of menu choices and other navigational elements, etc.

We actually used that in a tutorial session about how to design with the user in mind, and I found it a very effective approach. No computer needed or allowed...

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 05-30-2006, 04:19 AM   #6
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

Quote:
Originally Posted by ilox
What should I have done this in? PowerPoint? Word?
What do you folks use when you do your storyboards?
I don't "do" storyboards - unless it is for video editing. I just prepare a flow chart using Smartdraw and demonstration templates.

I really cannot work out what he wants, but it does seem like a Powerpoint presentation would fit the bill. Unless, of course, even that is too advanced.....

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 05-30-2006, 05:18 AM   #7
ilox
Member
 
ilox's Avatar
 
Join Date: Aug 2005
Location: Adelaide, South Australia
Posts: 104
Default

Quote:
Originally Posted by iamback
Paper! Using pencils, erasers, colored markers.... Make quick sketches of several possible approaches for a template; sketch at the top of the page, annotations (design choices, accessibility options, using colored markers) below that.
So I have been trying the wrong medium all along the way? Blast! I knew I should have come and asked in here first, especially when there is such a dearth of info on the net about this topic <sigh>
Thanks again. Looks like I have to go Back to the old Story Board

   
__________________
Cheers, Ian
ilox is offline   Reply With Quote
Old 05-30-2006, 05:23 AM   #8
ilox
Member
 
ilox's Avatar
 
Join Date: Aug 2005
Location: Adelaide, South Australia
Posts: 104
Default Arrrgh, not another PowerPoint show!

Quote:
Originally Posted by Kelvyn
... it does seem like a Powerpoint presentation would fit the bill. Unless, of course, even that is too advanced.....
Nope, he did show me a sample of a student's work the other day when I told him I was stuck, they did it in PowerPoint. PowerPoint is a medium I love to hate. It is the reason behind so many woeful presentations that I have had to suffer through. I don't think I am an orphan here folks. Done properly PowerPoint is a powerful medium for getting the message across. 98% of them are not done properly, even those done by big Corps are often nothing less than awful.

I think I am heading for the A4 lined pad - just as I thought I should use months back when I first read this assignment.
<deep sigh>

   
__________________
Cheers, Ian
ilox is offline   Reply With Quote
Old 05-30-2006, 05:53 AM   #9
jrabold
Member
 
jrabold's Avatar
 
Join Date: Aug 2005
Location: Oakland California USA
Posts: 63
Default

Quote:
Originally Posted by ilox
PowerPoint is a medium I love to hate. It is the reason behind so many woeful presentations that I have had to suffer through. I don't think I am an orphan here folks. Done properly PowerPoint is a powerful medium for getting the message across. 98% of them are not done properly, even those done by big Corps are often nothing less than awful.
See PowerPoint Is Evil by Edward Tufte.

   
__________________
John Rabold
jrabold is offline   Reply With Quote
Old 05-30-2006, 06:46 AM   #10
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by ilox
I think I am heading for the A4 lined pad - just as I thought I should use months back when I first read this assignment.
<deep sigh>
Now let's hope your teacher doesn't blast that idea to smithereens...

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Creating a PDF file in Quark 6.5 katveze Print Design 2 12-20-2006 01:19 PM
Creating IDCS2 Stylesheets cattdogg Print Production & Automation 0 03-17-2006 09:36 PM
Creating collages in Photoshop marlene Images 17 10-05-2005 01:32 PM
Creating ASCII Art Franca The Corner Pub 25 03-13-2005 12:51 PM
Creating PDF from 200 page scans rod Print Production & Automation 14 02-24-2005 09:38 PM


All times are GMT -8. The time now is 04:36 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.