Shop Mobile More Submit  Join Login
×




Details

Submitted on
February 19, 2011
Image Size
1.1 MB
Resolution
1366×3840
Link
Thumb
Embed

Stats

Views
6,510
Favourites
27 (who?)
Comments
28
Downloads
297
×
Metro Browser Mock Up Detail by rajadain Metro Browser Mock Up Detail by rajadain
Comments and discussions are welcome. I do not plan to make something out of this, but hope that these points ring bells with those who will.

UPDATE: Since this is the more visited deviation and not the original one, I'm including all details here as well.

This is a sample mock-up containing the essential elements that I feel a true Metro Browser should have. It tries to be minimal yet have all required functionality. It tries to on-demand and reactive rather than always-on and proactive. It tries to be as invisible as it can, while trying to bring out the web (also a goal of Google Chrome).

Credits:
Inspiration from :iconvinceranda: [link] and :iconclindhartsen:
Icons from :iconyankoa: [link]

UPDATE 2: :iconclindhartsen: has created a Metro Browser mock up as well. Check it out here: [link]
Add a Comment:
 
:icontintinytdj:
Tintinytdj Featured By Owner Oct 31, 2012  Hobbyist Digital Artist
Why can't real browsers look this good?
Reply
:iconrajadain:
rajadain Featured By Owner Nov 29, 2012
This is a little old now, and some modern browsers have embraced many of these concepts. But I'm glad you liked it!
Reply
:icongreendude34:
greendude34 Featured By Owner Jul 12, 2011  Hobbyist General Artist
i dont like the tabs.... maybe you should make the tabs like the ie 10 that we saw in the windows 8 preview
Reply
:iconrajadain:
rajadain Featured By Owner Jul 21, 2011
I agree. The tabs were the weakest part, and I have to revise them. I'll check the Win8 preview again for inspiration.
Reply
:icongreendude34:
greendude34 Featured By Owner Jun 19, 2011  Hobbyist General Artist
Some body needs ot make this reality
Reply
:iconmintiphresh:
mintiphresh Featured By Owner Jun 5, 2011
I... I... I can not explain how perfect this is... with your permission, may I please use this as a design for my browser application? This is just absolutely perfect.
Reply
:iconrajadain:
rajadain Featured By Owner Jun 6, 2011
Oh, and thanks for liking it! :)
Reply
:iconmintiphresh:
mintiphresh Featured By Owner Jun 7, 2011
:iconnpplz:
Reply
:iconrajadain:
rajadain Featured By Owner Jun 6, 2011
Sure. I'd like it if you credit me (somewhere...) but you don't HAVE to. If you can pull it off, share it! I'll be impressed :)
Reply
:iconmintiphresh:
mintiphresh Featured By Owner Jun 7, 2011
I will love to work on it, I will be sure to credit you. For now, I am working on a mockup seeing some other METRO like designs.
Reply
:iconeoneof:
eoneof Featured By Owner Jun 5, 2011  Hobbyist Digital Artist
This is future Opera Browser)
Reply
:iconrajadain:
rajadain Featured By Owner Jun 6, 2011
I'm not a big fan of Opera. No reason though. I don't care who makes it: IE or Firefox or Opera or anybody else. This is just how I think an ideal browser should be like :) If you can get your friends at Opera to notice this it'll be great :D
Reply
:iconhalfingr:
Halfingr Featured By Owner Feb 21, 2011  Student Interface Designer
This would be a great browser, although I'd like to make a few suggestions.

-It'd be nice to be able to have the options to give it ALL of the Windows type buttons - 'metro', XP and Vista/7.
-Options to hide/unhide the protocall, that way you can just glance at the bar for things like "https" and such. Either that, or make the background colour of the url bar adapt to the security of the site, similar to what Chrome does.
-Options to have the back button only, or have both.
-Change colours.

But, yeah. This is pretty legit. =P
Reply
:iconrajadain:
rajadain Featured By Owner Feb 21, 2011
So basically you want my design as long as you can change it all? ;) =P

I agree completely: this aesthetic is new and doesn't sit well with everyone (My father pointed out four faults as soon as he saw it :P). I would say that those who don't like it can always use other browsers but that would be unfair. I myself have to use Firefox 4b, Palemoon 3.6, Chrome 10b and IE 9rc for different things, and it drives me nuts. People should be able to customize their thing to one option, and stick with it.

I like your suggestion about the protocol visibility / indication. I've been thinking about how to fit more info in the URL bar, and this certainly helps!

I *never* use the forward button on any browser, but I've seen others do it, so I guess it is kinda important to have. Will do, sir!

And I also realized that the constantly changing colors (by site, and would they change while scrolling ??!) can get nauseating after a while. It should be possible to select your fav color (Fart Green! :fart: ) and use that for everything.

Thanks for the suggestions. I'm glad you liked it! :)
Reply
:iconhalfingr:
Halfingr Featured By Owner Feb 21, 2011  Student Interface Designer
=P Weellll...

Its more like, "you should leave your design customizeable to a standard. That way you don't have the problems like FireFox's browser, but you're not constrained to the uniformity of IE.

I use the forward 'button' on my browser a lot - I have a special mouse with L/R side buttons, so I never really use the browsers Icons, but you should at least include the option to have it/support it. =P

