[theforum] front end

Erika Meyer ekm at seastorm.com
Tue Jan 6 20:11:57 CST 2009


Tara mentioned to me on #evolt a few weeks back that she is stepping out 
of active evolt.org-ing (hopefully temporarily), and so I've been 
working on a front-end design.  I know Martin has been working on 
something as well.

I am going to upload a version of my VERY ROUGH work to show you, not 
because it's anywhere close to ready, but moreso just to show
the direction I've been going, and to find out from theforum whether 
it's worth continuing this direction.

That's the basics.... For those who require / desire more background, 
read on. :) E

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

The design still needs lots of work but it's coming along, and I'm 
happy to continue until there is a clean, semantically awesome, and 
attractive completed design, *if* there is support for the general 
direction I'm taking it.  I'm talking about the overall vibe, not 
detail-level stuff.

It's not by any means IE-ready yet, but so far there are no major IE 
issues that I can see (knock on wood), mostly font-adjustment, minor 
image issues, and png's w/ transparencies that need to be replaced w/ 
gifs for IE6, etc.  A lot of other small refinements need to be done all 
over that will eventually make the whole design look a lot nicer (in all 
browsers).

I've tried to consider all the information Martin has gathered and
suggested (and Tara, who made some wireframes), plus everyone else on
the forum who has chimed in, plus the responses gathered from the
survey, as well as following my own style of simple/stripped-down
design/code.  (The CSS/HTML will grow simpler as it's refined.)

I'm trying to make it look and feel "like evolt.org" but improved and
updated.  Alot of these improvements, like CSS optimized for i18n, use 
of sprites, etc, will come later in the process, when other design 
elements are nailed down.

(If theforum likes this direction, I intend to involve i18n as well.)

At the same time, I'm trying not to be overly "safe" in design choices, 
to try some creativity/innovation, so that the site will ideally become 
the high-usability interface pared with a home-spun personality/look and 
feel that characterizes the best of evolt.org Hopefully this will all 
translate into Drupal.. I think it can.

You will recall that I presented out some photoshop mockups and a 
scrawled wireframe site map, solicited comments, and received some good 
feedback including:

- at least one person feeling that our established brand should be
communicated by maintaining strong consistency in our logo (IOW, keeping 
our logo AS IS -- which I totally respect)

- more than one person expressing the feeling that the "black bar across
the top" is an important part of our established brand.  And similarly,
the sentiment that our "cubes look better against black."

- no tabs (someone hates tabs, and I'm fairly neutral) ...tabs are good
usability, but I think that usability can be done well w/o tabs.
(simplicity helps a lot in usability).

Mainly, I've been working on secondary landing pages: articles, 
browsers, lists. Unfortunately, I spent a HUGE amt of time laboring over 
a front-door before realizing  1. the front door should *not* be the 
first thing I do! 2. I think most of the site continues to work well in 
a 2-3 column layout, but the front door should be different layout, esp 
considering Martin's calls to make it work more like flickr/britekite, 
and others' suggestions of  making the front door something different 
than an article list. Trying to do the front-door on the same template 
as the rest of the site doesn't work so well because there is too much 
"sidebar" stuff that needs to be more prominent, resulting in a 
cluttered/confused interface and/or the feeling of cramming content into 
a design, rather than creating a design to serve the content.

I like the idea, also, of a front-door that is visually distinct from 
the rest of the site. I am kicking around a PSD
mockup for front door, but want to finish the secondary landing pages 
before getting too deeply into that.

One thing I was hung up on for a long time was fixed-width vs. fluid 
divs. Felix Miata has made a strong case on thelist over time for fluid
design, challenging us to set a good example in that regard... and I am 
intrigued by the challenge of creating a fluid design that works even on 
very large monitors, and looks good, though fluidity limits certain
design choices.

After a lot of thought, ended up going for a mostly fluid holy-grail
type layout with max/min width (which is an easy thing to tweak). 
Buttons, bg graphics etc are sliding doors.  Fonts are set large (.9em 
lucinda base font).

so that's the basics. I've kept some characteristics of the 2.0 design 
that still runs on l.e.o. and b.e.o., and also the distinctinve bright 
color against black/grayscale from the 1.0 design.


Erika










More information about the theforum mailing list