BasicIdeals

Differences between revisions 1 and 45 (spanning 44 versions)
Revision 1 as of 2007-11-07 19:06:35
Size: 12861
Editor: d235-231-103
Comment:
Revision 45 as of 2007-12-15 05:04:06
Size: 27921
Editor: d226-25-191
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
||<tablestyle="font-size: 0.85em; border: none; width: 100%; background-color: #f1f1ed; font-weight: bold;text-align: center;"> [wiki:Self:Artwork/Incoming/Hardy/Alternate/BasicIdeals Basic Ideals: Main] || [wiki:Self:Artwork/Incoming/Hardy/Alternate/BasicIdeals/Ideas Ideas] ||'''NEXT ART RELEASE''':[[BR]]''Between Sun 16th Dec - Sat 22nd Dec''||

Line 4: Line 7:
Line 8: Line 12:
= Design =
Line 22: Line 28:
'''OUT OF DATE:''' update planned for next week
Line 25: Line 33:
 * ''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=~2px solid. Chrome=~1px solid. Widgets=~1px subtle. Gradients=~1px, subtle.  * ''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=~2px solid, high contrast. Chrome=~1px solid. Widgets=~1px subtle. Gradients=~1px, subtle.
Line 82: Line 90:
''More media will become available when I'm back onto my regular machine, and I have more time to update this page'' ''More media will become available as work is refined and created. Please post errors or inconsistencies in the "Suggestions / Issues / Corrections" section below.''
Line 85: Line 93:
'''Palette''' === Palette ===

attachment:pallet.jpg
 * ''Revision 1 of the pallet, showing colour and texture.''' To be revised.'''
Line 88: Line 99:
'''Concept Art'''

=== Reference ===

= Contributions =
=== Latest Concept Images ===

'' Cutting-edge images: the latest uploads are displayed here ''

attachment:mockup(svg)_win1_1.jpg
 * ''The first example of what a windowframe might look like. Note that several widgets are missing. This particular mock-up shows a window without the toolbar.''

attachment:mockup(svg)_win2_1.jpg
 * ''A second window mock-up; This shows a window with the toolbar. Note that several widgets are missing.''

attachment:mockup(svg)_v2_2_w1.jpg
 * ''Third version of the SVG theme, Gloss has been removed for a more simple, elegant look. Please post in the ideas/comments section (linked at top of page) if you prefer gloss. There is a small mistake in the top-right corner where I forgot to add the dragging handle, sorry.''
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup%28svg%29_v2_2_w2.jpg Alternate Wallpaper 1 (Feathers)]
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup%28svg%29_v2_2_w3.jpg Alternate Wallpaper 2 (OS-Tan)]
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup%28svg%29_v2_2_w4.jpg Alternate Wallpaper 3 (Violin)]
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup%28svg%29_v2_2_w5.jpg Alternate Wallpaper 4 (Feild)]
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup%28svg%29_v2_2_w6.jpg Alternate Wallpaper 5 (Waterfall)]
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=mockup%28svg%29_v2_2_w7.jpg Alternate Wallpaper 6 (Dragon Tattoo)]

attachment:mockup(svg)_v2_2_shift.jpg
 * ''SHIFT concept: A blue version of this Ubuntu theme. This will be developed alongside the main theme. Named after the fact that it's pretty much just a Hue Shift.''



=== Recent Concept Images ===

'' Recent images: not the latest, but still worth commenting on. If newer images in the above section lack something you prefer from this section, please suggest that it to go back in.''

attachment:svgpanels_minidesktop_v2.jpg
 * ''Second version of the below image. Panel gloss has been increased, Dropdown gloss decreased and overall opacity increased. Text has switched back to beige. Tooltips and mouse-pointers tossed in. Halo-dots removed and shadows added. Light bulb visibility increased, but it might remain an issue as long as the bulb has no borders.''
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=minidesktop_v2_w1.jpg Alternate Wallpaper 1 (Grass)]
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=minidesktop_v2_w2.jpg Alternate Wallpaper 2 (OS-Tan)]
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=minidesktop_v2_w3.jpg Alternate Wallpaper 3 (Field)]
 * [https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=minidesktop_v2_w4.jpg Alternate Wallpaper 4 (Violin)]

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=svgpanels_minidesktop.jpg First-Version mockup]
 * ''A mini-rendition of a desktop using the theme following the spec. The bars below can be substituted in place of the thicker-outline (or will be able to be) by the end user; But this is what the theme might look like by default.''

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=svgpanels_quartet.jpg Compiz Acceleration?]
 * ''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.''

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=svgpanels_panelzoom.jpg Zoomed in Panel]
 * ''The massive benefit of SVG graphics; They can be zoomed in for disabled users, polish high-resolution displays and make resolution-independent interfaces.''

=== Archived Concept Images ===

