Slide 1
Slide 1 text
Some rights reserved
Beyond Static:
The New Design System
Lea Alcantara for Web Afternoon
AUG 28, 2015
Slide 2
Slide 2 text
Sounds like that Princess
Lead Designer
abrightumbrella.com
Co-host, CTRL+CLICK CAST
ctrlclickcast.com
Canadian
edmonton, alberta
2
source: dailymail.co.uk
http://abrightumbrella.com/about/lea-alcantara
Slide 3
Slide 3 text
Seattle, WA
abrightumbrella.com/visas
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Reviewing Processes
• We needed to standardize how we work
• Time to experiment is at a premium
• Need to agree quickly and get on the
right path sooner
• Still want to do high quality work
5
Slide 6
Slide 6 text
6
Beyond Static:
The New Design System
Lea Alcantara for Web Afternoon
AUG 28, 2015
Slide 7
Slide 7 text
7
Time Is Money
Lea Alcantara for Web Afternoon
AUG 28, 2015
Slide 8
Slide 8 text
8
Real Talk
What works for us
http://abrightumbrella.com/blog/create-your-own-starter-files
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
“Old-School” Way
10
Slide 11
Slide 11 text
11
Evolution of
Man & Device
source: http://www.stephendale.com/2012/11/30/the-evolution-of-social-media/
Slide 12
Slide 12 text
12
http://bradfrost.com/blog/post/techcrunch/
source:
Slide 13
Slide 13 text
Evolution of Design
Deliverables
13
Slide 14
Slide 14 text
Page-Based vs Systems
• 20+ (or more?!) pixel-perfect Photoshop
comps later > hand to front-end developer
14
• if conscientious,
would create a
document outlining
fonts and colors and
hex/rgb codes
• labelling all folders
and names
• extracting all the
images for the dev
Slide 15
Slide 15 text
15
Slide 16
Slide 16 text
Confusion! @_@
16
• What about hovers? Or animation? Or any
interaction?
• Viewport changes?
• Lots of communication issues abound
Slide 17
Slide 17 text
17
Our First Collaborative
Responsive Project
CASE STUDY ONE
Slide 18
Slide 18 text
Enter Dynamic
Deliverables!
18
http://styletil.es/
http://www.agnostic.io/livewires/
http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype
Slide 19
Slide 19 text
19
Slide 20
Slide 20 text
Dynamic Style Tile
• Fast-and-dirty coding and didn’t browser check.
Inconsistencies = client confusion
• Ended up sending them a static screenshot of
what I saw for them to see the direction
20
Attempt 1
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
Dynamic Live Wires
• Just black-and-white
• Quick initial sketches > straight to browser
• Not much “real” text, just content areas
• Helped a lot!
22
ὑ
Attempt 1
Slide 23
Slide 23 text
23
Slide 24
Slide 24 text
24
Slide 25
Slide 25 text
25
Slide 26
Slide 26 text
26
Slide 27
Slide 27 text
27
Slide 28
Slide 28 text
THE BIG BUT…
28
Slide 29
Slide 29 text
29
Slide 30
Slide 30 text
30
Slide 31
Slide 31 text
31
I’ve made a huge mistake.
Gob Bluth, Arrested Development
Slide 32
Slide 32 text
32
And that didn’t
even address the
“squishy middle.”
http://seesparkbox.com/foundry/there_is_no_breakpoint
Slide 33
Slide 33 text
33
Still, the design is
approved.
What’s next?
Slide 34
Slide 34 text
Front-End Starts
34
Remember Live Wires?
Slide 35
Slide 35 text
Beyond Static
35
Slide 36
Slide 36 text
A Hybrid
Approach
aka Starter Files!
36
http://abrightumbrella.com/blog/create-your-own-starter-files
Slide 37
Slide 37 text
Time = Investment
37
Slide 38
Slide 38 text
38
Static AND Dynamic
The Best of Both Worlds
• But how to decide what stays in the browser
or on screen vs what should/can stay static?
Slide 39
Slide 39 text
39
Family Friend Poems
CASE STUDY TWO
…and other stuff.
Slide 40
Slide 40 text
Before jumping in…
40
Slide 41
Slide 41 text
Identify internal &
external/client
deliverables
41
Slide 42
Slide 42 text
Set expectations with
your client
42
Slide 43
Slide 43 text
Then decide what should
be static and what should
be dynamic
43
Slide 44
Slide 44 text
Our Static
Deliverables
44
• http://www.wired.com/2014/05/reading-on-screen-versus-paper/
• http://www.theguardian.com/books/2014/aug/19/readers-absorb-less-
kindles-paper-study-plot-ereader-digitisation
Slide 45
Slide 45 text
Internally
• Rough initial
wireframes sketches
• Paper & Photoshop
• Maybe a few tablet
comps of key pages
45
Slide 46
Slide 46 text
Clients
• Content Prioritization doc
(after content audit)
• Site Map
• Content Diagram
• If project includes a branding
exercise, a 1-page visual
branding summary as a PDF/
PNG
• Key pages to be made into
static design comps
46
Slide 47
Slide 47 text
Brand Identity Summary
• Our version is super
simplified
• Simply just the starting
color scheme and typefaces
• Sample imagery
• This will eventually inform
the Element Collage and
Style Guide
47
Slide 48
Slide 48 text
I Still Use
Photoshop!
48
ὑ
…and Illustrator!
Slide 49
Slide 49 text
What Comps? How many?
• Include smallest mobile view
• Tablet view to show clients at this stage too
variable—don’t want to set expectations yet
• Usually the homepage and 2-3 main internal
pages, if necessary—also dependent on budget
and timeline
49
Slide 50
Slide 50 text
50
Slide 51
Slide 51 text
Do as I say,
Not as a I do.
51
AKA sometimes we still need more static comps
Slide 52
Slide 52 text
Our Dynamic
Deliverables
52
Slide 53
Slide 53 text
Clients
• Element Collage
• Live Wires
53
• Front-end Templates
• Style Guides
Slide 54
Slide 54 text
54
Old
Element
Collage
Slide 55
Slide 55 text
New Element Collage
• Our version of this is
starting to apply the
design concepts into
parts of the content
• No layouts at this
stage
• Navigation and
specific module
styling begins here
55
Slide 56
Slide 56 text
Live Wires
• The wireframes
• Already
responsive
• Customized for
our own
framework
• The base of the
final
development 56
Slide 57
Slide 57 text
Integrated System
Live Wires
+
Element Collage
Slide 58
Slide 58 text
In-Context Feedback!
• Allows clients to:
• see proportions and priorities
• test in their mobile devices without confusion
• focus on content areas than design specifics
58
Easier to Make Changes!
Slide 59
Slide 59 text
Design in the Browser
• The designer (i.e. me) needs to have active
communication with the developer
• The developer needs to make smart design
decisions “in between” — then verify with
designer
• You have to accept imperfections: there is no
such thing as pixel perfection
59
Slide 60
Slide 60 text
Integrated System
= Front-end templates
Slide 61
Slide 61 text
Testing & Q/A
• Possibly unpopular opinion:
test only approved amount
of views.
61
Slide 62
Slide 62 text
62
Time Is Money
Lea Alcantara for Web Afternoon
AUG 28, 2015
Slide 63
Slide 63 text
Style Guides
• When final
development is
done
• Provided post-site
launch
63
Slide 64
Slide 64 text
Integrated System
= Style Guide
Slide 65
Slide 65 text
65
Design systems, not pages!
• Initial investment is worth it:
speed and quality of work improves
• There is still room for static deliverables
• Process should always be flexible and evolve
• Do what works for you!
Slide 66
Slide 66 text
66
Be Flexible!
• Every project and client is different
• Not all projects need ALL these deliverables
• Improve each deliverable on a new project
Slide 67
Slide 67 text
Questions?
• @lealea
• @abrightumbrella | abrightumbrella.com
• @ctrlclickcast | ctrlclickcast.com
• dribbble.com/lealea
• speakerdeck.com/lealea
67