for Modern Web Design Andy Blanchard / Chris Keller

Transcription

1 Tools for Modern Web Design Andy Blanchard /

2 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)

3 Pencil and Paper One of my favorite go-to tools.

4 Adobe CS, Balsamiq, UXPin,? All great tools used for both Wireframing, Mockups, Style Tiles and Prototyping Pros, Cons and Differences

5 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)

6 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/ Affordable Single User License $79

7 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

8 Browser Tools ColorPicker WhatFont? Page Ruler Fold Viewer Emmet Re:View Responsive Inspector SEO Status (Alexa)

9 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

10 $ Variables SCSS syntax: CSS output: $primary-color: #ccc; body { color: #ccc; body { color: $primary-color;

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

12 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';

13 Mixins SCSS syntax: CSS 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 random-mixin(10px);

14 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

15 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

16 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

17 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

18 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

19 Drupal themes Bootstrap based theme: org/project/bootstrap Foundation based theme: Bourbon based theme:

20 Stiff Drink Drupal 7 theme based on Bourbon, Neat, Bitters, and Grunt.

21 Breaking BrowserSync Go here: :3000

22 Other Resources Stiff drink: Compro grunt: