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 Facebook 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 .