Drumbeat/Batucada/Design

From MozillaWiki
Jump to: navigation, search

This is just a dumping ground for general thoughts and ideas about the UI for Batucada. None of these are in stone, this is brainstorming. Feedback and other contributions welcome.

Splash Page

When a user first visits drumbeat.org and is not logged in, they should be greeted with a simple splash page that clearly explains the purpose of the site. Our work on messaging could come in very useful here. There should be a clear statement in three sentence fragments or less (i.e. "Make stuff. Meet friends. Keep the Web Open."). We could also attach a video or something explaining Drumbeat.

There should also be a real-time activity stream on the splash page of public activities being performed on the site (i.e. "So and so just joined project X", "John created event Y", etc) with profiles pictures (if public). This will communicate to users that there is an active community behind the site and will also communicate what the site is for (by providing a view into what people are doing).

For logged in users, they will skip the splash / promotional page and go directly to a personalized dashboard. The dashboard will list activities performed by users they follow and activities pertinent to projects they have joined.

Brainstorming

Splash Page

  • Login link on top right
  • Logo top left
  • Simple message: Drumbeat - People and projects making a better web (something like that)
  • Activity stream (Real-time, javascripty)
  • Main point: explain very simply what Drumbeat is, drive people to sign up / login
  • Navigation somewhere to flat pages: about, contact, terms, Dino logo, privacy policy, copyright notice
  • References: Foursquare, Quora, Twitter, Mozilla.com (for footer)
  • Skip to content link - obvious as a first step for keyboard and screen reader users

Login Page

  • Simple email or username / password
  • Option for OpenID login (URL text input w/ OpenID logo)

Register Screen

  • Similar to login page. Essential fields: Username, email, password, confirm
  • OpenID registration: Just an OpenID (URL text input w/ OpenID logo)

Splash Page (logged in)

  • User Dashboard
  • Statusboard
  • Activity stream / news feed of news related to projects / people the user follows
  • Somewhere to showcase projects, users, events for the user
  • References: Facebook, Quora, Twitter

General Branding

  • Drumbeat logo / wordmark
  • Use of negative space a la mozilla.com, mozillamessaging.com, firefox.com
  • Colour scheme??