DiasporaProject.org Theme & Layout Design

One of the more obvious things to think about in the transition to Drupal is "How is it going to look?". After all, the DiasporaProject.org site as it stands now doesn't look bad, but it's not very community-centric.

Here are some examples of really good community project sites:

-Gnome (http://www.gnome.org/)
-KDE (http://kde.org/)
-Elementary (http://elementaryos.org/)
-Ubuntu (http://ubuntu.com)

All of these have good things about them. They're all pretty slick-looking project sites, and they bring community and resources to the forefront in different ways.

I have a mockup that I'll be posting to this thread soon with some ideas for a front page. I'd be happy to also post the Gimp .xcf file for anyone that would like to play with the look, or design other pages of the site using the template.

Additionally, as we're doing Drupal, I propose we go with the Omega theme engine. It's an HTML5 theme engine, and it has the benefit of being Responsive. Responsive design basically means that the website changes its look automatically depending on how big/wide the screen is, so it can turn into a slick mobile site without any unnecessary addons.

Yes Omega is a good choice! A problem at the current diasporaproject.org page is IMO that you have to scroll very much. I want to go to the website and get the main informations immediately. Also the bar at the top is much to thick!

Personally, I kind of like the thick bar, but to each their own. :P

omega and omega_tools installed.

Had not known it - grid with UI, seems great. Can u help customizing !! Is another subtheme needed?

Personally, I like going to the bar :)

IMO I think the bar is not ugly but takes to much space of my screen. There could be much more interesting stuff!

Yeah, creating a subtheme is pretty easy. Omega takes a little getting used to at first, but it makes for a very solid theme engine.

Creating a Subtheme can be done under the appearance settings. I think if you have Omega Tools installed, you should be able to easily create one.

this is just awesoommmmee

Okay, so as promised, here's a first quick n' dirty rough draft of the front page. I am still working on it, and it should only be considered a rough draft at this point.

http://i.imgur.com/TSBRZ.png

A few things to note:

1.) We can easily add more user blog entries to the side block. I used three simply because copying and moving elements over and over again takes time. I just needed to illustrate the idea. Also, there should be a link under the user blogs that links directly to our planet.

2.) The links in the top bar are all symbolic icons. This actually could save a lot of space while also looking good. I think it's actually kind of a fun approach to take, as the site itself could have some small resemblance to a Diaspora pod.

3.) The icons in the top bar are not officially decided on yet, so right now they can be placeholders. (They were picked at random). As far as the links go, I'm thinking it could be: Community, Documentation, Planet, Donate, About. I'd like to hear some suggestions on things we could put there.

Also, because someone obviously won't be sure of what just a symbol means, we can have the name of the link appear using a tooltip (for example, take a look at Tipsy here: http://onehackoranother.com/projects/jquery/tipsy/)

4.) I have not yet added a footer, but I'd like to put in a comprehensive SiteMap, kind of like how Gnome.org does it. That way, you can easily navigate to resources no matter what page you're on.

5.) The image at the top is intended to be an automatically changing slider that links to different pages. It can be used for immediate announcements, if we really want to do that.

Additionally, I think a simple page for explaining what Diaspora actually is could be useful. The Elementary project does a great job of this with their "Discover" Page: http://elementaryos.org/discover