General Assembly Presents: Visual Design Hacking Mini- Bootcamp
Design Principles: Layout Graphic Type Color Layout Graphic Typography Typefaces Everlane Facebook Color Color meaning Swarm Gilt Case studies Pintrest Dorkfood AirBnB Resources
Design Principles: Layout Graphic Type Color
Layout
Contrast, alignment, repetition, proximity
Hierarchy - up down, left right, size
Pre-made grids help with alignment - eg. Sketch (good for UI Design)
Grid, hierarchy, repetition, contrast, proximity, alignment
Graphic
Lines - pretty much about lines when grid - lines impact design hugely
Shapes too - buttons ...
Textures - faded background, blur look
Icons
Photography and illustration - visual interest for design. Stock photos a lot better - unsplash.com, depth of stock photo, ...
Typography
Graphic design in itself
Font vs typeface - typeface the archetype, font - the kinds, eg. regular, medium, bold, ...
Helvetica Neue - online version of helvetica proxima nova, open sans, avenir, lato good too futura, tahoma, myraid, arial a bit boxy but good online type connection - http://www.typeconnection.com/
Typefaces
White/black or Grey - contrast
Slight grey or off-white may be less start and easier on the eye fontsquirrel - free fonts fontfox - game to guess typefaces
Everlane Example - less copy on mobile - everlane custom font like blair mtv - a sans serif as logo type and a serif as body but works well
Only helvetica Neue - keep it simple, focus on content not type
With font, use same family, weights, opacity ... on site
Color
Color theory - combining colors that work well together on the color wheel
Complementary colors are opposite on the color wheel
Analogous colors - close adobe kulor https://color.adobe.com/create/color-wheel/
Use RGB when seeing online, emails - CYMK better for print
Color meaning look into colors and how perceived in different cultures warm colors, cool colors, red strong, more of an accent color - subconscious effect red - anger, passion, love, ... orange - health/vitality yellow - happy, cheer, hope green - money, nature, growth blue - calm, energetic, reliable purple - royal, wealth, creative black - elegant, mystery, evil white - clean pure virtue brown - nature dependable grey - formal, conservative
Swarm very orangy - check what looks like on diff devices predominantly orange tone, friendly, check-in app - warm, blues used to accent a few analogous tones of orange
Gilt
A few main colors - black, very luxurious, white, gold, red as a complement to blue images going on
Color blindness - reds not good
Case studies
Pintrest
Vertical aligned, horizontal not - guiding you down
Special areas (friends, ...) look like posts, but not - visual repetition too far? Might have been better to bring out a bit more
Grey as the primary color makes it hard to see what active and what not
Pintrest logo - whimsical and inviting Typefaces simple, whites simple good because so much going on
Dorkfood
Overlay an illustration on an image (hipmonk does it well, this site does not), alignment of sign-in, line after sign-in, ...
Sous-vide a sophisticated way to cook, but site does not look sophisticated - their device would be connected to your cooker and make it sous-vide - too much text
Lack of hierarchy
Colors, antagonistic - orange/green + black/white/red
The logo type poor, sizing poor, sizing of the social buttons poor - want you to buy
Red and black really harsh, use red sparingly
Left alignments poor, vertical spaces variable
AirBnB
Photos great, but text lost sometimes (blend in too much) perhaps some transparency effect
Legal disclosures, terms of service etc. look strange
Booking page simple, just the info - price on the image - price and image hierarchy, most important things
Book button, white, clean background
Prof photography encourages people to put in good photos
Icons, use standard icons, easy to understand rather than creating their own
Resources