BasicIdeals

Revision 19 as of 2007-11-27 18:12:23

Clear message

Navigation(slides) Navigation(siblings,1)

Basic Ideals

An interface with only the purpose to be the usable and intuitive by design. The most basic user is to open this interface, and know what each element does, what to expect from it, and how to do what they want.

Sub Pages

Lmessanger (aka Lucas) has created an ideas & contributions page, I highly recommend contributing to the page because this page is getting... huge. As time goes on other sections may receive individual wiki pages.

https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals/Ideas

Concept

The "Basic Ideals" concept is not the search for an ultra-cool theme that blows away 'competition'. The idea of this theme and the upgrades that would become necessary for it to be supported only have the purpose to create the most usable user interface. Elements of cool and amazing designs are only second to ease-of-use.

Each element in the theme, from buttons to scrollbars, should be self explanatory. Everything should be considered in the design of an element. Should a button be pill shaped, like OS X? Should they be square with rounded corners, like Windows? Should they change colour, light up, cast shadows? Reflect? Glow? Have markings or decals? What will feel natural, what would feel unnatural?

Going to the bare basics, how to elements compare to their real-life counterparts? Where does light come from? How will your grandmother interpret it? How will you interpret it? If sounds are present, what would it sound like? If animations are present, how would they move?

Hopefully, with solid guidelines and coherence, the theme will look good on it's own, without needing to resort to gimmicks. Additionally, some of the effects mentioned also require Compiz and Emerald; So an alternate version of this theme would need to be made for lower-spec computers.

Basic Theme Guidelines

A good theme should have consistent cues to tell the user what an object can do. This is a basic list of guidelines this theme will ultimately follow.

In addition, there is an explanation on each of these rules within the different sections aswell.

  • Light sources: Light comes from the same source as Gnome Icon Spec. Basically, from the top of the icon, slightly leaning to the left. This means the shadow would lean to the bottom right. every element that rests over other elements should cast a shadow.

  • Outlines: Outlines will be the most prevalent on the outside of the window, and become subtle as you move to the inside of a window. This means the windowframes and panels will have the thickest outlines, divisions within the chrome will have thinner outlines, and buttons will have outlines that are barely visible. This will let users know what belongs to what if they glance at the screen, and more easily navigate the gui. Because there are 2 interface colours (Cholocate and Tan, more info on the next point) the outline should always be the opposite colour. So Cholocate elements have Tan outlines, and Tan elements have Cholocate outlines. Nutshell: Panels & Windowframes=~1px solid, high contrast. Chrome=~1px solid. Widgets=~1px subtle. Gradients=~1px, subtle.

  • Colours: Colours will help guide the user to what's really important, or active. Tans and Beige colours are for areas that contain content or are unimportant - as they do not distract the eye. Browns and Chocolate are for elements farther away from content, contain important content, or selected widgets. Orange colours are for active widgets to show either what you are interacting with, or what option you have selected. Only the most important widgets will permanently have orange, as would be a highlighting colour. Icons and user-customizable elements (not necessarily ingrained within the interface) should remain orange. Nutshell: Tan=Content. Brown=Not Content. Orange=Highlights & Activity.

  • Materials: There are only 2 materials to be used in this theme, Glossy and Plastic. The reasons for these 2 materials will be explained under Chrome & panels. The rule for choosing a material is: Glossy items contain options that are non-dangerous/pre-made, polished tools, usually only containing things you can easily undo. Plastic surfaces will contain anything that we can't guarantee is safe. Technically, nothing is safe, because people can customize the programs they write, the panels they use, and so on; But for the most part, glossy surfaces will just lead to more options until users get to the business end of the task. Nutshell: Glossy=Safe. Plastic=Unknown.

  • Transitions: Anything that is connected with another, related object of a different colour will be blended in a gradient. This is to lead users through the interface and provide a smooth feel. There should be a subtle line in the gradient to show that they are still separate elements with unique behaviors. This does not apply to anything highlighted in orange, as users could be led to believe elements connected to whatever is highlighted might be affected.

  • Transparency: Anything that rests on top of content should have a subtle level of transparency, to show there is content underneath. If it's going to cover the desktop, it should only be slightly transparent (Maybe ~10%), but if it's covering window content, it should be less opaque (maybe ~20% transparent).

  • Rounded Corners: Corners should be rounded whenever they are unattached to any other element, and if possible, inside corners should be rounded too. For example, when dropping down from a toolbar, the toolbar button will (because of the gradient) take a corner to transition into the dropdown. The other 3 corners would be rounded. Rounded corners should be subtle. Only enough to look softer than harsh square corners - if rounded too much they begin to look almost toy-like, and not very solid. Windows will have rounded corners.

  • Active Elements & Orange: Any element that is active and being manipulted should be highlighted in orange. Because smaller items may be covered by the mouse (small buttons, check-boxes, etc) and we want consistency in the theme, elements should use an outer "Glow" effect, not dis-similar to the Windows Vista min/restore/close buttons. This will let users see very easily what elements they are working with. Small single-click elements like buttons or check-boxes should glow on mouse-over. Elements like scroll-bars should have arrows/icons that would glow on mouseover, and afterwards have the entire element glow when scrolling. The glow should pulsate on a click.

