Intro to Design... For Devs

Intro to Design...for Devs

Antonio HolguinSr. Designer - Smashing Ideas@antonioholguin

1Thursday, December 8, 2011

Design is just as much of a talent as it is a skill.

Design is language.

My own definition:

An execution of a plan through patterned, organized and understood emotional, psychological and physiological human responses through either conscious or sub-conscious communication based on visual, physical, and auditory cues.

Getting people to do something or feel a

certain way.

Designer : People::

Developer : Computers

Programming is objectivewhereas Design is

subjective.

Design can be just as rational as programming

Luckily, you don’t have to figure it out.

Getting Started

Research and Discovery

Know your audience

You’ve probably heard that.

Know your client

What are you trying to say, do, or make others

think?

or whatever.

Good Artists Copy, Great Artists Steal

- Pablo Picasso (supposedly)

Rules for Design

EmphasisHarmonyUnityOpposition

built with...

ColorLine, Shape, VolumeCompositionTypography

to name most important

What makes up colors?

Elements of color

Hue = colorSaturation = amount of hueBrightness = push towards whiteValue = lightness / darkness of a color, think along gray scales

What do colors mean?

Redenergetic, passion, anger,

danger, massive alert, STOP

Purpleroyalty, happiness, accomplishment,

nightmares, insanity

Bluesoothing, trust, loyalty, commitment, sadness

GreenLuck, nature, envy, decay,

toxic, GO

YellowHappy, warmth, caution,

Color harmonies:

Analogous – adjacent on color wheelComplementary – opposite hue Monochromatic – within the same hueTriad – 3 of equal distance on wheelNeutral – not found on color wheel

More informationColor Principles: http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html

Color Harmony: http://kuler.adobe.com/#create

Basic Color Theory:http://www.colormatters.com/color-and-design/basic-color-theoryIn fact, check out all of Colormatters.com

Line - Shape - Volume

Lines • Create division• Direct the eye• Can be implied

Shape • Fills an area• Makes solidarity • Forces posture• Important for things like icons

Weight or density • Gives dimension• Add grounding• Heavy vs Light

Composition

LayoutBalance (Symmetry)SpaceHierarchy

Grids • 960• Quarters, 3x (aka Rule of Thirds)• Columns, i.e. 2 vs 3• 24px and 40 px

960 Grid with 24 column

Rule of Thirds

Golden Ratio

Proportion of 1.618 - following 1,1,2,3,5,8,13,21,34...

Symmetry vs Asymmetry • Create balance • Draw importance• Define “pretty”

Folded symmetry

Radial symmetry

Asymmetry

Space Use it wisely Use it for goodDon’t try to force too much

WTF? SoaB.

Oh OK.

Positive / Negative Space

White space Just like your code, using whitespace well helps legibility.

Visual hierarchy • Equal Sizing = Same Importance• Larger Items are more Important• Placement of Elements • Group Similar Elements

More information960 Grid: http://www.960.gs

Golden Ratio: http://bit.ly/9OIfnA (Paul Trani)

White Space (AlistApart): http://bit.ly/a0ebKf

Typography

Typography tips

• Text should be legible• No more than 3 fonts• Watch weight and size

Fonts and styles• Serif• San Serif• Monospaced• Script• Non Latin Alphabets• Italic• Bold

Typesetting

• Kerning – distance between two letters• Tracking – distribution between multiple characters• Leading – distance between baselines

Elements of a typeface

Baseline X-height

Serif Sans Serif

Descender Ascender

More informationTypeface Elements: http://bit.ly/sOAOth

Fonts.com Glossary: http://www.fonts.com/aboutfonts/glossary

More informationWhat should I look for in a UI typeface?:http://bit.ly/pWxY3s

Why you should care about Typography: (check out the “What it’s saying” section)http://bit.ly/ohghLY

Interaction Design10Principles of Interaction Design:http://www.netmagazine.com/features/10-principles-interaction-design

Deeper Thinking: UX Movement http://uxmovement.com

Antonio HolguinSenior Designer @SmashingIdeas@AntonioHolguinhttp://swfhead.com < gonna be changing

Intro to Design... For Devs

Design

Product Design Intro

Design Thinking Intro

Modeling with Parallel DEVS Serialization in DEVS models Select function Implicit serialization of parallel models E-DEVS: internal transition first,

Intro to Design For Devs, 360|Flex 2012

Display Devs

Website design intro

Cf intro for spring devs

Die Design Intro

DEVS-Based Dynamic Model Reconfiguration and Simulation ... · DEVS-Based Dynamic Model Reconfiguration and Simulation Control in the Enhanced DoDAF Design Process HLA communication

MerisCon Intro - Design

Intro IC Design

Enhancing DEVS Simulation through Template Metaprogramming · Enhancing DEVS Simulation through Template Metaprogramming DEVS-MetaSimulator Luc Touraille1, Mamadou K. Traoré2, David

Writing for Devs

DEVS Tutorial-- DEVS and Distributed DEVShosting.cs.vt.edu/hpcs2008/DEVSTutorial.pdf · DEVS Tutorial--DEVS and Distributed DEVS Ming Zhang, PhD Paradise Research Laboratory ... 1.Saehoon

Intro Design Principles

Chris O'Brien - Intro to Power BI for Office 365 devs (March 2017)

Intro to Design

Intro Graphic Design

In Design Intro

Web design intro