In Browser Design with WordPress

726 views
654 views

Published on

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.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
726
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

In Browser Design with WordPress

  1. 1. Tammy Hart Design Engineer at 10up tammyhartdesigns.com @tammyhart Hi
  2. 2. What is 10up? Distributed Full Service Web Agency Always hiring! 10up.com @10up
  3. 3. What is a Design Engineer? Design Front-End Me WordPress
  4. 4. in the Browser Designing a Theme
  5. 5. What’s in a name?
  6. 6. Design Creative Mockup Prototype
  7. 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
  8. 8. with WordPress Prototyping Design
  9. 9. 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
  10. 10. What you’ll produce: • WordPress Theme
  11. 11. 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()
  12. 12. 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
  13. 13. /** * Template Name: Some layout’s name **/
  14. 14. <?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(); ?>
  15. 15. Do you wanna build a website? bit.ly/ibdwwp
  16. 16. What’s Included: • ibdwwp-layout.pdf/psd • homepage layout comp • product page wireframe • ibdwwp-theme • index.php • functions.php • style.css
  17. 17. 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
  18. 18. Let’s Code Design!
  19. 19. Thanks! Questions? tammyhartdesigns.com / @tammyhart 10up.com / @10up

×