Kick Ass Stylin' Tips
-
Upload
university-of-calgary-school-of-creative-and-performing-arts -
Category
Design
-
view
762 -
download
0
Transcript of Kick Ass Stylin' Tips
![Page 1: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/1.jpg)
20 Rules for Good DesignKick-ass styling tips
From Samara, Design Element: A Graphic Style Manual
![Page 2: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/2.jpg)
![Page 3: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/3.jpg)
Leonardo da Vinci
Concept of Flight Concept of Feminine Beauty
Fine Art
![Page 4: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/4.jpg)
Coco Chanel sketch
Commercial Art
![Page 5: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/5.jpg)
Web Interface Design!!
http://amusement-construction.com/
mini.htm
Example provided by
Luke!
![Page 6: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/6.jpg)
![Page 7: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/7.jpg)
“Form Carries Meaning.”Cubism 1908-11: instead of depicting objects from one viewpoint,
Braque and Picasso depicted their subject from a multitude of viewpoints to represent the subject in a greater context.
Fine Art
![Page 8: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/8.jpg)
The Bauhaus
The design innovations commonly associated with Walter Gropius and the Bauhaus - the radically simplified forms, the rationality and functionality
Graphic Art
![Page 9: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/9.jpg)
Web Interface Design!!
http://www.ohhcrapp.net/Examples provided by
Aaron!
![Page 10: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/10.jpg)
![Page 11: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/11.jpg)
Good design + aesthetics assumes that the visual language of the piece -- its internal logic -- is resolved to address all its parts so they
reinforce, restate and reference each other.
Fine Art
![Page 12: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/12.jpg)
Ad “Campaigns”
Integration and consistency in ad campaigns helps promote a consistent design message across media and across platforms.
Graphic Art
![Page 13: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/13.jpg)
Web Interface Design!!
http://www.volkswagen.com/vwcms/international_portal/
virtualmaster/en.htmlExample provided by
Bree!
![Page 14: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/14.jpg)
![Page 15: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/15.jpg)
Graphic Art
![Page 16: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/16.jpg)
Graphic Art
![Page 17: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/17.jpg)
Web Interface Design!!
http://www.mtv.comExample-ish provided
byBen!
![Page 18: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/18.jpg)
![Page 19: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/19.jpg)
Focus the viewer’s attention on one important thing first and then lead them through the rest.
Fine Art
![Page 20: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/20.jpg)
Emphasis
Emphasis is the idea that some things are more important than others. Must establish a focal point and a visual heirarchy.
Graphic Art
![Page 21: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/21.jpg)
![Page 22: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/22.jpg)
Know what colours might mean to your audience.
Fine Art
![Page 23: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/23.jpg)
Logo design
Colour carries an abundance of psychological and emotional meaning.
Graphic Art
![Page 24: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/24.jpg)
![Page 25: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/25.jpg)
Malevich: The more stuff jammed into a given space, the harder it is to see what we’re supposed to be seeing.
Fine Art
![Page 26: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/26.jpg)
Graphic Art
![Page 27: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/27.jpg)
![Page 28: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/28.jpg)
Hitchcock: Space calls attention to imminent narrative action.
Film Mise En Scene
![Page 29: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/29.jpg)
Graphic Art
![Page 30: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/30.jpg)
Web Interface Design!!
www.commarts.comExample provided
byAdam!
![Page 31: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/31.jpg)
![Page 32: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/32.jpg)
Type needs to relate compositionally to everything else in the design.
![Page 33: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/33.jpg)
![Page 34: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/34.jpg)
Web Interface Design??
http://www.indianpad.com/pics/230587/pictures-
made-of-text/Example-ish provided
byKyle!
![Page 35: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/35.jpg)
![Page 36: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/36.jpg)
Type must still transmit information.
Graphic Art
![Page 37: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/37.jpg)
Web Interface Design??
or can be Web “Art.”
THISExample-ish provided
bySavanna!
![Page 38: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/38.jpg)
![Page 39: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/39.jpg)
Graphic design comes
with an agenda.
![Page 40: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/40.jpg)
![Page 41: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/41.jpg)
![Page 42: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/42.jpg)
Create contrasts in density
and rhythm.
Give spaces
between things a pulse.
![Page 43: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/43.jpg)
Create contrasts in density
and rhythm.
Give spaces
between things a pulse.
![Page 44: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/44.jpg)
Web Interface Design??
ThisExample-ish provided by
Brianna!
![Page 45: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/45.jpg)
![Page 46: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/46.jpg)
![Page 47: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/47.jpg)
![Page 48: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/48.jpg)
Web Interface Design??
http://vandelaydesign.com/blog/design/photoshop-lighting-effects/
Example-ish provided bySavanna!
![Page 49: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/49.jpg)
![Page 50: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/50.jpg)
A great deal of the process of understanding visual material is the ability to distinguish the difference between things.
![Page 51: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/51.jpg)
![Page 52: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/52.jpg)
Designers need to perceive the visual presence — weight, texture, movement, angularity, transparency, contour.
![Page 53: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/53.jpg)
Web Interface Design??
Example-ish provided by
Marissa!
![Page 54: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/54.jpg)
![Page 55: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/55.jpg)
Make what you need or
pay someone else to make
original artwork for
you.
![Page 56: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/56.jpg)
Web Interface Design??
ThisExample-ish provided
byBrianna!
![Page 57: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/57.jpg)
![Page 58: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/58.jpg)
Design and style a project
around the meaning, not
the audience’s
expectations of current stylistic conceits.
![Page 59: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/59.jpg)
Web Interface Design!!
h"p://www.future‐farm.com/Example
provided byAngela!
![Page 60: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/60.jpg)
![Page 61: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/61.jpg)
Designers have to work hard to give 2 dimensional surfaces the sense of movement.
![Page 62: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/62.jpg)
Web Interface Design??
Example-ish provided by
Shannon!
![Page 63: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/63.jpg)
![Page 64: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/64.jpg)
Learn from the work of others but give it your own spin.
![Page 65: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/65.jpg)
![Page 66: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/66.jpg)
Web Interface Design!!
h"p://www.thebeatlesrockband.com/
videos/tvcommercial
Example provided byNathan!
![Page 67: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/67.jpg)
![Page 68: Kick Ass Stylin' Tips](https://reader035.fdocuments.in/reader035/viewer/2022081504/55a4b34d1a28ab14478b470d/html5/thumbnails/68.jpg)
Symmetrical presentations are often static and offer little movement.