Opera Desktop Team blog header

Featherweight - first phase

, ,

Good morning, this is Helmers from Opera User experience and Graphics (UxG). Today we are excited to share results of the first phase of project Featherweight. Our goal has been to make Opera as light, bright and user-friendly as possible—without sacrificing power or flexibility. We want the user interface to match the speed of our rendering engine.

Featherweight has been under wraps until now, so that we may present a comprehensive solution, not bits and pieces. Some changes are highly visible, such as those to the address and status bars, but you will find that we have reworked much of the skin throughout—including a brand new icon set. This is the first step in project Featherweight, and a major collaborative effort between the UxG and Desktop teams. Enjoy!

Highlights
  • Brand new toolbar icon set
  • Brighter, softer colors for backgrounds and borders
  • Padding and alignment improvements
  • Updated status bar design and content
  • No more button borders in the address bar
  • The Home and Fast Forward buttons now optional
  • New "tab fold" attention state - no more blue blob
  • New window gradient for OS X
Linux/FreeBSD known issue
  • The text in the status bar may be invisible in dark themes


Windows screenshot (click for full size):


OS X screenshot (click for full size):


Unix screenshot (click for full size):


Remember to keep feedback constructive and to the point—we know many of you are passionate about UI changes! cheers

WARNING: This is a development snapshot: It contains the latest changes, but may also have severe known issues, including crashes, and data loss situations. In fact, it may not work at all.

Download

Another Happy Tuesday?Second snapshot of the day

Comments

earth01 Wednesday, June 22, 2011 10:34:46 AM

Originally posted by Bugfixer:

How to make the speed dial background transparent?


You can remove all dials, the [+] button and the search field.
Then, add the same custom background as your desktop.

Ruarí Ødegaardruario Wednesday, June 22, 2011 10:38:24 AM

Originally posted by davidtsunamy:

In Linux (Fedora with Gnome3): Tab bar background isn't black confused

Originally posted by coyomoyo:

The same (archlinux) even after clean install, but overall it's looking good.


The colour for that Tab bar background is taken from your Gtk2 or KDE theme. So the machine where the example screen shot was taken had a fairly dark theme, hence the colour. For you it might be different. The new skin changes aren't explicitly setting that colour to black for anyone.

Remember that for Linux/FreeBSD there is no one single default theme as it varies by distro and desktop environment. The only way you could ever really display what Opera will look like on Linux/FreeBSD is to have some animated image flicking through a whole range of themes. p

Dandan7960 Wednesday, June 22, 2011 10:42:35 AM

yay no more blue dots!!!!! bigsmile

araarmagedon Wednesday, June 22, 2011 10:45:00 AM

this is amazing, I'm so terned on now!

beep Wednesday, June 22, 2011 10:45:12 AM

UxG, do you ever intend removing the space above tabs?

Ivan IvanovSasko88 Wednesday, June 22, 2011 10:45:35 AM

About native elements:
- An old issue - the tooltips with black corners (instead of invisible) on windows 7
- Progressbars are anything but native
- Dropdown menus are not native

Other:
- Viewbar buttons have borders and a rather native hover effect.
- The zoom dropdown on the viewbar has the wrong icon (arrow up)
- Speed Dial config - why not make the auto/manual zoom switch with radio buttons rather than a dropdown. It will take only one click and it will be more logical - you click auto on the top and the zoom slider is grayed out, you click manual, and the slider just below is working again. This would also make having two titles obsolete ("zoom" and "zoom level"), since zoom is enough. Although it makes the popup a bit higher, one title on the left will be eliminated and the visually heavy white dropdown will be removed.

Good job on the bookmarks bar, very efficient.

NicoHellbillyDeluxe Wednesday, June 22, 2011 10:45:56 AM

I really love all of the changes, but please consider changing checkboxes and radio buttons on Windows, because they don't fit the overall new look & feel of the new skin.

Temp1AR Wednesday, June 22, 2011 10:45:56 AM

Looks great! up
But there are some wishes, please:
1) move O button to the top left
2) remove text from it
3) address bar is too high, too much unused space
4) side panel could be thinner too

Psy Duckpsyduck1 Wednesday, June 22, 2011 10:46:28 AM

the moment i tried to put the sidepanel icons on top the cpu load went to 100% and browser became nonresponsive(windows XP)

Did also try to reinstall the browser from clean but problem keep popping up here

Martin KadlecBS-Harou Wednesday, June 22, 2011 10:46:39 AM

Icons look very "blurry" when skin size is lower than 100% ... also the Menu button has really small height on 80%.

And i agree that padding of address bar is too big.

Icons in context menu shouldn't be just black and white. The colors are important.

Right click on panels and choosing "Apperance" gets me to "Toolbars" tab not to "Panels" tab.

I don't like the fact that pinned tabs are higher, the normal tabs should be as height as the pinned tabs.

NiColaoSNikDaMark Wednesday, June 22, 2011 10:46:55 AM

The UI is one of my first arguments to choose my Browser.

I am very selective in the choice of my Skin. But... THIS IS REALLY GOOD/Modern!

The best native skin among all browsers. Just if you could remove the curves from Tabs, make it squared, but that's not gonna happen. So, ok!

Microsoft with Windows 8 will bring new, SQUARED ERA! Then, we'll come back to squared design on everything! Patient 'till then!

Perfect anyway!

I love the soft colors ( shades ) of blue!

P.S. That's border-radius 3px right? Could be like a dream to make all corners "2px" b-r.

artemeas Wednesday, June 22, 2011 10:47:18 AM

gnome 3 on archlinux, black background depends on gtk+ theme I guess, cuz I have a silver one, and it looks silver too! black one would not fit to the whole theme.

http://img41.imageshack.us/img41/8592/selection008w.png

serious Wednesday, June 22, 2011 10:47:57 AM

there is still the old issue that in a non-maximized window with no tabs the "+" button shifts to a rather strange position.

DoTheEvolutionTheEvolutionBaby Wednesday, June 22, 2011 10:48:48 AM

nice surprise

Martin KadlecBS-Harou Wednesday, June 22, 2011 10:48:56 AM

btw when i set "Images and text on the right" on the Menu button then the "menu" text is out of the button.

Ruarí Ødegaardruario Wednesday, June 22, 2011 10:49:06 AM

Originally posted by artemeas:

gnome 3 on archlinux, black background depends on gtk+ theme I guess

You got it in one! Well done. wink

Quppa Wednesday, June 22, 2011 10:51:52 AM

Any chance for native menus and tooltips in Windows? smile We've been waiting a long time, and a new skin seems like a good excuse to change things.

I hope the inner glass border is coming back. Chrome and Firefox get this wrong, and I'd hate for Opera to go down the same path.

m910q Wednesday, June 22, 2011 10:53:11 AM

You kept the space above the tabs, thank you! bigsmile

The address bar seems to use more space than needed in height.

Also I would like to edit/remove the "Opera Next" text on the button. Normally I choose "Image only". But that does not work anymore.

valera23092 Wednesday, June 22, 2011 10:53:49 AM

earlier was better now it has become a little uncomfortable

beep Wednesday, June 22, 2011 10:53:54 AM

[+] "New Tab" is sluggish again -- it was back to pre-11.10 responsiveness in yesterday's release.

grotos Wednesday, June 22, 2011 10:55:23 AM

Fatihbjk90 Wednesday, June 22, 2011 10:55:53 AM

There is a problem with favicons quality.You can see difference on 11.11 and 11.50
http://prntscr.com/22vfk

artemeas Wednesday, June 22, 2011 10:56:01 AM

Originally posted by m910q:

You kept the space above the tabs, thank you! bigsmile

The address bar seems to use more space than needed in height.

Also I would like to edit/remove the "Opera Next" text on the button. Normally I choose "Image only". But that does not work anymore.



Opera Next — is image, not text :-D because Text Only shows MENU as string, so this one is a big image :-D

PTAarakast Wednesday, June 22, 2011 10:56:27 AM

Looks great!

Ben Tudballtudsta Wednesday, June 22, 2011 10:56:34 AM

Nice smoother interface animations.

