In Browser Design with WordPress
Upcoming SlideShare
Loading in...5
×
 

In Browser Design with WordPress

on

  • 361 views

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 ...

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.

Statistics

Views

Total Views
361
Views on SlideShare
345
Embed Views
16

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 16

http://www.tammyhartdesigns.com 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

In Browser Design with WordPress In Browser Design with WordPress Presentation Transcript

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