''These are Pre-SVG images are no longer relevant. They remain here for completeness and for design reference. The images below DO NOT reflect the current theme. If newer images in the above section lack something you prefer from this section, please suggest that it to go back in.''

[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.''



= Comments =
== Suggestions / Issues / Corrections ==
''Please post any issues, errors, general corrections or ideas in the "Ideas" wiki, link below.''

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

== Feedback ==

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. :)

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)

----

Updated images, the usual. I figure it will be user option to switch the panels out for the darker variations, however going 'by the spec' the thicker panels will be used in images and mockups. Thank you.

--Ken

----

I like the new screen shots that you put up, but I just noticed that in comparison to the image with 4 bar that the bar on this is darker than what the other ones look like. Just a personal thing I noticed and thought I could mention it.

-- Lmessenger [[DateTime(2007-11-28T05:58:03Z)]]

----

It looks like the transparent bars are darker; it's probably because I reduced the opacity of the "gloss" so that the background would more readily show through, I'll correct it. You should be able to see the updates when I upload the next round of images (Fri 30th Nov)

--Ken

----

There has been a delay; The new images will be postponed until tomorrow. Apologies.
--Ken

----

Sorry for the suspense on updates for this theme. After attending the art meeting and listening to the path the main OS is taking, I think there's room for this theme provided a few minor changes are made. Generally speaking, in the new look the gloss would be nixed, gradients would be positioned differently and it would overall have a more simple look-and-feel and really drive-home usability.

I already have several concepts on-the-go, but I'd like input before posting them here in this wiki. Should this theme be revamped (along with the spec) and have the current work go into a historic-reference section; Or should we keep this page as-it-is and create a new mini-wiki with a new spec? (I would no longer update this wiki, but every source and reference I have would be uploaded if others wanted to take over)

I really would like to go with a more streamlined look after carefully examining (literally) over hundreds of other themes and skins. BramPitoyo, this wouldn't quite be an amazing artistic thing, but the new concepts really seem to break away from that web2.0 look. And the spirit of the theme (sheer usability) would be strengthened.

Thoughts? Keep this wiki as-is and start anew, use this wiki as a base, or keep the theme as-is and keep going with it (posting the new art as concepts)?

--Ken. (Fri Dec 7th, 11:36pm: Pacific Time -8:00)


----

I think at in terms of design i have nothing to say, i just have to point that the gtk-clearlooks package which the ubuntu human theme is based on, seens rather limited for this. I would recommend using the the murrine engine, which uses the cairo engine, which is SVG Based, instead of the clearlooks ( http://murrine.netsons.org/ ). See the example of Xubuntu, it switched from tango clearlooks to murrinastormcloud, and the desktop is now more apealing and fast. If we want to implement these type of effects we should select the gtk-murrine for the base.
 -- racoqster

----

Finally! an update! Sorry for the lateness, I've had several delays recently.

Racoqster: I'll definitely be taking a good look at what Murrine can do, odds are if it's SVG-based it's what I'll be using when the time comes. Thank you!

-- Ken Vermette

----

Early update, as usual please post feedback in the ideas section! Later updates will depend on any changes, so I figured I'd post early before the hole is dug too deep.

 * Added dark "strips" where the gloss used to be in panels to create depth. Hopefully it's not too reminiscent of gloss.
 * Added a panel docked to the side of the screen. The same as a regular panel, except more transparent. Better for widget usage.
 * The brown will remain the same hue & saturation; After tinkering, nothing of notable difference looks better.
 * SHIFT will be updated when widgets are complete, widgets will arrive after a few days of feedback on the windows.
 * The ideas section from the main page is being moved to the ideas sub-section.

And I just want to say thanks to everyone for the participation in this project!
-Ken

= Media, Files & Images =

== Reference ==

== Contributions ==
Line 98: Line 308:
== Comments ==


== Attachment List ==
== Attachments ==
Line 104: Line 311:
----
----

[wiki:Artwork/Incoming/Hardy/Alternate/BasicIdeals Basic Ideals: Main]

[wiki:Artwork/Incoming/Hardy/Alternate/BasicIdeals/Ideas Ideas]

NEXT ART RELEASE:BRBetween Sun 16th Dec - Sat 22nd Dec

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.

Design

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.

OUT OF DATE: update planned for next week

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=~2px 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. To be revised.

Anchor(ConceptArt)

Latest Concept Images

Cutting-edge images: the latest uploads are displayed here

attachment:mockup(svg)_win1_1.jpg

  • The first example of what a windowframe might look like. Note that several widgets are missing. This particular mock-up shows a window without the toolbar.

attachment:mockup(svg)_win2_1.jpg

  • A second window mock-up; This shows a window with the toolbar. Note that several widgets are missing.

attachment:mockup(svg)_v2_2_w1.jpg

attachment:mockup(svg)_v2_2_shift.jpg

  • SHIFT concept: A blue version of this Ubuntu theme. This will be developed alongside the main theme. Named after the fact that it's pretty much just a Hue Shift.

Recent Concept Images

Recent images: not the latest, but still worth commenting on. If newer images in the above section lack something you prefer from this section, please suggest that it to go back in.

attachment:svgpanels_minidesktop_v2.jpg

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=svgpanels_minidesktop.jpg First-Version mockup]

  • A mini-rendition of a desktop using the theme following the spec. The bars below can be substituted in place of the thicker-outline (or will be able to be) by the end user; But this is what the theme might look like by default.

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=svgpanels_quartet.jpg Compiz Acceleration?]

  • 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.

