ben hindman, splash // scalable design

Post on 11-Jan-2017

270 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

EXP ER IEN CE IS EVERYTHING

Brands We Power:

+ 300,000 Freemium users & 10M Attendees

&

ALL WHITE -LABEL

FULLY CUSTOMIZABLE

i.e.. the hardest challenge ever

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

The ten things we did to make our design

(& company) scalable

1.Divide our users into two groups

A B

...Actually three

(The Goal!)

Start with themes

2.

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

Basic users use starter themes

Dave and Busters

Brand use branded themes

Build with Blocks

3.

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

Blocks are layouts of elements

To make blocks reusable, they must automatically inherit properties.

4.

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

Repeatable elements were a key advancement in the technology.

5.

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.

Limiting the number of colors

6.

Color Swatch Manager Editing the swatch

do the most with the least!

Map your color hierarchy to the page and guard your brand

Same thing with fonts

7.

“Font combo” Manager

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

This was a strong move to bridge web and print

The Layout bar must feel familiar

8.

Video

•Folder Structure

•Wrapping a group of elements

•Creating folders to organize

•Dragging & reordering

•Renaming

And needs to work for mobile

Content is still king!

9.

Start users with the “right answer”

Photos & Copy

Sprinkle some F*** Yeah!

10.

Color Overlays

Hover states

Live now :)

Coming in July

Coming in July

This was the first.

Wait ‘til you see

top related