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.

@BlanchardCG / @tomgeekery

Adobe CS, Balsamiq, UXPin, ?

● All great tools used for both Wireframing, Mockups, Style Tiles and Prototyping

● Pros, Cons and Differences

@BlanchardCG / @tomgeekery

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)

@BlanchardCG / @tomgeekery

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

@BlanchardCG / @tomgeekery

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

@BlanchardCG / @tomgeekery

Browser Tools

1. ColorPicker 2. WhatFont?3. Page Ruler4. Fold Viewer5. Emmet Re:View6. Responsive Inspector7. SEO Status (Alexa)

1 2 3 4 5 6 7

@BlanchardCG / @tomgeekery

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

@BlanchardCG / @tomgeekery

$ Variables

SCSS syntax:

$primary-color: #ccc;

body {

color: $primary-color;

}

CSS output:

body {

color: #ccc;

}

@BlanchardCG / @tomgeekery

Nesting

SCSS syntax:

nav {

ul {

margin: 0;

}

li {

display: inline-block;

}

}

CSS output:

nav ul {

margin: 0;

}

nav li {

display: inline-block;

}

@BlanchardCG / @tomgeekery

Nesting can be used for evil

SCSS syntax:body {

header {

nav {

ul {

li {

display: inline-block;

.wrapper-of-some-sort {

a {

font-family: 'this-is-bad';

}

}

}

}

}

}

}

CSS output:body header nav ul li {

display: inline-block;

}

body header nav ul li .wrapper-of-some-sort a {

font-family: 'this-is-bad';

}

@BlanchardCG / @tomgeekery

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;

}

@BlanchardCG / @tomgeekery

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

@BlanchardCG / @tomgeekery

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

@BlanchardCG / @tomgeekery

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

@BlanchardCG / @tomgeekery

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

@BlanchardCG / @tomgeekery

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

@BlanchardCG / @tomgeekery

Drupal themesBootstrap 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

@BlanchardCG / @tomgeekery

Stiff Drink

Drupal 7 theme based on

Bourbon, Neat, Bitters, and Grunt.

@BlanchardCG / @tomgeekery

Breaking BrowserSync

Go here:192.168.203.100:3000

@BlanchardCG / @tomgeekery

Other ResourcesStiff drink:https://bitbucket.org/alexfisher/stiff_drink

Compro grunt:https://bitbucket.org/alexfisher/compro_grunt

@BlanchardCG / @tomgeekery