Shop Mobile More Submit  Join Login
×




Details

Submitted on
October 26, 2011
Image Size
44.1 KB
Resolution
744×510
Link
Thumb
Embed

Stats

Views
6,546
Favourites
29 (who?)
Comments
51
Downloads
64
×
Some Tabs by DanRabbit Some Tabs by DanRabbit
Comparing different kinds of tabs, specifically in the case of a web view.

One major drawback of the current notebook widget is that the open side of the tab makes this really jarring transition into a backgrounds that don't match it's color.

One solution is to invert the tabs so that the open side faces the content above.

Another is to move the tabs to the top as seen in Opera, Chrome, and Firefox.
Add a Comment:
 
:iconxaahudude:
xaahudude Featured By Owner Feb 15, 2013  Hobbyist Interface Designer
The second one looks best :D
Reply
:icontujamaica:
tujamaica Featured By Owner Aug 10, 2014
You are absolutely right brother (:
Reply
:iconpathofleaves:
PathOfLeaves Featured By Owner Nov 30, 2011
Just an Interesting article about tabs, [link]
Reply
:iconzeeeeee:
zeeeeee Featured By Owner Nov 24, 2011
Dan, by the look of the Midori webpage mockup, I believe you went for the second solution: upside down tabs.

But how would it work with the shortcuts bar enabled? I mean because of that bars gradient, it would imply changing the tab color depending on the presence of the bar. Do you have a solution for that?

I already had that solved with the tabs on your egtk widget mockup, but this new design will delay my theme update release :D
Reply
:icondanrabbit:
DanRabbit Featured By Owner Nov 24, 2011  Professional Interface Designer
shhhh, you're not supposed to notice that I haven't figure that out yet xD
Reply
:iconzeeeeee:
zeeeeee Featured By Owner Nov 24, 2011
ahah, ok! I'll just wait for your brilliant idea on that, while I finish the normal tabs :D thanks
Reply
:iconyo-bhan:
yo-bhan Featured By Owner Nov 17, 2011  Hobbyist Artist
amazing..
the middle one, I like it :D
Reply
:iconjxtreme42:
jxtreme42 Featured By Owner Nov 6, 2011
No favicons? Anywhere?
Reply
:iconworthkunst:
Worthkunst Featured By Owner Nov 6, 2011  Hobbyist General Artist
Awesome!..
Love it!

Great Job, man!
Reply
:iconmarcogen:
MarcoGen Featured By Owner Nov 1, 2011
the second is the best
Reply
:icon013raptor:
013Raptor Featured By Owner Oct 31, 2011
Does GTK support this kind of tab style?
[link]

I think it would be a differencial over Firefox and Chromium.
Reply
:iconginjaninja405:
ginjaninja405 Featured By Owner Nov 5, 2011  Student General Artist
This is incredible. A completely re-thought UI for a web browser. Dan, check it out! It's quite inspiring.
Reply
:iconsilenzz:
silenzz Featured By Owner Nov 5, 2011
Like this? [link]
I couldn't find an up to date screenshot from linux, but i looks pretty much the same. This is an old version: [link]

So it would still not be the only linux browser with that kind of tabs ;)
Reply
:iconspktkpkt:
spktkpkt Featured By Owner Nov 2, 2011
That looks great.
Reply
:iconadamant715:
adamant715 Featured By Owner Oct 29, 2011
I'm loving the first one, although it is basically Firefox.

Are these tabs even currently possible?
Reply
:iconzeeeeee:
zeeeeee Featured By Owner Nov 5, 2011
yes, they're pretty standard stuff.
Reply
:iconfzang:
Fzang Featured By Owner Oct 29, 2011  Hobbyist
First one appears as having an enormous titlebar with few tabs open.

Second is spot on.

Third looks like a mess of horizontal lines and upside down tabs.
Reply
:iconyaseennoorani:
YaseenNoorani Featured By Owner Oct 29, 2011  Hobbyist Photographer
The first one would be good. However, I think that it would be better to move the new tab button to the left so as to reduce mouse movement since tabs start from the left. This would also eliminate the problem of having the close tab button too close to the close window button.
But then another problem that would arise with that is the new tab button is dangerously close to the close tab button...the complexity of interface design...
Reply
:icongummybelly:
gummybelly Featured By Owner Oct 28, 2011
First design looks the best, but the close glyph needs to differentiate from the window captions.
Reply
:iconalfalive:
alfalive Featured By Owner Oct 30, 2011
I already registered a blueprint in launchpad. It is better when elementary has own styled close window button. Cause it is used also in Linux Mint.
Reply
:iconthiswasntclaimed:
thiswasntclaimed Featured By Owner Oct 28, 2011
I think the first one (tabs on top) is the best if refresh, back and forward buttons remain in toolbar (like in Jupiter, Midori 0.3.2) since those buttons affect only current tab, not the whole browser.

Second one looks good, but doesn't make sense.

New tab button should be near currently open tabs if it isn't against HIG. If it is against HIG, I wonder what is the reason behind that decision.