Who on the XuG team thought it was a good idea to put an X on the Closed Tabs icon?

Also, the hand icon for Text Selection On/Off is wrong. Either have a text selection icon, or have the hand icon with Scroll by Drag On/Off for the text.

Bug: When I click the Opera Next menu then click it off, the tops of my stacked tabs become black with a white border. WinXP.

Martin KadlecBS-Harou Wednesday, June 22, 2011 10:56:44 AM

Can you put the "current zoom number" somewhere to the view box?

Fhury Wednesday, June 22, 2011 10:56:54 AM

mod edit - try to be polite

joshas Wednesday, June 22, 2011 10:58:21 AM

Not much of improvement - at least on Linux:
1. I prefered the original menu button, now it is all round and looks out of place.
2. There's very distinct black border separating row with tabs and address bar.
3. Issue when MDI window is over some elements (like address bar or "go to next page" bar) slows down windows movement (and more CPU resources are used).
4. New monochrome icons in menu looks bad on dark background.

Not related to new interface, but trying to change panels toolbar placement to top made Opera freeze and finally it disappeared. Now when opening panels, Opera freezes for some time.

And for those, not using status bar, maybe it would be possible to display link targets not on tooltips, but like in Firefox or Chrome - at he bottom of page.

bjh101 Wednesday, June 22, 2011 10:58:57 AM

Main points to improve:
1) Padding top & bottom of address bar too large.
2) Can tabs please extend to the top of the screen when maximised - or at least be selectable when the mouse is at the top of the screen.
3) The "Opera" button is too large, taking up too much tab space when maximised.

TidanDadanofficial Wednesday, June 22, 2011 10:59:35 AM

Forgot your home button in the toolbar, is that those on the normal conversation on the Facebook chat, the conversation always goes back during the discussion?

ruaman Wednesday, June 22, 2011 10:59:40 AM

WOW...!!! This just fabulous...!!!

Jarasmen Wednesday, June 22, 2011 11:04:09 AM

Address/button bar is a few pixels thicker on Speed Dial tabs than on regular tabs, resulting in the bar "jumping" when changing tabs.

http://gyazo.com/8c117b9aeedba131308c5a7a09cb98de.png -
http://gyazo.com/8c117b9aeedba131308c5a7a09cb98de.png

