Why bother with paper? I spent last holidays putting together a design document for this site, liveandletlearn.net, using OpenOffice. But after chatting with a few students last semester, I think it’d be much more useful (for me and perhaps others) as a web-page rather than a wordprocessor document. Of course, this won’t always be possible for a commercial client, but my main reason for putting this design document together was to give people (my students) an example of a WebDesign Specification document. But I’m no expert when it comes to Webdesign Specs, so if you’ve got feedback, please help me improve this resource! (Licensed under a Creative Commons Attribution license).
The following specification document is based on the excellent Webmonkey Info Architecture tutorial by John Shiple, as well as the Adobe tutorials derived from John Shiple’s work (see Adobe Information Design, Adobe Site Design, and Adobe Page Design.)
I’ll be transferring the details from the OpenOffice document gradually as I find time…
liveandletLearn - Design Specification
Index
- Site Goals
- User Experience
- Site Content
- Site Structure
- Visual Design
- Appendicies
- Competitive Analysis
- Content Inventory
- Initial Client Interview
- Technical Specifications
Site Goals
Based on the initial client interview, the owners stated goals for this site include:
- facilitate the owner’s own learning, interaction and collaboration with networks of educators worldwide.
- demonstrate ongoing professional development and engagement with current learning technologies.
- present a professional and attractive portfolio/resume that can be updated without hassle (and is not pretentious!)
- facilitate the development of resources, articles and tools that are useful to the wider education community.
Appendix A: Competitive Analysis
The following sites help to give a taste of what I’m thinking for my own site. Each brings an aspect or some functionality that I’d like to integrate into my own website.
Creating Passionate Users
The title for this blog is pretty self-explanatory… the author (most posts by Kathy Sierra) has an amazing way of relating ideas for helping people learn with passion. Each post begins with an image (great idea, but expensive time-wise) and is incredibly engaging to read. I’m attracted to this site mostly by the style of writing – it’s so interesting to read! Notice it has a category for “Past Favourites”, pulling together all the pearlers for the casual browser (I find this handy when I find a site that I like… and it helps me to evaluate whether the blog is one that I want to track).
D’arcy Norman dot net
To be honest, I normally read this site via an RSS reader rather than the actual site. It has all the normal categories for blog sites (Home, About, Contact, Archives, Activity, Links and photos). I’ve included this site mainly as an example of a standard educational blog. It doesn’t have any bells-n-whistles, or any extra functionality… which is probably why I only read the RSS version without ever visiting the site.
Update: Darcy has updated his site since I first put this doc together.
Incorporatetd Subversion
IncSub integrates a blog by the founder, James Farmer, with a community of other educators. The site offers free hosting for educators to try out new tools, a consulting service, as well as James’ own regular posts. An interesting idea, but I tend to read the blog through RSS only. I think the sites focus is more on marketing a service (or services), by someone who wants to make a full-time living as a consultant – something I’m definitely not interested in!
weblogg-ed
“The read/write web in the classroom” is an apt title for this site – lots of very practical thoughts and ideas for learning with technology. Categories are interesting: about, workshops, ed-blogs, practices, resources, why weblogs. “Workshops” is like a portfolio of quotes from workshops/presentations categorised by year. “ed-blogs” is simply a link to the author’s blog-lines listing… great idea. “Practices” links to an auto-generate list of Furl links that the author collects for blogs being used in practice in education…possibly useful idea (although I’d use del.icio.us rather than Furl). Similarly with Resources… it links to categorised Furl links.
Site also includes a tag-cloud…something I’m was thinking about too, not sure how useful it is though…
Dey Alexander
OK, here’s a great site that says much more through its design than it does with words! It has a recognisable brand, it is incredibly easy to navigate, and it contains incredibly useful information! It’s beautifully simple… each of the categorisations “Services, Publications, Presentations, Resources, About, Contact” has a sub-description so I know exactly what I’m clicking on… (for e.g., “Presentations – topics in web usability and accessibility” - Note, on the inner pages this is condensed to a simple horizontal navigation bar). The landing page also includes a Recent updates section – very nice. I love the simplicity of this landing page and would like to do something similarly simple. No need for drop-downs, the Resume and portfolio are accessed from the “About” link. Personal pages are also linked from About… very easy to navigate, and not too many options initially! (See the SiteMap for details)
The “Services” link is an excellent example of something that I could do through TAFE. I need to read “Ten tips for top web content” as well as “Usable file and directory names make usable URLs” and “Writing usable titles for web pages” before designing my own site! The breadcrumbs are also very nice. In essence, I love the design of this site (content wise, but also presentation).
Powazek.com
I love the way this site links in the latest post and latest links to the landing page. Notice that the page is kept relatively uncluttered by the fine-print at the bottom of the page. In-fact, this is quite a strong design decision to have lots of goodies in the footer as you can read in the post: Embrace your bottom.
0 Responses to “liveandletlearn - A design document”
Leave a Reply