Posted by: | 25th Jun, 2011

An exploration of web design principles and storyboarding

Write an entry for your course weblog about your experience here (on your “Home” page and posting a new entry). How labour intensive was the process? What worked well? What was challenging? What surprised you?

I found the e-learning toolkit particularly useful and inspired me to pick up some books on web design and accessibility. For the web design software, I downloaded a 30-day trial version of Adobe Dreamweaver CS5, and open source WYSIWYG editors Amaya and Kompozer (from NVU). Sketching out the basic website layout was the premise of the storyboarding exercise which definitely helps organize and plan the website structure prior to its implementation. I drew a storyboard that was similar to my WordPress blog and used the web design principles I learned from the “web pages that suck” checklist (of what not to do in web design).

Next, I created an account on Bravenet to upload my webpage creation and found the process fairly simple and straightforward. After the initial registration, I chose a template design and then edited the content of my webpages. For now, it’s a pretty basic site which I’m using as my storyboarding practice at: http://etec565storyboarddiana.bravesites.com. I checked the appearance of the site using two different web browsers, IE9 and Opera. Both appeared to be similar and so I moved onto testing my website’s accessibility using the Web Accessibility Evaluation (WAVE) tool at: http://wave.webaim.org/report?url=http%3A%2F%2Fetec565storyboarddiana.bravesites.com&js=2. I “WAVED” my page by entering the url, and got a surprising error message: “Uh oh! WAVE has detected 1 accessibility error. The following are present in the head section or apply to this page in general.” I located where this error was in heading 1- where the WAVE tool outlined with a red icon that there was an empty heading without any content. It was sort of confusing since I did have a heading in there as “Navigating the tumultuous terrain of storyboarding.” Also, in a yellow icon it stated that there was one or more javascript elements present. In any case, this just means that I’ll have to go back to my storyboarding site and try to fix the error(s) that the WAVE tool found. Overall, I found this was a great exercise to practice storyboarding, learn about web design principles, web design software, website accessibility, and HTML authoring. My next step is to try out the web design software I’ve downloaded to determine which one to use for my Moodle site and start developing the content for my e-learning modules.

Comments are closed.

Categories

Spam prevention powered by Akismet