planning & prepping a design for development

Planning & Prepping ADesign For Development

WordCamp San DiegoRobert 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: Site Map

\ Provides a list of all of the pages for the website

DSAOC Alerts & Messages section needs to have a WYSIWYG text editor that allows them to replace text, change color of text, text effects (bold, italic, etc.) and create links

Ways ofGiving

Cash Donation(accept credit cards)

Giving Your Time

DSAOC SupportNetworks

Ask Us AQuestion

Sibling Resources

Welcome

Settling In

Getting Started/Local Resources

Early Start

Home(CMS)

About Down Syndrome

Resources& Services

About Us

MissionStatement

Expectant Parents

What IsDown Syndrome?

History ofDSAOC

New Parents

Mosaic and Transloca -tion Down Syndrome

DSAOCStaff

New To The Area

Down Syndrome Myths & Truths

DSOAC Boardof Directors

Family Support

Stories From The Heart

Officers

Your Are Not Alone

What Do The Screen -ings & Diagnostics

Mean?

Coping With Feelings & Decisions

Adoption Resources

Featured Story

DSOAC Boardof Directors

Stories From Our Fami -lies (drop down menu)

Ways ofGiving

Ways ofGiving

Cash Donation(accept credit cards)

Giving Your Time

About Us About Us

Text-based List Graphic-based List


Planning: WordPress Page Templates


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


Home | Shop | About | Contact Us | Blog | Surfboards

Select Products

Recent News

My Account | Shopping Cart | Checkout

Shiiping & Returns | Privacy Policy | Conditions of Use | Contact Us* Free Shipping only applied to contiential US

Questions? Call Us! Facebook Twitter

© Copyright

Search

Product Name$Price

Product Name$Price

Product Name$Price

Product Name$Price

Product Name$Price

The Best In Classic and Contemporty Surfboards Since 1959

Accessories | Men’s | Wetsuits | Gear | Skateboards | Surf Equipment | DVDs & Books | Women’s | Jackets

Logo

Twitter Feed

Staff Pick (Name)Description

Blog Post Title

Blog Post Description

Tweet | Share

Blog Post Title

Blog Post Description

Tweet | Share

02

04 05

06

07

08

09

10

11

12

13

03

01

HOME PAGE LAYOUT

01

02

03

04

05

06

07

08

09

10

11

12

13

Header – contains Logo, Navigation, Shopping Cart Quick Links, Social Media Links

Logo – link to the home page (global)

Main Navigation

Slideshow

Promotional Graphic

Tagline

Shopping Cart Categories – automaitically pulls in each category in the sho

Select Products

Recent News – displays the 3 most recent blog posts

Staff Pick

Twitter Feed – feeds last tweet

Affiliates

Footer

HOME PAGE SPECS


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


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


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


Prepping: Sprite Example

Photoshop Plugin: http://www.arnaumarch.com/en/sprites.html

Thanks Jason Tucker for the find!


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


HOME PAGE TEMPLATE

Overall Website – Max Width: 960px

Navigation

Slideshow

Shipping Graphic

Tagline

Select Products

Product

Left Column

Right Column

01

02

03

04

05

06

07

08

09

04

05

06

07

08

09

02

03

01


Prepping: Getting The Styles

color: #999 font-family: Georgia font-size: 12px line-height: 18px (leading)


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:


Prepping: File Organization


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


Questions or Comments?

Robert Nienhuis nienstudios.com @nienstudios facebook.com/nienstudios

Download the slides at http://nienstudios.com/pdfs/wcsd2012.pdf

planning & prepping a design for development

Technology

planning prepping adesign

page templatesbased

different page templates

background images

lot of images

contiential us

home page globallogo

wordpress page templates