Visual Design

Briana VanBuskirk
Briana VanBuskirkMultimedia Designer
Visual Design
DMET 255
Focal Point
Find your Focus
The focal point of this piece is
the model and her clothes. So,
she has been placed centrally,
has type and a block of color
positioned in a way that
highlights and draws attention
toward her face and then to her
outfit, and leading lines direct
the eye down her frame and
gradually toward more
information.
Focal Point
The focus on the photograph of
the man. The design orients
the focus to this image by
placing him centrally, framing
him with the graphics, and
using the doodled graphics to
lead the eye in toward the
photograph.
Leading Lines
Just like you point at something when you want people to look at it, by
positioning certain lines and shapes in certain ways you can control
the viewpoint of your design, aka where viewers’ eyes go when they
see your design.
Flowcharts
Flowcharts use lines to direct your eye
from one point to the next in an
obvious way.
Leading Lines =
Focal Point
This poster design by Design By
Day that uses strong leading lines to
first guide the eye toward the main
focal point (the title), and then to
various rungs of information.
Scale and Hierarchy
In a very brief explanation, hierarchy is the arrangement and design
of elements in order to visually signal importance. So, you might make
a more important element bigger and bolder than a less important
element which might be smaller and fainter.
Type Hierarchy
These days, our headlines or
titles don’t have to be six inches
tall to catch readers’ attention,
but the image to the right
provides a dramatic reminder of
just what typographic hierarchy
is all about — organizing and
formatting your type choices in
such a way that readers or users
can clearly see what’s most
important, which enables them to
easily navigate the layout at a
glance and quickly scan to find
the information they’re looking
for.
Scale
This poster design by Jessica Svendsen uses
a scaled-up image as the largest element,
which helps it attract the most attention and
focus.
This poster design by Scott Hansen uses a
scaled-down, small silhouette of two people to
help communicate the massive scene in front
of them. This instantly gives viewers a sense
of the grandeur and size of the scene.
Balance
Symmetrical & Asymmetrical
Symmetrical
Balance
A symmetrical composition by
reflecting the positioning of
type and graphic elements. By
using symmetry, this design is
made elegant, clean, and
beautifully balanced.
Asymmetrical
Balance
In the above design, the three
central circles are the largest
elements in the design, but
they are balanced out both by
the type, the fine line graphics,
and the small, heavily textured
circle in the bottom corner.
Complimentary
Elements
Complimentary
photos
Use photos from the same
photoshoot. This is an easy way
to ensure your photographs
look cohesive as they were
likely all under the same art
direction and photographic
style.
Photo Color
Color your photos
similarly. With the prevalence
of filters and image adjusting
tools, you are able to color and
adjust your photos to have
more cohesive and
complementary palettes.
Contrast
Boost Contrast
Low Contrast
This poster by Melanie Scott
Vincent uses a yellow paperclip
on a yellow background,
creating a low contrast
difference between the object
and backdrop. While this is
usually a thing to avoid, in this
case it reinforces the event
name ‘ignored everyday’.
Repetition
Multi-Paged
Layout
To maintain consistency and a
logical layout, try to take specific
elements from one section of your
design and apply it to other
sections. Maybe a style of type can
be applied to more than one section
of your design, or perhaps a graphic
motif can be used more than once.
So, try to tie your design together
with repeated elements.
Repetition is a key factor when it
comes to multi page layouts.
Repeating elements of your layout
and/or design helps each page flow
into the next, creating a cohesive
set of pages.
Repeat Styles
This poster repeats certain
type stylizations, graphics, and
line weights throughout to
maintain a cohesive and
effective design. If it were to
suddenly use a thick, bold,
pink line-based graphic
somewhere in the middle, the
cohesion would be lost. So, by
keeping the font palette and
color palette small and the
graphic styles simple and alike,
the design is kept beautiful
and strong.
White Space
Clarity
White space when used
strategically can help boost
your design’s clarity and
overall look by balancing out
the more complicated and busy
parts of your composition with
space that helps your design to
breathe.
For example, this design uses
white space to balance out the
image, texture and type to
keep the design clean and
sophisticated.
Create a Frame
Scale down your graphic
elements. By scaling down your
imagery, type, graphics etc. you
can create some luxurious
white space around your focal
points while staying within the
frame of your original graphic.
Alignment
Create Order
The strong degree of alignment
between its elements creates a sharp,
neat and effective layout that is easy
to navigate and is pleasing to the eye.
Text Alignment
Alignment is also very
important when dealing with
type. There are many ways to
align your type, but a good rule
of thumb for longer pieces of
copy is to stick with left
alignment as this is the easiest
for the eye to navigate and
make sense of.
Rule of Thirds
The rule of thirds is a simple technique where designers divide their
designs up into three rows and three columns, and at the points where
the vertical and horizontal lines meet is where your focal points
should be.
Focal Points
By placing focal points at each
line intersection, his design is
made striking and effective.
Beachy also notes that “By
avoiding a centered design you
add some motion and interest.”
Rule of 3rds
Good Luck!
Resources
• https://designschool.canva.com/blog/visual-design-composition/
1 de 33

Mais conteúdo relacionado

Mais procurados

Class 3 PrinciplesClass 3 Principles
Class 3 Principlesrschaff1
2.1K visualizações31 slides
Basic layout principlesBasic layout principles
Basic layout principlesSherwin Manual
88.4K visualizações33 slides
Design principles  Design principles
Design principles Eman Magdi
1.3K visualizações41 slides
Principlesofdesign10Principlesofdesign10
Principlesofdesign10ahill7
859 visualizações26 slides
The Principles of Good DesignThe Principles of Good Design
The Principles of Good DesignJennifer Janviere
12.6K visualizações14 slides

Mais procurados(20)

Class 3 PrinciplesClass 3 Principles
Class 3 Principles
rschaff12.1K visualizações
Basic layout principlesBasic layout principles
Basic layout principles
Sherwin Manual88.4K visualizações
Graphic design slideshow Graphic design slideshow
Graphic design slideshow
Beaverton School District13.2K visualizações
Design principles  Design principles
Design principles
Eman Magdi1.3K visualizações
Principlesofdesign10Principlesofdesign10
Principlesofdesign10
ahill7859 visualizações
The Principles of Good DesignThe Principles of Good Design
The Principles of Good Design
Jennifer Janviere12.6K visualizações
Guide to print ad visualsGuide to print ad visuals
Guide to print ad visuals
Largest Catholic University1.5K visualizações
Elements of Graphic Design - Avantika UniversityElements of Graphic Design - Avantika University
Elements of Graphic Design - Avantika University
Avantika University150 visualizações
Print and Outdoor Design ad LayoutPrint and Outdoor Design ad Layout
Print and Outdoor Design ad Layout
Largest Catholic University13.7K visualizações
Basic designBasic design
Basic design
Charles Coursey2.9K visualizações
Basic concept of Graphic DesignBasic concept of Graphic Design
Basic concept of Graphic Design
Ashikul Islam6K visualizações
Elements and principles in graphics design Elements and principles in graphics design
Elements and principles in graphics design
grimsbyboy25.5K visualizações
Principles Of  Design 1Principles Of  Design 1
Principles Of Design 1
Robert Brandstetter1.9K visualizações
6 principles of design in 20196 principles of design in 2019
6 principles of design in 2019
Tayyab Akram70 visualizações
Fundamentals of User Interface DesignFundamentals of User Interface Design
Fundamentals of User Interface Design
Merlin Rebrović33.1K visualizações
Basic Principles of Graphics and LayoutBasic Principles of Graphics and Layout
Basic Principles of Graphics and Layout
joypamor20.6K visualizações
Visual ElementsVisual Elements
Visual Elements
Alaa Sadik6.8K visualizações
U4 jou231 basic_designprinciplesU4 jou231 basic_designprinciples
U4 jou231 basic_designprinciples
poole7480 visualizações
Elements of design 1(1)Elements of design 1(1)
Elements of design 1(1)
V.V.V College for Women, Virudhunagar276 visualizações
Principal of designPrincipal of design
Principal of design
Nikita Sharma253 visualizações

