With In Browser Design gaining popularity on the web and here at 10up, we began to ask ourselves, “What is the best way to present a design to a client?” We use WordPress, of course! In this presentation I show you how you can use the most basic of templates and functions to move your design out of it’s initial creative phase and into the browser where pixel perfection lives and where responsive layouts and interactions really come to life.

1. Tammy Hart
Design Engineer at 10up
tammyhartdesigns.com
@tammyhart
Hi

2. What is 10up?
Distributed Full Service Web Agency
Always hiring!
10up.com
@10up

3. What is a Design Engineer?
Design Front-End
Me
WordPress

4. in the Browser
Designing a Theme

5. What’s in a name?

6. Design
Creative
Mockup
Prototype

7. Category One Another Category Cats are Helpful Last One Company
Child Item Child Item Child Item Child Item History
Child Item Child Item Child Item Child Item Team
Child Item Child Item Child Item Child Item Locations
Child Item Child Item Child Item Child Item
© 2014 Gracie’s Things, LLC
 
Reduce Waste
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque hendrerit quam,
sit amet interdum felis.
JOIN THE EFFORT
Shop Locally
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque hendrerit quam,
sit amet interdum felis.
FIND A STORE
Give Grace
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque hendrerit quam,
sit amet interdum felis.
BUY GIFT CARDS
CATEGORY ONE ANOTHER CATEGORY CATS ARE HELPFUL LAST ONE

GRACIE’S THINGS

10. with WordPress
Prototyping Design

11. What you’ll need:
• WordPress
• Local
• Staging
• Creative Assets
• Style Tiles
• Mockups
• Wireframes
• Full Page Comps
• Development Tools
• Code Editor
• Browser
• Mobile Emulators and/or
Devices

12. What you’ll produce:
• WordPress Theme

13. Do use:
• Templates
• header.php
• footer.php
• sidebar.php
• searchform.php
• index.php
• page.php
• single.php
• front-page.php
• home.php
• Functions
• get_header(), et al.
• wp_enqueue_scripts()
• get_template_part()

14. Do not use:
• Templates
• archive.php, et al.
• single-{cpt}.php
• Functions
• the_title()
• the_content()
• get_permalink()
• wp_nav_menu()
• dynamic_sidebar()
• In General
• Custom Post Types
• Widgets
• Post Thumbnails
• the Loop
• Plugins
• Comments

15. /**
* Template Name: Some layout’s name
**/

16. <?php
/**
* Template Name: Product Archive Page
*/
get_header();
?>
<section class="main">
<h1>Product Page Title</h1>
<article class="product"> ... </article>
<?php get_template_part( 'parts', 'pagination' ); ?>
</section>
<?php get_sidebar( 'filter' ); ?>
<?php get_footer(); ?>

17. Do you wanna build a website?
bit.ly/ibdwwp

18. What’s Included:
• ibdwwp-layout.pdf/psd
• homepage layout comp
• product page wireframe
• ibdwwp-theme
• index.php
• functions.php
• style.css

19. Instructions:
• Prototype
• Break the index up into the correct template parts
• Create new template for products page
• Make design decisions
• color
• vertical and horizontal spacing
• typography
• layout
• strategy
• interactions
• responsive

20. Let’s Code Design!

21. Thanks! Questions?
tammyhartdesigns.com / @tammyhart
10up.com / @10up