Here is the nav in more details.
It is tall and you see all items in common screen-sizes. However if it won't fit (rare case), it resizes for your browser size and brings 3 dots. You mouse hover to see remaining menu links as seen above.
Mouse hover any icon brings quick tooltip as seen above for Dashboard.
Click menu icon (3 lines at top) opens title version of nav that you can see at the attachment. You can either click on menu icon or anywhere on screen to minimise.
Feedbacks are welcome as always.
Cheers, @ oykun
6 months ago
Well done, that's all i have to say.
@Axel Herrmann Thanks mate!
Well done man. What are you doing on mobile, where :hover is super awkward (double-tap to click and such)? I'm feeling this "more" thing could become pretty cumbersome then. Or are you doing away with it altogether in some media query for touchable devices?
Nice job @Oykun. Nice color
@Oykun Opening the title version re-sizes the main headline or it hovers over? Have you explored the possibility to open the titles on hover and use the hamburger for small screens only? ... though I might like it more the way it is right now.
Very cool, man! Nice and intuitive! Well done! Keep the good work!
Pretty Awesome Sir !
Nice solution Oykun.
Showing icons without labels is a risky business. I see that you can hover and click the hamburger and they can be found which is an interesting way to do it. Of course touch devices might require a different solution. I guess as a designer I really like it, but would the sites audience find it intuitive. Only UX testing will reveal the answer.
I agree with @Will Grounds about the issue with no text to back up the icons. I'm not sure i'm feeling the inconsistent padding around the sides of the white box and between the icons themselves (http://cl.ly/image/3G30400u1Y1e).
What if this popout was vertical instead of horizontal? Similar to how this is already? http://cl.ly/image/123J0w3o1i1n
Also, for me the shadow is a little too strong at the minute. I'd either make that lighter or make your border on the white area darker.
@Will Grounds @j We had titles below icons before, but it became way too tall, and we can't sacrifice from content section to use titles next to icons. We use centred/fixed width for the app. So this is the solution we are happy with. If you want to see titles, you can click hamburger menu and use that version, plus you have tooltip tells you what icons mean. We believe members will learn icons after few use since they are already very relevant. This is such an app members will visit very often.
Just a little note: first two icons have circle shapes and are a bit too similar. Would be a bit more easier at a glance to distinguish icons with two different shape outlines.
5 months ago
Ditto on the comments about labels and touch devices.
Great job man! It looks very clean! Really love idea of vertical menus!
Is there a reason for having different drop shadows between menus?
Looks very nice.
@Oykun I see where you're coming from Oykun. Certainly looking forward to finding out more about this app!
So nice you're posting regularly again. Ahhhhh
Very nice job!!
really nice ui @Oykun are they custom icons?
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.