HTML & CSS for Visual Designers Workshop

The Chopping Block, Inc.

This presentation is an HTML page.

Press → key to advance.

Toggle notes with the 2 key.

Zoom in/out: Ctrl or Command + +/-

Having issues seeing the presentation? Read the disclaimer

This presentation was printed from an HTML page.

A fully interactive version of these slides containing examples and links to further resources can be found at:
http://choppingblock.com/presentations.

This page is based on the HTML5 Slideshow by Marcin Wichary, Ernest Delgado, Alex Russell and Brad Neuberg:
https://github.com/html5rocks/www.html5rocks.com

💻

choppingblock.com/presentations

Twitter: @choppingblock



Download Workshop Demo Files

You can also view the repository on GitHub.

Intro

Chopping Block

World Domination Through Graphic Design

Since 1996

choppingblock.com, portfolio, stories

Intro

Chop Shop

Shirts For Designers, And Nerdy Designers

Since 2004

chopshopstore.com, samples

Notes:

With Shirts Like This, Who Needs Pants.

Intro

Teaching

NYC @ School of Visual Arts

Since 1998

Take exceptionally talented creative professionals.

Teach them how to work digitally.
Teach them how to build for & communicate online.

“Today is the day I finally learn HTML & CSS!”

- Your Mind

Intro

Our Workshop

HTML & CSS for Visual Designers

Gulp

Great, how much time to we have?
Three hours! (no questions)

How is he going to pull this off?

You need to understand the basic principles.
You need a solid foundation.
You need to have the right tools.
You need to know how to help yourself learn.
You need reference files you can trust.
You must be fearless!

Just like any other medium.

Intro

Good Times

There Has Never Been A Better Time...

Sweet

The web has matured & standards are here.
HTML5 & CSS3 is a reality.
Tablets & Smartphones are real.
Publishing systems are everywhere and mostly free.

And the important one:

The web has grown in the direction of the designer.
- HTML5 Rocks - CSS3 Section
- LOST WORLD'S FAIRS
- HTML5 Twitter Canvas Experiment
- All that responsive stuff! mediaqueri.es

Notes:

The capabilities and potential of modern browsers is growing daily

“What heck is HTML5
& CSS3?”

- Many of us

Then

1997

When The Internet Was A Fad

Kinda Sucked

Barely any standards.
Great typography -> images of words.
Limited animation & interactivity.
SLOW JavaScript.

Then

1997

There Was Flash...

Kinda Worked

Cross platform, cross browser.
Any typeface.
Unparalleled animation, interactivity, sound...
The web kinda stepped forward. (old gabocorp)

Notes:

As long as you had the right Flash plugin.

Since Then

Evolution

Looks Like HTML Grew Up

10 Years Later

Next generation browsers.
CSS (for designers) happened, and then CSS3.
JavaScript got FAST*
Mobile adoption is fueling HTML5 growth.

HTML5

Projects

Did You Know This Was Possible?

Holy Cow

Lost World's Fairs*
Any Google Chrome Experiment
All that responsive stuff! mediaqueri.es
20 Things I Learned About Browsers and the Web
Wow that's neat, how did they do that?
Shape Type, the letter shaping game
Baroque.me: Bach Cello Suites No. 1
Anything at creativejs.com

3d:

Keep watching mrdoob.com
ROME: 3 Dreams of Black an interactive film.

Notes:

Look at how those are built and ask yourself: How would a desktop design tool begin to make this?

Today

Browsers

The Next Generation...

About Time

More resiliency (performance, speed, stability)
Cross-platform functionality (web standards)

Today

Technology

And what is supported...

Nothing New

Core technology within all "Next Gen" browsers.
Plugins provide additional technology.

Today

Mobile Browsers

Webkit

Interesting

WebKit is an open source web browser engine.
Embraces HTML5, successful on mobile platforms.

STRETCH

Room Full Of Designers

Reality Check

“Ok great, how do I
start making stuff?”

Foundation

Let's Forget About The Technology

Focus

Lets talk about making something.
Forget about how it's printed.
How it works on a computer, mobile device, etc...

Foundation

Concept

Imagine The Greatest Poster In The World

Pretend

Foundation

Concept

Now Make It A Magic Poster

Magic

Notes:

There is nothing more magical than a robot riding a unicorn.

Foundation

Concept

Hang It Up - Sideways

-90°

Foundation

Concept

It's Magic, Remember

Fixed

HTML & CSS for Visual Designers Workshop

by The Chopping Block, Inc.

HTML & CSS for Visual Designers Workshop

The Chopping Block, Inc.

choppingblock.com/presentations

Twitter: @choppingblock

Download Workshop Demo Files

World Domination Through Graphic Design

Since 1996

Shirts For Designers, And Nerdy Designers

Since 2004

Notes:

NYC @ School of Visual Arts

Since 1998

Take exceptionally talented creative professionals.

HTML & CSS for Visual Designers

Gulp

How is he going to pull this off?

Just like any other medium.

There Has Never Been A Better Time...

Sweet

And the important one:

Notes:

When The Internet Was A Fad

Kinda Sucked

There Was Flash...

Kinda Worked

Notes:

Looks Like HTML Grew Up

10 Years Later

Did You Know This Was Possible?

Holy Cow

3d:

Notes:

The Next Generation...

About Time

And what is supported...

Nothing New

Webkit

Interesting

Room Full Of Designers

Reality Check

Let's Forget About The Technology

Focus

Imagine The Greatest Poster In The World

Pretend

Now Make It A Magic Poster

Magic

Notes:

Hang It Up - Sideways

-90°

It's Magic, Remember

Fixed

Resize It (Smaller)

Scrunch