Drupal.org prototype development

Home | Who are Mark Boulton Design? | Prototyping commences

Iteration #5 ~ 23rd October 2008

Iteration notes: Major changes to homepage from a content perspective. Most top level pages now have additional content and small changes to labelling and copy following user testing. This iteration also sees the introduction of initial visual design work.

Prototype

Template / Page	Description
1. Homepage	NEW: Logged in (default state) - Showing 'Not logged in', and 'logged in' states.
2. About	About landing page. Marketing (features, benefits, demo), about Open Source.
3. Jobs	Jobs landing page. Job listings, preference management, info for posting, RSS feed.
4. Events	Events landing page. Event listings, preference management, info for posting, RSS feed.
5. News	Edited 'news'. Planet Drupal?
6. Get started	Get started page with cross promotions to the professional services and documentation pages
7. Get involved	Get Involved landing page. Ways to get involved with Drupal
8. Association	Drupal Association subsite landing page. As per current site.
9. Community & Support	Community subsite landing page. Groups, local groups, IRC, member profiles (find people), support forum using Get Satisfaction.
9.1 Community IRC	IRC page within Community subsite.
10. Documentation	Main Documentation page
10.1 Tutorials & guides	Tutorials & guides page within documentation
10.2 API	API page within documentation
11. Download & Extend	Main Download page
11.1 Core	Core page within Download & Extend
11.2 Modules	Modules page within Download & Extend
11.2.1 Module Example	Example of the 'image' module page within Download & Extend
12. Professional services	Paid for services
13. Search results	Search results for the keywords 'image module'
14. Shop	Shop page for displaying featured merchandise

Click on 'Notes' for design notes for the various pages. 'Logged in' toggles user states (although only partially implemented at the moment).

Please note: These prototype files are to indicate and demonstrate functionality only. They are not indicative of the final design of the website.

Visual design

Template / Page	Description
1. Homepage (user not logged in)	Default state homepage.
2. Homepage (user logged in - customised)	User logged in. Customised homepage with different widgets to default state.
3. Download & Extend	Initial look at a subsite index. Introducing colour palettes, and tabbed sub-navigation.

Revisions: 24 Oct 2008 (blue gradient masthead, with whiteout, reversed, iconless wordmark)

Template / Page	Description
1. Homepage (user not logged in)	Default state homepage.
2. Homepage (user logged in - customised)	User logged in. Customised homepage with different widgets to default state.
3. Download & Extend	Initial look at a subsite index. Introducing colour palettes, and tabbed sub-navigation.

Design notes:

A general point. This is as much about a design system at this point. I’m looking at grids, type, icons, tone, general feel, etc. etc. It’s not a finished proposal, but a work in progress.
The prototype went some way for us to experiment with grid, type hierarchy and scale. We’ve built upon that work that has already been done.
The image here is of a case study, rather than a grab of the Drupal admin UI. It’s captioned.
We’ve started to explore colour. In this versions, we’re having a look at coding certain tones – green for download, blue for community, and grey for everything else.
With regards to the branding. This is the latest version that has been modified slightly (a lot of letterform tweaks again)
The Download and Extend homepage gives an indication as to how the navigation system in the masthead will play out. I’m thinking of introducing a colour coding for each subsite – Blue for community, Orange for Documentation, Green for Download, and Black for Professional services.
There a three values (built upon the Experience Strategy) that I’m using to build out the design system: Clarity (of purpose and message); Simplicity (to support the content on the site); Scalability (a modular system so that it can grow, and not break, over time).
The design will continue to gather ‘richness’ as we go through the iterations. This first step is to get the building blocks of the system in place.
The logged in user homepage is an initial look at how the widgets may work. There’s not too much visual gloss on this yet – I wanted to make sure we address some of the interaction design problems before making it look pretty. We have some more thoughts on this based on user testing done today, but I’ll post that in another message.