Shop Mobile More Submit  Join Login
×




Details

Submitted on
February 22, 2011
Image Size
104 KB
Resolution
744×770
Link
Thumb
Embed

Stats

Views
10,862
Favourites
52 (who?)
Comments
48
Downloads
226
×
Midori URL Bar by DanRabbit Midori URL Bar by DanRabbit
Having a think about Midori's URL bar.

The paste icon is for an existing Midori feature called Paste-n-Go. You click that icon to paste whatever is in the clipboard and go :)

--

Updated a little bit to take into account some of your suggestions :)
Add a Comment:
 
:iconopensas:
opensas Featured By Owner Feb 12, 2014
I wonder if the forward button is really needed. I only use the back button...
Reply
:icondevbur:
devbur Featured By Owner Dec 23, 2011
I just think that that red bar is a little bit annoying!
Reply
:icondanrabbit:
DanRabbit Featured By Owner Dec 24, 2011  Professional Interface Designer
It should be! It means you are browsing an insecure website.
Reply
:iconshef-er:
Shef-Er Featured By Owner Sep 5, 2011  Student Artist
Cool!
Reply
:icondreamnymph:
dreamnymph Featured By Owner Apr 21, 2011  Hobbyist Photographer
where is my new minimize maximize buttons?
Reply
:icondanrabbit:
DanRabbit Featured By Owner Apr 21, 2011  Professional Interface Designer
minimize is gone, but maximize is right side.
Reply
:iconspktkpkt:
spktkpkt Featured By Owner Apr 6, 2011
Looks better, well done!
Reply
:iconjxtreme42:
jxtreme42 Featured By Owner Apr 4, 2011
Ah, you beat me to it. I really need to start mocking up my ideas...

Using a white bg for the autocomplete "menu" looks better/makes the text look more visible/allows diff formatting (partitally transparent, etc.) Keep the white menu! I'd move the grey pagetitle to after the url ("elementaryos.org <grey>It's Here - elementary OS</grey>") When the window is maximized (and it is 99% of the time), you'll have to look wayyy over to the right to see it, also when things are that far apart it's hard to distinguish which entry on the left corresponds to the entry on the the right, etc. Also, use autofill or whatever it's called: like Chrome, highlight the first entry in the suggestions and add the rest of the url/suggestion to the entry. (URL bar: "elemen<grey>taryos.org</grey>") This way, I can type "ele" and press enter to get to elementaryos.org, if it's my most visited site that begins with that. (Super fast :)) I'd also allow autocompleting the page titles (I type "disc," URL bar: "elementaryos.org <bold, also dark grey>disc<bold, dark grey><grey>over</grey>") This means making the "unmatched" parts of suggestions un-bolded, and the matched parts bolded. Also, load search engine (google) results into the suggestions: it's super convenient and saves time (usually the site I want is in the first ~4 search results.) Adding on to that last sentence, "search with ..." should be the first result for a query that doesn't match pages in your history/bookmarks, not the last result. I can't think of a time when I've entered a non-history/bookmark query and I didn't want to for search it.

Those added toolbar icons get me to another subject. I'm really leaning towards monochrome toolbars. When you have a few toolbar icons (like here) color isn't needed to distinguish between buttons; shapes are sufficient. Also, it reduces visual noise/clutter, and gives the focus to the content. Color should be used as an effective indicator, (monochrome) panel icons show this very well; adding color to everything subtracts from that. The only real (visual) issue is that it'd make the window controls look odd, but maybe it could be done so that doesn't happen? Or maybe it's just me :)

I was really trying to keep this comment short... :P
Reply
:icondoctormo:
doctormo Featured By Owner Apr 4, 2011  Professional Digital Artist
Should the http padlock be green? That's insecure, over the wire submission of clear text http isn't it.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Apr 6, 2011  Professional Interface Designer
oops, typo. that should read https of course.
Reply
:iconbassultra:
BassUltra Featured By Owner Apr 4, 2011  Hobbyist Interface Designer
For the insecure lock, I think it would be more correct if the lock was the other way, because all other similar locks in the real world open from the right. :P
Reply
:iconmbarvian:
mbarvian Featured By Owner Apr 4, 2011  Hobbyist Interface Designer
Looking good. If only we can get Christian to make it look like that
Reply
:iconarkblitz:
ArkBlitz Featured By Owner Apr 4, 2011  Hobbyist General Artist
And what if you have more than a search engine? You would need more than one menu entry for that then!
Reply
:icondanrabbit:
DanRabbit Featured By Owner Apr 4, 2011  Professional Interface Designer
Yes, this is definitely not indicative of all the possible options. As of now, Midori shows all the search engine options at the bottom.
Reply
:iconeurux:
Eurux Featured By Owner Apr 4, 2011
Nice, nice.
Reply
:iconserenadeomega:
SerenadeOmega Featured By Owner Apr 2, 2011  Hobbyist Interface Designer
I don't like how the refresh button is all the way on the right side like that. I also think that it's too small. However, I do like how minimal it is. Less clutter is indeed good.
Reply
:iconsaransh50:
saransh50 Featured By Owner Mar 31, 2011
thats pretty good but if midori isnt packed with features i m not gonna make a switch despite an awesome UI
Reply
:iconajrpai:
ajrpai Featured By Owner Mar 2, 2011
dan, theres two things i need to ask you.

firstly, congratulations on the accomplishment of your baby (elementary project: jupiter). ur designs rock! i am learning a lot from you... thanx!

now, the doubts

question 1 - Midori - can one change the appearance of webpages completely, i mean... w.r.t the fonts like in Mozilla, one can set a font in the Content tab & choose to ignore the webpage font. I as a person am more elevated towards the look of the pages. can that be done? i tried going through the Preferences of Midori, however didn't find anything there.

question 2 - Elementary OS - 'However, a free download will be available in March for all of those people who choose not to offer their support. (Did that last sentence make you feel bad?)' this sure made me feel bad. i don't have money as of now as i'm just starting a business. from whatever i earn, my first donation would undoubtedly be to Jupiter. please can u tell me when in march is Jupiter's release date, the wait is killing me...

thanx man! keep up the good wrk!
tc & godbless...
Reply
:iconmrclassical:
mrclassical Featured By Owner Mar 1, 2011
Dan, the Elementary project shows an attention to detail that continues to amaze me. I really love this idea (along with "Wingpanel" and "Plank", +1 for using Vala!). I mean, you even thought of a "paste" button on the empty URL bar. That's genius. I love the use of red for insecure sites; I tend not to notice the insecure logo in Firefox.

Several questions:

1. When are you removing the search bar in Midori? The last version I tried still had two bars. :-(

2. You use the "do not enter" symbol on a lot of mockups. [link] As a user, I find this icon extremely confusing; it's pretty unintuitive as to what it does. You are apparently using it as a "delete" button in Dexter, but I think something like a trash bin would suit the purpose better.

3. On your last desktop mockup (see the above link), the "places" dock was missing. Is it still in the latest versions of Elementary? I really, really like the idea because I can get instant access to the folders I use the most.

4. Any more news on when Jupiter will be done? I'm going to buy it, I promise, but my laptop has been out for months, so I've been stuck on Windows (shudder) for a while.
Reply
:iconmrclassical:
mrclassical Featured By Owner Mar 1, 2011
Didn't see the "existing Midori feature" thing. :-)

One thing I like about Firefox's implementation is that I can click on the "secure" button and see the certificate information.
Reply
:iconarturoilhuitemoc:
ArturoIlhuitemoc Featured By Owner Apr 29, 2011
Paste and Go: Right click on the URL bar. It should be the last option.
Reply
:iconarturoilhuitemoc:
ArturoIlhuitemoc Featured By Owner Feb 23, 2011
One thing that confuses me with the current Midori is that while it's loading, the progressbar color is exactly the same as selected color, so I can't select part of the URL (well, I can, but I don't see what I've selected)
Reply
:icondanrabbit:
DanRabbit Featured By Owner Feb 23, 2011  Professional Interface Designer
I'll see if there is a way to work around this, but I think it's actually just how the widget is drawn in Murrine/GTK.
Reply
:iconnicepics13:
NicePics13 Featured By Owner Feb 27, 2011
Yeah, I think the later (GNOME >2.30) gtk2-engines themes separate progressbar/selected color.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Feb 27, 2011  Professional Interface Designer
haha, well if you notice in my theme progressbars look completely different from ProgressEntries. Setting a different style/color for ProgressBar doesn't affect this widget ;)
Reply
:icontherealpadster:
theRealPadster Featured By Owner Feb 23, 2011  Hobbyist Interface Designer
Wow, looks good. I hope this gets done. And not just midori, it's a good thing for everything to have. :)
Reply
:iconochief:
ochief Featured By Owner Feb 23, 2011
I believe that Midori has a private browsing mode in which case it would also make sense to reflect in the search bar whether thats turned on or not.

Looking good though!
Reply
:icondanrabbit:
DanRabbit Featured By Owner Feb 23, 2011  Professional Interface Designer
Do you have a suggestion for how that should be displayed?
Reply
:iconochief:
ochief Featured By Owner Feb 23, 2011
There wasn't one that came to mind but if you do a google image search for "private icon" lots of the results include a red circle with a white line through it.

A colour around the search bar to highlight this as well might be useful similarly to your insecure mockup. That way its very obvious if you are viewing a site and not recording your activity. I'm not sure how useful this feature is for others but at my work it is crucial that we access our CRM system using IE's InPrivate setting.
Reply
:iconisgie:
isgie Featured By Owner Feb 22, 2011
Looks awesome. It looks so much nicer too than the current midori look :)
Reply
:iconspiceofdesign:
spiceofdesign Featured By Owner Feb 22, 2011  Hobbyist Interface Designer
So basically its an omnibar like in chrome. Also highlighting would be nice (ie you highlight elementaryos.org in elementaryos.org/forum/viewforum.php?f=4 to make it clearer what website you are on, and to reduce phishing).
Reply
:iconaldomann:
aldomann Featured By Owner Feb 22, 2011  Hobbyist Interface Designer
It would be nice if it was like in Opera/Chrome. Instead of the favicon, it should be shown a world icon (like in chrome, with a blue background (in order to follow the style)) and the http(s) could be allways hidden.

Great concept.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Feb 22, 2011  Professional Interface Designer
Hey aldomann, I'm wondering that if that was the case, what would the point of showing an icon there at all? :p
Reply
:iconaldomann:
aldomann Featured By Owner Feb 23, 2011  Hobbyist Interface Designer
I think it should make more sense, like in Opera: [link]

Also, I don't think showing any favicon on the navigation bar is a good idea, since all of them are showed on each tab.
Reply
:iconburokku-sumisu:
Burokku-Sumisu Featured By Owner Apr 4, 2011
GO OPERA!!!!! WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Reply
:icondavbren:
davbren Featured By Owner Feb 23, 2011
Yh I quite agree. There is no point to the icon whether it be a favicon or a globe. Chrome has it there as part of ChromeOS I think to let people know that they are viewing a webpage and not a local folder.
Reply
:iconkshegzyaj:
Kshegzyaj Featured By Owner Feb 22, 2011  Student Interface Designer
What about orange instead of red for insecure pages?
I think red may be too strong. I suppose the purpose of the color is to warn the user about the possible unsecurity of the page. In lots of cases, red means you are not allowed to proceed, orange means you should be careful, and green means it is okay. A good example of what I'm saying is a traffic light.
Reply
:iconxkit:
xkit Featured By Owner Feb 22, 2011  Professional Interface Designer
I'm gonna have to agree with this.
Green -> Good SSL.
Orange -> Bad SSL/Unsecure Resources.
Red -> Known Attack Site.
Reply
:icond0od:
d0od Featured By Owner Feb 22, 2011
RSS button a la Safari would be neat, as would'hiding' the '[link] part of a URL as in Chrome.
Reply
:icon0rax0:
0rAX0 Featured By Owner Feb 22, 2011  Professional Interface Designer
Midori isn't one of my preferred browsers but it's nice to see it grow like that :)

As for my feedback, by far, Opera has -probably- the most clean address bar; it displays a cleaner url, you can type "g something" to search Google, it displays history/bookmarks/suggestions in an awesome way... all in all it works great!

[link]
Reply
:iconeurux:
Eurux Featured By Owner Feb 22, 2011
I think the autocomplete dropdown menu should look more like a window that shows up from behind the url bar, did you get what I mean?
Reply
:iconspktkpkt:
spktkpkt Featured By Owner Feb 22, 2011
Very nice! The only i dislike are the upper rounded corners of the "user typing" dropdown.
Reply
:iconhalf-left:
half-left Featured By Owner Feb 22, 2011  Hobbyist Interface Designer
Nice dude, not sure about the jagged user typing line though. Maybe a dashed line would be better.
Reply
:icondanrabbit:
DanRabbit Featured By Owner Feb 22, 2011  Professional Interface Designer
That line is meant to indicate that there could be more items I'm not showing in the menu ;)
Reply
:iconhalf-left:
half-left Featured By Owner Feb 22, 2011  Hobbyist Interface Designer
Oh, looked part of the design. lol
Reply
:iconshakipu:
Shakipu Featured By Owner Feb 22, 2011
Good job, looks nice :). The paste button in the urlbar is a good idea.
Reply
:iconburokku-sumisu:
Burokku-Sumisu Featured By Owner Apr 4, 2011
some web browser (Like Opera) have this built in though not a button. All you need to do is right click and it should be right above paste.
Reply
:iconarkblitz:
ArkBlitz Featured By Owner Apr 4, 2011  Hobbyist General Artist
Also Firefox: Right-click on address-bar > Paste and Go. Unfortunately it's not on an easy-to-click place: two places above the end of the list, just above delete and choose all.
Reply
Add a Comment: