Home website

2 views
Skip to first unread message

Khaled Abou Alfa

unread,
Mar 31, 2008, 5:38:25 PM3/31/08
to Habari Dev
I thought I'd turn my attention to the main home page which could use
a little TLC and this hopefully might reciprocate in more people
joining the fold in more numbers as currently it's our main marketing
tool to reach more users/people.

Now I know we've not discussed branding, other than we need some at
some point. The main index page mockups I've attached basically give a
couple of colour combinations that we could go with, but this is NOT
supposed to be our branding. i've specifically limited the number of
images that would be needed in the code within this design to 2 so
that it can allow us to change the colour scheme as much as we want
very easily.

I guess the reasoning is that we can change the look of the site very
simply every time we release a new version, leading up to version 1.0.
By that stage we'll be a little bit more clear as to what has been
useful for people and what colour scheme and branding we ultimately
want to go down. Also i don't see any of our colour schemes being lost
really, because we may be able to use them in the default theme. I'll
write something more indepth for that as it warrants it's own
discussion really. The final mockup is the more current version, i've
attached the other ones to give an indication of the colour schemes
that we can easily try out (although I've got to be honest, knocking
out different colour schemes is pretty easy), and it may seem
premature to start talking more detail about colours, but alas for our
main page we do want to make sure we stand out from the rest.

Another idea is to make every page a different colour scheme. Could be
confusing but it could also be fun as well (just throwing ideas out
there).

The copy might need a little bit of a polish, but the whole idea is to
keep things in a relatively playful fashion which in many respects
mimics the community and interaction that we currently have. I'm still
fiddling with all the other pages to be honest, but this can be coded
up pretty quickly if the consensus is positive, hell if someone wants
to help out, I'm sure we can set up a branch and have a bit of a
collaborative effort from everyone to make it that much better. I've
also got some pretty clear thoughts about how the documentation page
should look like, but I need I've never really skinned mediawiki, so
not sure how difficult it actually is.

Now you'll notice that the footer has got a quote that says 'Channel
the dissent and create something beautiful', I see this as an area for
pulling (from a random selector) quotes that people in the community
have come up with that they're fond of. I'm sure something to do with
Pony's can be put into this as well:).

200803 Habari Index Rev0 KAA.png
200803 Habari Index Rev1 KAA.png
200803 Habari Index Rev2 KAA.png

Arthus Erea

unread,
Mar 31, 2008, 6:48:11 PM3/31/08
to habari-dev
I was working on a new homepage (my preliminary work is at
http://home.morgante.net/habari/) but I really like where you are
going with this more. I'd be more than happy to help out with the
process, and definitely would like to see your great ideas get
implemented.

If you swing by the #habari IRC channel, I'd like to chat about
possible ways to collaborate on this/what I can do to help. So far,
the work you've been doing looks great. To get help from the community
(which I think is a good idea), either a branch or a theme on habari-
extras could be created.

I look forward to where you're going with this.

Some other thoughts:
I think the copy could use a polish. Also, isn't Habari free as in
speech, not beer?
It'd also be nice to have some screenshots in the area of the
screencast before the screencast is clicked.

Overall some great work!

Andy C

unread,
Mar 31, 2008, 8:36:16 PM3/31/08
to habari-dev
Love the black/white design most as it is closest to the Habari Admin
screens. Looks great to me but then again, I have minimalist
tendencies :-)

Don't like 'Free (as in beer)' - reminds me of students on rag week.
Amateurish IMHO.

Does Habari really mean 'What's the new?' or is this just a typo
('What's the news?') ?

The section header 'What makes habari ?' - case inconsistent with
'Habari' which is used elsewhere (and I prefer)

Peace, love, empathy
--
Andy
http://www.nbrightside.com/blog/
>  200803 Habari Index Rev0 KAA.png
> 170KViewDownload
>
>
>
>  200803 Habari Index Rev1 KAA.png
> 198KViewDownload
>
>
>
>  200803 Habari Index Rev2 KAA.png
> 205KViewDownload
>
>

Ali B.

unread,
Apr 1, 2008, 2:51:42 AM4/1/08
to habar...@googlegroups.com
I am all in for the first color scheme, even though I am a not-so-simplistic person. The description text is, IMHO, a little big and maybe you could try decreasing the size and see how it works. It looks like it's taking over the title.

Blue color scheem is also ok, but we could use 'white' space there while still using a little lighter shades of blue, I think.

As for the third design, well it ~ WP admin colors so, uh uh :)

Your effort, as always is highly appreciated Khaled, Thank you


--
Ali B / dmondark
http://www.awhitebox.com

broke...@gmail.com

unread,
Apr 1, 2008, 3:24:55 AM4/1/08
to Habari Dev email
Arthus - I will be on the channel later on tonight we can talk then how to move it all forward.

Andy - yeah it does mean what's the news which is where the hi Habari! Comes from (something mentioned ages ago by Owen that he would like to see somehow in the main page)

Ali - Font sizes and colour schemes can be modified much faster when code is done.

Btw the third colour scheme is not a wp derivative since they have pastel blue, orange, white, grey and black. This is a much darker and earthier colour scheme orange, ocker, dark aqua and dark blue and white I only mention this because the guys on the list and on the channel have mentioned on several occasions that they would like something in orange ;)



------------------

-----Original Message-----
From: "Ali B." <dmon...@gmail.com>

Date: Tue, 1 Apr 2008 08:51:42
To:habar...@googlegroups.com
Subject: [habari-dev] Re: Home website

http://www.awhitebox.com <http://www.awhitebox.com>

Michael Heilemann

unread,
Apr 1, 2008, 3:53:28 AM4/1/08
to habar...@googlegroups.com
The black and white is definitely the best. As you know, I'm all for the use of neutral color.

By and large it looks pretty good. I wouldn't mind seeing some #eee gray in there, to match Monolith, though it of course shouldn't be overdone.

It's a big step up.

Silvester

unread,
Apr 1, 2008, 5:07:38 AM4/1/08
to habari-dev
I too think that the first one is the most 'adequate'. Some points for
improvement:
-Direct download link/button on the frontpage. (d/l size, version,
date released bellow)
-Less text is better. One paragraph should say it all.
-Screenshots in place of the 'screencast' feature. Screencasts are
good, but the first thing I ever look at is screenshots. These should
preferably be taken with the standard browser/OS for blogging (and
looks), Safari on OS X!

Michael Heilemann

unread,
Apr 1, 2008, 5:11:07 AM4/1/08
to habar...@googlegroups.com

good, but the first thing I ever look at is screenshots. These should
preferably be taken with the standard browser/OS for blogging (and
looks), Safari on OS X!

Amen :)

Chris J. Davis

unread,
Apr 1, 2008, 7:57:32 AM4/1/08
to habar...@googlegroups.com
I really dig the first mockup as well. I would say that we should
tend toward a decent amount of copy on the front page, one paragraph
can't say it all. I get irritated with sites that don't give me an
adequate amount of information on their home page.

Lets get this thang moving!

Chris

Silvester

unread,
Apr 1, 2008, 1:21:42 PM4/1/08
to habari-dev
I don't think there's anything nothing wrong with having one paragraph
(okay, or two-three but no more!), provided that there's also an
elaborate 'Features' page. I'm all for a streamlined, uncluttered
first page.

broke...@gmail.com

unread,
Apr 1, 2008, 1:21:11 PM4/1/08
to Habari Dev email
Chris can you quickly set up a branch and call it home website or something like that I should be online later on tonight to talk with peeps who want to work on this as well


------------------

-----Original Message-----
From: "Chris J. Davis" <c...@chrisjdavis.org>

Date: Tue, 1 Apr 2008 07:57:32
To:habar...@googlegroups.com
Subject: [habari-dev] Re: Home website



broke...@gmail.com

unread,
Apr 1, 2008, 3:10:59 PM4/1/08
to Habari Dev email
Chris can you quickly set up a branch and call it home website or something like that I should be online later on tonight to talk with peeps who want to work on this as well


------------------

-----Original Message-----
From: "Chris J. Davis" <c...@chrisjdavis.org>

Date: Tue, 1 Apr 2008 07:57:32
To:habar...@googlegroups.com
Subject: [habari-dev] Re: Home website



broke...@gmail.com

unread,
Apr 1, 2008, 3:11:06 PM4/1/08
to Habari Dev email
Chris can you quickly set up a branch and call it home website or something like that I should be online later on tonight to talk with peeps who want to work on this as well


------------------

-----Original Message-----
From: "Chris J. Davis" <c...@chrisjdavis.org>

Date: Tue, 1 Apr 2008 07:57:32
To:habar...@googlegroups.com
Subject: [habari-dev] Re: Home website



Scott Merrill

unread,
Apr 1, 2008, 3:17:54 PM4/1/08
to habar...@googlegroups.com
On Tue, Apr 1, 2008 at 1:21 PM, <broke...@gmail.com> wrote:
> Chris can you quickly set up a branch and call it home website or something like that I should be online later on tonight to talk with peeps who want to work on this as well

I don't think that the Habariproject.org theme is stored in any of our
public repositories.

broke...@gmail.com

unread,
Apr 4, 2008, 4:16:31 AM4/4/08
to Habari Dev email
Just wanted to give everyone the heads up as to why I have not been online to discuss this and move it forward, basically the day after this email got sent I lost internet at home we are trying to get the shut sorted out but unfortunately it could take some time so I'm not sure how to play this thing I can still get emails (blackberry) and obviously may be able to send files for others to upload until this is sorted out.
But while we think about that just wanted to talk a bit about colour and what it conveys because I think it is important to get to that conclusion since we are progressing with the main page.

The colour scheme we choose should be indicative of the community and how we want the software to be viewed. I view Habari and the community as a bunch of enthusiastic herja from all over the world bandying together to create something special, fun to use and more intuative than anything else out there. There is a much stronger community feel at work here and that is something that should be apparent.

Having said all of that we still want the sense of professional polish that keeps us ahead of everyone else.

To that end my feeling is that the white and black motif does not achieve those goals. My reasoning for this is that using white as the main colour while utilitarian in nature is also cold and brings a much more corporate feel than one of individual and community.

I think that while it may be nice that the main site follows the admin panel in terms of look I also think that we should consider them as separate entities since they provide different functions where one encompasses the entire community. Not sure if this is making sense to everyone?


------------------

-----Original Message-----
From: "Chris J. Davis" <c...@chrisjdavis.org>

Date: Tue, 1 Apr 2008 07:57:32
To:habar...@googlegroups.com
Subject: [habari-dev] Re: Home website



Michael Heilemann

unread,
Apr 4, 2008, 5:10:05 AM4/4/08
to habar...@googlegroups.com
To that end my feeling is that the white and black motif does not achieve those goals. My reasoning for this is that using white as the main colour while utilitarian in nature is also cold and brings a much more corporate feel than one of individual and community.

I think that while it may be nice that the main site follows the admin panel in terms of look I also think that we should consider them as separate entities since they provide different functions where one encompasses the entire community. Not sure if this is making sense to everyone?

Not to me anyway :)

I believe Habari should be kept in neutral colors until someone comes up with a color scheme which can work for everyone. The two color examples you included for instance are _way way_ too heavy duty for my tastes.

Anyway, I notice you're using Verdana in the mockups. It might be worth taking a look at Monolith, which uses Helvetica and Helvetica Light, to unify the look and feel.

--
Michael Heilemann
http://binarybonsai.com

Ali B.

unread,
Apr 4, 2008, 8:54:48 AM4/4/08
to habar...@googlegroups.com
I am really against using mac-only fonts anywhere in Habari. I really can't see any good to have any aspect of Habari to promote the looks-better-on-mac idea.

Don't get me wrong, I like the mac and I am even a mac "wanabe" :) My point is that Habari admin, default themes, and even hp.o itself should look the same in every major browser. We don't want to give the impression of being biased to any platform.

But that's just me


--
Ali B / dmondark
http://www.awhitebox.com

Michael Heilemann

