1. Planning & Prepping A
Design 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