SoftwareCentreVisualDesign

Differences between revisions 3 and 7 (spanning 4 versions)
⇤ ← Revision 3 as of 2011-01-14 12:41:00 →
Size: 11129
Editor: 136
Comment:
← Revision 7 as of 2011-01-16 15:03:31 → ⇥
Size: 11007
Editor: 207
Comment:
Deletions are marked like this. Additions are marked like this.
Line 4: Line 4:
= Brief Software Centre Visual Design = = Design Brief - Software Centre Visual Design =
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 156: Line 157:
||<style="border:none;"> {{http://farm6.static.flickr.com/5123/5353467020_c91949cf74.jpg}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5123/5353467020_b3e0b1e45f_o.png|Zoom]] ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5123/5353467020_4e0b88df80.jpg}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5123/5353467020_5844ec7faa_o.png|Zoom]] ||
Line 161: Line 162:
||<style="border:none;"> {{http://farm6.static.flickr.com/5088/5353467018_206ca5b4ed.jpg}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5088/5353467018_5361d5a0c4_o.png|Zoom]] ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5088/5353467018_e30638b5b8.jpg}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5088/5353467018_b9b956db1e_o.png|Zoom]] ||
Line 170: Line 171:
||<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 ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5041/5353420624_d1dae012d8.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5126/5353420628_530d591530_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5041/5353420624_ba919ef9be_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 175: Line 176:
||<style="border:none;"> {{http://farm6.static.flickr.com/5284/5353446880_1fdd0b9f39.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5208/5353446882_35460e2ec2_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5284/5353446880_f0934d58da_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5284/5353446880_e26a1e2b36.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5208/5353446882_35460e2ec2_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5284/5353446880_d0590f1a77_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 180: Line 181:
||<style="border:none;"> {{http://farm6.static.flickr.com/5089/5353487832_1aa61b5cda.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5124/5353487834_0d4e79b43e_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5089/5353487832_419ca8cb24_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5089/5353487832_ee1441a84a.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5124/5353487834_0d4e79b43e_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5089/5353487832_6ff86d6254_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 185: Line 186:
||<style="border:none;"> {{http://farm6.static.flickr.com/5170/5353494884_8251188e8f.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5242/5353494886_573c4d01a5_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5170/5353494884_c4f6d8ae58_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5170/5353494884_a346209922.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5242/5353494886_573c4d01a5_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5170/5353494884_079e90233a_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 190: Line 191:
||<style="border:none;"> {{http://farm6.static.flickr.com/5203/5353501504_a8b105fe3c.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5121/5353501510_ae03d37f22_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5203/5353501504_ac4450e00d_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5203/5353501504_d4aa58620e.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5121/5353501510_ae03d37f22_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5203/5353501504_377ef706cd_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 195: Line 196:
||<style="border:none;"> {{http://farm6.static.flickr.com/5169/5352894663_31f463c408.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5241/5352894673_269dfe12eb_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5169/5352894663_dbae01217f_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5169/5352894663_2da9be2cbc.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5241/5352894673_269dfe12eb_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5169/5352894663_3f5c07b165_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 200: Line 201:
||<style="border:none;"> {{http://farm6.static.flickr.com/5008/5352901965_b4567dfb60.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5043/5352901969_63801f7805_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5008/5352901965_b815dc782d_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5008/5352901965_ea5790a68c.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5043/5352901969_63801f7805_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5008/5352901965_29589ea8da_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 205: Line 206:
||<style="border:none;"> {{http://farm6.static.flickr.com/5010/5352906811_5a6917c9a4.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5006/5352906815_83e54ba8c4_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5010/5352906811_b9387ab1e8_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5010/5352906811_48823ebe7c.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5006/5352906815_83e54ba8c4_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5010/5352906811_f608d371ea_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 210: Line 211:
||<style="border:none;"> {{http://farm6.static.flickr.com/5008/5353525618_c7d6d47628.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5202/5353525626_e25621eb55_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5008/5353525618_1890e3a68b_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5008/5353525618_0e84fd73fe.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5202/5353525626_e25621eb55_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5008/5353525618_e286a09144_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 215: Line 216:
||<style="border:none;"> {{http://farm6.static.flickr.com/5204/5353532816_790460e1be.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5202/5353532818_5f8ace21ab_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5204/5353532816_1bc8dc1b10_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5204/5353532816_81d6fa1c87.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5202/5353532818_5f8ace21ab_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5204/5353532816_519b7fb321_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 220: Line 221:
||<style="border:none;"> {{http://farm6.static.flickr.com/5048/5353537190_eb784bf074.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5002/5353537198_06cbb58548_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5048/5353537190_911d30fb51_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5048/5353537190_2cb07c2317.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5002/5353537198_06cbb58548_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5048/5353537190_72f19a6231_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 225: Line 226:
||<style="border:none;"> {{http://farm6.static.flickr.com/5087/5353543332_d2f43d482d.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5241/5353543338_98bf71a795_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5087/5353543332_bd89630f4c_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5087/5353543332_cb224f6b7d.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5241/5353543338_98bf71a795_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5087/5353543332_e4a47f8f52_o.png|Zoom]] ||<style="border:none;":> Icons ||
Line 230: Line 231:
||<style="border:none;"> {{http://farm6.static.flickr.com/5241/5353548976_c08da4cf68.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5210/5353548978_2fd2c6af3e_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5241/5353548976_5eb232d1ef_o.png|Zoom]] Screen Shot ||<style="border:none;":> Icons ||
<<BR>>		 ||<style="border:none;"> {{http://farm6.static.flickr.com/5241/5353548976_6f1cc07b9b.jpg}} ||<style="border:none;"> {{http://farm6.static.flickr.com/5210/5353548978_2fd2c6af3e_o.png}} ||
||<style="border:none;":> [[http://farm6.static.flickr.com/5241/5353548976_69385e0702_o.png|Zoom]] ||<style="border:none;":> Icons ||
<<BR>>

== Attachments ==

<<AttachList>>
Line 236: Line 241:
CategoryArtDesign CategoryArtDesignBrief CategoryJohnBaer

Design 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_4e0b88df80.jpg

Zoom


Featured

http://farm6.static.flickr.com/5088/5353467018_e30638b5b8.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_d1dae012d8.jpg

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

Zoom

Icons


Developer Tools

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

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

Zoom

Icons


Education

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

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

Zoom

Icons


Fonts

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

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

Zoom

Icons


Games

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

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

Zoom

Icons


Graphics

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

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

Zoom

Icons


Internet

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

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

Zoom

Icons


Office

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

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

Zoom

Icons


Science & Engineering

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

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

Zoom

Icons


Sound & Video

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

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

Zoom

Icons


System

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

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

Zoom

Icons


Themes & Tweaks

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

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

Zoom

Icons


Universal Access

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

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

Zoom

Icons


Attachments

  • [get | view] (2011-01-14 12:39:46, 0.2 KB) [[attachment:ArtDesign-TinyDotBright.png]]
  • [get | view] (2011-01-16 14:54:59, 447.2 KB) [[attachment:SoftwareCentre_110116.tar.gz]]
 All files | Selected Files: delete move to page

CategoryJohnBaer

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