Syracuse symposium11-17-2010

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


ABOUT ME• How I stumbled upon design

• Howstuffworks.com, Word Art, MS Frontpage


ABOUT ME• Internships in high school

• I enjoy making things that people use

• Learning, tinkering etc


EDUCATION• Computer Science Major

• Sketching

• Critique & Discussion

• Develop a thick skin

• Projects are never finished


• 3 Internships

• UBS, iMed Studios, UBS

• REAL work in my portfolio!

INTERNSHIPS


INTERNSHIPS


MY CAREER

• Types of jobs: in house, small agency


MY CAREER• Blogging, video tutorials, networking, twitter

• Freelancing, podcasting

• Speaking (eek!) at conferences


I HATE WEB DESIGN

• Instant gratification

• Fixing mistakes

• Anyone can see what you do!

• Tinkering - nothing is ever finished

• Cross Browser Testing


• 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


APPLYING DESIGN PRINCIPLES TO THE WEB

• Typography

• Visual Hierarchy

• Grids

• Color


TYPOGRAPHY• Readability, dark text light background

• Line length

• kerning, tracking, leading

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

• Photoshop type vs real web type


TYPOGRAPHY• Web Safe Fonts

• Arial, Georgia, Times, Verdana etc

• @font-face, Cufon, Images


• webfontspecimen.com

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

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

• Elements of Typographic Style

TYPOGRAPHYRESOURCES


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




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


VISUAL HIERARCHY• Size, color, placement, whitespace

• Interaction, animation, transparency


GRID SYSTEMS• 960 Grid system

• cssgrid.net

• @media queries

• max-min screen size

• Other grid types


GRID RESOURCES• 960.gs

• cssgrid.net

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

• Making and Breaking the Grid


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


COLOR• RGB color gamut


MY TOOLBOX


HTML


CSS


PHP


jQuery


MY FREELANCE WORK• Print design, illustration

• Logo design, web design


QUESTIONS?

? ??

? ??

?

?

? ??

?

?

?


THANK YOU!• NikiBrown.com

• [email protected]

• @Nikibrown

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


mailto:[email protected]

mailto:[email protected]

http://nikib.ro/wn/2o

http://nikib.ro/wn/2o

Syracuse symposium11-17-2010

Design

Transcript of Syracuse symposium11-17-2010