Also, visible on the screenshot, sidebar button appears as a "tab" when put next to the Menu button, but well, floats apart from the tabs (is also too short and doesn't reach address bar when the window is maximized, thus still floating). Maybe you should make it an "upside down tab", like the Menu button.

MRCS Wednesday, June 22, 2011 11:04:25 AM

Originally posted by Old-Nick:

* Disappeared arrrow to access previously typed URLs

At first I thought it was just my customized skin. I'm sure it's just an oversight...I hope.

earth01 Wednesday, June 22, 2011 11:05:27 AM

Never imagine to say that but... 11.50.1052 will probably be a legend rip
The last Opera before turning to the dark side knockout

siealex Wednesday, June 22, 2011 11:06:50 AM

cons again seem quite monochrome. Colors are a very important part of icons to make them easier to recognize, it's not just about the shape. I hope this design choice won't hold.



My preference is a MONOCHROME set of buttons. bigsmile

ZeusIIzeus2 Wednesday, June 22, 2011 11:09:07 AM

Nice update but please, don't forget the user with Windows that doesn't use the aero interface. The Opera Menu button doesn't fit well in that case, take a look:

http://db.tt/HNNxM6M

miki69 Wednesday, June 22, 2011 11:12:42 AM

Originally posted by operic:

pretty much colorless and hard to distinguish between various items in menu(s)


I agree, we need more distinction.

Ronit Kumarronitrex Wednesday, June 22, 2011 11:13:20 AM

This looks very beautiful!, most of my problems have been mentioned above in most of the comments, and I would like to suggest to add a "Add to Bookmark" button.

-Finally, i can use the default opera skin Yay!! yes bigsmile

Surferz Worldsurferzworld Wednesday, June 22, 2011 11:13:51 AM

In private window, tab is folding(attention state) just before the page load ends..... can't able to reproduce, it happens randomly,, mostly unnoticeable when we have set automatic page reload. When you open a fresh page & switch to another tab may help you to reproduce it. Any confirmation plz?
------
Ubuntu 11.04, 64 bit, unity environment.

artemeas Wednesday, June 22, 2011 11:14:44 AM

Originally posted by zeus2:

Nice update but please, don't forget the user with Windows that doesn't use the aero interface. The Opera Menu button doesn't fit well in that case, take a look:

http://db.tt/HNNxM6M


win2k ? ololo time to upgrade :-D

ChrisSlamdex Wednesday, June 22, 2011 11:15:07 AM

Originally posted by eliotcougar:

Opera Link icon looks, eh well, misleading...

How so? This is what people associate with syncing.

Originally posted by eliotcougar:

There's yet a lot of work to be done...

Not necessarily. You are just being subjective. Just because there's something you don't like doesn't mean that there's work to be done to change it to the way you want it.

Jaroslav Hučíklordjajator Wednesday, June 22, 2011 11:15:26 AM

mod edit - off-topic removed

Delagen Wednesday, June 22, 2011 11:15:32 AM

In the moment at Tab Bar Placement - > Left Menu Button still placed on the pane, so this design need to be reworked.

Miketaussick Wednesday, June 22, 2011 11:15:42 AM

bigeyes Stunning, awesome, beautiful!.. star
But one con: latest Opera dev builds freeze for me after couple of seconds :/ (Mac build, clean config)

Alexanders-a-s-h Wednesday, June 22, 2011 11:18:39 AM

Why you didn't integrated Go/Reload/Stop button into address bar? This is common practice now and I think that it is nice and handy

QuHno Wednesday, June 22, 2011 11:19:45 AM

Ugly behavior: If you set the panel headers to "wrap to multiple lines", the view button jumps around when changing the widht of a panel, see here:
http://quhno.internetstrahlen.de/BUGS/1150newskin.gif
IMHO the 11.11 behavior was better.

Was the zoom in the lower right corner deliberately removed?
I personally don't care, I know "+-*" numpad-fu but I know some mouse addicts.

The panel switcher icons are too small IMHO...


... but everything else looks nice so far smile

maexl Wednesday, June 22, 2011 11:22:09 AM

Looks very nice! smile
But I would love to see it in black or dark grey on Windows 7. Why Opera can't handle a dark color-scheme? I tested to add dark-grey or black to the dialog.ini, but it doesn't work.

Crabman Wednesday, June 22, 2011 11:22:42 AM

Overall I like the new look, it needs refinement but it's only "first phase" so all is good. Well, almost..

..small problems:
1. When I click on the old O(pera)-Menu-Button and keep the mouse-button pressed down while simultaneously moving the mouse-cursor down the menu open. This doesn't work anymore, I have to click and release the mouse-button before the menu opens. Still works everywhere else (trash-button) so I'm sure it's just an oversight.

2. The new design uses as much pixels as the old one vertically despite some elements being smaller like the tabs. As others have said you should reduce the padding of the address-bar and imo the distance between the tabs and the O-Menu-Button.

3. What I HATE about Chrome is the lack of the address-bar drop-down button. And now you removed it too. sad Please at least implement an alternative like opening the drop-down list when I click in the adress-bar. Or make the removal optional.

4. The URLs in the address-bar drop-down-menu are now harder to read when not being hovered over. I don't see any advantage to the lighter font.

Martin RauscherHades32 Wednesday, June 22, 2011 11:23:14 AM

Can you find the active tab?
This skin makes the issue worse sad
http://my.jetscreenshot.com/1131/20110622-qhyz-112kb

It would be nice if you introduced a little dimming overlay over the tab thumbnails, like my custom skin:
http://my.jetscreenshot.com/1131/20110622-8lf4-104kb
http://my.opera.com/community/customize/skins/info/?id=10272

helsten2 Wednesday, June 22, 2011 11:23:16 AM

Remember transparency - the background may be light or dark.
Examples - pagebar:
Image and video hosting by TinyPic

Win7 x64

Write a comment

New comments have been disabled for this post.