| View previous topic :: View next topic |
| Author |
Message |
reisio
Tux's lil' helper
Joined: 12 Jul 2004
Posts: 121
|
 Posted: Tue Jul 13, 2004 4:41 am Post subject: |
 |
|
Yes, I've seen that. It is very nice, but still a reproduction. |
|
| Back to top |
|
 |
barrywardell
n00b
Joined: 13 Jul 2004
Posts: 3
|
| Posted: Tue Jul 13, 2004 1:44 pm Post subject: drop down menu |
|
|
| Shadows wrote: | I'm not sure, if there's another, more elegant way to solve this (XML / CSS maybe?). If not, well, maybe enhancing menus with Javascript is not really that bad at all  |
Have a look at this. It's an elegant, standards compliant way of doing a menu and it fails gracefully (even in text browsers the full menu is available). It uses pure HTML/CSS, and although it requires a small bit of Javascript, that is only as a workaround for Internet Explorer. |
|
| Back to top |
|
|
dgt84
Guru
Joined: 27 May 2003
Posts: 355
Location: Germany => USA
|
| Posted: Tue Jul 13, 2004 3:23 pm Post subject: |
|
|
Well, I thought I'd post my design here as well so that people can comment on it. It is actually similar to zeasy's design, which suprised me since this is the first time I've seen his/hers. I also used a slightly modified version of the simplification of the menus posted earlier in this thread. The menus can still of course be edited, so view it as an example of how they would look visually. The entire layout (including icons and all) was done in Inkscape 0.39-cvs and took a couple of days. Two public domain images are used (from the Open Clip Art Library). Hope somebody likes it and that I can get some feedback on it before I make the second page and submit it for the contest.
http://programmer-art.org/images/gentoo/new-gentoo.jpg
I've tried to make the page a bit more "user friendly" as can be seen in the image. I hope it's not too eye-candy-ish. Most of the colors and things can easily be done with CSS (and the rounded stuff can be done with CSS3, but sadly we need the spec to be completed and browsers to code support for the border-radius property before we can use that...)
As you'll notice the four links across the top are there because when I first came to the site, it took me a while to find more about Gentoo, how to download it, and how to install it. With those links, you can't miss it.
Let me know what you think
_________________
Lila themes | The Porthole Portage Frontend | SVG-Utils |
|
| Back to top |
|
|
zubauza
n00b
Joined: 10 Jul 2004
Posts: 6
|
| Posted: Tue Jul 13, 2004 3:33 pm Post subject: |
|
|
| Quote: | | Entrants should submit two images in PNG format. The first image should show a full mockup of the front page of www.gentoo.org. The second image should show a full mockup of the first page of the Gentoo Handbook. |
does that mean we should submit two images with the complete content of these two pages (about 1204x2000 px) or just the first look at the design (about 1024x768 px)?
_________________
deviantART Gallery |
|
| Back to top |
|
|
zeasier
n00b
Joined: 15 Oct 2003
Posts: 25
|
| Posted: Tue Jul 13, 2004 5:19 pm Post subject: |
|
|
| charlieg wrote: | | How do you plan on doing the drop shadows for each layer? Doing them in tables makes for cludgy HTML. Doing them in layers is damned near impossible. Doing them as fixed size (with/height) drop shadows is god awful design. |
I hope to submit a screen shot of a functioning html layout instead of just an image. This is because sometimes certain subtile compromises must be made to fit a layout to code. For now though, I don't see a point in rendering a html layout until people like it.
It sounds like there are already decent html/css people here in Gentoo. They'll choose the best 5 layouts keeping in mind that they may have to implement one of them. It seems it's only the graphic design work they are interested in. (Although, I'd prefer to write my own layout.)
| dgt84 wrote: | | It is actually similar to zeasy's design, which suprised me since this is the first time I've seen his/hers. |
That doesn't suprise me, seeing how I planned on using your Lila icons, and how we discussed the navigation format earlier. Heh, I've even been pokeing around openclipart.org, but there's no way for me to prove that. The Lila icons are excelent, and a natural fit to the Gentoo web page. I was worried that some one else would post a Lila layout so I decided to share my own as soon as possible. Not that I want credit for the idea, but why take chances. Hopefully no else will be discoraged from making a Lila themed design. I don't beleive orginiality is a good enough reason to ignore a good idea. If there are any good ideas my work, I hope they will be imatated and improved by the other designers.
Speaking of which, where can one find the font you used on the site title next to the Gentoo logo?
| dgt84 wrote: | | As you'll notice the four links across the top are there because when I first came to the site, it took me a while to find more about Gentoo, how to download it, and how to install it. With those links, you can't miss it. |
I like these links you have up there. The link text in the form of a question is a great idea. Perhaps the page is not considerate enough to people who don't know what Gentoo is. You can't depend on newbies to do anything, even click on a link. The front page must have some kind of introduction at the top of it. Also are you sure those links will fit nicely on a 800 px wide screen?
Your navigation menu to the left is nice but the links are cluttered, give them some space so they apear as separate items instead of one big string of text.
Finnaly be careful with the Gentoo logo. Good branding is consistent. It may not be such a good idea to use an alternate graphic for the logo.
The design overall is very good. It doesn't feel harsh and has a generous use of space. I would like to see how you would handle the other pages of the site. |
|
| Back to top |
|
|
mjg
n00b
Joined: 06 Jul 2004
Posts: 15
Location: rochester, ny
|
| Posted: Tue Jul 13, 2004 9:41 pm Post subject: |
|
|
I might as well post what i've thrown together.
http://www.csh.rit.edu/~neo/gentoo/gentoo-1.png
I went for minimalistic, not too flashy, and geared towards using the space provided to be productive more than elegant.
The menu system works as such:
the top bar are general categories (obviously, up for change with enough room to add more in the future). When mouse'd over, the lower bar changes to reflect the sub-categories that a user can choose from, again, keeping space for future additions. It aims towards keeping things grouped, not taking up too much of the page (obviously, content requires a lot of space, especially in other areas of the site). It would also stay out of the way of the handbook and the forum, making new pages easy to include into the new design.
The rest of the page is broken down into two spots...the content that everyone is concerned about, and the ads. The add area can be as small/large as is required by the number of ads at the time. The stories are broken down as usual, but stand out a little bit more so you can really focus on the content of the story than what's around it. At the bottom, is a larger version of the "Old News" that is currently cluttered on the side of the site. This will make it easier to find old news, or recently old news.
There is a general search on the top left, which allows the user to choose which section of the site they are searching, and what to search for. It looks a little small in the image, at least for me (resolution is high).
Any/all suggestions would be rocking. I do like though, that the public submissions thus far are all geared towards the same stuff. That's really good to see that we're all heading towards common goals.
--Mike |
|
| Back to top |
|
|
reisio
Tux's lil' helper
Joined: 12 Jul 2004
Posts: 121
|
| Posted: Tue Jul 13, 2004 9:59 pm Post subject: |
|
|
| mjg wrote: | | Any/all suggestions would be rocking. |
You might want to include the purple 'g' logo at least once...probably by the 'gentoo linux' at top right, I guess.
I think a difference in background color between the main content area and the news boxes would be nice, too - even if it's just a matter of rgb 255 -> 250.
Also looks like you could afford to lose some of the padding around the news boxes. |
|
| Back to top |
|
|
dg
n00b
Joined: 13 Jul 2004
Posts: 3
|
| Posted: Tue Jul 13, 2004 10:29 pm Post subject: |
|
|
Here's my contribution:
http://home.myuw.net/dgerstma/weblog/index.php?p=27
And a screenshot:
http://home.myuw.net/dgerstma/designs/gentoo/images/interface/dg-gentoo-redesign.png
Explanation from my blog entry:
This is simply a rough sketch for the main page. Other areas would probably benefit from a side-bar menu interface. This page was tested in Firefox v0.9.1 and IE 6.0, although IE doesnt center the footer correctly for some odd reason.
The layout is table-less CSS, designed to be professional, attractive and somewhat clean. With the exception of the banner and some icons, all content was derived from the original site, and graphics were modified from existing logos and icons. |
|
| Back to top |
|
|
Maedhros
Bodhisattva
Joined: 14 Apr 2004
Posts: 5511
Location: Durham, UK
|
| Posted: Tue Jul 13, 2004 11:12 pm Post subject: |
|
|
Blimey, I'm very impressed! If only I could do web design like that! 
A few points though:
- Having most of the page fixed width, except the top bar makes for a slightly odd effect - I think it should all be fixed width personally. You also might want to add some padding around the main content for those with small browser windows.
- The :hover link colour really doesn't work on white IMHO! It's great for the top menu, but not in the links on the rest of the page...
_________________
No-one's more important than the earthworm. |
|
| Back to top |
|
|
charlieg
Advocate
Joined: 30 Jul 2002
Posts: 2149
Location: Manchester UK
|
| Posted: Tue Jul 13, 2004 11:47 pm Post subject: |
|
|
That is ffkking nice! Yowzas! That really sets the bar high.
Two big, big points though:
- The ads are out-of-sight. That makes them useless, literally. Even in 1280x1024, I had to scroll down to see the ads.
- "Purchase" combined with the corporate look makes it feel a bit non-free. You should either rename that "shop" or somehow emphasise that Gentoo is Free Software.
_________________
Want Free games?
Free Gamer - open source games list & commentary
Open source web-enabled rich UI platform: Vexi |
|
| Back to top |
|
|
dg
n00b
Joined: 13 Jul 2004
Posts: 3
|
| Posted: Wed Jul 14, 2004 5:25 am Post subject: dg: update |
|
|
Thanks for the comments and suggestions!
I made some minor revisions to my initial design, as seen here:
http://home.myuw.net/dgerstma/designs/gentoo/content/index-rev2.html
Ads are now placed on the far right, the PURCHASE caption got changed to SHOP, and the contrast was increased on hover font color to make it stand out against the white background.
This design allows the ads to be visible immediately, however, it breaks down when the browser width drops below 800px whereupon the ads disappear behind the banner, before dominating the row. |
|
| Back to top |
|
|
Given M. Sur
l33t
Joined: 03 Feb 2004
Posts: 648
Location: No such file or directory
|
| Posted: Wed Jul 14, 2004 5:38 am Post subject: |
|
|
Looks nice dg, I especially like the phrases "Extreme power comes from total configurability" and "And the support of a strong community".
_________________
What is the best [insert-type-of-program-here]?
Last edited by Given M. Sur on Wed Jul 14, 2004 9:53 am; edited 1 time in total |
|
| Back to top |
|
|
CharlieS
Tux's lil' helper
Joined: 06 Nov 2003
Posts: 146
Location: Texas, USA
|
| Posted: Wed Jul 14, 2004 6:58 am Post subject: Re: dg: update |
|
|
VERY BADASS
| dg wrote: | Thanks for the comments and suggestions!
I made some minor revisions to my initial design, as seen here:
http://home.myuw.net/dgerstma/designs/gentoo/content/index-rev2.html
Ads are now placed on the far right, the PURCHASE caption got changed to SHOP, and the contrast was increased on hover font color to make it stand out against the white background.
This design allows the ads to be visible immediately, however, it breaks down when the browser width drops below 800px whereupon the ads disappear behind the banner, before dominating the row. |
|
|
| Back to top |
|
|
andyjeffries
Apprentice
Joined: 14 Apr 2004
Posts: 196
Location: Stevenage, Herts, UK
|
| Posted: Wed Jul 14, 2004 10:51 am Post subject: |
|
|
| zeasier wrote: | Layout 7
Alright, here's my first layout ready for public critique. |
I like it...I like it a lot!!!!
However, I'd still say drop the logos by the side of the news items. Or develop more meaningful ones. I'm not slating Layout 7 because I know you got them from www.gentoo.org, what I mean to say is a Penguin and a G logo on concentric circles doesn't mean anything.
_________________
Developer of gPHPEdit
A8N-SLI/AMD X2 4800+/2GB Dual Channel/GF 7900GT OC |
|
| Back to top |
|
|
andyjeffries
Apprentice
Joined: 14 Apr 2004
Posts: 196
Location: Stevenage, Herts, UK
|
| Posted: Wed Jul 14, 2004 10:56 am Post subject: |
|
|
| dgt84 wrote: | | Well, I thought I'd post my design here as well so that people can comment on it. |
While I prefer the Layout 7 (Zeasy's?) design I think this is also better than the current site. The things I like about your design:
The icons for news items (much more meaningful)
The things I don't like:
The top banner, it seems to big and cartoony, it reduces the professionalism of the rest of the design
Not a great fan of the dark purple wrapping round the right for the adverts, it makes it look too dark
But another design that's better than the current, so that's gotta be good!
_________________
Developer of gPHPEdit
A8N-SLI/AMD X2 4800+/2GB Dual Channel/GF 7900GT OC |
|
| Back to top |
|
|
andyjeffries
Apprentice
Joined: 14 Apr 2004
Posts: 196
Location: Stevenage, Herts, UK
|
| Posted: Wed Jul 14, 2004 11:04 am Post subject: Re: dg: update |
|
|
This now takes the biscuit as my favoute design!!! (In fact, let me know your postal address and I'll gladly send you a biscuit!!!)
Great work (shame about 800x600 viewers... That's really something that needs fixing. How about reducing the width of the intro image (with a slight jiggle) to be about 600px, have a column on the right for adverts the whole length of the page and reducing the number of columns below the intro image to (or going to a vertical layout instead of horizontal columns).
_________________
Developer of gPHPEdit
A8N-SLI/AMD X2 4800+/2GB Dual Channel/GF 7900GT OC |
|
| Back to top |
|
|
mjg
n00b
Joined: 06 Jul 2004
Posts: 15
Location: rochester, ny
|
| Posted: Wed Jul 14, 2004 3:27 pm Post subject: Re: dg: update |
|
|
| andyjeffries wrote: |
This now takes the biscuit as my favoute design!!! (In fact, let me know your postal address and I'll gladly send you a biscuit!!!)
Great work (shame about 800x600 viewers... That's really something that needs fixing. How about reducing the width of the intro image (with a slight jiggle) to be about 600px, have a column on the right for adverts the whole length of the page and reducing the number of columns below the intro image to (or going to a vertical layout instead of horizontal columns). |
Agreed. That is an absolutely beautiful page, but at the same time keeping everything minimal. A few suggestions:
The large gentoo image in the center could be a lot smaller. Don't get me wrong, I love the image, but for loading time, and for usage of space...I think the space it takes up could be better used with the beautiful column layout you have created.
The menu system is tight, exactly what I was thinking about (as far as grouping goes). Do you have any plans to increase functionality with that? (drop downs, etc to expand the sub-categories). I think that would put the icing on the cake for that design. Do you have anything worked up for the handbook?
I absolutely LOVE the fact that it is tableless. CSS positioning is crucial (in my opinion). The only problem with it is that the ads scroll behind the rest of the page in IE when you shrink the browser, and do the same in Mozilla except that the entire page goes blank if you shrink it too far.
A little picky thing, but the "About" button on the right of the menu doesn't have an ending point.
And by the way...slick move with the navbar being done through CSS 
--Mike |
|
| Back to top |
|
|
nadamsieee
Guru
Joined: 30 May 2003
Posts: 340
Location: Atlanta, GA, USA
|
| Posted: Wed Jul 14, 2004 7:47 pm Post subject: Re: dg: update |
|
|
| dg wrote: | | This design allows the ads to be visible immediately, however, it breaks down when the browser width drops below 800px whereupon the ads disappear behind the banner, before dominating the row. |
Most of the offending image is text... So why not just make that element out of... TEXT!
Other than that, the page looks great.
By the way, where is the online package database??
_________________
nadams (at) ieee (dot) org |
|
| Back to top |
|
|
reisio
Tux's lil' helper
Joined: 12 Jul 2004
Posts: 121
|
| Posted: Wed Jul 14, 2004 7:55 pm Post subject: Re: dg: update |
|
|
| nadamsieee wrote: | | By the way, where is the online package database?? |
|
|
| Back to top |
|
|
dg
n00b
Joined: 13 Jul 2004
Posts: 3
|
| Posted: Wed Jul 14, 2004 8:25 pm Post subject: |
|
|
Ok, here's another revision with a CSS drop down menu:
http://home.myuw.net/dgerstma/designs/gentoo/content/index-rev3.html
The content of the menus can easily be adjusted, I just chose links from the current Gentoo main page.
The menu is all CSS, however browsers which do not permit arbitrary hover tags (IE) need a bit of javascript to modify the DOM. It's not necessary for Gecko. Since no rendering is being done, the JS is pretty lite and is just a single function that's executed on load.
The background will not change on non-conforming browsers (again due to the hover tag), and thus the background of the menus must be the same as the main bar.
I'll post more revisions and other pages (handbook, etc) when I get a chance.
Cheers.
-dg |
|
| Back to top |
|
|
andyjeffries
Apprentice
Joined: 14 Apr 2004
Posts: 196
Location: Stevenage, Herts, UK
|
| Posted: Thu Jul 15, 2004 8:17 am Post subject: |
|
|
| dg wrote: | Ok, here's another revision with a CSS drop down menu:
http://home.myuw.net/dgerstma/designs/gentoo/content/index-rev3.html
The content of the menus can easily be adjusted, I just chose links from the current Gentoo main page.
The menu is all CSS, however browsers which do not permit arbitrary hover tags (IE) need a bit of javascript to modify the DOM. It's not necessary for Gecko. Since no rendering is being done, the JS is pretty lite and is just a single function that's executed on load.
The background will not change on non-conforming browsers (again due to the hover tag), and thus the background of the menus must be the same as the main bar. |
While I'm all for pure CSS menus, that one is a bit unintuitive. I use Firefox 0.9.1 and when I hover over one of the menu items the colour changes (suggesting it's active to click) but you have to actually hover over the text to click it.
I'm sure you can do this, it just depends what element you wrap the <a> tags round. To be honest, it's been a while since I've played with CSS to that extent (but I do remember getting round it previously).
_________________
Developer of gPHPEdit
A8N-SLI/AMD X2 4800+/2GB Dual Channel/GF 7900GT OC |
|
| Back to top |
|
|
nadamsieee
Guru
Joined: 30 May 2003
Posts: 340
Location: Atlanta, GA, USA
|
| Posted: Thu Jul 15, 2004 11:02 am Post subject: Re: dg: update |
|
|
| reisio wrote: | | nadamsieee wrote: | | By the way, where is the online package database?? |
|
I was refering to the menu on the dg's design. The rev2 version seems entirely geared towards new users (not good); the real Gentoo site has to accomodate all users, and experienced Gentoo'ers often want to use the website to search for packages.
His new revision (with CCS drop down menus) takes care of that, although he still needs to do something with the obnoxiously large image.
It would also be nice if the rest of the page would shrink and grow to fit various monitor/resolution combinations.
_________________
nadams (at) ieee (dot) org |
|
| Back to top |
|
|
barrywardell
n00b
Joined: 13 Jul 2004
Posts: 3
|
| Posted: Thu Jul 15, 2004 11:46 am Post subject: |
|
|
| andyjeffries wrote: | | I'm sure you can do this, it just depends what element you wrap the <a> tags round. |
This can be acheived very easily by setting the <a> tags to be block elements . Of course, this doesn't work in IE. You have to use a hack:
| Code: | /* Fix IE. Hide from IE Mac \*/
* html ul#nav li a { height: 1%; }
/* End */ |
Also, the background colour hover effect can be achieved in IE using the following CSS:
| Code: | #nav li.over
{
background: url("navbar-hover.gif") repeat-x 20px;
} |
|
|
| Back to top |
|
|
zeroK
Apprentice
Joined: 14 Sep 2003
Posts: 159
Location: Austria.Klagenfurt
|
|
| Back to top |
|
|
NitroPye
Apprentice
Joined: 12 May 2003
Posts: 152
Location: Wish I was in England
|
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
Gentoo Chat
