Robin Fay, Best practices for designs: tips and tools you can use

Transcription

1 Robin Fay, 2016 Best practices for designs: tips and tools you can use

2 AGENDA What is design? Design elements Color theory basics Space and layout The web vs. print Photography tips

3 WHAT IS DESIGN Design can be the process AND product of combining text and art to create communication Design includes logos, graphics, brochures, newsletters, posters, signs, websites, and any other type of visual communication

4 5 ELEMENTS OF DESIGN Color Shape (includes Type, Line*) Texture Space (Proximity) Form (Mass) *line and typography are sometimes considered separate elements

5 5 ELEMENTS OF DESIGN: COLOR Color communicates emotion, emphasis, contrast between elements, cultural meaning and much more Warm colors Yellow, Red, Orange Cool colors Blue, Green, Purple Neutral Colors White, Black, Grey, Beige generally thought to be equal cool + warm

6 5 ELEMENTS OF DESIGN: COLOR Yellow = caution, happiness Red = excitement, anger, love, passion, stop Orange = Red + Yellow = attention, fun Blue = Trustworthy, stable, calm Green = Blue + Yellow = Nature, serene, growth Purple = Blue + Red = Royal, creative the rarest of colors in true pigment

7 5 ELEMENTS OF DESIGN: COLOR ROYGBIV well, for light Paint and pigment are how light is reflected so colors are not quite the same why does this matter? Print uses pigments, computer screens use light

8 5 ELEMENTS OF DESIGN: COLOR Color Complementary colors reside across from each other on the color wheel: they are very high contrast when paired together.

9 5 ELEMENTS OF DESIGN: COLOR Analogous colors are adjacent on the color wheel and they are harmonious.they are combinations often found in nature.

10 5 ELEMENTS OF DESIGN: COLOR Triad or tertiary colors are 3 evenly spaced colors on the color wheel.

11 5 ELEMENTS OF DESIGN: COLOR Considerations: Color blindness: the inability to distinguish between certain reds and greens Bright colors/high contrast combinations draw the eye and should be used sparingly Text should have a high value difference between its background, e.g., black on white Think about cultural implications of color red/green, orange/black, etc. Use a color palette tool for help! Check for color blindness:

12 5 ELEMENTS OF DESIGN: COLOR Normal Red Blind Red Weak High Contrast Low Contrast High Contrast Low Contrast Low Contrast Low Contrast

13 5 ELEMENTS OF DESIGN: SHAPE as an area that stands out from the space next to or around it due to a defined or implied boundary, or because of differences of value, color, or texture. A shape is formed when a line encloses an area. Shapes can vary endlessly and can suggest physical form and direct eye movement. Shapes can be organic or geometric (structured). Examples of shapes on the web blocks of text, images (logos, photographs), bullets, the boundary of the space, frame.

14 5 ELEMENTS OF DESIGN: SHAPE Lines can divide or unite elements on a page Lines can denote direction of movement (as in diagonal lines and arrows) or provide an anchor to hold elements on a page (such as lines at the top, bottom, or sides of a page) Filled shapes can provide emphasis and provide a canvas for offsetting elements Typography makes content easier or harder to read font colors should have a high contrast value for ease of readability - e.g., black vs. grey, on white.

15 5 ELEMENTS OF DESIGN: SHAPE (TEXT) Serif is what our early handset type was in print materials

16 5 ELEMENTS OF DESIGN: SHAPE (TEXT) Typography: Sans serif vs. serif Typography is the style and appearance of printed matter. Sans serif is considered to more readable on a web or electronic device. Serifed fonts are generally better for printed pages. True Type fonts are standard are many computers and digital devices, which makes design easier because display is generally consistent.

17 5 ELEMENTS OF DESIGN: SHAPE (TEXT) Best practices Keep fonts consistent among elements headings, paragraph text consistent. Size matters larger fonts generally denote headings; smaller fonts, subheadings and paragraph text Common fonts (Google Fonts, True Type, etc.) Consider how a font will scale up or down Ok to mix fonts for interest

18 5 ELEMENTS OF DESIGN: TEXTURE Texture can be rough, bumpy, slick, scratchy, smooth, silky, soft, etc. Used to create depth and mass. Used sparingly in web design - backgrounds, photographic retouching.

19 5 ELEMENTS OF DESIGN: SPACE White space = the amount of blank space around elements, fonts, photographs, logos, between paragraph Too little white space looks crowded and can be hard to read Items can be grouped together to form one larger visual unit Alignment is how elements are grouped together spatially Grouping can provide subtle context, e.g., items related are grouped together

20 5 ELEMENTS OF DESIGN: SPACE

21 5 ELEMENTS OF DESIGN: MASS

22 DESIGN PRINCIPLES Unity/Harmony Balance Hierarchy (Relationship) Scale/Proportion Dominance/Emphasis Similarity/Contrast

23 UNITY/HARMONY. AKA SYMMETRY

24 HIERARCHY

25 SCALE/PROPORTION

26 EMPHASIS SIMILARITY - CONTRAST Unity/Harmony Dominance/Emphasis Similarity/Contrast

27 LET S TALK ABOUT SOME SITES. Unity/Harmony Balance Hierarchy (Relationship) Scale/Proportion Dominance/Emphasis Similarity/Contrast

28 LET S TALK ABOUT SOME SITES.

29 LET S TALK ABOUT SOME SITES.

30 THE WEB CHANGED SOME THINGS WE INTERACT DIFFERENTLY WITH LARGER SCREENS VS. SMALLER SCREENS WITH MOBILE AND TABLETS (SWIPE) WITH DESKTOPS AND KEYBOARDS WITH MOUSE/TOUCH HOW DOWE DESIGN FOR THE NEXT GENERATION?

31 DESIGN THINKING FOR THE WEB. BUT WHAT ABOUT NOW? In research on how people read websites we found that 79 percent of our test users always scanned any new page they came across; only 16 percent read wordby-word. (Update: a newer study found that users read newsletters even more abruptly than they read websites.) Web pages have to employ scannable text, using: highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others) meaningful sub-headings (not "clever" ones) bulleted lists one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph) the inverted pyramid style, starting with the conclusion half the word count (or less) than conventional writing

32 DESIGN THINKING FOR THE WEB. BUT WHAT ABOUT NOW? Best practices for mobile good for all Less is more simplify content Keep navigation simple ^ Contrast high* Consider multimedia elements carefully, especially flash and PDFs Think responsive (scales to all devices), accessible (universal design), and touch oriented TEST, TEST, TEST

33 DESIGN THINKING FOR THE WEB. BUT WHAT ABOUT NOW?

34 DESIGN THINKING FOR THE SHIFT TO VISUAL HOW DO WE COMMUNICATE? Rise of photography and video as increasingly important forms of communication no longer second to print Unique challenges images need to be described more completely (no text to be captured); videos need transcription or captioning

35 PRINCIPLES OF DESIGN: REMEMBER Unity/Harmony Balance Hierarchy (Relationship) Scale/Proportion Dominance/Emphasis Similarity/Contrast

36 COMPOSITION

37 DESIGN THINKING IN PHOTOGRAPHY Photography follows art and design rules Think about the arrangement of objects and/or people Generally, the closest item to the camera (viewer) will appear bigger Models know how to position their bodies to change how they appear you can learn these tricks, too Color often hides bad photography

38 DESIGN THINKING IN PHOTOGRAPHY Soft lighting (but not flat light) is the typically best for photographing people this can mean using a fill flash to even out differences between people and the background, shooting in shade or on a semi-cloudy day Natural light shifts in color over the seasons and at the time of the day Flat lighting is when there is little distinguishing contrast between objects and background often characterized by a lack of shadows and highlights

39 DESIGN THINKING IN PHOTOGRAPHY Scope out/plan the photograph review lighting and backgrounds prior to adding the subject Take practice shots without subjects If you are photographing people, plan wardrobes accordingly (are you photographing on green grass? Do you really want everyone wearing green?)

40 DESIGN THINKING IN PHOTOGRAPHY: MODELS Skinny arm on hip Thinify (turn body slightly towards camera shoulders back, belly tucked) Chin tilted slightly Avoid direct sunlight photography Emphasize the good, break up space use arms / legs

41 DESIGN THINKING IN PHOTOGRAPHY Reposition people if needed Think about design principles balance, harmony, etc. Think about composition and lighting Look behind what s in the background Judicious cropping!

42 DESIGN THINKING IN PHOTOGRAPHY The rule of thirds subject/interest at intersections Leading lines Framing

43 Symmetry Symmetry Leading lines Balance, Thirds Balance, Thirds

44 WHERE TO CROP

45 WHERE TO CROP

46 INSTAGRAM Accounts are private or public You can message photos to people privately even if your account is public You can block people Hashtags are used to connect others and the community (but really for searching and organizing!) Instagram has its own vocabulary. You can leave comments and answer You can search for photos or users You can push your photos to social media using built in tools or IFTTT

47 INSTAGRAM Basics color, saturation, exposure Cropping and focus blur or darken edges, etc. Top 5 social media site!

48 GETTING SOCIAL Instagram (and snapchat/vine for video) we are more visual A few marketing ideas: contests (usually involving photography and tagging or checking in), cross promote partners, take advantage of trending hashtags if applicable (#selfiesunday #throwbackthursday), use Instagram as a gateway to other content, sponsored ads Educational uses: treasure hunts, as part of an assignment

49 THANK YOU! Questions? Web: georgiawebgurl Skype or