Introduction:
The process of developing a website requires following various stages such as planning and design. The design process, involves graphic representations of structures and functionalities intended for the site. Storyboards, is one of these objects that provides an illustrated concept of the structure and purpose of the website. Although Storyboards has been used mainly in the animation and film industry, it is a powerful tool used in project management.
However, there is still some confusion about how to approach the concept of a storyboard into a website. For that reason, this report will cover basic concepts, considerations and guides to create an effective storyboard. In order to make clearer understanding to this objective, an example has been designed using a template that organizes information that any industry project might use.
What are Storyboards?
Storyboards started in the animation industry in the early 1900 and are defined as an illustrated tool for producer or directors to review how a production will look in the final edited version. As well as any other building plan, storyboards are able to guide the crew of a production to achieve what has been designed by the director. All the shots are illustrated through drawings with important information that gives specific direction to be followed by the crew (Mark, S. 2007).
However, how to associate this definition to websites storyboard? Well, it is a fact that websites require previous production management like any other development project. The basic purpose of a storyboard is similarly applied to websites. The work of Gatsos (2010) indicates that storyboarding within the web design process is a fundamental element. This initial practice is an advantageous way to diminish time and effort on the development process. Moreover, The Joint Information Systems Committee (2010) points out that each page should contain information related to any type of media intended to be used as well as clarify whether any resource needs to be developed.
Storyboarding websites
Storyboards are fundamental part of the design phase in project management. After developing the flowchart, which defines the appropriate structure of the website, it is essential to reproduce that information through the storyboard.
There are different formats to create storyboards for websites. However, it is important to maintain
consistency as well as support of all the content that is being provided so that other project members are able to understand the purpose of each screen. (see image bellow)
Storyboard Structure
Storyboards are an effective communication tool among the project team members; it should be able to illustrate clearly the structure and content without being necessarily functional.
Therefore, it is essential to use storyboards so that the main goal of the site is not missed affecting timeframe, cost and resulting in unexpected modifications (Boag, P. 2005).
Storyboards can start by hand during the brainstorming phase. Drawing previous sketching of the intended site structure will allow to overview in advance possible issues that can be modified on time.
The image bellow is a basic sketch of a site homepage, so excessive details are not needed at this stage.
In a posted article titled Pre-Production , there are important points to consider during the design process that should be included in the storyboards:
I have found this particular arrange very convenient when designing storyboards. This template, allows you to specify all the intended content of each page in an organized and clear way. This template also helps to achieve what is suggested in the Pre-Production article of how to organize the content of storyboards.
An example has been created using this template so it can be seen how to complete a storyboard correctly.
It can be seen that the arrangement of the template remains. The top of the template is the only space where the actual structure of the website can be illustrated.
Furthermore, naming convention is also established through the storyboard in order to standardise communication among the team for instance; to name the images, a prefix is included ‘img_’ then name of the image ‘exhibition_’ and finally the size ‘800×900’. By doing this, the organization of the content is more accurate and the images are sufficiently identified so that opening them is not strictly necessary.
Additionally, this template not only gives a basic understanding of the visual structure of the website, but also provides specific technical information such as Font family, colour and size to be used during the development process by any member of the team. Text can be written directly in the box of the template or name the document and chapter where it can be accessed rapidly. When developed correctly, this powerful communication tool is able to illustrate to customers, designers developers and project managers the general purpose of the site. Therefore, it is a fundamental support to any part, the customer or the development company allowing discussions of any issue that might come across.
YouTube https://www.youtube.com/channel/UCJojbxGV0sfU1QPWhRxx4-A
References
Boag, P. (2005, August 25). Website storyboarding. Retrieved from http://boagworld.com/design/website-storyboarding/
Gatsos, D. (2010, May 18). Storyboarding Tips: Step by Step. Retrieved from http://webtoolsuw.wordpress.com/2010/05/18/storyboarding-tips-step-by-step/
Mark, S. (2007). Storyboards : Motion in Art [EBL Ebooks Corporation]. Retrieved from http://librarycatalogue.griffith.edu.au/record=b1564329~S1
The Joint Information Systems Committee. (n.d.). Retrieved from http://www.x4l.org/resources/healthiernation/storyboarding.pdf
The process of developing a website requires following various stages such as planning and design. The design process, involves graphic representations of structures and functionalities intended for the site. Storyboards, is one of these objects that provides an illustrated concept of the structure and purpose of the website. Although Storyboards has been used mainly in the animation and film industry, it is a powerful tool used in project management.
However, there is still some confusion about how to approach the concept of a storyboard into a website. For that reason, this report will cover basic concepts, considerations and guides to create an effective storyboard. In order to make clearer understanding to this objective, an example has been designed using a template that organizes information that any industry project might use.
What are Storyboards?
Storyboards started in the animation industry in the early 1900 and are defined as an illustrated tool for producer or directors to review how a production will look in the final edited version. As well as any other building plan, storyboards are able to guide the crew of a production to achieve what has been designed by the director. All the shots are illustrated through drawings with important information that gives specific direction to be followed by the crew (Mark, S. 2007).
However, how to associate this definition to websites storyboard? Well, it is a fact that websites require previous production management like any other development project. The basic purpose of a storyboard is similarly applied to websites. The work of Gatsos (2010) indicates that storyboarding within the web design process is a fundamental element. This initial practice is an advantageous way to diminish time and effort on the development process. Moreover, The Joint Information Systems Committee (2010) points out that each page should contain information related to any type of media intended to be used as well as clarify whether any resource needs to be developed.
Storyboarding websites
Storyboards are fundamental part of the design phase in project management. After developing the flowchart, which defines the appropriate structure of the website, it is essential to reproduce that information through the storyboard.
Hierarchical Flowchart example
consistency as well as support of all the content that is being provided so that other project members are able to understand the purpose of each screen. (see image bellow)
Storyboard format example
Storyboard Structure
Storyboards are an effective communication tool among the project team members; it should be able to illustrate clearly the structure and content without being necessarily functional.
Therefore, it is essential to use storyboards so that the main goal of the site is not missed affecting timeframe, cost and resulting in unexpected modifications (Boag, P. 2005).
Storyboards can start by hand during the brainstorming phase. Drawing previous sketching of the intended site structure will allow to overview in advance possible issues that can be modified on time.
The image bellow is a basic sketch of a site homepage, so excessive details are not needed at this stage.
Basic Sketch
- There is a storyboard for each page, screen, or frame.
- Each storyboard is numbered.
- Include relevant details (colour, graphics, video, sound, font, interactivity, visuals, etc.).
- All text or narration is included and cross referenced with its corresponding storyboard number.
I have found this particular arrange very convenient when designing storyboards. This template, allows you to specify all the intended content of each page in an organized and clear way. This template also helps to achieve what is suggested in the Pre-Production article of how to organize the content of storyboards.
Storyboard Template
Full Storyboard Example
Furthermore, naming convention is also established through the storyboard in order to standardise communication among the team for instance; to name the images, a prefix is included ‘img_’ then name of the image ‘exhibition_’ and finally the size ‘800×900’. By doing this, the organization of the content is more accurate and the images are sufficiently identified so that opening them is not strictly necessary.
Additionally, this template not only gives a basic understanding of the visual structure of the website, but also provides specific technical information such as Font family, colour and size to be used during the development process by any member of the team. Text can be written directly in the box of the template or name the document and chapter where it can be accessed rapidly. When developed correctly, this powerful communication tool is able to illustrate to customers, designers developers and project managers the general purpose of the site. Therefore, it is a fundamental support to any part, the customer or the development company allowing discussions of any issue that might come across.
YouTube https://www.youtube.com/channel/UCJojbxGV0sfU1QPWhRxx4-A
LinkedIn https://www.linkedin.com/in/ict-bit-tuition-class-software-development-colombo/
WordPress https://computerclassinsrilanka.wordpress.com
quora https://www.quora.com/profile/BIT-UCSC-UoM-Final-Year-Student-Project-Guide
Newsletter https://sites.google.com/view/the-leaning-tree/newsletter
Wix https://itclasssl.wixsite.com/icttraining
Web https://itclass-bit-ucsc-uom-php-final-project.business.site/
mystrikingly https://bit-ucsc-uom-final-year-project-ideas-help-guide-php-class.mystrikingly.com/
https://elakiri.com/threads/bit-ucsc-uom-php-mysql-project-guidance-and-individual-classes-in-colombo.1627048/
ucsc bit registration 2023 bit (ucsc syllabus) bit colombo university fees bit results bit vle bit course fee bit exam time table 2023 bit moratuwa
Specifics:
Download and complete one storyboarding form for EACH PAGE of your website. This form asks you to do several
things that are commonly accomplished in the first storyboarding phase (though
the preliminary vision is often revised as you go):
- Determine what content you want to include in your site
- Determine how you will invite others to contribute to the content of this site. Perhaps you will simply invite visitors to send you info and provide an email link or an email form. In any case, part of your assignment invovles inviting your audience to contribute to the site, to "grow" it.
- Sketch out the site you want to build with pencil and paper. Begin with the front page, which is the most important: determine what you will include there and how you will organize it. Where should your writing go on the page? Where should an opening image go? And where will you put the links? Once you have it all laid out, determine what resources you need to make it happen and list those (the introductory text, perhaps a navigation bar, links, maybe a logo image?) When the first page is sketched, go through the same process for each of the subsequent pages. So, for example, a sketch of one page, along with the resources needed for it, might look something like this:
- Determine a color scheme. You may have different colors on different pages, but the overall color scheme should be somewhat consistent. Be sure that the text and link colors are different enough to be discernable and that both are visible against the background color
- Determine a font scheme: you'll want headings and subheadings, as well as the regular font to be relatively consistent in size, style, and color from page to page
- Assign both descriptive names and file names (html names) for
each page of your site. For instance, if you were doing a site on Cyberpunk, you
might set the following descriptive names for pages in your web site, along with
the corresponding file names (in parentheses):
- Cyberpunk Novels (novels.htm)
- Cyberpunk Writers (writers.htm)
- Cyberpunk's Technological Predictions (predictions.htm)
- An Interview with William Gibson (interview.htm)
- Determine how you will link your pages together. Think through the logical steps to get your visitor from point A (your index page) to point B "learn more about X," though often times you'll want/need to offer links between subpages, as well. For example:
Once you have a good sense of all of this, download
the storyboard form, fill out one
form for each page of your site, making your page sketches at the bottom of each
form and then a sketch of the flow of the entire site on a separate
sheet.
References
Boag, P. (2005, August 25). Website storyboarding. Retrieved from http://boagworld.com/design/website-storyboarding/
Gatsos, D. (2010, May 18). Storyboarding Tips: Step by Step. Retrieved from http://webtoolsuw.wordpress.com/2010/05/18/storyboarding-tips-step-by-step/
Mark, S. (2007). Storyboards : Motion in Art [EBL Ebooks Corporation]. Retrieved from http://librarycatalogue.griffith.edu.au/record=b1564329~S1
The Joint Information Systems Committee. (n.d.). Retrieved from http://www.x4l.org/resources/healthiernation/storyboarding.pdf
10 Great Tools for Storyboarding
0
It has been a while since my last blogpost. Last month, I had the great honor of writing four guest posts on the topic of mLearning for ASTD. Furthermore, I have been studying hard to complete my postgraduate studies, which made me step aside from some other projects for a while.
Having said that, last week I came across a very interesting discussion on the eLearning Heroes site and I thought it would be a great opportunity for me to share with you my favorite tools for storyboarding.
1- Desktop Applications
As I said in that forum thread, the new Articulate Storyline is a wonderful tool to show the general structure of your courses. The Story View displays the overall project organization, making it very easy to identify scenes, information flow, different relationships among pages (screens) and so on. In addition, I can use annotated screenshots to communicate my ideas more effectively.
Articulate Storyline
Mind Maps and PowerPoint
I have also used mind maps and diagrams created with a free online tool called diagram.ly and also commercial software, such as MindManager. The mind map you can see in the slideshow below was created with diagram.ly and it is based on Tom Kulhmann´s useful suggestions on building branched eLearning scenarios. This approach has proven to be very useful for coming to an agreement on fundamental aspects before developing a functional prototype in PowerPoint.
PowerPoint
diagram.ly
This is a quite simple and free application to create a non-linear story that allows you to graphically organize how your scenarios will unfold. You can read Cathy Moore´s impressions about Twine here and watch this video to get started. In the flowchart view, each page or scene is displayed in small boxes that are linked according to the learner´s options. So as you write your story, you build a map of possible paths. The final output is a single web page that you can share with stakeholders and something that works as a functional prototype too.
Twine
This is a free tool that was included in Craig Weiss´ recent list of course authoring tools and allows you to write audiovisual scripts, plays, comic books and film storyboards. You can include your own pictures and sketches together with written descriptions of your scenes, scripts, notes, directions and so on. I have just started using this product but it seems to be a robust pre-production system with standard script formats, media integration and possibilities for collaboration. You can download it here.
Celtx
2- Free iPad Apps
I have left the best for last. Most people think that mobile devices are just great for content consumption at the exact moment of need. However, I believe that mobile devices make me more productive and creative and this is why I love CREATING content by using, particularly, my iPad.
In my honest opinion, intuitive drawing apps that have been created from the ground up for natural touch gestures are great for idea generation as they stimulate the usual way our brain works for making connections. Apps like Paper by 53, Bamboo Paper and SketchBook Express help me capture and sketch my ideas as well as create and explore UI/UX designs, graphics and data visualizations and a new course structure and navigation.
Paper
This is a more sophisticated app than the previous three, but if you want to free your imagination and find new sources of inspiration, it is worthwhile to try it. You can create hand-drawn animations by using different tools like brushes and palettes as well as professional animation resources like frames, skins and close-up view. You can even create an animation and embed it in your eLearning courses since it can be exported as a YouTube video.
Animation Desk Lite
By far, this is my favorite app for storyboarding. If you lack drawing skills or just don´t have enough time, this is a great tool for quickly drafting and presenting your ideas. You can position and rotate 3D characters and objects in all directions, include text blocks and speech bubbles, insert photos in every shot or scene, add notes and even record audio. You might find the free version a little bit limiting but you can purchase packs and develop a whole story right there on you iPad.
Storyboards 3D: Create a new project
Storyboards 3D: Give a title to your project
Storyboards 3D: Character´s expressions
Storyboards 3D: Script notes
Storyboards 3D: Font Styles
Storyboards 3D: Add a new scene
Storyboards 3D: Object Placement
Storyboards 3D: Characters´poses
Storyboards 3D: Organize shots
Storyboards 3D: Scenes Overview
I know that sometimes we are snowed under with work and we can´t try every single tool out there or explore new approaches that may seem time-consuming at the beginning. However, I think it can be worth renewing our design kit once in a while in order to become more innovative and resourceful as we broaden our repertoire of skills.
Sample CSS, JQuery, HTML5 Web Templates for freedownload
- http://www.jqueryrain.com/freetemplates/
- http://www.noupe.com/a-new-collection-free-html5-css3-templates-page-2
- http://www.free-css.com/template-categories/jquery
- http://bestofwebdesign.blogspot.com/2013/08/40-fresh-and-free-html5-and-css3.html#!/2013/08/40-fresh-and-free-html5-and-css3.html
- http://sitecreatives.blogspot.com/
- http://www.smashingapps.com/2013/10/18/50-high-quality-free-html5-and-css3-web-templates.html
- http://mmmsafry.wordpress.com/updates/ (Easy way to Design User Interface using Twitter Bootstrap)
- http://www.nextdesignweb.com/2014/04/html5-and-css3-website-templates.html
- http://www.teamofdesigner.com/index.php/inspiration/web-interface/37-45-fresh-and-free-html5-and-css3-templates?goback=.gde_2782693_member_118976881
- http://csstemplatesfree.net/
HTML5 Registration and Login Form Templates for freedownload
jquery Alert/Notification Free download
- http://www.freshdesignweb.com/jquery-notification-plugin-example.html
- http://fabien-d.github.io/alertify.js/
- http://ned.im/noty/
- http://notifyjs.com/
- http://plugins.jquery.com/tag/alert/
- http://medleyweb.com/web-dev/10-great-jquery-notification-plugins
- https://www.iconfinder.com/ (Search through 347,128 icons or browse 3,003 icon sets.)
Individual / Group / Online classes in English / Sinhala / Tamil. Sample Projects/Assignments Exam Papers, Tutorials, Notes and Answers will we provided.
Call +94 777 33 7279
eMail itclasssl@gmail.com
Skype ITClassSL
