Tools for Modern Web Design

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
● CSS preprocessors (Less/Sass)
● Frameworks
(Foundation/Bootstrap/Bourbon)
● JS Task runners (Grunt/Gulp)
Storage and Communication
● Google Drive
● HipChat
● BaseCamp
@BlanchardCG / @tomgeekery

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. ColorPicker
2. WhatFont?
3. Page Ruler
4. Fold Viewer
5. Emmet Re:View
6. Responsive Inspector
7. 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:
$primary-color: #ccc;
body {
color: $primary-color;
}
CSS output:
body {
color: #ccc;
}

Nesting
SCSS syntax:
nav {
ul {
margin: 0;
}
li {
display: inline-block;
}
}
CSS output:
nav ul {
margin: 0;
}
nav li {
}

Nesting can be used for evil
SCSS syntax:
body {
header {
nav {
ul {
li {
.wrapper-of-some-sort {
a {
font-family: 'this-is-bad';
}
}
}
}
}
}
}
CSS output:
body header nav ul li {
}
body header nav ul li .wrapper-of-some-sort a {
font-family: 'this-is-bad';
}

Mixins
SCSS syntax:
@mixin random-mixin($number) {
background: pink;
border: $number solid green;
margin: $number;
padding: $number;
}
.thing {
@include random-mixin(10px);
}
CSS output:
.thing {
background: pink;
border: 10px solid green;
margin: 10px;
padding: 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

Tools for Modern Web Design

More Related Content

What's hot (20)

Similar to Tools for Modern Web Design (20)

Recently uploaded (20)

Tools for Modern Web Design