Download - DESIGN FUNDAMENTALS - library.umass.edu
portfolio design - carolina aragón
DESIGN FUNDAMENTALS
VISUAL COMMUNICATION
Carolina AragónAssistant Professor
Landscape [email protected]
visual hierarchyportfolio design - carolina aragón
DESIGN FUNDAMENTALS
Gestalt
Visual Hierarchy
Page Layout + Grids
Typography
Carolina AragónLandscape Architecture & Regional Planningportfolio design - carolina aragón
figure-ground
proximity
similarity
continuity
GESTALTvisual perception
Carolina AragónLandscape Architecture & Regional Planning
figure-ground
Carolina AragónLandscape Architecture & Regional Planning
gestalt
figure-ground
Carolina AragónLandscape Architecture & Regional Planning
gestalt
figure-ground
Carolina AragónLandscape Architecture & Regional Planning
gestalt
figure-ground
Carolina AragónLandscape Architecture & Regional Planning
gestalt
figure-ground
Carolina AragónLandscape Architecture & Regional Planning
proximity
Carolina AragónLandscape Architecture & Regional Planning
gestalt
proximity
Carolina AragónLandscape Architecture & Regional Planning
gestalt
proximity
Carolina AragónLandscape Architecture & Regional Planning
gestalt
proximity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
A
B
C
gestalt
proximity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
A B
proximity
Carolina AragónLandscape Architecture & Regional Planning
similarity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
similarity
A
B
C
D
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
similarity
Carolina AragónLandscape Architecture & Regional Planning
continuity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
continuity
source: http://www.scholarpedia.org/article/Gestalt_principles
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
continuity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
continuity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
contrast
proximity
repetition
alignment
?VISUALHIERARCHY
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
contrast Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high. Like a dia-mond in the sky. When the blazing sun is gone. When he nothing shines upon.Then you show your little light, Twinkle, twinkle, all the night. Then the traveler inthe dark. Thanks you for your tiny spark. He could not see which way to go. If you did not twinkle so. In the dark blue sky you keep. And often through my curtains peep. For you never shut your eye. Till the sun is in the sky. As your bright and tiny spark. Lights the traveler in the dark. Though I know not what you are. Twinkle, twinkle, little star. Twinkle, twinkle, little star. How I wonder what you are. Up above the world so high. Like a diamond in the sky. Twinkle, twin-kle, little star. How I wonder what you are. How I wonder what you are. Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high. Like a diamond in the sky. When the blazing sun is gone. When he noth-ing shines upon.Then you show your little light.Twinkle, twinkle, all the night. Then the traveler figure-ground
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
fonts
contrastTwinkle, twinkle, little starHow I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
In the dark blue sky you keep, And often through my curtains peep, For you never shut your eye, Till the sun is in the sky.
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
contrast
size
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
size
contrast
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
negative space
contrast
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
contrast
colorfrom
Infographics: The Power of Visual Storytelling
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
color
contrast
from Infographics: The Power of
Visual Storytelling
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
color
contrast
from Infographics: The Power of
Visual Storytelling
similarity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
clouds
proximity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
proximity
clouds
proximity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
proximity
clouds
cumulus
cirrocumulus
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
alignment
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
1 2
Supernova
Twinkle, twinkle
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
alignment
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
1 2
Supernova
Twinkle, twinkle
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
alignment
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
1 2
Supernova
Twinkle, twinkle
continuity
proximity
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
repetition
A Natural History of the Screwdriver
little star
One Good Turnfonts size
page layoutA screwdriver is a tool, manual or pow-ered, for turning (driving or removing) screws. A typical simple screwdriver has a handle and a shaft, and a tip that the user inserts into the screw head to turn it. The shaft is usually made of tough steel to resist bending or twisting. The tip may be hardened to resist wear, treated with a dark tip coating for improved visual con-trast between tip and screw—or ridged or treated for additional ‘grip’. Handle are typically wood, metal, or plastic[1] and usually hexagonal, square, or oval in cross-section to improve grip and pre-vent the tool from rolling when set down.
Philips head screwdriver
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
repetitionA Natural History of the Chair
little star
Take a Seat
A chair is a piece of furniture with a raised surface commonly used to seat a
single person. Chairs are supported most often by four legs and have a back;[1][2] however, a chair can have three legs or could have a different shape.[3] Chairs
are made of a wide variety of materials, ranging from wood to metal, and they may be padded or upholstered, either
just on the seat or on the entire chair (e.g., with a La-Z-Boy chair). Chairs are
used in a number of rooms in homes (e.g., in living rooms, dining rooms and
dens), in schools and offices (with desks) and in various other workplaces.
Marc Newson chair
A Natural History of Lemonade
little star
Have a drink
Lemonade is a lemon-flavored drink sweetened with sugar among other
sweeteners. In North America, certain European and African countries, and
most Asian countries lemonade is usually made from a basic recipe of lemon juice,
water, and cane sugar or honey and is often home-made. As with other citrus
products like orange juice, it can be characterised as regular or home style,
the latter indicating the presence of pulp in the end product.[1] Lemonade can
also be partially or completely frozen, or added to other beverages like iced tea,
hot tea, coffee, and beer and used as the base for cocktails.
Glass of lemonade
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
repetition
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
Twinkle, twinkle little star
little starlittle star
twinkle, twinkle
A
B
visual hierarchyCarolina AragónLandscape Architecture & Regional Planning
repetition
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
When the blazing sun is gone, When he nothing shines upon, Then you show your little light, Twinkle, twinkle, all the night.
Then the traveler in the dark, Thanks you for your tiny spark, He could not see which way to go, If you did not twinkle so.
A
AP1
P2AB
B
B
B
B
organizing text & images
PAGE LAYOUTS + GRIDS
layout
visual flow
reading gravity
the grid
layout
layout
empty page/screen
layout
layout
divide into thirds
Rule of thirds
layout
layout
happyuncluttered
negative space
Rule of thirds jelliesThis is a paragraph pretending to be text supporting the jellyfish images. Aren’t they beautiful?
figure-ground
layout
layout
Rule of thirds jelliesThis is a paragraph pretending to be text supporting the jellyfish images. Aren’t they beautiful?
layout
layout
negative space
jellies This is a paragraph pretending to be text supporting the jellyfish images. Aren’t they beautiful?
layout
layout
negative space
jelliesThis is a paragraph pretending to be text supporting the jelly-fish images. Aren’t they beautiful? - I think so.
layout
visual flow
how people see/read:
Gutenberg Diagram
Describes eye movement when there is NO HIERARCHY,
especially for text.
Gutenberg Diagram charts basic reading eye movement from the PRIMARY OPTICAL AREA (POA), to the TERMINAL ANCHOR (TA). Crosses indicate fallow corners and the arc of wavy lines show “backward” movement that the reading eye resists.
layout
visual flow
from Lisa Graham’sBasics of Design: Layout and Typography for
Beginners
how people see/read:
backward S-shape
Describes eye movementwhen there is a mix of text and
images
layout
visual flow
run
layout
page layout
reading gravity
from Colin Whe’sType & layout : how typography and design
can get your message across--or get in the way
layout
page layout
reading gravity
from Colin Whe’sType & layout : how typography and design
can get your message across--or get in the way
layout
page layout
reading gravity
from Colin Whe’sType & layout : how typography and design
can get your message across--or get in the way
layout
page layout
reading gravity
from Colin Whe’sType & layout : how typography and design
can get your message across--or get in the way
G R I Dusing the
layout
grid
the grid
Allows for continuity, the development of hierarchy and
flexibility in your layouts
margins
flowlines
spatialzones
markers
modulescolumns
from Timothy Samara’sMaking and Breaking the Grid
layout
grid
Green is the new Green
This is where you would place some of the text that will likely not be read but that can help suppport your composition.
You may also use key-words or short expla-nations of the images to better explain your project.
You could also use this space to fill in with small diagrams (that are readable) or images that look good at a small scale.
Below you may also use this to list credits, clients, travel, other important aspects of your project that will help people recognize or validate your work.
This is too much text.
soil + sun+ water = plants
LA
Your studio titleA short line about the project
LocationDate
using the grid
from Timothy Samara’sMaking and Breaking the Grid
layout
Green is the new Green
This is where you would place some of the text that will likely not be read but that can help suppport your composition.
You may also use keywords or short explanations of the im-ages to better explain your project.
You could also use this space to fill in with small diagrams (that are readable) or images that look good at a small scale.
Below you may also use this to list credits, clients, travel, other important aspects of your project that will help people recognize or validate your work.
This is too much text.
soil + sun+ water = plants
LA
Your studio titleA short line about the project
LocationDate
using the grid
from Timothy Samara’sMaking and Breaking the Grid
spreads: using the grid
grid
layout
spreads: using the grid
A brief explanation or caption about the photograph could be really useful.
Green is the new Green
your name
your
Main Idea /Themesupporting statementsupporting statement
agriculture+ child rearing
Flowers are good for the spirit, so are vegetables like tomato and corn (shown right).
Growing food in rows is very effi-cient. Some plants grow best in wet environments.
Children should be exposed to agriculture early in their development so that they can become good people.
vegetablesmake
good peple
vegetables and flowers
grid
layout
column grid
from Timothy Samara’sMaking and Breaking the Grid
grid
layout
manuscript grid
from Timothy Samara’sMaking and Breaking the Grid
grid
layout
modular grid
from Timothy Samara’sMaking and Breaking the Grid
grid
layout
variations
from Timothy Samara’sMaking and Breaking the Grid
grid
layout
hierarchical grid
Flowers are good for the spirit, so are vegetables like tomato and corn (shown right).
Growing food in rows is very efficient. Some plants grow best in wet environments.
Children should be exposed to agriculture early in their development so that they can become good people.
You may also use this space to give more detailed description or, again, to add small thumbnail images of diagrams your project.
landscape
Your Engaging Title
Longer explanatory subtitlelocation
food & peopleGrowing food in rows is very efficient. See image above.
LASTNAME
2012
from Timothy Samara’sMaking and Breaking the Grid
grid
layout
2012
marginsgrid
figure-ground
layout
spatialzones
grid
proximity
layout
flowlines
grid
continuity
CHAPTERlayout + grids - carolina aragón
layout
board examples
CHAPTERlayout + grids - carolina aragón
layout
board examples
CHAPTERlayout + grids - carolina aragón
layout
board examples
Visual Clutter
layout + grids - carolina aragón
layout
board examples
CHAPTERlayout + grids - carolina aragón
layout
board examples
layout + grids - carolina aragón
layout
board examples
CHAPTERtypeportfolio design - carolina aragón
typography & identity
using fonts
typography
font anatomy
legibility
identity
examples
CHAPTERportfolio design - carolina aragón
typeportfolio design - carolina aragón
typography
Serif / Sans Serif / Slab
serif
sans serif slab
from Stephen Cole’s The anatomy of type : a graphic guide to 100 typefaces
CHAPTERportfolio design - carolina aragón
typeportfolio design - carolina aragón
typography
serif vs. sans serif
CHAPTERtypeportfolio design - carolina aragón
typography
sans serif examples
CHAPTERportfolio design - carolina aragón
typeportfolio design - carolina aragón
typography
serif examples
CHAPTERtypeportfolio design - carolina aragón
typography
type families
from fonts.com
CHAPTERportfolio design - carolina aragón
typeportfolio design - carolina aragón
GOODtypography
practices
CHAPTERtypeportfolio design - carolina aragón
typography
1- choose classical, time-tested fonts
from Rob Carter’sExperimental Typography
Futura
Gill Sans
Helvetica
News Gothic
Baskerville
Garamond
Palatino
Times New Roman
serif sans serif
CHAPTERportfolio design - carolina aragón
type
typography
prime viewing area
2 - avoid using too many typefaces at one time
CHAPTERportfolio design - carolina aragón
type
typography
prime viewing area
3 - using all capital letters retards reading PALATINO AT A SMALLER FONT
SIZE FOR THE BODY OF THE TEXT. SERIF FONTS ARE EASI-ER TO READ, THUS YOU WILL
BE ABLE TO USE THEM AT A SMALLER SIZE THAN SANS SER-
IF FONTS.
CHAPTERportfolio design - carolina aragón
typeportfolio design - carolina aragón
typography
4 - do not set text in lines that are too long or
too short
There are mul-tiple reasons to have more than one portfolio. You may have more than one skill set that you would like to promote sepa-rately. You may want to create a portfolio that is targeted to land-ing a specific job and send it to a
marketing direc-tor at a company. They’ll appreci-ate that. It saves them time and shows you re-ally want the job. Even if its a one page portfolio.
There are multiple reasons to have more than one portfolio. You may have more than one skill set that you would like to promote separately. You may want to create a portfolio that is targeted to landing a specific job and send it to a marketing director at a company. They’ll appreciate that. It saves them time and shows you really want the job. Even if its a one page portfolio.
too long
too shortThere are multiple reasons to have more than one portfolio. You may have more than one skill set that you would like to promote separately. You may want to create a portfolio that is targeted to landing a specific job and send it to a marketing direc-tor at a company. They’ll appreciate that. It saves them time and shows you really want the job. Even if its a one page portfolio.
about right
CHAPTERportfolio design - carolina aragón
type
typography
prime viewing area
5 - avoid widows and orphans whenever possible
There are multiple reasons to have more than one portfolio. You may have more than one skill set that you would like to promote separately. widow
There are multiple reasons to have more than one portfolio. You may have more than one skill set that you would like to promote separately.
how to fix
There are mul-tiple reasons to have more than one portfolio. You may have more than one skill set that you would like to promote sepa-rately. orphan
CHAPTERportfolio design - carolina aragón
type
typography
6- ensure good contrast between type and
background
This text is printed in black on a 30% tint of
black. Miles Tinker this 70% contrast is sufficient
to ensure legibility. Not everyone agrees.
This text is printed in black on a 60% tint of
black. The less the con-trast between text and background, the more
difficult it is to read.
This text is printed in cyan on a 30% tint of
cyan. Miles Tinker this 70% contrast is sufficient
to ensure legibility. Not everyone agrees.
70% contrast 40% contrast
This text is printed in cyan on a 60% tint of
cyan. The less the con-trast between text and background, the more
difficult it is to read.