Design 4 Developers

Why design?

• Faster prototyping/iteration
• Clearer communication
• Insight into the designer’s decisions
• Cut the designer out of the early stages!
• Yes, you can design!
  Sure, it’s not for everyone, but a little knowledge is always good.

In the beginning…

• We all start out bad. Keep pushing through it and you’ll get better.
• When you begin, you tend to want to design every pixel.
• Too many colors, too many fonts, images…
• Gradients here!
• Borders!
• Blink!

You only create methods for a reason, right?

• Think of design in the same way.

Like programming, design is deeper than the surface.

• The basis of design is logical decisions.
• If there’s no reason for an element, take it out.
• Great design tries to simplify. Much like programming!
• Every element on the page has a considered purpose.

Constraints!

• Like development, adding constraints can often give the most eloquent solutions.
• Design without constraints is art.
• In programming, you have technology or security constraints, and these generate ingenuity, push unity, make you think outside the box.
• Design Constraints: Grids, colors, content, etc.

DRY

• A great programming principle that applies to design, too.
• Consistency == Clarity
• If a button works, do you need a new style?
• HELL, NO!

Refactor that #%@*!

• Refactoring improves your code quality.
• Keep standards high, go back, refactor.
• Same with design. Re-evaluate, remove what is unnecessary.

Air

• No, not the band, you hipster!
• Negative space — a design concept.
• Elements need space around them… to breathe, be taken in, understood.
• If nothing is there, that is intentional.
• For example, always keep 1em or 20px space around all sides of a logo.

Color

• Influences perspective. Applying a different color can completely change the experience.
• The placement of the color can impact how it is perceived, too.
• 
• There’s so much to say about color…that’s another talk!

Type

• Fonts created for the screen:
• Verdana
• Georgia

Verdana

• 
  Source: http://www.will-harris.com/verdana-georgia.htm

Georgia

• 
  Source: http://www.will-harris.com/verdana-georgia.htm

Typography

• There’s a lot more to say…and Dan will hit on it in a couple of weeks.

CSS & HTML

• For the screen, CSS and HTML are tools commonly used, and in another presentation, we can address best practices for designing in the browser.

Takeaways

• Design for your audience and stakeholders, not for yourself.
• In the end, it’s about communication.
• How can your message be clarified?
• Simplify. Simplify. Simplify.

Thank YOU!

I hope you enjoyed the presentation, & thanks for your attention.