Basic Ideals: Main

Ideas

NEXT ART RELEASE:
To Be Announced

Basic Ideals

A message to incoming readers

I've just found out that several sites are promoting the rumor that this is the 8.04 theme, or are at least alluding to the idea that this is said theme in progress. I apologize for any confusion, and I'm sorry to say that this is not planned to be the next Ubuntu theme. It has been passed it up to the art team, and there's a lot of work ahead for this theme.

If you are visiting and you do have ideas or suggestions, please post them here! There's an entire sub-wiki just for your input! From "edible" to "post-eaten" the mixed reactions say this theme can be improved; a list of improvements are being gathered from various comments sections - but please post and encourage posting in the ideas section to make sure comments & suggestions aren't skipped!

Current theme rendition (3.3)

Basic Ideals aims to be 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.

fulldesk(svg)_v3_3.jpg

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.

General Rules

In addition to this list, there is an explanation on each of some of these rules within the different sections as well.

Chrome

Chrome contains every major widgets and piece of content users will interact with. Think like some mixing board you'd see in a sound studio.

Panels

Panels are both the most persistent, and customizable parts of the interface. You set up panels your way and they are omnipresent, they are the ultimate part of user customization

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.

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.


This spec is subject to change

Media

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

Palette

The Pallet

Version 3.3 Updates

Mockup Image

This set of updates addresses issues with low-contrast elements and decreases the overall level of brown. Also, this theme includes some Widgets - however the widgets are far from complete.

Colour:

Surface Fills

Misc Changes

Version 3.2 Updates

Mockup Image

This set of updates addresses several other requests across the web, and moves the brown on the theme back to a slightly lighter colour. Colours on this theme are no longer negotable - not everyone can be satisfied. Alternate colour combinations once the main theme is complete.

Colour:

Surface Fills

Misc Changes

Version 3.1 Updates

Mockup Image

This set of updates is largely in response to comments sections from websites reporting on this theme. If your suggestion has not been addressed, please post in the ideas section

Changes Made:

Colour:

Surface Fills

Misc Changes

SHIFT Theme

Requests not included:

Variations in consideration:

Version 3 Updates

Find a list of updates below the images.

mockup(svg)_v3_2.jpg

mockup(svg)_v3_2b.jpg

mockup(svg)_shift_v3_2.jpg

mockup(svg)_shift_v3_2b.jpg

Version 2 Updates

Cutting-edge images: the latest uploads are displayed here

mockup(svg)_win1_1.jpg

mockup(svg)_win2_1.jpg

mockup(svg)_v2_2_w1.jpg

mockup(svg)_v2_2_shift.jpg

Version 1 Updates

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.

svgpanels_minidesktop_v2.jpg

First-Version mockup

Compiz Acceleration?

Zoomed in Panel

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.

(Pre-SVG series) Compiz-enabled Panel

(Pre-SVG series) Dropdown Example

(Pre-SVG series) Mockup of alternate wallpapers

Comments

Suggestions / Requests no longer considered

After several updates to the theme, several requests are surfacing that would regress to the styles of previous versions. At this point, some portions on the theme have officially hit the "Happy Medium", to the point where any changes would just have suggestions to be reversed. Further changes to the listed below will either need to be applied personally, or at the authors lone discretion.

Suggestions / Issues / Corrections

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

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 2007-11-20 02:16:45


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 2007-11-28 05:58:03


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.


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.

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


Well, this IS a nice job. However, Ubuntu is said to be heading towards black and orange. So, maybe replacing chocolate by some black, mat (in french, I don't know what the right word in english is for "non-glossy") tint. Could you try it and post a quick mockup? I really LOVE the theme (except for its shitf variation, green doesn't match blue very well... even if it's original). Keep up with the theme, we're waiting for a real release, now Wink ;-) -Nico


