Guidelines & More Ubuntu Optimizations. (#91)

* Visually centered a few icons, some new paths and optimizations.

Apple - Visually centered and change the path to more a accurate one.
Bytes: 1011 —> 580.

Dropbox - Visually centered and change the path to fix point alignment.
Bytes: 338 —> 350.

Twitter - Visually centered.
Bytes: 425 —> 431.

Ubuntu - Visually centered and change the path and color to a more
accurate one.
Bytes: 755 —> 674.

Vimeo - Visually centered.
Bytes: 375 —> 379.

WhatsApp - Visually centered and change the path and color to more a
accurate one.
Bytes: 646 —> 611.

Windows - Visually centered and change the path to fix the lines
between shapes.
Bytes: 274 —> 284.

Hope this helps.

FYI: Wikicommons have good SVG shapes and most companies have brand
guidelines with accurate logo renditions and colors.

* Removed newlines, fixed Ubuntu color and updated ReadMe and Twitter PNG.

* Twitter PNG Artifacts Fix.

* Optimizations and new color palettes.

Apple - New color palette that better represents the brand, and tiny
bit smaller.

Ubuntu - I keep finding ways to make this one smaller.

Wikipedia - New color palette that better represents the brand, and bit
smaller.

* Update

* Update drama

* Solving conflicts

* Solved conflicts.

* Optimizations and new color palettes

Apple - New color palette that better represents the brand, and tiny
bit smaller.

Ubuntu - I keep finding ways to make this one smaller.

Wikipedia - New color palette that better represents the brand, and bit
smaller.

* More Ubuntu optimizations.

Learning SVG as we go.

* Revert "More Ubuntu optimizations."

This reverts commit 74c1a45959.

* More Ubuntu Optimizations.

* Guidelines Folder.

* Guidelines.

Added guidelines with instructions.

* Revert "Guidelines."

This reverts commit eb30dfe163.

* Revert "Revert "Guidelines.""

This reverts commit 76edce25ec.

* Removed guidelines for small squares.
This commit is contained in:
Arturo Acevedo
2017-12-01 03:21:32 -06:00
committed by Terence Eden
parent 8cc3d9f643
commit 4a26edb2c3
4 changed files with 24 additions and 1 deletions

4
.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
images/svg/guidelines.svg
images/svg/guidelines for small sizes.svg

View File

@@ -0,0 +1,13 @@
# Guidelines
This is the standard guideline. It helps with sizing for both square and circle icons, so they would look good no matter what border radius is chosen.
* **Green** is the safe zone, where the main body of the icon should be.
* **Yellow** is like a road shoulder, it's there if more space is needed. It should be used for protruding elements, like corners or ornaments.
* **Red** is off limits. It should not be touched by the icons. Red is also how a circular icon would look.
——
Needless to say, these are just guides. If they don't accommodate a certain shape, then they shouldn't be followed strictly.

6
guidelines/guideline.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-label="Guidelines" role="img">
<rect fill="#222" height="512" rx="15%" width="512"/>
<rect fill="#ff3f32" height="512" rx="50%" width="512"/>
<rect fill="#ffd900" height="435" rx="50%" width="435" x="39" y="39"/>
<rect fill="#4cd966" height="384" rx="50%" width="384" x="64" y="64"/>
</svg>

After

Width:  |  Height:  |  Size: 361 B

View File

@@ -1 +1 @@
<svg fill="#e65e17" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-label="Ubuntu" role="img"><rect height="512" rx="15%" width="512"/><circle cx="263" cy="256" fill="#fff" r="158"/><circle cx="263" cy="256" r="104"/><circle cx="79" cy="257" r="50"/><circle cx="79" cy="257" fill="#fff" r="38"/><circle cx="356" cy="417" r="50"/><circle cx="356" cy="417" fill="#fff" r="38"/><circle cx="356" cy="96" r="50"/><circle cx="356" cy="96" fill="#fff" r="38"/><path d="M427 266v-20h-64v20zM173 392l18 10 32-55-18-10zm18-283l-18 11 32 55 18-10z"/></svg>
<svg fill="#e65e17" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-label="Ubuntu" role="img"><rect height="512" rx="15%" width="512"/><circle cx="263" cy="256" fill="#fff" r="158"/><circle cx="263" cy="256" r="104"/><circle cx="79" cy="257" r="50"/><circle cx="356" cy="417" r="50"/><circle cx="356" cy="96" r="50"/><g fill="#fff"><circle cx="356" cy="96" r="38"/><circle cx="356" cy="417" r="38"/><circle cx="79" cy="257" r="38"/></g><path d="M427 266v-20h-64v20zM173 392l18 10 32-55-18-10zm18-283l-18 11 32 55 18-10z"/></svg>

Before

Width:  |  Height:  |  Size: 559 B

After

Width:  |  Height:  |  Size: 542 B