ben hindman, splash // scalable design

37
YOUR EXPERIENTIAL MARKETING TECHNOLOGY

Upload: firstmark-capital

Post on 11-Jan-2017

270 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Ben Hindman, Splash // Scalable Design

Y O U RE X P E R I E N T I A L M A R K E T I N G T E C H N O L O G Y

Page 2: Ben Hindman, Splash // Scalable Design

EXP ER IEN CE IS EVERYTHING

Brands We Power:

+ 300,000 Freemium users & 10M Attendees

Page 3: Ben Hindman, Splash // Scalable Design

&

ALL WHITE -LABEL

FULLY CUSTOMIZABLE

i.e.. the hardest challenge ever

Page 4: Ben Hindman, Splash // Scalable Design

Goals of Splash 3

Bridge the gap between web & print.

Enable designers to easily implement mobile- responsive pages (& love it)

Don’t alienate our existing user-base

Page 5: Ben Hindman, Splash // Scalable Design

The ten things we did to make our design

(& company) scalable

Page 6: Ben Hindman, Splash // Scalable Design

1.Divide our users into two groups

Page 7: Ben Hindman, Splash // Scalable Design

A B

Page 8: Ben Hindman, Splash // Scalable Design

...Actually three

(The Goal!)

Page 9: Ben Hindman, Splash // Scalable Design

Start with themes

2.

Page 10: Ben Hindman, Splash // Scalable Design

1) Color Swatches2) Font Combos3) Auto Resizing / ems4) MapBox5) Blocks + Block libraries6) Resets7) gradient black on an image looks awesome (the kopec)8) The mobile responsive tools9) Color overlays10) Hover State11) Repeatables12) Removing hard coded elements13) designer pro/ designer14) elliminate on page dragging (de-duped UI)

Designers use foundation themes

Page 11: Ben Hindman, Splash // Scalable Design

Basic users use starter themes

Page 12: Ben Hindman, Splash // Scalable Design

Dave and Busters

Brand use branded themes

Page 13: Ben Hindman, Splash // Scalable Design

Build with Blocks

3.

Page 14: Ben Hindman, Splash // Scalable Design

Began with 100 Content Blocks, 14 Starter Templates, & 5 Reset Templates

Page 15: Ben Hindman, Splash // Scalable Design

Blocks are layouts of elements

Page 16: Ben Hindman, Splash // Scalable Design

To make blocks reusable, they must automatically inherit properties.

4.

Page 17: Ben Hindman, Splash // Scalable Design

For example, this was really hard before we realized that:

Page 18: Ben Hindman, Splash // Scalable Design

Repeatable elements were a key advancement in the technology.

5.

Page 19: Ben Hindman, Splash // Scalable Design

Creating a “repeatable” means setting a template for a list item.

So with one click you can, for instance, add a speaker to your page.

Page 20: Ben Hindman, Splash // Scalable Design

Limiting the number of colors

6.

Page 21: Ben Hindman, Splash // Scalable Design

Color Swatch Manager Editing the swatch

do the most with the least!

Map your color hierarchy to the page and guard your brand

Page 22: Ben Hindman, Splash // Scalable Design

Same thing with fonts

7.

Page 23: Ben Hindman, Splash // Scalable Design

“Font combo” Manager

Page 24: Ben Hindman, Splash // Scalable Design

Speaking of fonts.... Automatically resizing stops people from hacking the RTE for headlines.

This was a strong move to bridge web and print

Page 25: Ben Hindman, Splash // Scalable Design

The Layout bar must feel familiar

8.

Page 26: Ben Hindman, Splash // Scalable Design

Video

•Folder Structure

•Wrapping a group of elements

•Creating folders to organize

•Dragging & reordering

•Renaming

Page 27: Ben Hindman, Splash // Scalable Design

And needs to work for mobile

Page 28: Ben Hindman, Splash // Scalable Design

Content is still king!

9.

Page 29: Ben Hindman, Splash // Scalable Design

Start users with the “right answer”

Photos & Copy

Page 30: Ben Hindman, Splash // Scalable Design

Sprinkle some F*** Yeah!

10.

Page 31: Ben Hindman, Splash // Scalable Design

Color Overlays

Page 32: Ben Hindman, Splash // Scalable Design

Hover states

Page 33: Ben Hindman, Splash // Scalable Design

Live now :)

Page 34: Ben Hindman, Splash // Scalable Design

Coming in July

Page 35: Ben Hindman, Splash // Scalable Design

Coming in July

Page 36: Ben Hindman, Splash // Scalable Design

This was the first.

Page 37: Ben Hindman, Splash // Scalable Design

Wait ‘til you see