Design 4 Developers

67 %
33 %
Information about Design 4 Developers

Published on June 30, 2009

Author: jasongraphix



My presentation for the ConvergeSC conference on June 27th, 2009 in Columbia, SC.

Principles of Beautiful Web Design

Photo Credit: davefishernc (flickr)

Design can be learned. (srsly!) Good Design IS Problem Solving: Designer mentality vs. coder methodology. Verbal Visual Logical Emotional Sequential Random Analytical Intuitive Objective Subjective Nielson and Zeldman

“Design depends largely on constraints.” - Charles Eames

Layout You gotta Color learn the Texture rules befo Type you try to Imagery break them

Layout: Balance Finding it and shifting it. Symmetrical & Asymmetrical

Bad Balance

Good Balance

Layout: Unity Via Proximity and Repetition

Bad Unity

Good Unity

Layout: Emphasis Many ways to achieve it, whether you want to or not: Placement Continuance Isolation Contrast Proportion

Bad Emphasis

Good Emphasis

Layout: Grids (are good!)

Color: The Wheel Orange, Green, Violet Red-Orange, Yellow-Orange, Yellow-Green, Blue-Green, Blue-Violet, Red-Violet

Color: Schemes

Color: Resources 1. Firefox eyedropper plugin. 2. Flash-based color scheme tool. 3. Color scheme community site.

Texture The web shouldn’t always feel like the web.

1. Baseline Typography 2. Cap height 3. Crossbar 4. Serif 5. Meanline 6. Bowl 7. Descended 8. Counter 9. Stem 10. Tittle 11. Terminal As with design principles, there are a lot of vocabulary 12. Ascender terms to digest when first learning about the nuances of 13. Leg typography. Getting to know the 5 basic categories of 14. Ligature fonts is a good foundation. 15. X-height

Typography: Serif Fonts

Typography: Sans-Serif Fonts

Typography: Fixed-Width Fonts

Typography: Handwritten Fonts

Typography: Novelty Fonts

4. Typography: The “OK, Fine” 9 Arial These nine fonts are Arial Black installed by default on most Mac and PC Comic Sans MS computers. Courier New Georgia Impact Times New Roman Trebuchet MS Verdana

4. Typography: The “OK, Fine” 9 Specify preferred fonts first: font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Minion, "Times New Roman", times, serif; Use Background Images Use sIFR (Scalable Inman Flash Replacement) Use Cufón (JavaScript text replacement without Flash)

5. Imagery Images & illustrations can make or break a website.

5. Imagery: Selection 1. What is the most relevant image for the subject? 2. What is the most artistic and interesting image I can use? 3. What would be the most appealing image for the target audience? Digital Web: Cooking with Stock

Keep at it! “ When they're not working on their day jobs, most top-notch web designers are pushing the web design envelope after-hours or on their own personal sites manipulating current technologies and expanding the medium's design vocabulary.” - Curt Cloninger, "Fresh Styles for Web Designers”, 2001

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014


Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Design | Android Developers

Design around Android's capabilities and conventions to give users the ... Get the latest Android developer news and tips that will help you find success ...
Read more

Android Developers

The official site for Android developers. Provides the Android SDK and documentation for app developers and designers.
Read more

Design for development

We use our skills as graphic designers and creative thinkers to make a positive impact in peoples lives. Our passion is people.
Read more

design for development Design for Development: a social ...

A methodology for co-design, collaborating with partners to communicate their own ideas and cultures while gaining a measure of economic empowerment.
Read more

Apple Developer

Search Apple Developer. Search Apple Developer Reset. Search Apple Developer; Tech Talks Watch Now. 3D Touch. Take advantage of Peek and Pop Apple Pay.
Read more

How to design with developers - The Next Web ...

How to design with developers. by Jerry Cao Tweet — 20 Oct '15, 05:18pm in Design & Dev. Tweet 520; Share 677; Share 42; Share 0; Share 0 ...
Read more

Developer Guide: Design Studio SDK - SAP Help Portal ...

Developer Guide: Design Studio SDK. Table of Contents ... Choose Plug-in Development Deployable features . 4. Choose Next. 5. Under Available Features, ...
Read more

4DESIGN. Industrial Design & Product Development ...

Industrial Design firm based in Sydney AU & Queenstown NZ dedicated to the development, engineering & manufacturing of beautiful and functional products
Read more

Design for Software

A design process specifically for software, making it easy for developers without a design background to create compelling user experiences.
Read more