Chrome & panels

When looking at a panel, a keyboard, or any object with an interactive panel; Everything has surface we cannot interact with, a surface we can, and different things we can do or use a surface for. The stuff below the buttons.

When we go this far back and think about everything, we need to ask what cues people will get from the material a button is placed on. If something is on a glossy panel, we know it's often more expensive, and less likely to be of consequence when pushed. If something is on an industrial surface, like brushed metal, it feels heavy and you're less likely to explore because you're taught that pressing buttons on industrial machines is potentially dangerous. If it's a plastic-like material with smooth gradients, it's going to feel like a consumer product. As long as it's well labeled, people know it's not too dangerous when they push the button, but they also know it does something. Plastic can also feel cheap though, compared to glossy surfaces. Other surfaces like stone, marble, wood, etc aren't common enough for broad application.

Ideally, surfaces that follow plastic feels will cover most of the interface. These things do work, but we have no idea what work it will do. Glossy or buffed panels would cover things with less consequence, like the toolbar, because it only gives you more options, and nothing actually doesn't do anything.

To portray plastic, smooth gradients with very slight texture would be ideal - but nothing overpowering and everything very subtle. Glossy surfaces are common, so we all know what to expect from them.

Any thoughts, additions, inconsistence or anything else on this should be expressed please.

Ideals:

  • Chrome that contains any widgets will follow Plastic. As chrome is unimportant, it would be tan.
  • Toolbars will follow the Glossy rule, as toolbars only contain drop downs and nothing critical. Because toolbars contain important options and are away from content, toolbars would be Chocolate.
  • Dropdowns will follow the Plastic rule, because we cannot guarantee what they contain, and they do something. They will follow the Tan colour, as they contain content. Lastly, if it's a dropdown from a Chocolate toolbar or widget, the button that created the dropdown should have a gradient. Lastly, dropdowns almost always cover content, so they should follow the transparency rule.
  • Panels will follow the Glossy rule, as it only leads to other more important options and almost every option can be undone. In addition, Panels will follow the chocolate rule, as they are important and away from content. Finally, Panels would follow a subtle transparency, as they rest on top of the desktop.

Any thoughts, additions, inconsistence or anything else on this should be expressed please.

Window Frames

Frames are far less common in the real world when you look at what window frames actually are/do, and there are trade-offs no matter what style we go with.

There are really 2 styles of frame out there: Frames that blend together with their contents (like some OS X programs) or frames that are their own style (Like Windows). Making a frame that looks different than the contents gives users better visibility when it comes to the frame itself, and users can more easily grab the frame to stretch or scale the window. Making the frame and the contents blend (the "slab" look) makes it easier to to process visually, and gives the window a very solid look. But it can also confuse users who try to drag a window and are grabbing chrome instead of frame.

And what would the frame be made of? Stone? Wood? (common in picture frames) Glass? Plastic? How will the material express the behavior? And do we want the window frame to go around the window or cover only the top and bottom?

