Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

+ Follow

The Coding Designer's Survival Kit - Capital Camp

by canarymason on Jul 23, 2011

878 views

More…

Less

1 Embed 1

http://paper.li

Statistics

Favorites: 0
Downloads: 9
Comments: 0
Embed Views: 1
Views on SlideShare: 877
Total Views: 878

\n
\n
show designs in the proper context\nshow true colors and typography\nshow interactions\nshow in different devices\nfaster, more agile process\n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
These kind of changes are costly, and don’t add more creative energy. \n- fonts & global typography \n- color palate \n- "just a few small changes" translation: You'll have to tweak your whole document, and all documents for the whole site \n
The worst time to have these discussions is at the end of the project. \nNo one wants to reset the project at that stage\nDecide with your client how much effort you will put into MAKING OLD BROWSERS LOOK LIKE NEW BROWSERS\n
\n
\n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
how can you demonstrate fast & exciting VS slow and classy? \n- Can't show interactions well, if at all \n- You have to show a client two images just to show a simple mouseover. \n- How do you demo the speed and easing of a javascript slideshow? \n
\n
\n
\n
\n
\n
\n
\n
\n
not a replacement for sketching and wireframing, but a combination of photoshop and front end development\n\nSketch\nWireframe\n“Blue Sky” Thinking\n
Techniques from HTML5 Boilerplate\nEmpty index.html\nsample files for common markupHTML5UI PatternsForms\n
Techniques from HTML5 Boilerplate\nEmpty index.html\nsample files for common markupHTML5UI PatternsForms\n
Techniques from HTML5 Boilerplate\nEmpty index.html\nsample files for common markupHTML5UI PatternsForms\n
Techniques from HTML5 Boilerplate\nEmpty index.html\nsample files for common markupHTML5UI PatternsForms\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Every couple weeks\nTalk about design in the browser\nSass, CSS3, JS, etc\n\nthecodingdesigner.com\n
\n
\n
\n
\n
\n
\n
\n

The Coding Designer’s Survival Kit - Capital Camp — Presentation Transcript

The Coding Designers Survival Kit Markup, CSS, and JavaScript tools for Designing in the Browser
The Coding Designers Survival Kit And, yes, a Drupal theme, too.
Present in the Browser
What Happens When I Mouse Over?• Can’t show interactions well, if at all• It takes two images to show a mouseover
How About Animations?• Javascript, CSS3, Flash• Slow & Classy• vs. Fast & Exciting
Hard to Change• Some changes are trivial with CSS• Fonts & Global Typography• Color Palate• Be careful of changes that are costly, but don’t add more creative energy.
Last Minute Panic• Browser support• Interactions & Animations• Type renderingThe worst time to have theses discussionsis at the end of the project.
No OneWants to Guess Don’t make them. They like not guessing.
Designing in Code Do I ha a?
Who is Doing This? • Not just Craig. • Dan Cederholm @simplebits • Andy Clarke @malarkey • Meagan Fisher @owltastic • More and more of us
Design Thinking in CSS • Play and experiment • CSS becomes your new tool palate • Work out parts of your design in PS Speak CSS natively
Don’t Design the Impossible!Easy in Photoshop != Easy in CSS
Don’t Design the Impossible!Hard in Photoshop might = Easy in CSS
Markup Asks Questions That Photoshop Does Not• What to do if this headline wraps?• Have you designed for all possible list types? Tables? Form elements?• Fluid layouts• Responsive design
The Coding Designer’s Survival Kit The Anti-GUI A starter set of code and design tools All bundled up and ready to rock
The Coding Designer’s Survival Kit Whats included?• HTML5 Boilerplate• Elements and pages to design for• Modernizr & Selectivizr• Lettering.js and other js tools• Sass / Compass mixins galore
The Coding Designer’s Survival Kit Whats required?• Stuﬀ you need to install• Sass, Compass• Susy, Other Compass Plugins• Livereload for auto-refreshing browsers
BC Before CodingBest to use as simple a tool as you can, until you need more power.
HTML
Modular HTML
HTML5 Elements
HTML UI Patterns
Javascript• jQuery UI• Modernizr• Selectivizr• Formalize• Respond.js
Javascript• Dynamic Carousel• Lettering.js• FitText• Geared Scrolling• more all the time
CSS:Sass & Compass
Sass sass-lang.com• Adds more power to the process of writing CSS• Variables, Mixins, Selector Nesting
Sass sass-lang.com• Two Syntaxes• SCSS: looks like CSS You’ll be comfortable.• Sass: clean and terse You’ll be faster.
Sass Variables sass-lang.com
Sass Mixins sass-lang.com
Sass sass-lang.com• $variables• +mixins• math & color• conditionals• @media
Sass sass-lang.com• @media• CREATE AN EXAMPLE HERE
Compass compass-style.org• Stylesheet framework built around Sass• Built-in mixins for CSS3 and common tasks like list formatting• Use frameworks like Susy, Blueprint, and 960 semantically• Add your own framework
Compass CSS3 compass-style.org
Compass CSS3 compass-style.org
Compass compass-style.org• Sprite Generation• Typography• Text Replacement• Trig (what?!)
Compass Plugins compass-style.org/frameworks• Zen Theme• Fancy Buttons & Sassy Buttons makes pretty buttons• Sassafras color schemes
Kit CSS: Step-by-Step• First, Do no harm.• Add functionality, not CSS you don’t need.• Considered defaults• Flavors
Kit Flavors: Basic
Kit Flavors: Naked
Kit Flavors: Style Tile
Kit Flavors: Style Tile
Podcast
Drupal Theme• In active development• Focus is on CSS• Modules can handle the JS• drupal.org/project/survivalkit
The Coding Designer’s Survival Kit The Kit & Podcast: theCodingDesigner.com The Theme: drupal.org/project/survivalkit
Resources 1 HARDBOILED WEB DESIGN BY ANDY CLARKEHardboiled Web Design
ResourcesCSS3 for Web Designers
ResourcesResponsive Web Design
Resourcessass-lang.comcompass-style.org
Get in Touch Mason Wendell twitter/d.o/github/irc: @canarymasontheCodingDesigner.com BirdsAndMonkeys.com zivtech.com

The Coding Designer's Survival Kit - Capital Camp

by canarymason on Jul 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

The Coding Designer’s Survival Kit - Capital Camp — Presentation Transcript