From Scratch to Launch #2 - Design phase

PHASEDESIGNWordPress Naperville Meetup February 21, 2017 #WPNaperville

6:00 - Networking 6:20 - Introductions 6:30 - Presentation

From Scratch to Launch #2

Giving back TO SET TONELISTEN Community

Service

Modern Bold

Authentic

Social justice

Warm Impactful

INSPIRATIONGATHER

DOCUMENTING INSPIRATION

Bookmarking App & Extension

RAINDROP.IO

Visual Asset Library

DOCUMENTING INSPIRATION

PHOTOSVisual Asset Library

DOCUMENTING INSPIRATION

PINTERESTVisual Asset Library & Bookmarks

DOCUMENTING INSPIRATION

Too many to list

DOCUMENTING INSPIRATION

TYPOGRAPHYSTART WITH

Oliver Reichenstein, 2006

WEB DESIGN IS 95% TYPOGRAPHY

Avoid using more than 2-3 different typeface families (unless you really know what you are doing).

TYPOGRAPHY GUIDELINES

Use a single space between sentences to avoid rivers.

TYPOGRAPHY GUIDELINES

Photo credit - Jeff Dahl

Left aligned is best for readability(for L-R languages)

TYPOGRAPHY GUIDELINES

The width of your text blocks should be limited to 60-75 characters.

TYPOGRAPHY GUIDELINES

No one wants to read lines of text that seem to never end and then try to find the start of the next line. Make it easy on your audience and limit your width on text blocks. They will thank you for that. Isn’t this block much harder to read? Imagine if it went on for many paragraphs. That would be awful.

The wider the column, the greater the line-height (leading).

TYPOGRAPHY GUIDELINES

Can you easily scan the article? Is there a clear/predictable structure?

TYPOGRAPHY HIERARCHY

Too many to list

WEB DESIGN IS 95% TYPOGRAPHY

Learning Typekit Blog Moments with Typography FontShop (love their email newsletter) Typewolf Cheatsheet OddBird’s Typography Blog Post Universal Typography Molten Leading / Fluid Line Height Typography Videos Playlist

TYPOGRAPHY RESOURCES

Tools Fontstand Typecast WP Typography plugin

Books, Bookmarks, and More Combining Typefaces On Web Typography Stacy's Typography Bookmarks

COLORPLAY WITH

Tools ColorMe Practical Color Theory

Accessibility Check Contrast Ratio Photoshop Add-on Colour Contrast Check (Jonathan Snook) Contrast Ratio (Lea Verou)

Palette Suggestions ColorFavs PaletteTab

More OddBird’s Recent Color Article Stacy's Color Bookmarks

COLOR RESOURCES

DESIGN SOMETHINGNEXT STEPS

YOUR CONTENTDesign

ITEMS IN THESE PSD FILES MAY APPEAR DIFFERENT IN REAL LIFE

!

+ many more

EXAMPLESREAL WORLD

WITH COLOREXPLORING

RESOURCES Design Process & Deliverables styletil.es danielmall.com/articles/rif-element-collages

stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals

typecast.com/seminars/post-comp

danielmall.com/articles/visual-inventory

rif.superfriend.ly/designs/round2

product.voxmedia.com/2013/1/24/5426808/an-inside-peek-into-the-polygon-design-process

Sketch gives you the power, flexibility and speed you always wanted in a

lightweight and easy-to-use package.

sketchapp.com

PHOTOSHOP

Work across desktop and mobile devices to create and enhance your photographs, web

and mobile app designs and more.

adobe.com

CHICKEN CATPHOTOSHOP

PHOTOSHOPCATASAURUS REX

NICATLAS CAGEPHOTOSHOP

PHOTOSHOPCHARACTER & PARAGRAPH STYLES

PHOTOSHOPLAYER COMPS

PHOTOSHOPLINKED SMART OBJECTS

PHOTOSHOPCC LIBRARIES

PHOTOSHOPIMAGE ASSETS

PHOTOSHOPSMART GUIDES

PHOTOSHOPMULTIPLE ARTBOARDS

EXTRACTTOOL

MOBILEAPPS

IS WEB DESIGN ASOLVED PROBLEM

NEXT MEETUPFRONT-END

DEVELOPMENTMarch 21, 2017 #WPNaperville