SoftwareCentreVisualDesign

Differences between revisions 1 and 5 (spanning 4 versions)
Revision 1 as of 2011-01-14 02:27:08
Size: 11287
Editor: 207
Comment:
Revision 5 as of 2011-01-14 23:56:24
Size: 11097
Editor: 207
Comment:
Deletions are marked like this. Additions are marked like this.
Line 4: Line 4:
= Brief SoftwareCentreVisualDesign =

||<tablestyle="margin-left:20px;" style="border:none;">{{attachment:Art&Design/Document/WikiSiteImages/ArtDesign-TinyDotBright.png}}||<style="border:none;">Community:||<style="border:none;width:300px;">Software Centre||
||<style="border:none;">{{attachment:Art&Design/Document/WikiSiteImages/ArtDesign-TinyDotBright.png}}||<style="border:none;">Contact: ||<style="border:none;width:300px;">MatthewPaulThomas||
||<style="border:none;">{{attachment:Art&Design/Document/WikiSiteImages/ArtDesign-TinyDotBright.png}}||<style="border:none;">Posted:||<style="border:none;width:300px;">10 Dec 2010||
||<style="border:none;">{{attachment:Art&Design/Document/WikiSiteImages/ArtDesign-TinyDotBright.png}}||<style="border:none;">Due:||<style="border:none;width:300px;">24 Feb 2011||
||<style="border:none;">{{attachment:Art&Design/Document/WikiSiteImages/ArtDesign-TinyDotBright.png}}||<style="border:none;">Packages affected:||<style="border:none;width:300px;">software-center||
= Brief - Software Centre Visual Design =

||<tablestyle="margin-left:20px;" style="border:none;">{{attachment:ArtDesign-TinyDotBright.png}}||<style="border:none;">Community:||<style="border:none;width:300px;">Software Centre||
||<style="border:none;">{{attachment:ArtDesign-TinyDotBright.png}}||<style="border:none;">Contact: ||<style="border:none;width:300px;">MatthewPaulThomas||
||<style="border:none;">{{attachment:ArtDesign-TinyDotBright.png}}||<style="border:none;">Posted:||<style="border:none;width:300px;">10 Dec 2010||
||<style="border:none;">{{attachment:ArtDesign-TinyDotBright.png}}||<style="border:none;">Due:||<style="border:none;width:300px;">24 Feb 2011||
||<style="border:none;">{{attachment:ArtDesign-TinyDotBright.png}}||<style="border:none;">Packages affected:||<style="border:none;width:300px;">software-center||
Line 28: Line 28:
General '''General'''
Line 33: Line 33:
Specific '''Specific'''
Line 92: Line 92:
Line 94: Line 95:
It is assumed the content of "featured" and "what's new" will be themed like a department. It is also assumed the content of "featured" and "what's new" will be themed like a department.
Line 115: Line 116:
  * Shopping Market   * Market
