Shop Mobile More Submit  Join Login
elementary Website - Navbar by DanRabbit elementary Website - Navbar by DanRabbit
Round Two. FIGHT!

The nav area on elementaryos.org is getting a little out of control. Here are some thoughts I've had the last couple of days.

The top section deals with login and user names.

The bottom section deals with section selection and breadcrumbs. The very last image is the clicked state for a specific breadcrumb.

One issue that's been brought up in the past with relation to merged the breadcrumbs and main nav is random access to top level sections. One way to solve that is to reveal the main sections if a user mouses over the home button.
Add a Comment:
 
:iconmtbninja:
mtbninja Featured By Owner Dec 10, 2011
Beautifully :)
Reply
:iconseventhreign:
SeventhReign Featured By Owner Nov 9, 2011
looks great.
Reply
:icondpencilpusher:
DPencilPusher Featured By Owner Nov 9, 2011   General Artist
One major thing I thing the website needs is a screenshot of the OS on the homepage. probably running on a laptop. Here's an example :thumb268163306:
Reply
:icondpencilpusher:
DPencilPusher Featured By Owner Nov 9, 2011   General Artist
The thumbnail didn't display, here's what I mean [link]
Reply
:iconbassultra:
BassUltra Featured By Owner Nov 10, 2011  Hobbyist Interface Designer
Check the discover section, it has a screenshot of the OS.
Reply
:icondpencilpusher:
DPencilPusher Featured By Owner Nov 10, 2011   General Artist
I know it does, but I think it should be on the homepage too
Reply
:iconaldomann:
aldomann Featured By Owner Nov 9, 2011  Hobbyist Interface Designer
Much more sensible. :)
Reply
:iconjxtreme42:
jxtreme42 Featured By Owner Nov 9, 2011
That padding is kinda excessive. Nice toolbar button styling, though.
Reply
:iconbassultra:
BassUltra Featured By Owner Nov 9, 2011  Hobbyist Interface Designer
I don't get it. Although I do like the larger padding. :)
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Nov 9, 2011  Hobbyist Interface Designer
One thing I still want is more contrast between the background and the toolbar.It makes it hard to distinguish, making it blur together, meaning it looks bland overall. So whilst I like this new idea here (I love the new breadcrumbs), mainly due to the additional contrast added by the green backdrop, I think unless the background of the website is lightened, the navigation, which should be instantly obvious to all users will continue to blend in.

Overall pretty nice though. What would happen if the username got to long? Would it become Really Long U... or would the search box contract to a button like the home button, which when pressed covered up the username? or both?
Reply
:iconseventhreign:
SeventhReign Featured By Owner Nov 9, 2011
After a certain point I think the username would have to end in (...)
ie. "ExtremelyLongUserNa..."
Reply
:icondikoo:
Dikoo Featured By Owner Nov 9, 2011
Excellent :D
Reply
:icongazornonplat:
gazornonplat Featured By Owner Nov 9, 2011  Hobbyist General Artist
I like this very much, like everything you do.
Reply
:iconburokku-sumisu:
Burokku-Sumisu Featured By Owner Jan 12, 2011
love it...
There seems to be some problems with the current website. Things are overlaping each other...
Reply
:iconmbarvian:
mbarvian Featured By Owner Dec 16, 2010  Hobbyist Interface Designer
hell yes. let's make it a reality!!!
Reply
:icondudumaroja:
DuduMaroja Featured By Owner Dec 11, 2010
Very pretty! btw sometimes elementary scrollbar doenst show up on firefox ( horizontal mostly )
Reply
:iconseahorsepip:
Seahorsepip Featured By Owner Dec 9, 2010  Professional Interface Designer
want the homebutton....so i can add pressed state at my homebutton of firefox =P
I don't see it at your mockup branch :( somewhere else I can get the svg?
Reply
:icondanrabbit:
DanRabbit Featured By Owner Jan 20, 2011  Professional Interface Designer
are you sure it's not in the mockups branch? I could have sworn it was.
Reply
:iconseahorsepip:
Seahorsepip Featured By Owner Jan 20, 2011  Professional Interface Designer
It is now but was not before ;)
Reply
:iconjulben:
julben Featured By Owner Nov 25, 2010
Your mockup looks just terrific! How are your works licenced? I would love to use them for some of my projects (at least as an influence) but I don't want to that without your permission or even without referring to you. If they aren't already, why not put them under a Creative Commons licence?
Reply
:icondanrabbit:
DanRabbit Featured By Owner Nov 26, 2010  Professional Interface Designer
GPL :)
Reply
:iconcassidyjames:
CassidyJames Featured By Owner Nov 22, 2010  Student Interface Designer
Okay! So I made a fancier HTML/CSS/JavaScript mockup here: [link] It implements my idea of how you could access the main links (~requestedRerun also mentioned this earlier).

