welcome
#100things
every modern designer should know
designhawg.github.io/campsnd
workshop goal
to inform and improve
through practice
NAVIGATION
Jump between sections by going left or right
Dive into a presentation by going down
CHRIS
CampSND
terminal won't kill you
terminal won't kill your career
but your fear of terminal might
DO STUFF
the basic tools
pwd = pathway
cd = change directory
ls = list
mkdir (name) = make directory
touch (filename) = make file
rm -rf = remove
the tools
CampSND
git connected with the world
why is git important
makes your work portable to any computer, anywhere
it allows you to rollback to past work
ultimate way to access frameworks
you can collaborate with anyone, anywhere
you can work from anywhere
how it works, an overview
some collaborations
are more spontanious
nothing feels better than seeing your work in surprising places
DO STUFF
the basic git workflow
git init
git add . / git add (filename)
git status
git commit -m "message related to the commit"
git push origin (branch name)
the basic collaborative git workflow
git init
git add . -or- git add (filename)
git status
git commit -m "message related to the commit"
git pull origin (branch name)
git push origin (branch name)
the tools
CampSND
pick the internet apart
all of these tools are free for anyone to use
80% OF DOING IS FINDING
DO STUFF
the tools
CampSND
the absolute basics of HTML
open
<html>
close
</html>
main sections of every html page
<head>
<body>
<body>
<head>
tells the browser what to do with the page
tells the browser what to do with the page
<body>
tells the browser what the content of the page is
tells the browser what the content of the page is
basically every html page
information resides between
<h1>
Content
</h1>
Content
</h1>
nesting is widespread
be kind and indent
all html can accept attributes
attributes come in key / value pairs
DO STUFF
CampSND
the absolute basics of CSS
the base of all CSS
instructions come in pairs
instructions come in pairs
instructions can be grouped
instructions can be shared
instructions can be conditional
CSS tag selector
CSS class selector
CSS ID selector
main types of CSS display
block
inline
flex
inline
flex
block-level display
inline display
inline-block display
flex display
flex-direction
flex-direction
flexbox order
flexbox order
flexbox grow
flexbox grow
justify-content
justify-content
justify-content
justify-content
justify-content
align-items
align-items
align-items
align-items
DO STUFF
CampSND
read/writing code
this is great chris, but...
step 1: pick a solid framework
step 2: try it out on codepen
step 3: get a good text editor
step 4: try a tutorial
the tools
DO STUFF
ALL THE STUFF
topic 1
news design, then and now
roger black
new york times, newsweek, esquire, fast company, MSNBC.com, discovery.com & many more
ROGER
LINK FORTHCOMING
topic 2
what is modern design?
BRAND
CLEAN
STORY
topic 3
Type: Strong characters
reed reibstein
american city business journals
REED
LINK FORTHCOMING
DO STUFF
workshop one
deep study of typography
use your current typeface + two others
produce type specimen for each typeface
focus on size, leading, kerning for paragraphs
topic 4
Redefining space
MAKE STUFF
workshop two
use type and space as your main tools
space story should dominate the page
page contains main story and 2-5 other items
sketch three variations before beginning
place image of finished work in Dropbox
guidelines
size appropriate for your current publication
utilize a grid
topic 5
Courage in Photo Editing
michael whitley
los angeles times
MICHAEL
VIDEO LINK FORTHCOMING
MAKE STUFF
workshop
photography is your main tools
contains a minimum of 5 images
sketch three variations before beginning
place image of finished work in Dropbox
guidelines
designing a 2-page spread
page size appropriate for your current publication
utilize a grid
topic 6
Stories can move
Kevin Pang
Writer, Director-at-large
PANG
VIDEO LINK FORTHCOMING
topic 7
The illustrative process
andrea levy
cleveland plain dealer
ANDREA
VIDEO LINK FORTHCOMING
MAKE STUFF
workshop four
use 'Space' story as a guide
use a timer
draw five small sketch solutions
take one minute for each sketch
pass your work to someone at your table
discuss the work for five minutes
pick one option to sketch for another five minutes
topic 8
Data and storyforms
antonio farach
The Times of Oman
ANTONIO
VIDEO LINK FORTHCOMING
topic 9
Designing with empathy
Empathy
What problemsdo our customers have?
The opposite of empathy
What canwe provide that our customers want?
Advantages
Reframing allows youto properly considerthe actual problem
Moves organizationfrom current limitationsto focus on potential solutions
Any tests willbe focused on accuracyof the solution
Tale of
two projects
Sirens vs. Election Center
Active log of police, fire issues happening through the city, each incident geo-coded and searchable
Home for candidate information and race results for federal, state, city and county contests.
Whichproject solved a problem?
Sirens vs. Election Center
Creating Sirens told people what was going on when they heard a siren.
Making Election Center responsive made candidate information available in the voting booth.
Winner
Election Center
solved a problem for the audience
Loser
Sirens
provided a feature no one asked for
Books I recommend
MAKE STUFF
workshop five
use Designing for Empathy packet
partner with new person
stick to the time on worksheet
discuss findings in group
topic 10
Building testable products
joey marburger
Washington Post
JOEY
VIDEO LINK FORTHCOMING
ways that you can participate
user research
writing and editing
wireframing
photoshop mockups
interactive mockups
the tools
MAKE STUFF
APPENDIX
no.501
don't reinvent the wheel
you don't have to be an expert, but...
ARE YOU CURIOUS?
resources available to you
templates for all major design tools
apple interface guidelines
google material design
site design principles
why these standards matter
immediately make our designs current
focus our use of color on action
stress the maximum usage of images and space
continue to declutter
the tools
topic 1
news design, then and now
roger black
new york times, newsweek, esquire, fast company, MSNBC.com, discovery.com & many more
ROGER
LINK FORTHCOMING
no.312
pick the internet apart
all of these tools are free for anyone to use
80% OF DOING IS FINDING
the tools
MAKE STUFF
paper code
close your laptops
grab two sheets of paper
handwrite the code that I display onscreen
pass to neighbor for correction checking
no.2
if you can read code,
you can write code
this is great chris, but...
step 1: pick a solid framework
step 2: try it out on codepen
step 3: get a good text editor
step 4: try a tutorial
the tools
MAKE STUFF
paper code
close your laptops
grab two sheets of paper
handwrite the code that I display onscreen
pass to neighbor for correction checking
dirty secret about digital design
YOU
MUST
SHIP
no.602
A little javascript...
larry buchanan
new york times
LARRY
a few tools...
MAKE STUFF
intro to javascript
you can write on paper or in text editor
create awesome.html file
drag the file into your web browser
open the file with your text editor
follow along...
no.602
The future of media is...
kawandeep virdee
embed.ly
VIRDEE
questions?
thank you!
no.422
terminal won't kill you
terminal won't kill your career
but your fear of terminal might
the tools
no.15
git connected with the world
why is git important
makes your work portable to any computer, anywhere
it allows you to rollback to past work
ultimate way to access frameworks
you can collaborate with anyone, anywhere
you can work from anywhere
how it works, an overview
some collaborations
are more spontanious
nothing feels better than seeing your work in surprising places
the tools
questions?
Teşekkürler!
designhawg.github.io/designdays
no.384
frameworks & tools for everyone
design frameworks
charts
mapping
site generators
no.43
ask more questions
that's right designers, i'm talking to you!
questions to ask
Who is the audience?
What is this solution trying to convey?
Do we really need that map?
Is this content useful?
who to question
Your boss
Your co-workers
Your audience
why we ask
perspective
improvement
confidence
the tools
no.83
wireframes matter
when wireframes work they...
represent the information needed but not the final design
largely absent of color
focused on function
hint at space usage without bothering with specifics
provide confidence that the project is on track
the tools
no.13
the power of empathy
people we need to understand better
audience
co-workers
boss
bosses' boss
future audience
mom, dad, etc...
no.55
digital is more than code
ways that you can participate
user research
writing and editing
wireframing
photoshop mockups
interactive mockups
the tools
no.148
you aren't locked into adobe anymore
why sketch is better than photoshop
lighter (24MB vs 1GB)
vector-based
mirror allows for testing immediate mobile devices
direct intergration with Invision
cheaper ($49 for life vs $50 per month)
the tools
no.43
ask more questions
that's right designers, i'm talking to you!
questions to ask
Who is the audience?
What is this solution trying to convey?
Do we really need that map?
Is this content useful?
who to question
Your boss
Your co-workers
Your audience
why we ask
perspective
improvement
confidence
the tools
no.83
wireframes matter
when wireframes work they...
represent the information needed but not the final design
largely absent of color
focused on function
hint at space usage without bothering with specifics
provide confidence that the project is on track
the tools
no.13
the power of empathy
people we need to understand better
audience
co-workers
boss
bosses' boss
future audience
mom, dad, etc...
no.55
digital is more than code
ways that you can participate
user research
writing and editing
wireframing
photoshop mockups
interactive mockups
the tools
no.148
you aren't locked into adobe anymore
why sketch is better than photoshop
lighter (24MB vs 1GB)
vector-based
mirror allows for testing immediate mobile devices
direct intergration with Invision
cheaper ($49 for life vs $50 per month)
the tools
no.227
to solve big problems,
focus on small tasks
solving for print
start with a sketch
discuss the possible solution with your team
rough out the page
work on the main visual
make final edits to copy
print page
solving for digital
start with a sketch/wireframe
discuss the possible solution with your team
rough out the template
work on the main visual
test your design
ship your project
continue testing