Similar a Visual Design

IVC - Lesson 14IVC - Lesson 14
IVC - Lesson 14Arzoo Sahni
466 visualizações10 slides
Design 101 > Lesson 01Design 101 > Lesson 01
Design 101 > Lesson 01Sean Buch
83 visualizações21 slides
Layouting.pptxLayouting.pptx
Layouting.pptxjamesnickseramines1
13 visualizações29 slides

Similar a Visual Design(20)

Introduction to Graphic Design.pdfIntroduction to Graphic Design.pdf
Introduction to Graphic Design.pdf
DigzignDigzign25 visualizações
IVC - Lesson 14IVC - Lesson 14
IVC - Lesson 14
Arzoo Sahni466 visualizações
Design 101 > Lesson 01Design 101 > Lesson 01
Design 101 > Lesson 01
Sean Buch83 visualizações
Digital Art (Virtual) week 2.pdfDigital Art (Virtual) week 2.pdf
Digital Art (Virtual) week 2.pdf
StephanieWitham17 visualizações
Layouting.pptxLayouting.pptx
Layouting.pptx
jamesnickseramines113 visualizações
Presentation Board Layout Presentation Board Layout
Presentation Board Layout
NYCCTfab 26.5K visualizações
Print AdsPrint Ads
Print Ads
John Grace16.1K visualizações
G321 Magazine Flat PlanG321 Magazine Flat Plan
G321 Magazine Flat Plan
Daisy Whitefield280 visualizações
Graphic DesignGraphic Design
Graphic Design
Randy Torrecampo1.6K visualizações
The Language of Design.pdfThe Language of Design.pdf
The Language of Design.pdf
LamiSam64 visualizações
Principles of DesignPrinciples of Design
Principles of Design
Patrick Morgan1.1K visualizações
Crew 430 group presentationCrew 430 group presentation
Crew 430 group presentation
Zoe Lauckner209 visualizações
Things to-consider-when-making-visual-design-arrangementThings to-consider-when-making-visual-design-arrangement
Things to-consider-when-making-visual-design-arrangement
Ella Mae Hernandez20 visualizações
Design OverviewDesign Overview
Design Overview
Sam Georgi2.5K visualizações
Introduction to Design (Yearbook Class)Introduction to Design (Yearbook Class)
Introduction to Design (Yearbook Class)
Sam Georgi844 visualizações
Week 202 design skillsWeek 202 design skills
Week 202 design skills
Steve340 visualizações
25 epic graphic design tips for non-designers25 epic graphic design tips for non-designers
25 epic graphic design tips for non-designers
Ram Chary Everi21 visualizações
compositional F07.pptcompositional F07.ppt
compositional F07.ppt
DebanjanBandyopadhya81 visão

Mais de Briana VanBuskirk

Gamification in CanvasGamification in Canvas
Gamification in CanvasBriana VanBuskirk
138 visualizações32 slides
How to wash your handsHow to wash your hands
How to wash your handsBriana VanBuskirk
588 visualizações8 slides
Magazine inspirationMagazine inspiration
Magazine inspirationBriana VanBuskirk
958 visualizações21 slides
Midterm reviewMidterm review
Midterm reviewBriana VanBuskirk
668 visualizações101 slides
Uploading index-sallieUploading index-sallie
Uploading index-sallieBriana VanBuskirk
525 visualizações10 slides
Editor's letterEditor's letter
Editor's letterBriana VanBuskirk
1K visualizações19 slides

Mais de Briana VanBuskirk(15)