Sorry for so many comments in a row. :P
Reply
:icondikoo:
Dikoo Featured By Owner Nov 9, 2011
Great, I am waiting for this on elementary's home page :)
Reply
:icondanrabbit:
DanRabbit Featured By Owner Nov 22, 2010  Professional Interface Designer
wow, you're the man dude! I'll definitely pass this on to the web team and see what they think :D
Reply
:iconcassidyjames:
CassidyJames Featured By Owner Nov 22, 2010  Student Interface Designer
Cool, lemme know! I was also curious as how to join the web team. I suppose I should hop over to the site/forum and check it out. :)
Reply
:iconcassidyjames:
CassidyJames Featured By Owner Nov 22, 2010  Student Interface Designer
I went ahead and mocked this up with HTML/CSS because I liked it. :D There're probably some issues/things I missed, but I think it looks pretty good. [link]
Reply
:iconcassidyjames:
CassidyJames Featured By Owner Nov 22, 2010  Student Interface Designer
I kind of want to make a working HTML/CSS mockup of this. I'll let you know if I do! :P
Reply
:icondanmf:
danMF Featured By Owner Nov 18, 2010
You can see something similar implemented here: [link]
I gotta say I love the hovered state of the home button. It's so shiny and still consistent with the elementary colors!
Reply
:iconkrisu0100:
krisu0100 Featured By Owner Nov 17, 2010
Not bad concept, but kinda agree with everybody else with here, specially with spiceofdesign.

Little bit off-topic, but still kinda related: why you don't tell on the elementary-project site about how to install or anything about eGTK and icons? That has been always weird to me and I always forget the project page on Launchpad.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Nov 17, 2010  Professional Interface Designer
The site is still very much in its early stages. It'll include nicer things as it evolves. One concern I have is making sure to separate the more introduction/advertising bits from the downloading/user bits from the working/developer bits.
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Nov 17, 2010  Hobbyist Interface Designer
I don't think that this is a good idea for the elementary website at the moment as it only has a few categories and subcategories. However when elementary inevitably becomes a larger project (most likely after the first release) this could become useful as more and more subcategories build up. The only concern is that this will still force users to click twice rather than once when switching categories. It would also be interesting to see how the search field works ie like Apple's one?
Reply
:icondanrabbit:
DanRabbit Featured By Owner Nov 17, 2010  Professional Interface Designer
Yep, I agree that it would cause more clicking for people who are "just browsing" and aren't going for a specific page. We do currently have the Support pages which have quite a few sub-categories and we'll of course have more pages with more content on them in the future.

Ideally, the search would work for the whole website. I think at the moment it only searches the wiki. But I'm prettey sure the web team is taking steps to change that ;)
Reply
:icondavbren:
davbren Featured By Owner Nov 17, 2010
Yh its not a bad idea at all. What I was thinking though is that it might get a little confusing due to the lack of consistancy thoughout the website. Also, this would require the user to go back to the home page each time they want to access a different section in the site. As it stands it is adding clicks.

I get it if there are loads and loads and loads of levels of pages, but there aren't really. It's a nice idea but I'm not sure how appropriate it is for a website promoting simplicity lol.

Pretty nonetheless :D
Reply
:icondanrabbit:
DanRabbit Featured By Owner Nov 17, 2010  Professional Interface Designer
sure sure, it's just a concept ;)
Reply
:icondavbren:
davbren Featured By Owner Nov 17, 2010
yh totally, just thought I'd share my two cents. Love your work though fella.
Reply
:iconghostlyrics:
GhostLyrics Featured By Owner Nov 17, 2010  Hobbyist Writer
Very correct. If the website is more category-based and not enormously centered around a hierarchy this is not the best way of navigating.
Reply
:iconjordihp:
JordiHP Featured By Owner Nov 17, 2010  Hobbyist Digital Artist
I think I don't understand :P
Reply
:iconkingcam:
KingCam Featured By Owner Nov 16, 2010  Student
What if I'm in 'Developer' and want to get to 'News' in one click, from the navbar?
Reply
:icondanrabbit:
DanRabbit Featured By Owner Nov 17, 2010  Professional Interface Designer
Right, this is an obvious drawback.
Reply
:iconrequestedrerun:
requestedRerun Featured By Owner Nov 18, 2010  Student General Artist
Maybe using a bit of jquery you can make it so that when you hover or click on the home it slides in the breadcrumbs and out a menu (and then when you stop hovering it slides back out the breadcrumbs)?
Reply
:iconburokku-sumisu:
Burokku-Sumisu Featured By Owner Jan 12, 2011
I love jquery!!! it's so handy.
Reply
:iconfeather-tail:
feather-tail Featured By Owner Nov 18, 2010
Mobile devices don't have hover, though. There'd have to be a fallback. Plus it's less discoverable than if all the options are there; and if someone's linked to a subpage from elsewhere, they might not even know how to find the options.
Reply
:iconrequestedrerun:
requestedRerun Featured By Owner Nov 19, 2010  Student General Artist
true true, I completely forgot about mobile devices..
Reply
:iconcassidyjames:
CassidyJames Featured By Owner Nov 22, 2010  Student Interface Designer
You *could* have a mobile version of the site. Just saying. :)

Here's an HTML/CSS/jQuery mockup doing what you said earlier. It has some flaws but it's fun nonetheless! [link]
Reply
Add a Comment:
 
×
Download PNG 941 × 415




Details

Submitted on
November 16, 2010
Image Size
69.7 KB
Resolution
941×415
Link
Thumb
Embed

Stats

Views
14,024 (1 today)
Favourites
44 (who?)
Comments
44
Downloads
337
×