Hello Nico! I'm going to be creating a second sub-wiki with alternate colour combonations once the primary theme is solidified. Orange and Black is in demand, so one of the alt-themes will be orange and black. Below is actually a list of sub-themes I'm considering, and what will probably be their names:

Thanks you.


I think this theme looks really, really good. Personally, I like it better than your other theme, Union. I justed wanted to mention that the buttons you created for the 3.3 mockup look a lot better than the ones that were used before, the sort of general ones (I mean e.g. the + instead of the square for maximizing)

I also looked through some people's blogs, and I found that people would really like to see this theme have a blue brother (but you seem to be preparing for that Smile :) )

This is the theme that will attract many new users! Keep up the good work!!

-Gwijde


Hey Ken,

Sorry to have been neglecting this forum for almost a month. Yes, seems like all the UIs are heading toward flatter appearances (vs. plasticky/transparent.) But don't throw all those rounded corners yet.

Right now, What I liked the most about your theme is its subtle touches, like how you did the active menu selection (inverted rounded corners and 1 px white 'strips' on the top and bottom), the Tooltip (downward arrow) and the menu separator (the white 'strips' seen between 'Search for Files and 'Recent[ly] Opened Files'.)

The window transparency and the borders could be good, but I think that you should figure out a way to reduce them to a minimum. For instance, I would try decreasing the overall opacity even further and see if the design can still work.

The last thing that I would suggest is playing around with the Minimize, Maximize and Close button. Your idea is unique (separation between Minimize–Maximize and Close) but the gradient doesn't look quite 'right.'

Overall, I think that you're taking the right step forward in improving usability and steering away from Web 2.0 fad by reducing gloss and emphasizing subtle gradients. Keep it moving, and best of luck!

-BramPitoyo


Great Work so far, I hope we get something that looks this good. I just wanted to say, keep some gloss. too flat and it starts to look outdated, too glossy and it hurts to look at.

Finally, I have a question, I understand these are mock-ups, but are they currently possible? (I mean the transparency on the menus and such) or will there need to be a lot of heavy programing work to get here?

-AG


Hi there,

I was just thinking, shouldn't we move this idea (+Union) to the Intrepid Ibex Artwork wiki? I mean,seeing as Hardy's been released, I think we should:

https://wiki.ubuntu.com/Artwork/Incoming/Intrepid

Gwijde


Media, Files & Images

Reference

Contributions

Attach File

Guidelines

  • For images, use a low resolution picture in the wiki page. It should be no taller than 240 pixels. If you need to upload higher resolutions, please upload them as an attachment and link to them from the page.
  • Use @SIG@ to leave your signature at the end of your comment. New comments should be placed at the bottom of the feedback.

Attachments

  • [get | view] (2007-12-18 02:06:01, 217.4 KB) [[attachment:fulldesk(svg)_v3_1.jpg]]
  • [get | view] (2007-12-18 02:06:13, 304.4 KB) [[attachment:fulldesk(svg)_v3_1_svgsource.svg]]
  • [get | view] (2007-12-18 02:06:53, 1149.5 KB) [[attachment:fulldesk(svg)_v3_1_xcfsource.xcf]]
  • [get | view] (2007-12-19 06:48:37, 201.7 KB) [[attachment:fulldesk(svg)_v3_2.jpg]]
  • [get | view] (2007-12-19 06:49:27, 409.4 KB) [[attachment:fulldesk(svg)_v3_2_svgsource.svg]]
  • [get | view] (2007-12-19 06:49:10, 1160.9 KB) [[attachment:fulldesk(svg)_v3_2_xcfsource.xcf]]
  • [get | view] (2007-12-21 03:17:12, 265.0 KB) [[attachment:fulldesk(svg)_v3_3.jpg]]
  • [get | view] (2007-12-21 03:14:54, 531.9 KB) [[attachment:fulldesk(svg)_v3_3_svgsource.svg]]
  • [get | view] (2007-12-21 03:15:07, 265.0 KB) [[attachment:fulldesk(svg)_v3_3_xcfsource.jpg]]
  • [get | view] (2007-12-21 03:15:46, 2194.8 KB) [[attachment:fulldesk(svg)_v3_3_xcfsource.xcf]]
  • [get | view] (2007-11-30 00:47:27, 95.2 KB) [[attachment:minidesktop_v2_w1.jpg]]
  • [get | view] (2007-11-30 00:47:37, 113.0 KB) [[attachment:minidesktop_v2_w2.jpg]]
  • [get | view] (2007-11-30 00:47:51, 84.1 KB) [[attachment:minidesktop_v2_w3.jpg]]
  • [get | view] (2007-11-30 00:48:03, 111.0 KB) [[attachment:minidesktop_v2_w4.jpg]]
  • [get | view] (2007-12-17 07:06:43, 112.1 KB) [[attachment:mockup(svg)_shift_v3_2.jpg]]
  • [get | view] (2007-12-17 07:06:55, 107.4 KB) [[attachment:mockup(svg)_shift_v3_2b.jpg]]
  • [get | view] (2007-12-14 10:21:17, 115.0 KB) [[attachment:mockup(svg)_v2_2_shift.jpg]]
  • [get | view] (2007-12-14 10:21:27, 92.7 KB) [[attachment:mockup(svg)_v2_2_w1.jpg]]
  • [get | view] (2007-12-14 10:21:35, 116.6 KB) [[attachment:mockup(svg)_v2_2_w2.jpg]]
  • [get | view] (2007-12-14 10:21:44, 106.3 KB) [[attachment:mockup(svg)_v2_2_w3.jpg]]
  • [get | view] (2007-12-14 10:21:55, 108.0 KB) [[attachment:mockup(svg)_v2_2_w4.jpg]]
  • [get | view] (2007-12-14 10:22:03, 91.9 KB) [[attachment:mockup(svg)_v2_2_w5.jpg]]
  • [get | view] (2007-12-14 10:22:11, 115.5 KB) [[attachment:mockup(svg)_v2_2_w6.jpg]]
  • [get | view] (2007-12-14 10:22:19, 85.7 KB) [[attachment:mockup(svg)_v2_2_w7.jpg]]
  • [get | view] (2007-12-17 07:06:22, 106.4 KB) [[attachment:mockup(svg)_v3_2.jpg]]
  • [get | view] (2007-12-17 07:06:31, 103.3 KB) [[attachment:mockup(svg)_v3_2b.jpg]]
  • [get | view] (2007-12-15 04:44:36, 55.4 KB) [[attachment:mockup(svg)_win1_1.jpg]]
  • [get | view] (2007-12-15 04:44:45, 80.4 KB) [[attachment:mockup(svg)_win2_1.jpg]]
  • [get | view] (2007-11-23 02:24:46, 238.9 KB) [[attachment:mockup_Panels_dropdown.jpg]]
  • [get | view] (2007-11-23 02:56:58, 149.9 KB) [[attachment:mockup_alt_papers.jpg]]
  • [get | view] (2007-11-23 00:36:04, 190.4 KB) [[attachment:mockup_panels.jpg]]
  • [get | view] (2007-11-18 04:03:31, 30.3 KB) [[attachment:pallet.jpg]]
  • [get | view] (2007-11-27 09:59:04, 234.9 KB) [[attachment:svgpanels.svg]]
  • [get | view] (2007-11-28 05:10:21, 125.9 KB) [[attachment:svgpanels_minidesktop.jpg]]
  • [get | view] (2007-11-29 23:52:11, 120.8 KB) [[attachment:svgpanels_minidesktop_v2.jpg]]
  • [get | view] (2007-11-27 09:33:21, 88.7 KB) [[attachment:svgpanels_panelzoom.jpg]]
  • [get | view] (2007-11-27 09:32:45, 118.7 KB) [[attachment:svgpanels_quartet.jpg]]
 All files | Selected Files: delete move to page


CategoryArtwork

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