Gamification in CanvasGamification in Canvas
Gamification in Canvas
Briana VanBuskirk138 visualizações
How to wash your handsHow to wash your hands
How to wash your hands
Briana VanBuskirk588 visualizações
Magazine inspirationMagazine inspiration
Magazine inspiration
Briana VanBuskirk958 visualizações
Midterm reviewMidterm review
Midterm review
Briana VanBuskirk668 visualizações
Uploading index-sallieUploading index-sallie
Uploading index-sallie
Briana VanBuskirk525 visualizações
Editor's letterEditor's letter
Editor's letter
Briana VanBuskirk1K visualizações
Html codingHtml coding
Html coding
Briana VanBuskirk5.1K visualizações
Textual elementsTextual elements
Textual elements
Briana VanBuskirk2.8K visualizações
Copyright lawCopyright law
Copyright law
Briana VanBuskirk889 visualizações
Magazine elementsMagazine elements
Magazine elements
Briana VanBuskirk13.6K visualizações
Logo designLogo design
Logo design
Briana VanBuskirk716 visualizações
Personal branding digital presencePersonal branding digital presence
Personal branding digital presence
Briana VanBuskirk319 visualizações
Social conscious posterSocial conscious poster
Social conscious poster
Briana VanBuskirk1.7K visualizações
Newsletter InspirationNewsletter Inspiration
Newsletter Inspiration
Briana VanBuskirk728 visualizações
Tessellation PPTTessellation PPT
Tessellation PPT
Briana VanBuskirk6.8K visualizações

Último(20)

Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdf
Atiqur Rahaman15 visualizações
Scopic UX Design Test Task.pdfScopic UX Design Test Task.pdf
Scopic UX Design Test Task.pdf
Atiqur Rahaman258 visualizações
Here_Process bookHere_Process book
Here_Process book
nykimstudio15 visualizações
The Last GrainsThe Last Grains
The Last Grains
pulkkinenaliisa36 visualizações
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media12 visualizações
Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa16 visualizações
3 Dark Design Templates3 Dark Design Templates
3 Dark Design Templates
Pixeldarts14 visualizações
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal Chemistry
NarminHamaaminHussen9 visualizações
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 visualizações
Task 3.pptxTask 3.pptx
Task 3.pptx
ZaraCooper217 visualizações
My Creative Resume DIAPOS.pptxMy Creative Resume DIAPOS.pptx
My Creative Resume DIAPOS.pptx
BrayanQuispe239 visualizações
evidence .pptxevidence .pptx
evidence .pptx
npgkddpbpd9 visualizações
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen5 visualizações
Design System in Figma A to Z.pdfDesign System in Figma A to Z.pdf
Design System in Figma A to Z.pdf
Atiqur Rahaman13 visualizações
Oregon Ducks 4 Spencer Webb HoodieOregon Ducks 4 Spencer Webb Hoodie
Oregon Ducks 4 Spencer Webb Hoodie
brandshop15 visualizações
Design System.pdfDesign System.pdf
Design System.pdf
Atiqur Rahaman10 visualizações
SS25 Fashion Key Items trend bookSS25 Fashion Key Items trend book
SS25 Fashion Key Items trend book
Peclers Paris80 visualizações
UX Camp Nov 2023_upload.pptxUX Camp Nov 2023_upload.pptx
UX Camp Nov 2023_upload.pptx
Amir Ansari49 visualizações

