Planning & Prepping ADesign For Development       WordCamp San Diego           Robert Nienhuis
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  So, What Are We Talking About…  	 1. Pl...
Planning & Prepping A Design For Development                                                                              ...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Planning: WordPress Page Templates
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Planning: Define Page Templates  	  Bas...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Planning: Wireframes  	 	 A detailed la...
Planning & Prepping A Design For Development                                                                              ...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Prepping While Designing  	 	 Design yo...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Prepping: Saving Images  	 	 When savin...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Prepping: A Word On Sprites  	 	 Sprite...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Prepping: Sprite Example  Photoshop Plu...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Prepping: CSS Callouts  	 	 After the a...
Planning & Prepping A Design For Development                                            www.nienstudios.com | @nienstudios...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Prepping: Getting The Styles  	   color...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Prepping: Styles To Consider  	   color...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Prepping: File Organization
Planning & Prepping A Design For Development     www.nienstudios.com | @nienstudios  A Few Thoughts  	 	 CSS shown is abso...
Planning & Prepping A Design For Development   www.nienstudios.com | @nienstudios  Questions or Comments?  	   Robert Nien...
Upcoming SlideShare
Loading in …5
×

Planning & Prepping A Design For Development

4,120 views

Published on

Published in: Technology, Health & Medicine

Planning & Prepping A Design For Development

  1. Planning & Prepping ADesign For Development WordCamp San Diego Robert Nienhuis
  2. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios So, What Are We Talking About… 1. Planning For Development Site Map Page Templates Wireframes 2. Prepping While Designing Setting Up Folders Naming Layers 3. Prepping The Final Files Saving Images CSS Callouts File Organization
  3. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Planning: Site Map Provides a list of all of the pages for the website Text-based List Graphic-based List DSAOC Alerts & Messages section needs to have a WYSIWYG Home text editor that allows them to replace text, change color of (CMS) text, text effects (bold, italic, etc.) and create links About Us Mission History of DSAOC DSOAC Board Ways of About Us About Us Statement DSAOC Staff of Directors Giving Ways of Officers Giving DSOAC Board Cash Donation of Directors (accept credit cards) Giving Your Time About Down Syndrome What Is Mosaic and Transloca - Down Syndrome Stories From Down Syndrome? tion Down Syndrome Myths & Truths The Heart Featured Story Stories From Our Fami - lies (drop down menu) Resources & Services Expectant Parents New Parents New To The Area Family Support Ways of DSAOC Support Your Are Not Alone Welcome Giving Networks What Do The Screen - Cash Donation Ask Us A ings & Diagnostics Settling In (accept credit cards) Question Mean? Coping With Feelings Getting Started/Local Giving Your Time Sibling Resources & Decisions Resources Adoption Resources Early Start
  4. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Planning: WordPress Page Templates
  5. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Planning: Define Page Templates Based on the Site Map Defines how many different types of pages will need to be designed and developed for the theme Updated Site Map shows all the different Page Templates needed
  6. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Planning: Wireframes A detailed layout of each Page Template that defines the functionality of element before anything is designed Helps communicate how each page will work in relation to other pages Collaborate with the developer to ensure the proper layout and functionality
  7. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios HO ME PAGE LAYOUT HOM E PA G E SP E CS 01 Header – contains Logo, Navigation, Shopping Cart Quick Links, Social Media Links My Account | Shopping Cart | Checkout 01 02 Logo – link to the home page (global) Logo 02 Questions? Call Us! Facebook Twitter 03 Main Navigation 03 Home | Shop | About | Contact Us | Blog | Surfboards Search 04 Slideshow 05 Promotional Graphic 04 05 06 Tagline 07 Shopping Cart Categories – automaitically pulls in each category in the sho 08 Select Products 06 The Best In Classic and Contemporty Surfboards Since 1959 07 Accessories | Men’s | Wetsuits | Gear | Skateboards | Surf Equipment | DVDs & Books | Women’s | Jackets Select Products 08 09 Recent News – displays the 3 most recent blog posts 10 Staff Pick Product Name Product Name Product Name Product Name Product Name $Price $Price $Price $Price $Price Recent News Staff Pick (Name) Description 11 Twitter Feed – feeds last tweet 09 Blog Post Title 12 Affiliates Blog Post Description Tweet | Share 10 13 Footer Blog Post Title Blog Post Description 11 Twitter Feed Tweet | Share 12 © Copyright Shiiping & Returns | Privacy Policy | Conditions of Use | Contact Us 13 * Free Shipping only applied to contiential US
  8. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Prepping While Designing Design your heart out…just keep the files clean Set up guides via the rulers Create folders and label them appropriately Label your layers If you’re using patterns, test them out while designing using the Define Pattern feature
  9. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios
  10. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Prepping: Saving Images When saving images for the web, be mindful about the file size Know the different formats and when to use them JPGs are great for larger sized images with lots of colors, such as photographs PNGs are great when transparency is needed GIFs are great for solid-colored images or text as it preserves the sharpness
  11. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios
  12. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Prepping: A Word On Sprites Sprites are good when you have a lot of images that will be used many times throughout the site at various times Initial page load can be slower, but the sprite becomes cached and allows for quicker loading on other pages Can only be used as background images; mapping them is time consuming
  13. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Prepping: Sprite Example Photoshop Plugin: http://www.arnaumarch.com/en/sprites.html Thanks Jason Tucker for the find!
  14. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Prepping: CSS Callouts After the artwork is complete and the images saved, define some of the CSS It’s good practice to know a little bit of CSS when trying to communicate to the developer Do a similar layout to the wireframes and callout the CSS components
  15. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios HOME PAGE TEMPLATE 01 02 01 Overall Website – Max Width: 960px 02 Navigation 04 03 03 Slideshow 05 06 04 Shipping Graphic 07 05 Tagline 08 06 Select Products 07 Product 09 08 Left Column 09 Right Column
  16. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Prepping: Getting The Styles color: #999 font-family: Georgia font-size: 12px line-height: 18px (leading)
  17. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Prepping: Styles To Consider color: # a, a:link, a:visited font-family: a:hover, a:focus font-size: font-weight: height: line-height: letter-spacing: text-decoration: text-transform: width:
  18. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Prepping: File Organization
  19. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios A Few Thoughts CSS shown is absolutes, but you should also consider fleixible CSS based more percentages target (divided by) context = results Ethan Marcotte; Responsive Web Design Be prepared to make some minor adjustments once the site is built Be flexible with your process, but be sure to still communicate
  20. Planning & Prepping A Design For Development www.nienstudios.com | @nienstudios Questions or Comments? Robert Nienhuis nienstudios.com @nienstudios facebook.com/nienstudios Download the slides at http://nienstudios.com/pdfs/wcsd2012.pdf

×