Website Storyboarding | Examples, How To and Sitemap
After completing the Website Brainstorming process, you have found a solid topic and sub-category niche. It is now time to start your storyboarding process. Why Storyboard a Website? Website Storyboarding will make the design process easier and more efficient. This will save you time and money. Storyboarding for a site will help you visualize the result of your project.
Website Storyboarding
When thinking about some building blocks, get a sheet of paper and start to draw your website. Start with the Homepage, the Homepage is one of the most important pages. You have 5 seconds to attract your visitor your site. If its hard to use, nobody is going to use it. Make it simple. When you have completed the first storyboard, try to think like a first time visitor. Would you stop and look, would you click on a link? If you say Yes, then you have a great storyboard design.
You can quickly draw a quick sketch of a storyboard in seconds. Here is a storyboard example:
Storyboard Your Design & Usability
When you storyboard you should have one statement in mind. How can I make this design stand out and be simple? You want your design fresh and exciting. On the other side you want it simple and very user friendly.
Surfing Is Not a Waste of Time
One way to get some ideas going is to surf the internet. Find webpages that you like and webpages that you hate. When you find some webpages that you like, ask yourself why? Why do you like this webpage? Does it look good, do you like the colors, or maybe you like how clean and organized the navigation is? Whatever you like about that site, write it down. Always document your ideas and thoughts. It would be sad if you forgot the greatest idea ever. Now the bad webpages, is it hard to read, navigation, usability or is it another flash site that has cool animations but doesn't have any purpose to it. This is your stop sign list so you don't make the same mistakes.
Keep Consistency
The next page on your site will be easier. But keep the pages consistent. Don't change your navigation between pages or the layout. Find a place to put your header, navigation, columns, footer and leave them there. KISS it. (Keep It Simple Stupid). When you have a couple of pages, pick one. Say to yourself, if I was here, how would I get back to the Homepage? Maybe you are at the homepage. How would I get to one of your content pages? Set up simple scenarios to take yourself through. Make it as simple as you possibly can.
Build a Sitemap
When you have an idea of what your site is going to look like you can take it further and make a sitemap. A sitemap is a breakdown of the pages your website is going to include. You start from the home page to the category pages and finial the sub-category pages. Just draw simple boxes to represent the different sections and pages of your site. Make a simple sitemap.
This Technique Saves Time
When finding out how to storyboard a website. This can save you lots of time and money. It takes a few minutes or even seconds to draw a storyboard up. If you were to develop the code for it, it could take you hours. Take your time and really think about it. It could make your website very simple, enjoyable and become successful. Or it could cause confusion, frustration and not be successful. Remember Keep It Simple
thanks so much...i hope i get an A...designing a Educational Children Website
Hey! Thanx for this beautiful place of the Inet!!
This is great! Short and easy to follow advice, and easy to implement. Thanks!! :-)
Merry Cristmas!!!!
Spupertastic! Very easy to follow
WOW! thank you so very much, I have created websites before, for class assignments and when asked to create a storyboard I was overthrown with confusion and this page just made things crystal clear for me.
I know understand how to go about creating a storyboard for my website. Thank You!
I love the content of this site, but the grammar and omitted words leave something to be desired. Example: "You have 5 seconds to get attract your visitor your site." or: "...has their font size higher than normal, then the design might incorrect." These are just readability issues and have no real bearing on the excellent content, but it does stop the flow and beg the question: Did you proofread this before uploading it?
@Anonymous - Thanks for the help!
People that build website don't realized how important that site maps are. YOU HAVE TO HAVE A SITE MAP
My friend tolf me about this wrong so I decisive to stop alongside and hint hi
Hi there!
Just want to say hi everybody and good day.
Thanks
Thanks guys for sharing such a good information, thanks all.........
Thank you so much.You did very nice job and exploring your blog gives you update knowledge of different things keep the good work.
this really helps in my thesis..=)
thanks for this usefull information on sitemap.
Thanks for such a nicely written and for your nice cooperation with us. You have filled me with ocean of knowledge. Your article is very useful one. Successful websites are based upon well-thought out plans. Website storyboarding help you identify potential website structure and flow problems before you start spending big money on the programming.
Thank you very very much i am confuse how to build a web site now my problem is solve thanks
Nicely explained. It's indeed an art to stop new visitors with your attractive writing style. Truly impressive and nice information. Thanks for sharing.
Website designing requires all sorts of knowledge on HTML coding and hence it requires good grab on HTML and also requires knowledge on theme selection of a website.
Hey thanks for sharing such a fabulous ideas. It is fantastic ideas to create web page through the story board techniques. I Love your it, the techniques would be really useful to web pager programmer to design web page on certain time and also for those, who making a plan to hosting an own website. Storyboard technique would be support the unnecessary expenses.This is rally fantastic.
Great tips; especially surfing the net for inspiration in order to get ideas. You can learn a lot by taking a look at other sites and seeing what works or not.
tnx a lot ;)
These are great tips and i will follow these.
Your tips are very useful. I like your idea of using a storyboard techniques. This drives home the fact that a lot of thought and care should go into planning the website instead of simply jumping in and let the chips fall. The storybook will save time and money if we do not have to change things after the fact. Thank you for sharing.
This is the most informed writing I’ve ever seen on this subject.
Thanks for this awesome post. I like your storyboard techniques. which better for first step. I was looking for this kind of information. Please continue writing….
i am bored....
thanks a heap! i have to do this for an assignment and i had no clue. this website helped heaps!
I like your storyboard techniques. which better for first step. I was looking for this kind of information. Please continue writing….
All websites should have a good sitemap, it's not only great for search engines but also leads users whom are lost in your site.
Hey! Your storyboarding technique has helped me a great deal. Thank you very much for sharing your knowledge.
There are some great ideas for creating Web pages through the techniques of story-board. I like your computer techniques would be useful for web programmer locator website design time and also for those who made a plan to host a clean room. The technical support is useless script expenses.This fantastic rally.
at last one important thing which i think is very crucial before building a webstie ... why is 900px instead of 960.
That's how I always do my websites. I draw what I wish the site to look like then show it to my designer, then have the design coded.
With the site map, you can actually see how your pages are linked which is very important.
yeah that sure.. site map is very important for completely web design
This is a really good post on on storyboarding, thanks. It's crucial to plan out every step of your website before starting in order to have a good organized structure. You see so many sites nowadays that are just a mess.
Very nice post. I wonder how properly you defined about these techniques . I especially enjoyed it.
A great and simple to read post. Could not have put it better. Thanks.
I mark my students down for creating storyboards that do NOT reflect the relative dimensions of a real-life monitor. Your storyboard example can be likened to an architect sketching a high-rise building when trying to show their ideas for a single story home...
@ Thu, 01/05/2012 - 17:45 — Anonymous
I mark my students down for creating storyboards that do NOT reflect the relative dimensions of a real-life monitor. Your storyboard example can be likened to an architect sketching a high-rise building when trying to show their ideas for a single story home...
Given this article was written in 2009 and you are commenting in 2012 you may want to hold back on this comment. Web design is moving to a 960Grid (960 pixels) width format standard, this layout is screen independent. The 960Grid layout provides 12 columns each 70px in width with a 10px border on either side of each column. With the advent of HTML4/5 and CSS leading to Table-less design I can forgive the author for 900px width in 2009.
The Article itself is about storyboarding and the sketch is an example... I found the article simple, to the point and helpful
Yes,yes very good information.
Post new comment