SoftwareCentreVisualDesign

Differences between revisions 1 and 7 (spanning 6 versions)
⇤ ← Revision 1 as of 2011-01-14 02:27:08 →
Size: 11287
Editor: 207
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 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||		 = Design 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 158: 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 163: 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 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_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 177: 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 182: 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 187: 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 192: 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 197: 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 202: 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 207: 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 212: 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 217: 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 222: 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 227: 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 232: 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>>

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)