Gentoo Foundation Web Site Redesign Contest

Message

fernandotcl · Post by **fernandotcl** » Fri Jul 23, 2004 4:30 am

Your update was great, shift. Some notes:

1) The speedometer and the carabiner look great, but the fingerprint and the eye shot don't look good, IMO. As it was stated before, a swiss-army knive would be a great deal.

2) Everything look neat, but please don't use Flash. It may be suitable for a enterprise site, but not for a simple site that might be accessed from a text-based browser.

It's becoming great. However, I'm afraid it may not be choosen because of it's complexity. And I still find the Debian site cleaner. But your design seems to be the best so far.

Jaizkibel · Post by **Jaizkibel** » Fri Jul 23, 2004 6:02 pm

Hello everybody,

Well, this is my little contribution to the Gentoo community, hope you like it!

http://ibm330.ath.cx/gentoo/gentoo.png
http://ibm330.ath.cx/gentoo/handbook.png

Although the PNG's are for 1024x768 res, it easily fits on smaller or bigger screens because my intention is to set relative distances and column-widths with XHTML+CSS so everybody feels comfortable. I suggest making the homepage in a way that no vertical scroll is neeeded, in order to make it more structuraded and usable. Once the visitor has choosen a link, then the design expands vertically. This is the reason why I suggest two kind of banners: the ones on the homepage smaller, and the ones in the inner pages (like the handbook) with its real size.

Purple is the prominent color, but trying to make it a bit more 'user friendly' I have associated each kind of audience with a different color (the vertical colored bars: blue for newbees looking for docs, yellow for usual gentoo users and red for developers and expert users in the community). Thus, content is structurated thinking in the different kinds of visitors of the site. Also, a rainbow coloured title background is my suggestion for making a fresh, 'gentooish' design

Contents are also organized on the right side menu (self-expandible), so everything is accesible from inner pages (like the Handbook) without the need to reload the frontpage. Also, news are placed in a three column fashion, I think it's not a good idea to put more more than three news in the frontpage. The 'Older News' link should work for the ones looking for archieved news.

My experience is that all the texts and links should be HTML text (no text in graphic format). Otherwise it would be disturbing for {low bandwith | text browser | old browser} people and site admins. In the other hand, everyone can adjust the font sizes with the browser (typically Ctrl++, Ctrl+- like in Firefox), so everybody feels comfortable while reading. So, the only pics are the coloured Gentoo logo and sponsor banners (well, some little icons like bars and arrows as well). IMHO this is my bet to minimize server bandwith and speeding up the site render without loosing the 'cool factor'. No need for human or conceptual pics as far as we don't want to sell anything, but to make a text-rich site more clear, structurated.

Hope you like my little contribution to the Gentoo contest. And of course any criticism is welcome

(BTW the design is completely original and made by me from scratch, no template nor stolen inspiration

)

calande · Post by **calande** » Fri Jul 23, 2004 6:28 pm

Jaizkibel wrote:Hello everybody,

Well, this is my little contribution to the Gentoo community, hope you like it!

http://ibm330.ath.cx/gentoo/gentoo.png

Hi, the link for the main page is http://ibm330.ath.cx/gentoo/gento.png (just one "o").

Jaizkibel wrote:No need for human or conceptual pics as far as we don't want to sell anything, but to make a text-rich site more clear, structurated.

I don't totally agree. We don't sell a commercial distro, but after all, Gentoo greatly welcomes CD and T-Shirts sales and donations from the official Gentoo online store. We also "sell" an idea, a concept, be Gentoo itself, or FOSS in general. We need to "seduce". I got seduced last year. The more people we have, the more support, and development for Open-source software.

Regarding your design, I like it, it's clear, and the colors are nice. I like the way you arranged the news at the bottom. I don't like the fact that you reduced the height of ads. The large G in the background on the right-hand side may be a little too heavy to load each time, I don't know. You're using frames for the Handbook, this is not a good idea, really, beside the fact that I like frames, but not everybody/browser like it, especially Links.

The SVG version of the G logo is different from the original G that you can find on the current web site. I don't know why, but you should use the one on the current web site, and clean it with your favorite image editor. It'll look nicer.

Keep it up

reisio · Post by **reisio** » Fri Jul 23, 2004 6:40 pm

calande wrote:the official Gentoo online store.

which sucks...honestly, all of FIVE items? (only two if you don't count different CD versions) :p

calande wrote:You're using frames for the Handbook, this is not a good idea, really, beside the fact that I like frames, but not everybody/browser like it, especially Links.

don't assume - that is a SCREENSHOT and it can be reproduced in html WITHOUT using a frame

I just hope the submission reviewers don't make the same assumption you just did, as my submission will also display a scrollbar in such a way.

davideads · Post by **davideads** » Fri Jul 23, 2004 7:36 pm

shift wrote: 3) The design would stretch to any width, but the lower limit will be 780px for a 800x600 screen. If you make it compress narrower than that it wouldn't look very cool. Gentoo's current site has a lower limit of around 900px (I haven't actually measured it), so even people in 800x600 have to scroll horizontally (it does nicely to cut off the ads though ). My design improves on that already, but I won't go too far as to compensate for 640x480 res. since the cost (to everyone else) will clearly exceed the benefit.

I don't think making it stretch to any width is a good idea. A variety of CSS techniques exist for making cross browser sites that stretch and scale but maintain a stable average number of characters per line, which is important for readability (I'll have to get the links to the research from my other computer).

Limiting the minimum width may or may not matter, though using floats and such you can make things look nice down to 150-200px widths because as you scale down, the various box model elements start to stack on top of one another. This would allow for people to view the site on cell-phones, PDAs, etc. In my mind, that's not a big deal, but it's quite easy to accomplish.

-David

reisio · Post by **reisio** » Fri Jul 23, 2004 8:33 pm

davideads wrote:I don't think making it stretch to any width is a good idea.

then you're missing something

davideads wrote:A variety of CSS techniques exist for making cross browser sites that stretch and scale but maintain a stable average number of characters per line, which is important for readability (I'll have to get the links to the research from my other computer).

it shouldn't matter if you specify your font sizes appropriately

davideads wrote:Limiting the minimum width may or may not matter, though using floats and such you can make things look nice down to 150-200px widths because as you scale down, the various box model elements start to stack on top of one another. This would allow for people to view the site on cell-phones, PDAs, etc. In my mind, that's not a big deal, but it's quite easy to accomplish.

that's what media descriptors are for

shift · Post by **shift** » Sat Jul 24, 2004 2:00 am

If you maintain an average number of characters per line, with what reference point do you obtain that average number from? If you get it from a 640x480 screen's readable avg. char/line, then on a 21 inch 1600x1200 it'll be the same number of char/line and the text would be huge, and vice versa.

Even if you fix the font at some size, it'll be about the same size on a larger resolution anyway, because the screen is gonna be physically bigger. The reason for a larger screen is all thing being relatively the same, you will get more workspace. I don't think anyone will use 1600x1200 on a 15/17 inch monitor anyway.

Jaizkibel · Post by **Jaizkibel** » Sat Jul 24, 2004 5:26 pm

I don't like the fact that you reduced the height of ads.

I think the frontpage would look more structurated and clear with no vertical scroll (Like IBM or Novell's website, for example). As a result, ads need to be smaller in order to fit them in the layout, but while being smaller I think they are more visible than in the current Gentoo design, because they are not cut by vertical scroll.

Once the visitor has choosen a section/link, then scrolling is of course needed in order to display the whole page in a 'user friendly' way, and ads can be bigger.

You're using frames for the Handbook, this is not a good idea,

I agree with you, but I have made some updates and there is no need to use lame frames.

I would like to read some feedback about the frontpage, I made a big effort trying to giving it a 'fresh' and not-so-serious look and feel, so your impressions are welcome, although there is not much time to improve it until contest deadline.

http://ibm330.ath.cx/gentoo/gentoo.png
http://ibm330.ath.cx/gentoo/handbook.png

davideads · Post by **davideads** » Sat Jul 24, 2004 6:03 pm

shift wrote:If you maintain an average number of characters per line, with what reference point do you obtain that average number from? If you get it from a 640x480 screen's readable avg. char/line, then on a 21 inch 1600x1200 it'll be the same number of char/line and the text would be huge, and vice versa.

If I understand the question, the answer is involves three components to do it in CSS:

* You set a base font size in terms of one of the font keywords (x-small, small, etc)
* You set other font sizes in percentages of the base, so that scaling works correctly
* You specify maxwidth for the box you're building in ems. Ems being more or less the width of an M in the specified font, you can consistently hit a certain number of characters per line.

I don't think anyone will use 1600x1200 on a 15/17 inch monitor anyway.

I do on a 17 inch monitor, but I keep the font fairly small. One of my coworkers has bad eyesight and cranks the text zoom waaaay up along with the resolution on a 19incher, and most fixed width sites drop down to 10-15 characters per line. So your design escapes that problem. I still think it's nice to use the above technique to keep the number of characters per line within reason but I know a couple folks who think users should just cut down their browser window to whatever width they find comfortable. Not a big debate for me, but something I thought I'd throw out. In general, people do tend to have trouble past about 75 cpl and often wind up just quitting reading.

David

shift · Post by **shift** » Sat Jul 24, 2004 6:22 pm

Yea I agree forcing the user to a fixed size is probably not the best idea. A lot of people likes to set their browser to larger than normal fonts, especially people using those old monitors that are kind of fuzzy and dim after a few years.

dgt84 · Post by **dgt84** » Sat Jul 24, 2004 8:21 pm

shift, your work is amazing!

I bow down to you!

shift · Post by **shift** » Sat Jul 24, 2004 11:40 pm

2000UTC 25th is about what time PST? Noon 25th?

shift · Post by **shift** » Sun Jul 25, 2004 1:26 am

Here's the subpage to go along with my design:
http://aaronshi.com/gentoo/gentoo-sub.png

In a few hours I will be submitting http://aaronshi.com/gentoo/gentoo-front1.png along with the subpage. Hopefully people will figure out that the main graphic on the front page rotates.

reisio · Post by **reisio** » Sun Jul 25, 2004 4:49 am

shift wrote:2000UTC 25th is about what time PST? Noon 25th?

yap - actually it might be 1pm for daylight savings time, but no point in pushing your luck :p

LLSLIM · Post by **LLSLIM** » Sun Jul 25, 2004 4:54 pm

Hello,

I have been following this thread rather closely. I like the designs that jaizkiebel and shift produced very professional. Jaizkiebel's seem to appeal to me more, because it's a little more unique IMHO, and not trying to put gentoo in a competition for having the best site to seduce users. Gentoo seduces users with features like portage and very helpful community not its website. If gentoo starts to develop a corporate state of mind in developing and worry about the quanity of users rather than quality of product produce it will surely fail. In fact hat goes for all of open source/ free software.

I have an issue with gentoo appearing more corporate. The problem with every site mentioned by shift in his defense of using human pictures to enhance the user experience is that they are corporations and not foundations. A corporation by definition is a seperate entity from its members, having its own rights, privileges, and liabilities that are diffrerent from its members or in this case users. One of the distinct characteristics of Novell/SUSE, Microsoft, Cisco, HP, and other major IT corporations have is the support staff to back their warm and friendly stances of their corporate image. The goal or philosophy of these and any corporation is to be an industry leader and to make the right decision to ensure the growth of themselves and not neccessarily their users. They do not care that Nick or Natilie Novice do not know how to use the product they just purchase, or don't really care if the users know what their product actually does. The corporations make their money on the support services they provide and the sheer volumes they ship. The warm and fuzzy feeling images on their site are to "seduce" novices to the site to spend money on products and services which is the underlying reason to enhance any user experience for them.

Is it gentoo goal to become corporate? Seperating the needs of the entity of gentoo with the needs of its users. I don't think so, that would undermine the philosophy of: "letting the user do what they want to without getting in the way". With this philosophy there has to be some initiative on the users part to get started with any linux. It has always been and will be RTFM. Without reading and understanding what hey want to do with their system. What good is a community of volunteers going to be to them? What can they contribute to the community downloading a distrobution where time, patience, and some previous knowledge of their computer system is required. Most often the people who get seduce by pictures are people who don't understand what free and opensoource software really means. Also they don't understand the advantages/disadvantages of buying software. When you buy software you can received a somewhat "yoga-esque" peace of mind that any major problem with the system you purchased is upto the corporation to fix and not you. With free software help is available, but the user have to take part in the fixes themselves. Which is a danger of seducing people. Seducing people thatdo not want to put effort in learning the linux system will perpetuate the image that linux is to difficult to use. Some may argue that gentoo is as easy as Redhat, SUSE, Mandrake or even Windows to install and maintain, but how active are these users with their system. Also these are probably the same people who could care less about the gentoo site being inviting to people who don't want to figure out what they want in their system.

This is why gentoo like debian became a foundation rather than a corporation to ensure the institution of letting people do what they want would stay the focus. Not being the number one linux distrobution or appearing to be for everyone. Gentoo is about the freedom to use our system however we want without predetermining the tools for the job. The website should reflect that flexibility. Gentoo users are so diverse on how they access the site. Some access it from windows with IE, because that's what they have available at the time. Some use one of many linux GUI desktop browsers (konquer, firefox/mozilla). Some of our ppc brethern uses the Mac browser Safari. Yet others forego using a GUI browser at all and use lynx or links straight from the live cd especially to look at gentoo guide pages or retreive a mirror site.

I am not saying shift or any other designer should not use everyday graphics in their design, or disregard their design experience of corporate sites. Just keep in mind that gentoo is not a corporation, but a foundation supporting the institution of user choice. Hence why it is so flexible. The users like us make it powerful by determining our computing needs then using tools gathered and integraded by gentoo. The warmth of gentoo comes from the willingness of its members to share ideas and struggles with each other from gentoo developers to gentoo "noobies". Everyone has always been on same level. That's the gentoo philosophy, and the website should reflect that. Not a corporate image, even though corporate images try to appear humanistic. I am not by far a talented artist like shift or Jaizkiebel, or have the design experience they obviously posessed. Just giving my 2 cents as a gentoo user who wants to help.

Lastly, I would like to say I have a disability. Even though the current gentoo site doesn't look as graphical pleasing as other sites mentioned. I found it damn more accessible in terms of keyboard use, and using text or markup for every part of site and not graphics or javascript. That and how the install process wasn't mouse dependent like my last distrobution (Redhat). I want to keep it that way, because it coincides with the philosophy of gentoo and accessible to me.

To give you an example fire up lynx for both novell and gentoo. Then use your favorite GUI browser with same two sites. Anything missing? With Novell's javascript menu. it is gone in lynx. Which is unacceptable for gentoo. Use of a noscript tag would be nice. I know this is just a look and feel contest, but something like use of javascript or not disturbs the look and original thought for design. Just food for thought. With that I'll end this message.

Shem Hotep ("I go in peace")

LLSLIM · Post by **LLSLIM** » Sun Jul 25, 2004 5:29 pm

hello again,

I don't think this should be a contest at all, because from this discussion it is evident a clear direction needs to be established for the www-design as a whole. Since the website is for the community of gentoo, its development should be discussed in healthy conversations like this one. Where great designers like shift and JaizKiebel can take their professional looking designs and mold them into a very functional site for every user with the help of other users along the way. The identity and design of should be like any other part of gentoo and converted into an on going community base project and live on the bleeding edge of innovation.

To offer an alternative solution to the contest. I feel like the current guidelines of picking five look-and-feel gimp mock up entries is good, but rather than choosing one from the five mock ups have another phase to the contest should be presented to the community using all five look-and-feel entries.

A rough draft of the next phase would be the following:

A link to both pages marked up in GUIDE XML should be provided. Then the candidates or other uusers could write XSL stylesheets to apply the look-and-feel for functionality. People may wish to team up and discuss it on the forums. Or even break the contest down further to just single basic XSL templates for the header, navigation, Content, footer of majority of pages. Then forums phpbb templates, buzilla templates, or whatever other specialityparts is needed. If it was up to me, I say a month to develop each template just so we have somewhat of a timeline to work with.

Then a reference to the XSL stylesheet would be inserted into the gentoo-www-design project database along with candidate group leader contact information, stage of improvement, date submitted, and an optional reference to a detailed description for the stylesheet. Then through a scripting technology most likely mod_python, since python already used for current site, to apply the stylesheets to the gentoo content GUIDE XML pages or some extension to that markup if the original schema is not sufficient for discussion on the mailing-list and forums. klieber and his selected team of judges would naturually make the final decisions for the production release set of XSL stylesheets, CSS stylesheets, and images. Base on overall scores ofvotes at end of template submission.

There are three stages that every design should be measured and they are:
A. look and feel (which being taking care of now)
B. Acessibility and page organization
C. Functionality

Of course these are not sequential steps, but just a simple model of main concerns. Earlier in this thread there were discussion on the navigational system of the page which I really like to see examples of in practice.
Especially this one:

nadamsieee wrote:Refering to JavaScript drop-down menus:
Shadows wrote:I'm not sure, if there's another, more elegant way to solve this (XML / CSS maybe?).
In XML, a single URI can point to multiple resources. These are called extended links and are defined in the XLink standard. How the web browser presents this to the user is determined by a combination of the DTD and the CSS.

Then I got to thiking albiet shift may be a great desginer his code implementation may not be as good another person. Also even though klieber has already gotten an idea for developers for this project. Openning up the developmentof each section will have great benefits as far as acessibility. It's like saying "if you don't like any part of the site, then here is the XSL stylesheet for that page make it better!". Which the true open source way of doing things.

With XSL stylesheets the output format is upto the designer or XSL template writers. This way the resulting tags or output format doesn't really matter.
The concepts are what most important here.

I am just using shift as an example. Not to pick on him or anyone else for doing a great job. Just trying to make my idea clear. This is just a rough idea. Comments and or suggestions for improvements are welcome. With this I'll end this message.

**Thinking while typing stylesheets wouldn't need to be submitted, just made public accessible and reference to the XSL stylesheet needs to be submitted. The CSS stylesheet(s) can be referred tofrom within the XSL stylesheet output. The stylesheets only needs transferred if it is included in a production release of the gentoo-www-design. Same goes for any images and scripting fragments (e.g. javascript, phpBB templates, Mono code, or whatever the case will be)**

Again these are just rough thoughts and my 2 cents.

Shem Hotep("I go in peace").

zeasier · Post by **zeasier** » Sun Jul 25, 2004 6:23 pm

Here is my email to www-redesign complete with typing errors. Wish I could of showed this to you guys before submission, but I have been short on time.

Anyway hope it's interesting, and good luck to all the other designers out there.

Thank you for inviting us all to this redesign contest. My entry is attached to this email. Here also are some links to the files on my server.

Screenshots:

http://www.haralovich.org/projects/gentoo/index.jpg
http://www.haralovich.org/projects/gentoo/handbook.jpg

HTML:

http://www.haralovich.org/projects/gentoo/dev/lila/index.html
http://www.haralovich.org/projects/gentoo/dev/lila/handbook.html

The html has only been tested on Linux Firefox and is by no means complete, although I am confident that the layout will work on all browsers in time. The layout is made with XHTML and CSS. It renders relatively well on text based browsers now, though there are a few things I would like to improve if my layout is chosen.

The featured image on the index page can be any image where the sides can be cropped off without loss of impact. Though the current CSS doesn't demonstrate this perfectly, this cropping can be done dynamicly as the window resizes. Though I am capable of producing graphics myself for this area of the page, I would consider enlisting help in this area. My focus is more on usability, interface design, and general page graphics; and less on image graphics and marketing. It seems to me there are plenty plenty of people in the community to help with this task, and less with a talent for general page layout and interface.

Hope you enjoy my submission.

...Matthew Haralovich

davideads · Post by **davideads** » Sun Jul 25, 2004 6:58 pm

Hi y'all,

I ultimately submitted two color schemes and with some subtle differences between them:

http://www.invisibleinstitute.com/gento ... _front.png
http://www.invisibleinstitute.com/gento ... ndbook.png

http://www.invisibleinstitute.com/gento ... _front.png
http://www.invisibleinstitute.com/gento ... ndbook.png

Thanks for all the feedback. I think this contest was a pretty interesting experiment.

-David

Lucero del Alba · Post by **Lucero del Alba** » Sun Jul 25, 2004 7:45 pm

Hey,

Here's our (my company's) submission:

Front page (128K)
Handbook (78K)

I hope you enjoy it

reisio · Post by **reisio** » Sun Jul 25, 2004 11:59 pm

I got lazy and busy so I never finished/submitted anything, but if anybody's bored - here's a screenshot of where I was going.

Just a simple little thing. I didn't even get around to doing the news, so that's just from the current site. :p
Kudos to dgt84 for his snappy SVG.

viperlin · Post by **viperlin** » Mon Jul 26, 2004 12:54 am

reisio wrote:I got lazy and busy so I never finished/submitted anything, but if anybody's bored - here's a screenshot of where I was going.

Just a simple little thing. I didn't even get around to doing the news, so that's just from the current site. :p
Kudos to dgt84 for his snappy SVG.

wow me like (well everything but the non-AA fonts)

reisio · Post by **reisio** » Mon Jul 26, 2004 1:20 am

viperlin wrote:wow me like (well everything but the non-AA fonts)

well those would be text in html, so wouldn't be antialiased

{refrains from once again bashing the stupid code/browser people and how dynamic fonts are STILL unsupported}

iStormy · Post by **iStormy** » Mon Jul 26, 2004 1:25 am

Lucero del Alba wrote:Hey,

Here's our (my company's) submission:

Front page (128K)

This is one of my favorites. It's very clean and uncluttered (except for the left menu of doom inherited from the current site).

I'd suggest more purple though. It looks predominately green to me.

viperlin · Post by **viperlin** » Mon Jul 26, 2004 2:15 pm

reisio wrote:
viperlin wrote:wow me like (well everything but the non-AA fonts)
well those would be text in html, so wouldn't be antialiased

{refrains from once again bashing the stupid code/browser people and how dynamic fonts are STILL unsupported}

unsupported in.........

yes i know people turn off AA fonts in browsers but i think that websites look better in presentations with AA fonts.

i have AA fonts in my browser, i lock all my fonts to be Arial

neenee · Post by **neenee** » Mon Jul 26, 2004 3:13 pm

viperlin wrote:i have AA fonts in my browser, i lock all my fonts to be Arial

ditto, but with tahoma

Gentoo Foundation Web Site Redesign Contest

My draft for gentoo.org

Re: My draft for gentoo.org

Re: My draft for gentoo.org

my 2 cents on the gentoo redesign

possible solution to contest

My submission

our submission...

Re: our submission...