Presented at RefreshOKC, May 17, 2011 Building from the foundation of "Epicenter Design", designing from the inside out shows how we can use this thinking to help us focus on what matters, avoid getting stuck in meaningless details, and improve our designs using the most modern techniques and practices.

1. DESIGN FROM THE
INSIDE OUT
(or Designing What Matters)
RefreshOKC • May 17, 2011

2. EPICENTER DESIGN
Start from the core of the page and build outward

3. Epicenter design focuses on the true essence of the page—the
epicenter—and then builds outward. This means that, at the
start, you ignore the extremities: the navigation/tabs, footer,
colors, sidebar, logo, etc. Instead, you start at the epicenter
and design the most important piece of content first.
— Getting Real

6. CONTENT FIRST

8. WHAT IS THE CORE
PURPOSE?

13. START WITH TYPE

14. 17PX / 24PX

15. html {margin: 24px 48px 72px;}
body {
font-size: 17px;
line-height: 24px;
}
section {width: 960px}
article {width: 480px;}

16. h1 { h3 {
font-size: 40px; font-size: 20px;
line-height: 48px; line-height: 24px;
margin: 29px 0 19px; margin: 33px 0 15px;
} }
h2 { h4 {
font-size: 24px; font-size: 17px;
line-height: 24px; font-weight: bold;
margin: 31px 0 17px; margin: 24px 0 0;
} }
p, ul, ol {margin: 0 0 24px}

17. h1 {
font-size: 40px;
line-height: 48px;
margin: 29px 0 19px;
}

19. BUILD OUTWARD
The kids call it “progressive enhancement”

20. PROGRESSIVE ENHANCEMENT
!=
GRACEFUL DEGRADATION

21. Progressive enhancement uses web technologies in a layered
fashion that allows everyone to access the basic content and
functionality of a web page, using any browser or Internet
connection, while also providing those with better bandwidth,
more advanced browser software or more experience an
enhanced version of the page.
— http://en.wikipedia.org/wiki/Progressive_enhancement

22. HTML > CSS > JAVASCRIPT

23. THANK YOU
Email: JZ@37signals.com
Twitter: @JZ