Ideals:

  • The window frame should cover the top and bottom, as well as the sides. There is more functionality in the frame when users can easily grab it.
  • Because windowframes are away from content, and contain useful widgets and information, they should be Chololate, and because windowframes contain important buttons and widgets, they should be plastic.
  • Windowframes should have subtle transparency when nearing the outline, as windows always rest on top of other windows or the desktop.
  • The material should blend into the contents of the frame, as they are a connected element. Subtle lines should divide the frame so users know where the frame ends and the chrome begins.
  • The outside of the frame should have a clear outline, as it contains all elements. Only panels have lines this thick.
  • Windows will have a drop-shadow.

Any thoughts, additions, inconsistence or anything else on this should be expressed please.

Widgets

In real life, a often buttons are raised, made from a different material, they might have a light behind them, and they always have some sort of instruction on them.

Ideally we want to give the user every cue we can to tell him or her it's a button, or a radio button, check box, so on. So first widgets must be a different material than whatever surface it's on. Because buttons and widgets will most often show up on plastic surfaces, buttons will be Glossy. They will also be the same colour as the surface they are on. Widgets would also glow on mouse over, and pulsate on clicks. If there are multiple widgets grouped together (Radio buttons), all the other buttons should briefly and subtly pulsate to illustrate that they are grouped.

Ideals:

  • Widgets will glow when moused-over. It would be a halo-style glow and preferably "splash" over the nearby area for the best visibility.
  • Widgets should be glossy, because most-often they will sit over plastic surfaces.
  • Widgets should be beveled into any chrome.
  • grouped widgets will pulsate to illustrate their relation.

Media

More media will become available as work is refined and created. Please post errors or inconsistencies in the "Suggestions / Issues / Corrections" section below.

Anchor(Palette) Palette

attachment:pallet.jpg

  • Revision 1 of the pallet, showing colour and texture.

Anchor(ConceptArt) Concept Art

attachment:svgpanels_quartet.jpg

  • Four unique styles of panel. The top two are for non-compiz enabled machines with lower hardware requirements. The second two are more flashy versions that follow the guidelines above, and up the users experience. Comment on which panel style might be preferred (dark or light border?); The dark borders are easier on the eyes, but light borders follow the guidelines perfectly.

attachment:svgpanels_panelzoom.jpg

  • The massive benefit of SVG graphics; They can be zoomed in for disabled users, polish high-resolution displays and make resolution-independent interfaces.


These are Pre-SVG images of what panels might look like, and are no longer relevant. They remain here for completeness and for design reference. The images below DO NOT reflect the current theme.

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup_panels.jpg (Pre-SVG series) Compiz-enabled Panel]

  • Mock-Up 1 of Compiz-Enabled Panels.

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup_Panels_dropdown.jpg (Pre-SVG series) Dropdown Example]

  • What a drop-down might look like. There are 2 mouse cursors on this mock-up, one orange, one brown. Orange technically fits the spec (as it is always active) however it is less visible than brown. The default white cursor theme might be more appropriate.

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup_alt_papers.jpg (Pre-SVG series) Mockup of alternate wallpapers]

  • Several alternate wallpapers.

Suggestions / Issues / Corrections

Please post any issues, errors, general corrections or ideas in this section please.

This theme looks great! Only one wish would be if it could be designed to work without Compiz/Beryl so that the visual interface would be applied but without the help of visual enhancers. Such as Windows or Mac, they have an excellent interface without the help of enhancers and it would be of great help to those that don't have such a great graphics card could be able to see this new theme.

Thanks,

-- Lmessenger DateTime(2007-11-26T18:25:09Z)


That's an excellent call. How about we make 4 unique 'parts' for the theme?

  • Compiz/Emerald enabled for High-end machines (Transparency, Animations, etc)
  • Metacity for entry-level machines (No additional effects)
  • Gnome GTK Widgets.
  • KDE Widgets for Kubuntu and Ubuntu-KDE programs

Does this sound like a good plan? I haven't worked with KDE themes (only lamented them); if anyone would like, to help tackling KDE would be great.

-- Ken


Yes, that would be an excellent idea. I would say that if we could involve any effects without Compiz/Emerald that would be pretty cool. Other than that I agree with you completely. Also, I was thinking that we could create a Launchpad group to help better this project.

--Lucas (Lmessenger)


