Wednesday, November 17, 2010

TOPICS• About me: Why graphic (and/or web) design?

• My education & career path (so far)

• Love/hate about web design

• Applying design principles to web design

• The tools I use

• My work today

Wednesday, November 17, 2010

ABOUT ME• How I stumbled upon design

• Howstuffworks.com, Word Art, MS Frontpage

Wednesday, November 17, 2010

Wednesday, November 17, 2010

ABOUT ME• Internships in high school

• I enjoy making things that people use

• Learning, tinkering etc

Wednesday, November 17, 2010

EDUCATION• Computer Science Major

• Sketching

• Critique & Discussion

• Develop a thick skin

• Projects are never finished

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

• 3 Internships

• UBS, iMed Studios, UBS

• REAL work in my portfolio!

INTERNSHIPS

Wednesday, November 17, 2010

Wednesday, November 17, 2010

INTERNSHIPS

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

MY CAREER

• Types of jobs: in house, small agency

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

MY CAREER• Blogging, video tutorials, networking, twitter

• Freelancing, podcasting

• Speaking (eek!) at conferences

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

I HATE WEB DESIGN

• Instant gratification

• Fixing mistakes

• Anyone can see what you do!

• Tinkering - nothing is ever finished

• Cross Browser Testing

Wednesday, November 17, 2010

• Instant gratification

• Fixing mistakes

• Anyone can see what you do!

• Tinkering - nothing is ever finished

• Apply design knowledge and take it further

I LOVE WEB DESIGN

Wednesday, November 17, 2010

APPLYING DESIGN PRINCIPLES TO THE WEB

• Typography

• Visual Hierarchy

• Grids

• Color

Wednesday, November 17, 2010

TYPOGRAPHY• Readability, dark text light background

• Line length

• kerning, tracking, leading

• Letter-spacing, line-spacing, word-spacing

• Photoshop type vs real web type

Wednesday, November 17, 2010

Wednesday, November 17, 2010

TYPOGRAPHY• Web Safe Fonts

• Arial, Georgia, Times, Verdana etc

• @font-face, Cufon, Images

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

• webfontspecimen.com

• blog.typekit.com/2010/10/05/type-rendering-on-the-web

• daverupert.com/2010/09/lettering-js

• Elements of Typographic Style

TYPOGRAPHYRESOURCES

Wednesday, November 17, 2010

VISUAL HIERARCHY• Directing the users eye around the page

• Call to action - what do you want the user to do? To click on?

• F & Z shaped pattern

Wednesday, November 17, 2010

Wednesday, November 17, 2010

VISUAL HIERARCHY• Size, color, placement, whitespace

• Interaction, animation, transparency

Wednesday, November 17, 2010

Wednesday, November 17, 2010

GRID SYSTEMS• 960 Grid system

• cssgrid.net

• @media queries

• max-min screen size

• Other grid types

 

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

GRID RESOURCES• 960.gs

• cssgrid.net

• alistapart.com/articles/responsive-web-design

• Making and Breaking the Grid

Wednesday, November 17, 2010

COLOR• Contrast, text on color, legibility

• Color for visually impaired, colorblind etc

• Hex color codes #ffffff

• RGBa color codes color: rgba (255, 0, 0, .2)

• ‘A’ stands for alpha transparency

Wednesday, November 17, 2010

Wednesday, November 17, 2010

COLOR• RGB color gamut

Wednesday, November 17, 2010

Wednesday, November 17, 2010

MY TOOLBOX

Wednesday, November 17, 2010

HTML

Wednesday, November 17, 2010

CSS

Wednesday, November 17, 2010

PHP

Wednesday, November 17, 2010

jQuery

Wednesday, November 17, 2010

MY FREELANCE WORK• Print design, illustration

• Logo design, web design

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

Wednesday, November 17, 2010

QUESTIONS?

? ??

? ??

?

?

? ??

?

?

?

Wednesday, November 17, 2010

THANK YOU!• NikiBrown.com

• hi@nikibrown.com

• @Nikibrown

• Please rate my talk at http://nikib.ro/wn/2p

Wednesday, November 17, 2010