Another cool thing about what you could do with the adaptive window-colour idea, is turn it on/off/preset for different pages, that way you can have it that any facebook tabs are the facebook blue, or any dA tabs are that weird greenish/blue colour/bing pages be orange/etc.

I actually REALLY like this. =P If Microsoft were to adapt this as a theme into IE9, I would totally use it over Chrome. =]
Reply
:iconstreetster20:
Streetster20 Featured By Owner Feb 21, 2011
I love the concept, would be awesome to see a browser this way... Minimalist - yet still easily usable. ;)
Maybe to show the tabs, you have to hover over the top for like 2 seconds, then they drop down - to show them all clearly. ;)
Reply
:iconrajadain:
rajadain Featured By Owner Feb 21, 2011
Glad you liked it! :)

I'm not entirely satisfied with the way the tabs are done right now. They need better management. But the idea was that there is only one bar for everything: no separate menu bar, title bar, URL bar, tab bar - everything is compacted into one strip. Your idea of two-step tabs would certainly save space, but add in the burden of the extra step. In addition, the loss in discoverability (how things work should be apparent from looking at them, not having to guess hidden functionality) might be too high a cost.

I never have more than a few tabs open, but tab management certainly is tricky when generalized. A friend of mine has 28 tabs open at any given time. Firefox, Chrome, Opera, IE and Safari, all are working on their tab management. It's open season right now!
Reply
:iconstreetster20:
Streetster20 Featured By Owner Feb 21, 2011
Yeah. I guess you can just put a 'readme' with all the things you can do... Tabs are definately the most difficult part of a browser (placement, etc.)
Reply
:iconrajadain:
rajadain Featured By Owner Feb 21, 2011
Good software always comes with good documentation, so having a readme is a priority.
But the goal of my design is for it to be self-evident and apparent. Most of what I've done is just taken the stuff I love about different browsers and put them together: build a very familiar browser that is also unobtrusive. So I'd much rather nobody has to look in the readme. But it's not a software yet, just a mock-up, so all ideas are welcome :)
Reply
:iconstreetster20:
Streetster20 Featured By Owner Feb 22, 2011
True, but i'm sure people will mouse-over things and find out what you can do. Or I guess you could put a sort of 'file/menu' button, which has settings,and a 'FAQ/help' - which links to a website that has images displaying what you can do, with what parts of the browser. (hope that makes sense :p)

But as you said, it's only a concept/mock-up at the moment.. :)
Reply
:iconriveroffear:
riveroffear Featured By Owner Feb 21, 2011
I like it and would love to see it exist. If you were to make it, would you base it off the IE frameowrk (I.E., coded in Visual Basic) or somethine else?
Reply
:iconrajadain:
rajadain Featured By Owner Feb 21, 2011
I do most of my work in Visual Studio, so would probably make this in it (if I ever get the time, that is >_> ). Although this is targeted at an IE-ish experience, that is mostly because Metro is by Microsoft, and IE is Microsoft's browser. In reality, IE isn't really a modern browser [link] . I would much rather use the rendering engine of something else. Google Chrome's WebKit comes to mind: it's pretty fast, and they even offer a frame separately [link] . Google Chrome's code is in C++, which is a bit outside my comfort zone but still works fine in Visual Studio.

The best thing about using Visual Studio for something like this is that it works seamlessly with Expression Blend, which I think would be the best tool to create something like this. Blend gives you total control of the canvas, independent of the Window frame that is fit over everything else in Windows. So in that sense it is much like Adobe AIR, but only faster since it is geared for Windows.
Reply
:iconkazron:
Kazron Featured By Owner Feb 20, 2011
Excellent points indeed, but how will the background determine what color to use for each website?
Reply
:iconrajadain:
rajadain Featured By Owner Feb 20, 2011
I'm not 100% sure how, but it should be doable. IE9 supports color themes based for Pinned Sites already (see the Pinned Sites section of this article: [link] ). I think that, at least with CSS and standards compatible sites, it should be possible to (logically) extract the top most color and choose an approximation. You will notice that I didn't choose the exact color of Facebook since differentiation is necessary, but also because it may be easier to have a set number of colors (maybe 64?) and choose the nearest.
I may be wrong, but doesn't the WPF introduced with Vista (and for which you can build software on Expression Blend) allow pixel level control? If so, then it may even be possible to visually extract color from the topmost pixel row of the current site.

Maybe when I have time I'll tinker around with Blend. I'm more of a programmer, but want to go into UI design. This was my first mockup. I'm glad you liked it :) Thanks.
Reply
:iconkazron:
Kazron Featured By Owner Feb 22, 2011
Ah. That makes sense. But in IE9's case the change isn't too significant; in the case of this mockup the change would be huge. Hopefully there would be some way to lock in a certain color because I hate rainbows and life and green.
Reply
:iconrajadain:
rajadain Featured By Owner Feb 26, 2011
Another idea would be for it to follow the Windows color scheme. But I agree, there should be a way to turn off rainbows =P
Reply
:icongamenche:
GAMENCHE Featured By Owner Feb 20, 2011
Exelent working man please link for download you style facebook > ? :) :P :)
Reply
:iconrajadain:
rajadain Featured By Owner Feb 20, 2011
I'm glad you liked it. Thanks! :)

I didn't get the question about Facebook. Could you explain in more detail what it is exactly that you want?
Reply
Add a Comment: