Please use this link for this slide deck

and follow along

https://tinyurl.com/yy8cezb
5
use this link for resources-
DOWNLOAD ALL
https://goo.gl/2Hw294
And extract, should show up in your download folder
Graphic/Visual
Design
Brought to you by

3
Hello!
I AM NUJHAT NABEELA
I am here because I love visual design
You can find me on @nujhat_nabeela
talking all things design

4
Resources

◦ Download Exercise files at

▫ https://goo.gl/2Hw294

5
AGENDA

Why visual design

Fundamentals of visual design
Hands-on tutorial (InDesign)
Careers in other fields of design
Where to learn more
Q&A

6
1 Why visual design
What does it mean to you?
Where do you see it?
Why is it important ?

Anyone willing to volunteer?

8
 Visual design is a means of communicating through
orienting illustrations and photography, meaningful

“ typography, evocative iconography, persuasive color,

comforting spacing and layout execution, and many
other "little big details."

UX Magazine

9
 ● makes information digestible
“ ● grab audience’s attention
● makes it more memorable
● helps to make experience meaningful .

10
First impression
your product/service will make- it is arguably
the most important impression it'll make.

11
Credibility
of a product is based more on its visual cues
than its actual content.

12
50 milliseconds
before users have made their first judgments on
your products/services.

13
When does it matter
All the time.
Goodness, pay attention.

14
Where do we see it?
○ Postcards and flyers
○ Magazine and newspaper ads
○ Posters, banners and billboards
○ Infographics
○ Brochures (print and digital)
○ Vehicle wraps
○ Signage and trade show displays
○ Email marketing templates
○ PowerPoint presentations
○ Menus
○ Social media ads, banners
○ Graphics
○ Banner and retargeting ads
○ Images for websites and blogs
○ And the list cont...
15
2 Fundamentals of visual design
Learn about how typography, color, layout and composition enhances
your branding and identity

16
TYPOGRAPHY

17
TYPOGRAPHY
Font types

18
 Typography: Font types

Serif: Classic; good for traditional projects, Sans Serif: clean and modern; easier to read on
e.g. magazines and newspapers. computer screens

Display fonts: script, blackletter, all caps; best for

small amounts of text - titles and headers and
graphic-heavy designs
19
 Typography: Font types

Fonts to avoid
 Typography: custom fonts

How to get custom fonts

Adobe fonts
Google fonts
Dafont.com
Font squirrel
TYPOGRAPHY
Font pairing

22
 Typography: Font pairing

fontpair.co
👉
23
TYPOGRAPHY
Do’s and dont’s

24
 Typography: Do’s & dont’s

DO: apply contrast to guide your eyes

fontpair.co

25
 Typography: Do’s & dont’s

DO: space things out for readability

fontpair.co

26
 Typography: Do’s & dont’s

DON’T: use too many fonts

fontpair.co

27
 Typography: Do’s & dont’s

DON’T: put text over a busy image

fontpair.co

28
COLOR

29
COLOR
Basics
draw your eye to an image
trigger an emotional response
communicate a message without using words

30
 Color: Basics

Primary Secondary
Color wheel

31
COLOR
Creating color palettes

32
Color: Creating color palettes

33
Color: Creating color palettes

34
Color: Creating color palettes

35
Color: Creating color palettes

36
Color: Creating color palettes

37
 Color: Creating color palettes

Designing for visually impaired

Canadian Ophthalmological Society (COS), revealed

the majority of Canadians (59 per cent) experience
symptoms of potential eye disease

◦ difficulty seeing at night

◦ problems reading up close
◦ blurry vision
◦ color blindness
◦ and more
38
 Color: Creating color palettes

Designing for visual impairment

Protanopia and deuteranopia,

have difficulty discriminating
between red and green hues.

Tritanopia, which affects

perception of blue and yellow
hues

39
 Color: Creating color palettes

Color palette tools

coolors.co
👉
colourlovers
👉
colour contrast analyzer
👉
colorsafe.co
👉
sim daltonism
👉
color oracle
👉
40
 Color: Creating color palettes

Colour Contrast Analyzer

41
 Color: Creating color palettes

color oracle

42
 Color: Creating color palettes

color oracle

43
 Color: Creating color palettes

color oracle

44
 Color: Creating color palettes

color oracle

45
COLOR
Psychology of color in
Marketing

46
 Color: Psychology of color in Marketing

Red –excitement, strength, sex, passion, speed, danger.

Blue –(most popular) trust, reliability, belonging, coolness.
Yellow –warmth, sunshine, cheer, happiness
Orange — playfulness, warmth, vibrant
Green — nature, fresh, cool, growth, abundance
Purple –royal, spirituality, dignity
Pink — soft, sweet, nurture, security
White –pure, virginal, clean, youthful, mild.
Black –sophistication, elegant, seductive, mystery
Gold — prestige, expensive
Silver — prestige, cold, scientific

47
 Color: Creating color palettes

Desaturated colors - serious or

