A section of a long scrolling page. The top header area is sticky as well as the secondary tab bar below it. As the user scrolls through different sections, the secondary tab areas highlight each section - or the user can just tap to auto-scroll to sections.
The easiest answer - the two navs are independent and the secondary nav isn't visible or sticky until the user scrolls a bit to "pick up" the second nav :) It will make a bit more sense when I can show the whole thing at some point.
That being said, this was done fairly quickly - definitely needs some pixel refinements.
That could look awesome, although imagining it in my head, if you're gonna use the triangle with the exclamation point in the center, it may look like vertical-pupil reptillian triangular alien eyes... but in some hipster wayfarers :)
Looks sweet - I actually like that you didn't align the refresh to the arrow button. It sets the navs apart which is tough to do with a flat interface. Nice!
25 Responses
Pro
Rally Interactive (via Ben...
A section of a long scrolling page. The top header area is sticky as well as the secondary tab bar below it. As the user scrolls through different sections, the secondary tab areas highlight each section - or the user can just tap to auto-scroll to sections.
Attached are some real pixels.
7 months ago
Pro
Michael
I hate you ;-)
Is there a reason why the arrow button isn't aligned to the refresh button?
7 months ago
Pro
MVBen
Comfortably
7 months ago
Pro
Richard Meredith
Damn fine
7 months ago
Pro
Rally Interactive (via Ben...
@Michael Good observation.
The easiest answer - the two navs are independent and the secondary nav isn't visible or sticky until the user scrolls a bit to "pick up" the second nav :) It will make a bit more sense when I can show the whole thing at some point.
That being said, this was done fairly quickly - definitely needs some pixel refinements.
7 months ago
Pro
Asif Aleem
superb! clean and simple design
7 months ago
Pro
Tom Brennessl
Love your simple layouts!
I see you used a greenish dark for texts. I feel like more blueish dark would work more, but maybe it's just me. Anyway great job :)
7 months ago
Pro
Calle Tuvesson
Haha where did the Ipsum come from? :D
7 months ago
Tip top layout, sharp as knives and sweet minimalism.
7 months ago
Pro
Chris Allen
Bacon Ipsum FTW. Seriously though, this is looking great. I do dislike any "eye" icon - they're always creepy to me :)
7 months ago
Pro
Rally Interactive (via Ben...
@Chris Allen what about sunglasses or a caution sign to signify 'privacy'?
@Calle Tuvesson check out http://baconipsum.com/ ;-)
7 months ago
Pro
Chris Allen
That could look awesome, although imagining it in my head, if you're gonna use the triangle with the exclamation point in the center, it may look like vertical-pupil reptillian triangular alien eyes... but in some hipster wayfarers :)
Now I really wanna see it
7 months ago
Pro
Mads Roland
Nice Lorem Ipsum!!!
7 months ago
Pro
Grant Glas
Love the fonts! Gotham?
7 months ago
Pro
Fitz Fitzpatrick
Really nice. The "Upgrade" text in the button seems to be a bit off to the left though.
6 months ago
Pro
Farid Sagiev
#PixelPerfect !) I like it!)
6 months ago
Pro
Jonathan Quintin
Very clean, love it!
6 months ago
Pro
Rich Towers
I do love a bit of Bacon Ipsum
6 months ago
Pro
Rally Interactive (via Ben...
@Grant Glas thanks! Actually we're using combo of Avenir and Futura here :)
6 months ago
Hey Ben, what the font you are using for "Section title"? Thanks.... great work! Edit: Found it just bellow :)
6 months ago
Pro
Grant Glas
Love Avenir
6 months ago
Pro
Rally Interactive (via Ben...
@Sinisa Komlenic actually the "Section Title" is Futura Bold, not Avenir :)
6 months ago
Pro
Erika Podlovics
Looks sweet - I actually like that you didn't align the refresh to the arrow button. It sets the navs apart which is tough to do with a flat interface. Nice!
6 months ago
I like the simplicity
6 months ago
Pro
Sai kiran
Simple...Elegant...Lovely colors.
6 months ago