Line 149: Line 150:
<<BR>>
Line 172: Line 171:
||<style="border:none;"> {{http://farm6.static.flickr.com/5041/5353420624_0423cba668.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5126/5353420628_07dec3bb7d_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5041/5353420624_637977877d_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||
||<style="border:none;"> {{http://farm6.static.flickr.com/5041/5353420624_5eeaf70d40.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5126/5353420628_530d591530_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5041/5353420624_704b5f3e8d_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||
Line 237: Line 236:

CategoryJohnBaer

Brief - Software Centre Visual Design

ArtDesign-TinyDotBright.png

Community:

Software Centre

ArtDesign-TinyDotBright.png

Contact:

MatthewPaulThomas

ArtDesign-TinyDotBright.png

Posted:

10 Dec 2010

ArtDesign-TinyDotBright.png

Due:

24 Feb 2011

ArtDesign-TinyDotBright.png

Packages affected:

software-center

Problem Statement

Ubuntu Software Centre ("USC") displays a home screen which permits the user to select from a list of thirteen departments. The current home screen is themed but this theming is not carried forwarded to the other departments.

Goal(s)

Create a theme which provides consistency between the home screen and departments with the desired outcome of improving the user experience.

Assumptions

Images will be displayed as a watermark and must not interfere with the content being displayed.

The Unity desktop and humanity icon themes will be used.

The total number of images to be designed will consist the following.

General

  1. Home
  2. What's new
  3. Featured


Specific

  1. Accessories
  2. Developer Tools
    • Debugging
    • Graphical Interface Designer
    • Haskell
    • IDE
    • Java
    • Libraries
    • LISP
    • Localization
    • Mono/CLI
    • OCaml
    • Perl
    • Profiling
    • Python
    • Ruby
    • Vision Control
    • Web Development
  3. Education
  4. Fonts
  5. Games
    • Arcade
    • Board Games
    • Card Games
    • Puzzles
    • Role Playing
    • Simulation
    • Sports
  6. Graphics
    • 3D
    • Drawing
    • Painting & Editing

    • Photography
    • Publishing
    • Scanning & OCR

    • Viewers
  7. Internet
    • Chat
    • File Sharing
    • Mail
    • Web Browsers
  8. Office
  9. Science & Engineering

    • Astronomy
    • Biology
    • Chemistry
    • Computer Science & Robotics

    • Electronics
    • Engineering
    • Geography
    • Geology
    • Mathematics
    • Physics
  10. System
  11. Sound & Video

  12. Themes & Tweaks

  13. Universal Access

It is assumed sub departments will be themed to the department they support. For example the "Astronomy" sub department of "Science and Engineering" will be themed as "Science and Engineering".

It is also assumed the content of "featured" and "what's new" will be themed like a department.

Design Considerations

The desired result should be subtle, not stealing attention from the items people can choose on each screen. Designs should be a single color which USC can then render as a pastel shade or can be used with a limited number of pastel colors.

The desired outcome should be adaptable, working just as well in a window that’s 2560 pixels wide as in one that’s 800 pixels wide. Maybe they should hug one corner of the window (like the clouds currently do), or maybe they should be designed to tile horizontally. Either way, probably they should be vectors rather than bitmaps.

Roles

  • Typical Ubuntu user

Desired message

Software Centre is:

  • Expansive
  • Easy
  • Valuable

Metaphors and associations:

  • Library
  • Market
  • Turn page
  • Sliding block puzzle

Constraints

  • Consistency in style.

If the design uses different styles, the look should be deliberately different. Refrain from drawing 2-px outlines in one illustration and 3-px outlines in the next.

Workflow

  • Create submissions for the home, featured, what's new screens and each of the other 13 departments.
  • Post mock ups for discussion.
  • Use the mailing list to facilitate design discussions.
  • Revised and update submissions as desired.
  • The successful candidate will be chosen by the Software Centre community.

Monogram Submission

General

The assets of the Monogram theme consist of a tinted background supplemented with a page mark which supports the "turn page" and "sliding block puzzle" metaphor/association and a monochrome version of the department icon (monogram).

The page mark and monogram are absent from the Home Page in order to support the "featured" and "what's new" banners.

Home

http://farm6.static.flickr.com/5288/5353480754_cdfea51d6c.jpg

Zoom


What's new

http://farm6.static.flickr.com/5123/5353467020_c91949cf74.jpg

Zoom


Featured

http://farm6.static.flickr.com/5088/5353467018_206ca5b4ed.jpg

Zoom


Departments

The following images are a mock up of the department pages with the department icon as it appears on the home page and the department page.

Accessories

http://farm6.static.flickr.com/5041/5353420624_5eeaf70d40.jpg

http://farm6.static.flickr.com/5126/5353420628_530d591530_o.png

Zoom Screen Shot

Icons


Developer Tools

http://farm6.static.flickr.com/5284/5353446880_1fdd0b9f39.jpg

http://farm6.static.flickr.com/5208/5353446882_35460e2ec2_o.png

Zoom Screen Shot

Icons


Education

http://farm6.static.flickr.com/5089/5353487832_1aa61b5cda.jpg

http://farm6.static.flickr.com/5124/5353487834_0d4e79b43e_o.png

Zoom Screen Shot

Icons


Fonts

http://farm6.static.flickr.com/5170/5353494884_8251188e8f.jpg

http://farm6.static.flickr.com/5242/5353494886_573c4d01a5_o.png

Zoom Screen Shot

Icons


Games

http://farm6.static.flickr.com/5203/5353501504_a8b105fe3c.jpg

http://farm6.static.flickr.com/5121/5353501510_ae03d37f22_o.png

Zoom Screen Shot

Icons


Graphics

http://farm6.static.flickr.com/5169/5352894663_31f463c408.jpg

http://farm6.static.flickr.com/5241/5352894673_269dfe12eb_o.png

Zoom Screen Shot

Icons


Internet

http://farm6.static.flickr.com/5008/5352901965_b4567dfb60.jpg

http://farm6.static.flickr.com/5043/5352901969_63801f7805_o.png

Zoom Screen Shot

Icons


Office

http://farm6.static.flickr.com/5010/5352906811_5a6917c9a4.jpg

http://farm6.static.flickr.com/5006/5352906815_83e54ba8c4_o.png

Zoom Screen Shot

Icons


Science & Engineering

http://farm6.static.flickr.com/5008/5353525618_c7d6d47628.jpg

http://farm6.static.flickr.com/5202/5353525626_e25621eb55_o.png

Zoom Screen Shot

Icons


Sound & Video

http://farm6.static.flickr.com/5204/5353532816_790460e1be.jpg

http://farm6.static.flickr.com/5202/5353532818_5f8ace21ab_o.png

Zoom Screen Shot

Icons


System

http://farm6.static.flickr.com/5048/5353537190_eb784bf074.jpg

http://farm6.static.flickr.com/5002/5353537198_06cbb58548_o.png

Zoom Screen Shot

Icons


Themes & Tweaks

http://farm6.static.flickr.com/5087/5353543332_d2f43d482d.jpg

http://farm6.static.flickr.com/5241/5353543338_98bf71a795_o.png

Zoom Screen Shot

Icons


Universal Access

http://farm6.static.flickr.com/5241/5353548976_c08da4cf68.jpg

http://farm6.static.flickr.com/5210/5353548978_2fd2c6af3e_o.png

Zoom Screen Shot

Icons



JohnBaer/SoftwareCentreVisualDesign (last edited 2011-01-16 15:03:31 by 207)