Very clean and good-looking mock-ups. Keep up the good work!
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 28, 2011  Professional Interface Designer
As I outlined in another comment, putting the new tab button next to the tab creates a moving target. You can never develop a muscle memory of where that action is, you're always looking for it. This is especially bad when we're talking about buttons that are used frequently, like the new tab button.
Reply
:iconyaseennoorani:
YaseenNoorani Featured By Owner Oct 29, 2011  Hobbyist Photographer
After using Midori for some time I have now grown used to clicking on the button at the top left corner to get a new tab and now I prefer it to the one in Chromium or Firefox. I think it's very true what you say about the moving target.
Reply
:iconarturoilhuitemoc:
ArturoIlhuitemoc Featured By Owner Oct 28, 2011
I usually just double-click (in Firefox) or middle-click (in Midori) in an empty space to create a new tab. The New Tab button is too far for me.
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 28, 2011  Hobbyist General Artist
Tabs on top is a much preferred alternative for me but the example doesn't look thought through. You have the close tab button dangerously close to the close window button. You can easily click the wrong button and close the entire application. The new tab button would be better located next to the other tabs instead of at the other end of the application. That way it's more apparent and logical what the action will be when clicked :)
Reply
:iconknozos:
knozos Featured By Owner Oct 27, 2011  Student Digital Artist
The first one, no other browser has that style for background tabs.
Reply
:iconchristianjabasa:
ChristianJabasa Featured By Owner Oct 27, 2011  Hobbyist Interface Designer
I like the second one!
Reply
:iconaznsmartj0ck:
aznsmartj0ck Featured By Owner Oct 27, 2011
first one. definitely
Reply
:iconhafunui:
Hafunui Featured By Owner Oct 27, 2011  Hobbyist Digital Artist
I like the first and second one the best.
Reply
:icontherealjonathan:
therealjonathan Featured By Owner Oct 27, 2011  Hobbyist Photographer
I've noticed that tabs on top takes less space.
Reply
:iconnironan12:
Nironan12 Featured By Owner Oct 27, 2011
The first one, but it looks to redundant. There are two close buttons mere pixels away, and "Website" is shown twice... just go similar to chrome and ditch the titlebar altogether.
Reply
:iconarturoilhuitemoc:
ArturoIlhuitemoc Featured By Owner Oct 28, 2011
I don't think you can just ditch the titlebar in Metacity.

But for the repeated Website, I think that the window title should be the application name (Midori), with each tab just showing the page name.
Reply
:iconmahatman2:
mahatman2 Featured By Owner Oct 27, 2011
I'd say the major problem with the upside-down tabs is that it doesn't immediately say to the user, "The content below the tabs has to do with the tabs." It doesn't follow true life, I guess; it makes it look like the tabs correspond to the address bar only, and not the page. I personally prefer the tabs-on-top method, but wasn't aware that that caused a programming issue. Hm..
Reply
:iconjasam:
jasam Featured By Owner Oct 27, 2011
It looks nothing like Safari. -_-
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 27, 2011  Professional Interface Designer
Come back to me when you have a single design published and then I'll find something that it looks like too. But to be honest I've taken cues from several browsers, lately a lot of Firefox.
Reply
:iconyaseennoorani:
YaseenNoorani Featured By Owner Oct 27, 2011  Hobbyist Photographer
I really like the second one (how it looks). But I think the las one would be more appropriate since a tab is related to the content on that page and not the navbar and bookmarks as some people have already mentioned. Tabs on top would be the best option but then again you just mentioned the difficulty so I'm in favour of the last
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 27, 2011  Hobbyist General Artist
I couldn't help but notice the email bookmarks, are you planning on merging postler and midori and make an internet suite or is it just filler text? :P
Reply
:icondanrabbit:
DanRabbit Featured By Owner Oct 27, 2011  Professional Interface Designer
I was just too lazy to change the text xD
Reply
:iconnsrosenqvist:
nsrosenqvist Featured By Owner Oct 28, 2011  Hobbyist General Artist
ah, it would have been an interesting project though, but I believe it's better to keep them apart :)
Reply
:iconlozobo:
lozobo Featured By Owner Oct 27, 2011
The second one is the more polish.
But I prefer the firefox style, so "tabs on top"! =)
Reply
:iconzeeeeee:
zeeeeee Featured By Owner Oct 27, 2011
what a stupid coincidence.
I just remade (last night) my firefox tabs according to your gadget mockup. check it out: [link]

about the upside down tabs, I have an old theme with those, but I eventually prefer the tabs being related to the content and not to the navbar.

to solve that transition, you could have a thin darker line separating the tab from the page. like this [link] although it would be a little inconsistent with the tabs rounded corners.
Reply
:iconxantheil:
xantheil Featured By Owner Oct 27, 2011
I prefer the first two, but that's only because it "looks nice."

Oh, and I expect the "LOL NUB WUT, YOU COPY MAC" guys to be coming.
Reply
:iconwindypower:
WindyPower Featured By Owner Oct 26, 2011
I prefer the last one, makes more sense and has a better contrast to separate browser UI from page content.
Reply
:iconarturoilhuitemoc:
ArturoIlhuitemoc Featured By Owner Oct 26, 2011
I still think the last one looks better because that way the tab is visually linked with its content.
Reply
:iconadambrenecki:
adambrenecki Featured By Owner Oct 28, 2011  Student Interface Designer
I think this is true for the first one as well. With the exception of the AppMenu, everything below the tab bar is logically related to the tab.
Reply
:iconseventhreign:
SeventhReign Featured By Owner Oct 26, 2011
I dont think that is a drawback at all. I'd call it a good thing. I dont want my web browser blending in with the page i'm viewing.
Reply
:icon1inux:
1inux Featured By Owner Oct 26, 2011
second one, its simpler and cleaner
Reply
:iconuser1596387:
user1596387 Featured By Owner Oct 26, 2011
i really like the first and second, blends amazingly well with the browser.
Reply
:iconseahorsepip:
Seahorsepip Featured By Owner Oct 26, 2011  Professional Interface Designer
feels like I can make a new theme for firefox in next few weeks when I may start to use linux again :P
Reply
Add a Comment: