Web Design Concepts For Non-Web Designers

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:
http://apirocks.com/html5/html5.html

Intro

Chopping Block

World Domination Through Graphic Design

Since 1996

Edge Link 03 01 ChopMain

Intro

Chop Shop

Shirts For Designers, And Nerdy Designers

Since 2004

Edge Link 03 Chop Shop Store Main

Notes:

  • With Shirts Like This, Who Needs Pants.

Intro

Teaching

NYC @ School of Visual Arts

Sweet

  • Edge Link 03 01 SvaTriptic01 A01 03 Mfai
  • Edge Link 03 01 SvaTriptic01 A01 05 Mpsdp
  • Edge Link 03 01 SvaTriptic01 A01 07 AdvFlash

Take exceptionally talented creative professionals.

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

Intro

Speaking At How

Web Design For Non-Web Designers

Gulp

  • Great, how much time do we have?
  • A week, a day? oh, one evening...

Where the heck do we begin?

  • Function follows form? form follows function?
  • Do I Learn Dreamweaver?
  • What about Flash & Javascript?
  • How do I become a 'Web Designer'?

Like any other medium.

  • You need to understand the basic principles.
  • You need a solid foundation.

Notes:

  • Aspire to be a 'Designer' - don't fixate on the medium part.

Intro

Good Times

There Has Never Been A Better Time...

Sweet

  • The web has matured & standards have arrived.
  • HTML5 is an impending reality.
  • Tablets are real & they are instigating change.
  • Publishing systems are everywhere and mostly free.
  • There is competition and rapid growth everywhere.

And the important one:

Notes:

  • The capabilities and potential of modern browsers is growing daily

Foundation

Let's Forget About The Technology

Focus

001 IllustratorTestA01
  • 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

02 MagicPoster1

Foundation

Concept

Now Make It A Magic Poster

Magic

02 MagicPoster2

Notes:

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

Foundation

Concept

Hang It Up - Sideways

-90°

02 MagicPoster3 A02

Foundation

Concept

It's Magic, Remember

Fixed

02 MagicPoster4 A02

Foundation

Concept

Resize It (Smaller)

Scrunch

02 MagicPoster5 A02

Foundation

Concept

Put It In Your Pocket

Portable

02 MagicPoster6 A02

Foundation

Question

How Do We Begin To Design For That?

Think

02 MagicPoster7 A02
  • Multiple canvas sizes
  • Fixed positioning
  • Flexible positioning
  • Rigid containers
  • Flexible containers
  • Spacing/padding control
  • Transparency support
  • Advanced Type Control
  • (And so on...)
  • One copy of the content!
  • Universal Poster Support!

Notes:

  • What do we need? Where do we start?
  • We will have to select stuff. Position them dynamically based upon size.
  • multiple layouts
  • multiple sizes
  • fixed and flexible containers
  • shifting sizes
  • We never know how big the canvas is.
  • How it works on a computer, mobile device, etc...

Foundation

Solution

We turn our attention to HTML & CSS

Since 1995

    The longer we hypothesize about a (desktop) tool that could enable us to build a Magic Poster, the more we would inevitably be drawn to solutions already present in HTML & CSS.

  • HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. -wikipedia
  • CSS is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. -wikipedia

Foundation

Newer Media

Today The Web - Tomorrow, Who Knows?

Un-Print

The design concepts that distinguish interactive from print/traditional mediums are:

  • Hypertext, and therefore navigation.
  • Limitless (yet limited) canvas size.
  • Flexible, data driven content.
  • Dimensionality, Overlay & Interactivity.

Each item on that list could easily be the subject of an additional presentation, class or workshop.

Tools

Where Do We Start

Ahh

Master the medium, not the tools.

Tools

Photoshop

Didn't Teach You Photography.

Photo

03 PhotoshopTeach1 A01

Notes:

  • Nobody ever says: "I want to be a photographer, I'll just learn Photoshop"
  • Truth be told, this one is a bit of a stretch. I think it holds up well in context tho.

Tools

InDesign

Didn't Teach You How Print Works.

Print

03 InDesignTeach1 A02

Tools

Dreamweaver

Won't Be Teaching You How The Web Works.

Web

03 DreamweaverTeach1 A01

Notes:

  • Like other tools, it will help you work once you know what you are doing.
  • Learn the foundation of HTML & CSS, before you deal with a new UI.

Tools

There Is No Silver Bullet For HTML & CSS.

Boom

03 SilverBullet1 A01

Notes:

  • There might be one day, so far... no.

Tools

No Really

It's Not That Bad.

Relax

It's Easier than learning (Ps, Ai, Ae, etc...)

  • Basic knowledge + 40 HTML tags, 20 CSS styles.
  • If you use styles, you already kinda know it.
  • You copy and paste most of it.
  • Nobody starts a new page/project from scratch.

HTML & CSS just work.

  • It's browsers that you don't like.
  • You ever seen what Postscript looks like?
  • Dreamweaver is a browser.
  • Dreamweaver is also a text editor!

Tools

Editors / Apps

You have many options... try em all.

Gulp

Dreamweaver is primarily (an ok) text editor.

Edge Link 03 05 DreamweaverCSS01 A01

TextMate is a force for greatness.

Edge Link 03 05 CSSEdit01 A01

Tools

Confusion

Found From Time To Time:

Quote

Designers shouldn't have to learn code.

Tools

Clarification

Just Like Typesetting Instructions

Fact

HTML isn't code, it's a markup language.
  • Tedious markup possibly, but NOT code.
  • Our history as designers is paved with tedious processes and creation techniques.

Learning

The Newer Media Trinity

Breakdown

Current foundation of digital design/communication.

  • HTML is the Markup Language.
  • CSS selectors style the HTML tags.
  • JavaScript is the 'native' code language.

Browser plugins offer additional functionality.

  • Adobe Flash
  • Microsoft Silverlight
  • Apple Quicktime
  • Unity Web Player

Learning

Online

Use The Medium To Learn The Medium.

Cheap

Make a folder (or pick a folder).

  • Start saving working examples, experiments.
  • Collect, learn & re-use.

Learn the art of asking (Google) for help.

  • Use search prefixes like "HTML" & "CSS" to learn.
  • Use "-" to eliminate what you don't need. (example)

Your browser is the best learning tool you have.

HTML 101

Structure

It's Just A 'Plain Text' File.

Markup

Consisting of 1 optional declaration & 2 top level tags:

<!DOCTYPE html>

<html>
  <head>
    <title>My Web Page</title>
    The stuff you don't see.
  </head>

  <body>
    The stuff you see.
  </body>
</html>

HTML 101

Doctype

An Instruction To The Web Browser

Alert

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5

<!DOCTYPE html>

Learn more: w3schools > Doctype Declaration

HTML 101

Head

The Stuff You Don't See

Markup

<head>
  <title>SampleHTMLProject01</title>
  <meta name="author" content="The Chopping Block, Inc." />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  
  <link rel="stylesheet" href="styles.css" media="screen"/>
  
  <style type="text/css" media="screen">
    CSS styles for just this page.
  </style>
  
  <script type="text/javascript" charset="utf-8">
    JavaScript code for just this page.
  </script>
</head>

Notes:

HTML 101

Head

Focus On The Most Important Parts

Markup

Page title & meta info factor into search performance.

Linking to another file for your CSS styles:

<link rel="stylesheet" href="assets/css/styles.css"
type="text/css" media="screen" charset="utf-8" />

Or keeping your CSS selectors in the current page only:

<style type="text/css" media="screen">
  p {
    background-color: #ff6600;
  }
</style>

HTML 101

Body

The stuff you see.

Markup

<div id="header">
  <h1>Site Title</h1>
  <h2>Site Tagline</h2>
</div>

<ul class="navbar">
  <li><a href="index.html">Home</a></li>
  <li><a href="portfolio.html">Portfolio</a></li>
  <li><a href="http://wordpress.com/myblog">Blog</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur...</p>

Learn more: w3schools > Primary HTML Tags

HTML 101

Body

The stuff you see.

Markup

Is this good HTML?

Examples:

CSS 101

Designers Already Understand This Part

Style

05 StylePanels1 A01

Notes:

  • Print Designers have been using styles sine before the web.
  • HTML & CSS is evolving in your direction!

CSS 101

Syntax

The Syntax of CSS Is Simple

Basics

It consists of only 3 parts:

selector { property: value; }

Real world example:

body {
  background: #eeeeee;
  font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

You can combine selectors:

h1, h2, h3 { color: #f60; }

Learn more: cssbasics.com

CSS 101

Selectors

You Select/Style Any Part Of Your HTML

Targeting

You can select any existing tag:

<body>, <h1>, <h2>, <h3>, <ul>, <img>, <a>, etc...
body { background-color: #ccc; }

You can select any tag with a custom class attribute:

<h2 class="subtitle">Custom Graphics</h2>
.subtitle { background-color: #ccc; }

You can select any tag with a custom id attribute:

<h2 id="subtitle">Custom Graphics</h2>
#subtitle { background-color: #ccc; }

Notes:

  • If you think this is complicated, take another look at the style dialog boxes in Ai & Id.

CSS 101

Remember

You link your HTML File to a CSS File

Linked

Within the head of your HTML File:

<head>
  <title>SampleHTMLProject01</title>
  
  <link rel="stylesheet" href="styles.css" media="screen"/>

</head>

CSS 101

Overwhelmed

You Really Expect Me To Type Everything?

Gulp

Dreamweaver has a really solid CSS explorer.

Edge Link 03 05 DreamweaverCSS01 A01

CSSEdit is an absolutely amazing CSS tool.

Edge Link 03 05 CSSEdit01 A01

Notes:

  • Once you understand the basics, these tools become fantastic resources for exploration and rapid learning.

CSS 101

Links

Core CSS Design Concepts

Knowledge

Edge Link 03 05 MoreLearning01 A01

Learn the box model: w3schools > CSS Box Model

Background images: w3schools > CSS Background

Styling Text: w3schools > CSS Text

Coding Clean and Semantic Templates

30 HTML Best Practices for Beginners

Design

The Challenge

How Do You Design For This?

Hesitation

Common frustrations & fears:

  • Learning takes time, time takes money.
  • Web design gets awfully complicated.
  • Do you expect me to mock up three different versions of that insanely complex layout?
  • Complicated takes time, time takes money.
  • How do you get a design approved?
  • How do you know if it's going to work?
  • Do I just get a book on Dreamweaver?

Design

Solutions

The Chopping Block Way

Power

Structure (Wireframes)

  • Separate the function & content from the design.
  • Wireframes are a BIG part of the creative process.

Functionality

  • Build a prototype. Talk about it.

Look & Feel (Concept Boards)

  • Allow the design (and the designer) to run free.
  • Reduce the complexity & capture a feeling.

Bring everything together

  • Play on the strengths of the medium itself.

Notes:

  • Essentially, we divide and conquer.
  • There is nothing worse than a client not looking at the design because they are caught up on the functionality or content.
  • If your information architecture team is not creative, you are most likely not going to have a creative product.
  • If your information architecture team does not understand how to build what they are drawing, you are going to have a problem building what they drew.

Design

Structure

This Is Not A Wireframe

Whoa

06 Sketch1 A01
  • That's a sketch (an idea), you can work from here.

Notes:

  • Sketches are handy, they are the single most effective way to convey an idea. We share them with clients all the time. Once some ideas take hold, we incorporate them into our wireframes.

Design

Structure

Neither Is This

Ouch

06 Sketch1 A01
  • This does not help anybody, this is just an idea.

Design

Structure

This Is A Wireframe

Much Better

06 Wireframe1 A01

Design

Wireframes

Create & Iterate Where It Is Fast

Flexibility

A wireframe is a blueprint, blueprints have standards.

  • You can measure it - you can build it.
  • Sample copy - word count and content approval.
  • Pixel perfect width, ad's, video and Flash embeds.
  • Yes, wireframes have grids. - 960.gs
  • Adobe Illustrator, save time & design over top of it.

A wireframe can/should establish the functionality.

A wireframe can be creative.

  • The freedom to think visually. Sans final design.

A wireframe is a discussion document.

Notes:

  • There are many 'wireframe tools' out there, but nothing as powerful as Adobe Illustrator.
  • Create an Illustrator file containing re-usable wireframe parts and you can easily best the features within many stand alone wireframe tools.

Design

Look & Feel

Be A Designer, Not A Martyr

Create

06 Concept1 A01

Design

Look & Feel

Concept Boards Keep Projects Fresh

Explore

Lessen the content, increase the exploration.

  • Pick 4 to 6 relative sample elements.
    (navigation, images, sample feature, etc...)
  • Explore the formal design possibilities.
  • Keep multiple versions on each page (as a catalyst).
  • Make compositions, present well, react quick.

Wireframes are there to field the content questions.

Concept board design work is scalable.

  • Bring in another designer (or an intern).

Design

Look & Feel

Build Your Own Reference Library

Crank

06 Concept2 A01
  • It's ok to borrow your own ideas!

Design

Merge & Build

Divide, Conquer, & Skin The Wireframes

Happiness

06 Merge1 A01

Design

Merge & Build

The Sum Of All Parts

End Game

Move forward with project design (with a safety net).

  • Merge the approved wireframes with the approved look & feel.
  • Tedious at times yes, but you should have a really solid direction and blueprint.
  • Keep the wireframes up to date as scope shifts.

Depending on the project, development can start now.

  • Once things are approved, sometimes its faster to build out full design using CSS.

Notes:

  • Some clients will always want to see (and approve) every page designed with sample copy... sigh. Hopefully we will one day CSS will just be infused into our design tools.

Thanks

June 23, 2011 - AIGA Hampton Roads

Fin

This Presentation will be posted online at:

Questions, comments or more info: