Designing for Success: Storyboarding your Website
|
|
Posted On :
Feb-05-2011
| seen (543) times |
Article Word Count :
758
|
|
The storyboard is a usability prototype consisting of a series of screen sketches that permit you to visualize and organize the content and configuration of your website. A storyboard allows you to optimize efficiency and organization during the nascent stages of website creation.
|
|
What is a Storyboard?
The storyboard is a usability prototype consisting of a series of screen sketches that permit you to visualize and organize the content and configuration of your website. A storyboard allows you to optimize efficiency and organization during the nascent stages of website creation. Storyboarding breaks down each individual aspect of a website, allowing you to think about scenarios of use or processes. You are then able to pinpoint specific areas of improvement based on you and your users’ conception of optimal usability. In essence, a storyboard is the blueprint of a website. If we think of the entire web design process as a human body, the storyboard would be the DNA, albeit DNA that is easily modified and perfected.
What are the benefits of Storyboarding?
Storyboards give you the chance to review and think critically about the substance and structure of a site before the development process begins. Storyboarding also allows you to test the usability of your site with prospective clientele or site visitors. In addition, storyboarding facilitates your capacity to keep these critical usability questions in mind when embarking on the web development process:
1. Who are my visitors?
2. What do they want to know?
3. How do my visitors want to use this site?
4. How can I make navigating this website beneficial and simultaneously interesting for my visitors?
By keeping these questions at the forefront of website planning, you can increase efficiency and marketability, prevent costly errors, and support an easy user experience. Websites that are well planned with user friendly interfaces are always profitable for you as the designer, as well as any company you may be working for. Thus, storyboarding is a vital component of successful website creation.
What are some Storyboarding Methods?
There are various strategies that can be employed when storyboarding a new website. Choosing your storyboard method depends entirely on the technique that best suits your creative faculties. Storyboards can be fashioned with sheets of paper, post-it notes, or a software program. Your storyboard should be built using simple shapes (preferably basic line drawings), keeping the following fundamentals in mind:
1. Website navigation: buttons users will need to find their way through the site.
2. Content sections: how do you plan to present your areas of content?
3. User login boxes (if applicable)
4. Search boxes/engine
5. Page connections: how do the pages of your website relate to one another?
Keeping your storyboard design simple lets you and your clientele/prospective users focus solely on usability because you do not have to concentrate on graphics, color, fonts or any other design characteristics. Thus, when creating a prototype, focus first on the fundamentals. Solid fundamentals always lead to innovation in the secondary, artistically-driven phase of web design.
Smart Storyboarding
Work smarter not harder. If this motto appeals to you, you will find storyboarding with a software program (instead of paper) particularly profitable. Software programs provide the rudimentary tools needed to fashion a wireframe of your prototype: boxes, lines, shapes, and text to label various website functions. You can use Photoshop or Illustrator to create a wireframe, but these programs are not always advantageous because they are completely static. They are simply paper storyboards infused with technology. Programs like Pidoco or ProtoShare offer specialized wireframe tools that are intended to be interactive and collaborative, offering you as the designer a dynamic innovation process that really brings your wireframe to life. You can create fully navigable, high or low fidelity wireframes using design shapes, buttons, check boxes, and drop-down menus. These features let you create wireframes that allow you to actively simulate your website’s functionality. This is extremely useful because it facilitates an easy collaborative process between you and your clientele, giving you the option to test your application with real test users. For example, a program like Pidoco offers a Remote Usability Tester that is completely web-based and secure. Designers can simply log into the testing software and invite users to click through their prototype. An audio connection and screen sharing allow designers and users to simultaneously make changes and/or provide feedback concerning each respective wireframe. All you need is the internet and you have the ability to receive instantaneous user experience feedback. In a world where time is of the essence, utilizing wireframe specific software programs is concurrently smart and vibrant – features that do not always go hand in hand.
|
|
|
|
Article Source :
http://www.articleseen.com/Article_Designing for Success: Storyboarding your Website_51641.aspx
|
|
Author Resource :
Pidoco.com – Interface Design, Wireframe Software, Wireframe Tools, Interface Design Software, Clickable Wireframes and GUI Prototyping Tool. Fast wireframe creation and remote website usability testing lead to an improved conversion!
|
|
Keywords :
interface design, clickable wireframe, clickable wireframe, wireframe, wireframes, interface design software, wireframe softw,
Category :
Computers
:
Software
|
|
|
|
