The Coding Designer's Survival Kit - Capital Camp
Upcoming SlideShare
Loading in...5
×
 

The Coding Designer's Survival Kit - Capital Camp

on

  • 2,371 views

 

Statistics

Views

Total Views
2,371
Views on SlideShare
2,303
Embed Views
68

Actions

Likes
2
Downloads
25
Comments
0

7 Embeds 68

http://zivtech.local 25
http://www.zivtech.com 21
http://zivtech_redesign.dev.zivtech.com 18
http://paper.li 1
http://zivtech_redesign.local 1
http://zivtech.biters 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 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?• Stuff 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