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.
Citation preview
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. Whats 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 Gracies 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 GRACIES THINGS
8. with WordPress Prototyping Design
9. What youll need: WordPress Local Staging Creative Assets
Style Tiles Mockups Wireframes Full Page Comps Development Tools
Code Editor Browser Mobile Emulators and/or Devices
10. What youll produce: WordPress Theme
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. 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
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