unread,
Apr 4, 2008, 9:08:08 AM4/4/08
to habar...@googlegroups.com
On Fri, Apr 4, 2008 at 2:54 PM, Ali B. <dmon...@gmail.com> wrote:

I am really against using mac-only fonts anywhere in Habari. I really can't see any good to have any aspect of Habari to promote the looks-better-on-mac idea.

Strictly speaking, Helvetica isn't a Mac-only font. And it of course degrades to Arial when it isn't available, and since Arial is near carbon copy of Helvetica, it isn't a particularly big issue.

Don't get me wrong, I like the mac and I am even a mac "wanabe" :) My point is that Habari admin, default themes, and even hp.o itself should look the same in every major browser. We don't want to give the impression of being biased to any platform.

I don't think we are biased, other than making the most of every platform, without loss to the other platforms.

Ali B.

unread,
Apr 4, 2008, 9:22:26 AM4/4/08
to habar...@googlegroups.com
On Fri, Apr 4, 2008 at 4:08 PM, Michael Heilemann <heil...@gmail.com> wrote:

Strictly speaking, Helvetica isn't a Mac-only font. And it of course degrades to Arial when it isn't available, and since Arial is near carbon copy of Helvetica, it isn't a particularly big issue.

What about Helvetica Light? There is no "Arial Light" to degrade to, or is there?

Michael Heilemann

unread,
Apr 4, 2008, 10:19:44 AM4/4/08
to habar...@googlegroups.com
On Fri, Apr 4, 2008 at 3:22 PM, Ali B. <dmon...@gmail.com> wrote:

What about Helvetica Light? There is no "Arial Light" to degrade to, or is there?

Arial Narrow :)

Chris Starjive

unread,
Apr 4, 2008, 12:59:50 PM4/4/08
to habari-dev
Time flies by to fast, remember i posted something about this manner
over a year ago and made some LOGOS and WEBSITE mock-ups

http://groups.google.com/group/habari-dev/browse_thread/thread/b8a2a3aafb24c9a/7f99ba7b12a1273c?lnk=gst&q=chris+starjive#7f99ba7b12a1273c

But all good that came out of that post was some logos to ChrisJDavis
own website, pleased it was useful to something anyway :) and not
wasted away hehe.

But i still have some other mock-ups i never posten in psd's laying
around somewhere. But i don't know if they will make any use, most of
them use jquery effects in mind. So if someone wants i can post them
so anybody can play around with them even write down the links to the
jquery plugin i had in mind when i made them. They need to be dusted
off alittle bit i guess :)

I really digg the white/clearblue "200803 Habari Index Rev0" i hope
something will come out from that one nice and clean shapes "Great
Work" Khaled you rock as always.

When we still talking about websites/design/brand/identity colors most
say i really like wordpress.org new design clean, and nice choose of
font etc. But the button style sucks even in modern browsers guess
they are not aware of that so do the buttons UI in wordpress admin if
you don't have safari. And how many procent make use of that browser
around the world :).

ringmaster

unread,
Apr 4, 2008, 3:59:54 PM4/4/08
to habari-dev
On Apr 4, 5:10 am, "Michael Heilemann" <heilem...@gmail.com> wrote:
> > To that end my feeling is that the white and black motif does not achieve
> > those goals. My reasoning for this is that using white as the main colour
> > while utilitarian in nature is also cold and brings a much more corporate
> > feel than one of individual and community.
>
> > I think that while it may be nice that the main site follows the admin
> > panel in terms of look I also think that we should consider them as separate
> > entities since they provide different functions where one encompasses the
> > entire community. Not sure if this is making sense to everyone?
>
> Not to me anyway :)

The best way I can think to describe my feeling on this at the moment
is described thus:

If you are a proponent that the Habari admin should look like the
Habariproject.org site, then you must also agree that Adobe's site
should look like the Photoshop interface.



> I believe Habari should be kept in neutral colors until someone comes up
> with a color scheme which can work for everyone. The two color examples you
> included for instance are _way way_ too heavy duty for my tastes.
>
> Anyway, I notice you're using Verdana in the mockups. It might be worth
> taking a look at Monolith, which uses Helvetica and Helvetica Light, to
> unify the look and feel.

