HLV Industry Day Hybrid Launch Vehicle Phase I: Concept Development & Demonstration Planning
From Scratch to Launch #2 - Design phase
96
PHASE DESIGN WordPress Naperville Meetup February 21, 2017 #WPNaperville 6:00 - Networking 6:20 - Introductions 6:30 - Presentation From Scratch to Launch #2
-
Upload
stacy-kvernmo -
Category
Design
-
view
207 -
download
0
Transcript of 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
IS WEB DESIGN ASOLVED PROBLEM
NEXT MEETUPFRONT-END
DEVELOPMENTMarch 21, 2017 #WPNaperville
![Microsoft PowerPoint - Colombia Phase One Pre-Launch Spanish.pptx [Read-Only]](https://static.fdocuments.us/doc/165x107/568bd94a1a28ab2034a681b8/microsoft-powerpoint-colombia-phase-one-pre-launch-spanishpptx-read-only.jpg)
