Planning & Prepping A Design
For Development WordCamp San Diego Robert Nienhuis

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

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

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

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

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

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

Planning & Prepping A Design
For Development www.nienstudios.com | @nienstudios

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

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

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!

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

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

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)

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:

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

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