I agree.

I'm inclined to ask: how fast could we see HTML using the colors of
"200803 Habari Index Rev0" in {font-family: Helvetica, Arial}?
Takers?

I am lamenting the loss of the blog entries and -user threads on the
home page though. It would be nice if the community interaction we so
espouse here was also one of the first things that people interact
with when they visit the site.

Owen

Michael C. Harris

unread,
Apr 4, 2008, 8:43:07 PM4/4/08
to habar...@googlegroups.com
On Fri, Apr 04, 2008 at 12:59:54PM -0700, ringmaster wrote:
>
> I am lamenting the loss of the blog entries and -user threads on the
> home page though. It would be nice if the community interaction we so
> espouse here was also one of the first things that people interact
> with when they visit the site.

I haven't looked at the mockups, but I am strongly against losing blog
entries and other updating community information from the home page.
If anything I think we should increase their prominence. Habari is a
blog (even though it can do other things), we should show of its
blogginess.

--
Michael C. Harris, School of CS&IT, RMIT University
http://twofishcreative.com/michael/blog

Michael Heilemann

unread,
Apr 4, 2008, 8:49:37 PM4/4/08
to habar...@googlegroups.com


On Fri, Apr 4, 2008 at 9:59 PM, ringmaster <epi...@gmail.com> wrote:

If you are a proponent that the Habari admin should look like the
Habariproject.org site, then you must also agree that Adobe's site
should look like the Photoshop interface.

If Photoshop was a website, there might be some truth to that, but it isn't :)

I'm not saying it should use even near the same layout. But the essence should flow through all of Habari, in the same way as the iPod and the iMac resemble each other, but not.


I'm inclined to ask: how fast could we see HTML using the colors of
"200803 Habari Index Rev0" in {font-family: Helvetica, Arial}?
Takers?

What does that mean?

 
I am lamenting the loss of the blog entries and -user threads on the
home page though.  It would be nice if the community interaction we so
espouse here was also one of the first things that people interact
with when they visit the site.

Agreed.

Randy Walker

unread,
Apr 4, 2008, 8:54:57 PM4/4/08
to habar...@googlegroups.com

On Apr 4, 2008, at 8:49 PM, Michael Heilemann wrote:
On Fri, Apr 4, 2008 at 9:59 PM, ringmaster <epi...@gmail.com> wrote:

I'm inclined to ask: how fast could we see HTML using the colors of
"200803 Habari Index Rev0" in {font-family: Helvetica, Arial}?
Takers?

What does that mean?

++

I agree/am equally confused/???

~Randy

Silvester

unread,
Apr 4, 2008, 10:07:53 PM4/4/08
to habari-dev
It means how soon till we see the frontpage feature the first mock-up
Khaled offered, using Helvetica or Arial as the main font.

:P

On Apr 5, 3:54 am, Randy Walker <randy.wal...@mac.com> wrote:
> On Apr 4, 2008, at 8:49 PM, Michael Heilemann wrote:
>

ringmaster

unread,
Apr 4, 2008, 10:38:08 PM4/4/08
to habari-dev
On Apr 4, 8:49 pm, "Michael Heilemann" <heilem...@gmail.com> wrote:
> On Fri, Apr 4, 2008 at 9:59 PM, ringmaster <epit...@gmail.com> wrote:
>
> If you are a proponent that the Habari admin should look like the
>
> > Habariproject.org site, then you must also agree that Adobe's site
> > should look like the Photoshop interface.
>
> If Photoshop was a website, there might be some truth to that, but it isn't

Neither is Habari a web site - like Photoshop, it is software.

Perhaps a better choice of comparison would have been Dreamweaver or
Expression, neither of which share design aesthetics with their
marketing site.

Actually, their marketing sites even change periodically to stay
fresh. I'm not sure how many ways you can riff on "look like the
Habari admin" to keep our site fresh, but I bet it's like two. I'm
hoping the Habari project is "in business" long enough to survive more
than two site redesigns.