Visual Design

  • 3. Find your Focus The focal point of this piece is the model and her clothes. So, she has been placed centrally, has type and a block of color positioned in a way that highlights and draws attention toward her face and then to her outfit, and leading lines direct the eye down her frame and gradually toward more information.
  • 4. Focal Point The focus on the photograph of the man. The design orients the focus to this image by placing him centrally, framing him with the graphics, and using the doodled graphics to lead the eye in toward the photograph.
  • 5. Leading Lines Just like you point at something when you want people to look at it, by positioning certain lines and shapes in certain ways you can control the viewpoint of your design, aka where viewers’ eyes go when they see your design.
  • 6. Flowcharts Flowcharts use lines to direct your eye from one point to the next in an obvious way.
  • 7. Leading Lines = Focal Point This poster design by Design By Day that uses strong leading lines to first guide the eye toward the main focal point (the title), and then to various rungs of information.
  • 8. Scale and Hierarchy In a very brief explanation, hierarchy is the arrangement and design of elements in order to visually signal importance. So, you might make a more important element bigger and bolder than a less important element which might be smaller and fainter.
  • 9. Type Hierarchy These days, our headlines or titles don’t have to be six inches tall to catch readers’ attention, but the image to the right provides a dramatic reminder of just what typographic hierarchy is all about — organizing and formatting your type choices in such a way that readers or users can clearly see what’s most important, which enables them to easily navigate the layout at a glance and quickly scan to find the information they’re looking for.
  • 10. Scale This poster design by Jessica Svendsen uses a scaled-up image as the largest element, which helps it attract the most attention and focus. This poster design by Scott Hansen uses a scaled-down, small silhouette of two people to help communicate the massive scene in front of them. This instantly gives viewers a sense of the grandeur and size of the scene.
  • 12. Symmetrical Balance A symmetrical composition by reflecting the positioning of type and graphic elements. By using symmetry, this design is made elegant, clean, and beautifully balanced.
  • 13. Asymmetrical Balance In the above design, the three central circles are the largest elements in the design, but they are balanced out both by the type, the fine line graphics, and the small, heavily textured circle in the bottom corner.
  • 15. Complimentary photos Use photos from the same photoshoot. This is an easy way to ensure your photographs look cohesive as they were likely all under the same art direction and photographic style.
  • 16. Photo Color Color your photos similarly. With the prevalence of filters and image adjusting tools, you are able to color and adjust your photos to have more cohesive and complementary palettes.
  • 19. Low Contrast This poster by Melanie Scott Vincent uses a yellow paperclip on a yellow background, creating a low contrast difference between the object and backdrop. While this is usually a thing to avoid, in this case it reinforces the event name ‘ignored everyday’.
  • 21. Multi-Paged Layout To maintain consistency and a logical layout, try to take specific elements from one section of your design and apply it to other sections. Maybe a style of type can be applied to more than one section of your design, or perhaps a graphic motif can be used more than once. So, try to tie your design together with repeated elements. Repetition is a key factor when it comes to multi page layouts. Repeating elements of your layout and/or design helps each page flow into the next, creating a cohesive set of pages.
  • 22. Repeat Styles This poster repeats certain type stylizations, graphics, and line weights throughout to maintain a cohesive and effective design. If it were to suddenly use a thick, bold, pink line-based graphic somewhere in the middle, the cohesion would be lost. So, by keeping the font palette and color palette small and the graphic styles simple and alike, the design is kept beautiful and strong.
  • 24. Clarity White space when used strategically can help boost your design’s clarity and overall look by balancing out the more complicated and busy parts of your composition with space that helps your design to breathe. For example, this design uses white space to balance out the image, texture and type to keep the design clean and sophisticated.
  • 25. Create a Frame Scale down your graphic elements. By scaling down your imagery, type, graphics etc. you can create some luxurious white space around your focal points while staying within the frame of your original graphic.
  • 27. Create Order The strong degree of alignment between its elements creates a sharp, neat and effective layout that is easy to navigate and is pleasing to the eye.
  • 28. Text Alignment Alignment is also very important when dealing with type. There are many ways to align your type, but a good rule of thumb for longer pieces of copy is to stick with left alignment as this is the easiest for the eye to navigate and make sense of.
  • 29. Rule of Thirds The rule of thirds is a simple technique where designers divide their designs up into three rows and three columns, and at the points where the vertical and horizontal lines meet is where your focal points should be.
  • 30. Focal Points By placing focal points at each line intersection, his design is made striking and effective. Beachy also notes that “By avoiding a centered design you add some motion and interest.”