[https://wiki.ubuntu.com/Artwork/Incoming/Hardy/Alternate/BasicIdeals?action=AttachFile&do=view&target=svgpanels_panelzoom.jpg Zoomed in Panel]

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

Archived Concept Images

These are Pre-SVG images are no longer relevant. They remain here for completeness and for design reference. The images below DO NOT reflect the current theme. If newer images in the above section lack something you prefer from this section, please suggest that it to go back in.

[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.

Comments

Suggestions / Issues / Corrections

Please post any issues, errors, general corrections or ideas in the "Ideas" wiki, link below.

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

Feedback

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)


Updated images, the usual. I figure it will be user option to switch the panels out for the darker variations, however going 'by the spec' the thicker panels will be used in images and mockups. Thank you.

--Ken


I like the new screen shots that you put up, but I just noticed that in comparison to the image with 4 bar that the bar on this is darker than what the other ones look like. Just a personal thing I noticed and thought I could mention it.

-- Lmessenger DateTime(2007-11-28T05:58:03Z)


It looks like the transparent bars are darker; it's probably because I reduced the opacity of the "gloss" so that the background would more readily show through, I'll correct it. You should be able to see the updates when I upload the next round of images (Fri 30th Nov)

--Ken


There has been a delay; The new images will be postponed until tomorrow. Apologies. --Ken


Sorry for the suspense on updates for this theme. After attending the art meeting and listening to the path the main OS is taking, I think there's room for this theme provided a few minor changes are made. Generally speaking, in the new look the gloss would be nixed, gradients would be positioned differently and it would overall have a more simple look-and-feel and really drive-home usability.

I already have several concepts on-the-go, but I'd like input before posting them here in this wiki. Should this theme be revamped (along with the spec) and have the current work go into a historic-reference section; Or should we keep this page as-it-is and create a new mini-wiki with a new spec? (I would no longer update this wiki, but every source and reference I have would be uploaded if others wanted to take over)

I really would like to go with a more streamlined look after carefully examining (literally) over hundreds of other themes and skins. BramPitoyo, this wouldn't quite be an amazing artistic thing, but the new concepts really seem to break away from that web2.0 look. And the spirit of the theme (sheer usability) would be strengthened.

Thoughts? Keep this wiki as-is and start anew, use this wiki as a base, or keep the theme as-is and keep going with it (posting the new art as concepts)?

--Ken. (Fri Dec 7th, 11:36pm: Pacific Time -8:00)


I think at in terms of design i have nothing to say, i just have to point that the gtk-clearlooks package which the ubuntu human theme is based on, seens rather limited for this. I would recommend using the the murrine engine, which uses the cairo engine, which is SVG Based, instead of the clearlooks ( http://murrine.netsons.org/ ). See the example of Xubuntu, it switched from tango clearlooks to murrinastormcloud, and the desktop is now more apealing and fast. If we want to implement these type of effects we should select the gtk-murrine for the base.

  • -- racoqster


Finally! an update! Sorry for the lateness, I've had several delays recently.

Racoqster: I'll definitely be taking a good look at what Murrine can do, odds are if it's SVG-based it's what I'll be using when the time comes. Thank you!

-- Ken Vermette


Early update, as usual please post feedback in the ideas section! Later updates will depend on any changes, so I figured I'd post early before the hole is dug too deep.

  • Added dark "strips" where the gloss used to be in panels to create depth. Hopefully it's not too reminiscent of gloss.
  • Added a panel docked to the side of the screen. The same as a regular panel, except more transparent. Better for widget usage.
  • The brown will remain the same hue & saturation; After tinkering, nothing of notable difference looks better.

  • SHIFT will be updated when widgets are complete, widgets will arrive after a few days of feedback on the windows.
  • The ideas section from the main page is being moved to the ideas sub-section.

And I just want to say thanks to everyone for the participation in this project! -Ken

Media, Files & Images

Reference

Contributions

[wiki:/?action=AttachFile Attach File]

Include(Artwork/Incoming/SubmissionGuidelines/Guidelines)

Attachments

AttachList


CategoryArtwork

Artwork/Incoming/Hardy/Alternate/BasicIdeals (last edited 2008-08-06 16:59:37 by localhost)