POST HIGH SCHOOL PLANNING & OPTIONS. Reminders Post-High School Options Admissions Prepping Now.
Planning & Prepping A Design For Development
-
Upload
nienstudios -
Category
Technology
-
view
106 -
download
0
description
Transcript of 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 & Prepping A Design For Development www.nienstudios.com | @nienstudios
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 & 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
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
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
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
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