If we want a similar aesthetic to start with, that's great - let's do
that. I think it's more important to focus first on the goal of the
site, determine the needs to accomplish that goal, and then build
designs around those needs.

> I'm inclined to ask: how fast could we see HTML using the colors of
>
> > "200803 Habari Index Rev0" in {font-family: Helvetica, Arial}?
> > Takers?
>
> What does that mean?

Khaled's first (monochrome) mockup has the filename "200803 Habari
Index Rev0".
The admin is in Helvetica, not Verdana.
How fast can we see an HTML mockup of that first design using
Helvetica and Arial instead of Verdana?

Owen

broke...@gmail.com

unread,
Apr 5, 2008, 4:27:04 AM4/5/08
to Habari Dev email
I will work on it this weekend and send it through on Monday (remember I have no internet access)

With regards to the community elements on the front page the reason that the main text has got three links in them is not by chance. The free link takes you to explain the license requirements , the community link takes you a page which is dedicated to the community. I am still working on this but I am trying to make it something helpful and useful to everyone, and the last thing is to download the software.

The idea for the front page is to push people in the right direction and get them excited to join the community, try the software etc

I will work on the documentation design and the community design so that peeps can get a more holistic understanding of how the site could function


------------------

-----Original Message-----
From: ringmaster <epi...@gmail.com>

Date: Fri, 4 Apr 2008 19:38:08
To:habari-dev <habar...@googlegroups.com>
Subject: [habari-dev] Re: Home website



Michael C. Harris

unread,
Apr 5, 2008, 8:02:39 AM4/5/08
to habar...@googlegroups.com
On Sat, Apr 05, 2008 at 08:27:04AM +0000, broke...@gmail.com wrote:
>
> With regards to the community elements on the front page the reason
> that the main text has got three links in them is not by chance. The
> free link takes you to explain the license requirements , the
> community link takes you a page which is dedicated to the community.
> I am still working on this but I am trying to make it something
> helpful and useful to everyone, and the last thing is to download
> the software.
>
> The idea for the front page is to push people in the right direction
> and get them excited to join the community, try the software etc

I think our community is a big driver to get people excited - it was
certainly central for me - and the community aspects should be
prominent. But if others disagree and are happy to move the community
aspects to a secondary location, I won't raise a ruckus.

Message has been deleted

Andrew da Silva

unread,
Apr 5, 2008, 11:09:25 PM4/5/08
to habari-dev
http://chrisjdavis.org/user/hp.o/

That is a draft chrisjdavis did based on a sketch.

Just that page shows everything people need to know, the selling
points would be in the black box with screenshots/screencasts.

In 2008, do people still read websites with paragraphs describing a
product? (especially a more than single-fold frontpage?)

What would a normal user, first time visitor, read or look for?
Normal user: Requirements, Screenshots, Available Themes/Plugins.
Advanced user: All of the above, plus community and API documentation.

$0.02

On Apr 5, 8:02 am, "Michael C. Harris" <michael.twof...@gmail.com>
wrote:

ringmaster

unread,
Apr 6, 2008, 3:30:26 PM4/6/08
to habari-dev
On Apr 5, 11:09 pm, Andrew da Silva <andrewdasi...@mac.com> wrote:
> http://chrisjdavis.org/user/hp.o/
>
> That is a draft chrisjdavis did based on a sketch.

Um.

http://www.flickr.com/photos/asy/2393654408/

Owen


Andrew da Silva

unread,
Apr 6, 2008, 5:13:04 PM4/6/08
to habari-dev
Interesting... sub-conscience? I draw that on paper, yes from sites I
liked, but not a specific one...

Of course, that layout is quite popular, that must mean something...

Something I'ld like to suggest is to add a service like CrazyEgg to
monitor what users click. This way we'ld know what attracts/interest
them.

That is how Yahoo does it, they just do multiple designs and assign
them to random visitors, monitoring how they react... reduces
discussions.

In the end, all created designs will be used in one way or an other
(if not by hp.o, by a community member?).
Reply all
Reply to author
Forward
0 new messages