tools for modern web design
TRANSCRIPT
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