Tools for Modern Web Design Andy Blanchard / Chris Keller @BlanchardCG @tomgeekery
The Tools Design Good old Pencil and Paper UXPin, Balsamiq or Adobe CS Browser Tools Development Storage and Communication Google Drive HipChat BaseCamp CSS preprocessors (Less/Sass) Frameworks (Foundation/Bootstrap/Bourbon) JS Task runners (Grunt/Gulp)
Pencil and Paper One of my favorite go-to tools.
Adobe CS, Balsamiq, UXPin,? All great tools used for both Wireframing, Mockups, Style Tiles and Prototyping Pros, Cons and Differences
Adobe CS (Photoshop & Illustrator) Lots of great features & extensions Kuler Export to Behance Manipulate photos and graphics Actions - for batch processing Vector vs Pixel SVG, JPEG, PNG Design process (Wireframing, Mockups)
Balsamiq Mockups (Wireframing) Very easy to use Lots of pre built elements Great Community and free resources Works well with Google Drive Support.balsamiq.com/customer/portal/articles/135659 Affordable Single User License $79
UXpin Developers can pull assets much easier Pro Version has HTML export features Has actionable elements and features expose and/or hide elements with a click, scroll, etc move to pixel location on a design Clients can view wireframes and mockups in a browser Live updating
Browser Tools 1. 2. 3. 4. 5. 6. 7. ColorPicker WhatFont? Page Ruler Fold Viewer Emmet Re:View Responsive Inspector SEO Status (Alexa) 1 2 3 4 5 6 7
CSS preprocessors A scripting language that extends CSS and gets compiled into regular CSS syntax Most modern web projects will use one of these, it is recommended you learn at least one
$ Variables SCSS syntax: CSS output: $primary-color: #ccc; body { color: #ccc; body { color: $primary-color;
Nesting SCSS syntax: CSS output: nav { nav ul { margin: 0; ul { margin: 0; li { display: inline-block; nav li { display: inline-block;
Nesting can be used for evil SCSS syntax: CSS output: body { header { nav { ul { li { display: inline-block;.wrapper-of-some-sort { a { font-family: 'this-is-bad'; body header nav ul li { display: inline-block; body header nav ul li.wrapper-of-some-sort a { font-family: 'this-is-bad';
Mixins SCSS syntax: CSS output: @mixin random-mixin($number) { background: pink; border: $number solid green; margin: $number; padding: $number;.thing { background: pink; border: 10px solid green; margin: 10px; padding: 10px;.thing { @include random-mixin(10px);
CSS Frameworks Great for clients that do not want a custom design Includes a lot of functionality that you probably won t use If possible, download a custom version to reduce the amount of unused features
Twitter Bootstrap 6,567 lines of CSS! Includes grid system, CSS styles, reusable components, and lots o JQuery plugins Both Less and Sass versions available
Zurb Foundation 6,140 lines of CSS in full version 2,631 lines of CSS in essential version Includes grid system, CSS styles, reusable components, and lots o JQuery plugins Can create a custom build and pick unique features
Bourbon / Neat / Bitters 0 lines of CSS with Bourbon alone. Only provides mixins Adding Neat grid framework brings the line total to a whopping 13 Adding Bitters scaffolding brings the line total to a respectable 236 Reusable components are available as Refills Encouraged to download only what you need
JS Task Runners Can handle tedious tasks for you automatically Examples: Compile Sass to CSS Compress images Reload your browser on code changes Much more
Drupal themes Bootstrap based theme: https://www.drupal. org/project/bootstrap Foundation based theme: https://www.drupal.org/project/zurb_foundation Bourbon based theme: https://www.drupal.org/project/basic
Stiff Drink Drupal 7 theme based on Bourbon, Neat, Bitters, and Grunt.
Breaking BrowserSync Go here: 192.168.203.100:3000
Other Resources Stiff drink: https://bitbucket.org/alexfisher/stiff_drink Compro grunt: https://bitbucket.org/alexfisher/compro_grunt