Syracuse symposium11-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

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
TYPOGRAPHY
RESOURCES

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
• hi@nikibrown.com
• @Nikibrown
• Please rate my talk at http://nikib.ro/wn/2p

Syracuse symposium11-17-2010

Recomendados

Recomendados

Más contenido relacionado

Similar a Syracuse symposium11-17-2010

Similar a Syracuse symposium11-17-2010 (20)

Último

Último (20)

Syracuse symposium11-17-2010