Bright colors-fun/modern vibe businesslike

48
COLOR
Web vs. print

49
 Color: Web vs. print

Print Web

Standardized color inks. Ideal for full-color RGB: Optimal for mobile devices,
Often used for one or two brochures, flyers, posters, computer monitors, laptops, TV and
color jobs etc. movie screens, games and illuminated
signs.
HEX: Optimal for web design

50
COLOR
Do’s & dont’s

51
 Color: Do’s & dont’s

DON’T: use vibrating colors together

52
 Color: Do’s & dont’s

Ahh, that’s
much better!
DO: tone it down by adjusting lightness, darkness,
or saturation. 53
 Color: Do’s & dont’s

DON’T: use color in every little detail

54
 Color: Do’s & dont’s

DO: use black, white, and gray to balance design

55
LAYOUT &
COMPOSITION

56
Layout and composition: Example

Grid

57
LAYOUT &
COMPOSITION
Basic principles

58
5 basic principles of layout and composition
1. Proximity
2. White space
3. Alignment
4. Contrast
5. Repetition

59
 Layout and composition: Basic principles

Proximity

60
 Layout and composition: Basic principles

White space

61
 Layout and composition: Basic principles

Alignment

62
 Layout and composition: Basic principles

Contrast

63
 Layout and composition: Basic principles

Contrast- Hierarcy

64
 Layout and composition: Basic principles

Repetition

65
 Layout and composition: Basic principles

Putting it all together

66
Break (10 min)

67
3 Hands-on tutorial
Get exposure to Photoshop, Illustrator and InDesign

68
 Color: Creating color palettes

◦ Photo ◦ Logos/Monogram ◦ Editorial design

enhancement/color ◦ Vector icons ◦ Book design
correction ◦ Illustrations ◦ Multiple page brochures
◦ Web/Mobile UI design ◦ print campaigns ◦ Annual reports
◦ Web graphics ◦ Web graphics ◦ Interactive PDF documents
◦ Motion graphics ◦ And more ◦ And more
◦ Special effects
◦ And more

69
 Color: Creating color palettes

A pixel is a single point or the Vectors are mathematical

smallest single element in a display calculations from one point to
device another that form geometrical
shapes

70
What you will be learning on InDesign
◦ Get familiar with workspace on InDesign and learn to use some of the tools
◦ Apply typography, color, layout and composition principles you learned
◦ Create master pages
◦ Use of proper photography and iconography
◦ Create tables
◦ Present graphs
◦ Create properly tagged PDF that is accessible for most, using assistive
devices
▫ Text tagging
▫ Alternative text for images
▫ Ordering content appropriately

71
Break (10 min)

72
4 Other areas of design career
Learn about other related careers to explore

73
Careers in other fields of design
◦ Visual Design
◦ User Experience (UX) Design
◦ UX Research
◦ UI Design
◦ Interaction Design
◦ Product Design
◦ Service Design
◦ Motion graphics/videography
◦ Product Management
74
5 Where to learn more
Access other resources to enhance your knowledge

75
Where to learn more
◦ Related Ryerson courses
▫ EID 100, The Creative Impact Supercourse (CRI 815) and more
◦ Lynda.com
◦ Skillshare
◦ Alison
◦ Udemy
◦ Coursera
◦ Canva

76
Other tools to learn
◦ Sketch
◦ Adobe Creative Cloud
◦ Balsamiq
◦ InVision
◦ Axure
◦ WordPress
◦ Asana
◦ Trello
◦ And more!

77
This Bootcamp should help you to
◦ Get a better understanding of the basics of
visual design and how to apply it in business
projects
◦ Develop common language that is helpful to
talk to technical teams
◦ Have basic understanding of how to use
Adobe InDesign
◦ Importance of Web Content Accessibility
Guidelines (WCAG 2.0)
78
5 Q&A
Get your questions answered

79
Thanks!
ANY QUESTIONS?
You can find me at

82
CREDITS

Special thanks to all the people who made this

Bootcamp happen:

Nelufur Bhasin and team at BCH

Daniela Poliszuk and team at RMA
All other TRSM staff

83
Bonus

Where to get good quality photography and icons for

your projects:

Unsplash
Pixabay
Pexel
Noun project
Creative market
Material design

You can also get inspirations from

Behance, Canva, Pinterest, Material design, human interface guidelines
from Apple, inclusive design toolkit from Microsoft

84
✋👆👉👍👤👦👧👨👩👪💃🏃💑❤😂😉😋😒😭
👶😸🐟🍒🍔💣📌📖🔨🎃🎈🎨🏈🏰🌏🔌🔑

85
86
PRESENTATION DESIGN

This presentations uses the following typographies and colors:

◦ Titles & body copy: Quicksand
You can download the fonts on this page:
https://www.fontsquirrel.com/fonts/quicksand

◦ Dark gray #2e3037

◦ Aqua #39c0ba
◦ Salmon #f35b69
◦ Blue #6d9eeb

87