I do want to apologize for this post, but there was something I would like to comment on. The mouse in this theme is quite visual enticing, but I think that because it has the "Web 2.0" style it adds to much punch into this theme, if an orange mouse that is not so "exciting", I think it would make this theme look better.

-- Lmessenger DateTime(2007-11-26T21:30:08Z)

Reference

Contributions

[wiki:/?action=AttachFile Attach File]

Include(Artwork/Incoming/SubmissionGuidelines/Guidelines)

Comments

This is a really cool idea. It's things that I've thought about and would like to do. If possible would I be able to help you? -- Lmessenger DateTime(2007-11-20T02:16:45Z)


For sure! At this point I'm to mocking up window frames and a list of different widgets (scrollbars, buttons, tabs, etc) and a couple "Action shots" with the elements; Once that's done, if you would like, list everything I've done wrong, anything that doesn't follow the guidelines, could be improved or added to, looks crowded or hurts the eye. Additionally, if you would like, start an "Ideas" section in the meantime and list everything you feel will make the interface more intuitive and consistent. -- Ken Vermette, "Kver3"


Apologies!

I just finished an update a short while ago and noticed several people watching this page; Apologies about the (probably many) emails you've received. I believed I was the only one interested in this page. I'll slow down / stop the smaller edits and make single larger updates at nights end when I have several updates ready. Thank you for your interest, I'll try not to disappoint. If anyone wants to reach me personally, my email is vermette@gmail.com -- Ken Vermette, "Kver3"


Kver3,

Your theme looks great, but I feel that for Ubuntu to look and feel ahead of the pack, it has to move away from the Web 2.0 aesthetic. I find that this article provides a good baseline on what to do.

http://elliotjaystocks.com/blog/archive/2007/destroy-the-web-20-look-future-of-web-design-new-york/

Best, BramPitoyo


Thank you for the input; The presentation and related material hold excellent materials and design philosophy. The concept links in the powerpoint presentation were great, but inappropriate for a general-purpose operating system theme; The purpose of this theme isn't to make the new "Look" or break some design barrier, but to provide a familiar and intuitive environment for beginning users.

This theme is based on strict rules, so ideally any suggestions will get specific. For example: "Any sliders or scollbar widgets must have a visible analog track line". As long as it makes some kind of sense it will probably be incorporated.

Anyway, I'm ecstatic to hear you find the theme worthwhile enough to suggest this could pull ahead of the pack; Keep throwing ideas into the pot! If you have any specific ideas (there will be widgets coming tomorrow to comment on) please post; It's greatly appreciated. -- Ken Vermette


Right now updates are a little bit (read: very) slow because I'm re-making this theme in vector-format, so I'm finicking with Inkscape, Xara eXtreme and other programs (the theme right now was made in the Gimp). When the time comes, this theme can be ahead of the curve with zooming and resolution technologies. On that note, if you are experienced vector artist, please post here; we could use you. Smile :)

Also, should there be a blue version of this theme for the Blubuntu users out there?

-- Ken


I created an idea page for those that would like to add their own ideas to this theme.

https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals/Ideas

Thanks, Lucas (Lmessenger)


Excellent! I wasn't aware you could do that, Kudos! I've added another section to the top of the page where your link will be more visible (and also to have a place where we can put more links and sub-pages should we find ourselves needing more room)

I'll move some of the content we already have to the new page when I get the chance. Right now I'm trying to find a way to get Xara to export SVG (made the dock in vector, but Xara apparently doesn't play nice with SVG).

-- Ken


SVG panels added, plus one panel zoomed in. I'll add the dropdowns and a few different wallpapers tomorrow or the day after. I've been holding out of widgets for too long, so I'll try to get even a button and scrollbars posted when possible. Inkscape used to build the vector graphics, GIMP used for export & low-rez font rendering (more accurate). SVG source files will be available in the attachments. Thank you.

-- Ken


Wow, these new images are looking great! I personally like the frames with the darker color, due to the fact that the light takes away from the whole idea. If you could make the light smaller (thiner line), then it seriously look great. Just remember, I am just expressing my own opinion and that others may disagree with me.

Thanks,

Lucas Calder Messenger (Lmessenger)

Attachment List

AttachList


CategoryArtwork