Tools for Modern Web Design
-
Upload
commercial-progression -
Category
Design
-
view
684 -
download
1
Transcript of Tools for Modern Web Design
![Page 1: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/1.jpg)
Tools “ ” for Modern Web Design
Andy Blanchard / Chris Keller@BlanchardCG @tomgeekery
![Page 2: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/2.jpg)
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
![Page 3: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/3.jpg)
Pencil and Paper
One of my favorite go-to tools.
@BlanchardCG / @tomgeekery
![Page 4: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/4.jpg)
Adobe CS, Balsamiq, UXPin, ?
● All great tools used for both Wireframing, Mockups, Style Tiles and Prototyping
● Pros, Cons and Differences
@BlanchardCG / @tomgeekery
![Page 5: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/5.jpg)
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
![Page 6: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/6.jpg)
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
![Page 7: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/7.jpg)
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
![Page 8: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/8.jpg)
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
![Page 9: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/9.jpg)
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
![Page 10: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/10.jpg)
$ Variables
SCSS syntax:
$primary-color: #ccc;
body {
color: $primary-color;
}
CSS output:
body {
color: #ccc;
}
@BlanchardCG / @tomgeekery
![Page 11: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/11.jpg)
Nesting
SCSS syntax:
nav {
ul {
margin: 0;
}
li {
display: inline-block;
}
}
CSS output:
nav ul {
margin: 0;
}
nav li {
display: inline-block;
}
@BlanchardCG / @tomgeekery
![Page 12: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/12.jpg)
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
![Page 13: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/13.jpg)
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
![Page 14: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/14.jpg)
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
![Page 15: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/15.jpg)
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
![Page 16: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/16.jpg)
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
![Page 17: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/17.jpg)
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
![Page 18: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/18.jpg)
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
![Page 19: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/19.jpg)
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
![Page 20: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/20.jpg)
Stiff Drink
Drupal 7 theme based on
Bourbon, Neat, Bitters, and Grunt.
@BlanchardCG / @tomgeekery
![Page 21: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/21.jpg)
Breaking BrowserSync
Go here:192.168.203.100:3000
@BlanchardCG / @tomgeekery
![Page 22: Tools for Modern Web Design](https://reader030.fdocuments.in/reader030/viewer/2022020208/55a64b4a1a28abef028b459e/html5/thumbnails/22.jpg)
Other ResourcesStiff drink:https://bitbucket.org/alexfisher/stiff_drink
Compro grunt:https://bitbucket.org/alexfisher/compro_grunt
@BlanchardCG / @tomgeekery