Class Topic: What is Graphic Design? Unit 5 Lesson 3- Business Cards
Business Card HierarchyName:________________________________
Step ONE: Find a visual example of each type of visual
hierarchy and paste them in a word document.Label each accordingly and size them so that they fit on two pages.Put your name in the top corner and print!
Step TWO: Choose the card layout you think is the
strongest.Write one paragraph talking
about the visual hierarchy of the card and why it is most successful.Please print this with your name on the
top.If you do not finish this is for
homework! (You may write it out if you can’t print at home)
Business Card
Printing
File->New From
Template->Blank Templates->Business Cards
Use the template all the way on the right side with four
dividers.
For the second step creating four different layouts of the
same card on illustrator:
Put four different images in each rectangle.
For the
final layout:
Put four
of the same image in each rectangle.
(If you
want a backside printed we will put the paper back in the printer)
Checklist:
Did you make ever decision with
purpose?
Did you divide the space so the
background is interesting?
Did you use a specific color
harmony?
Are your lines clean and neat?
Did you use visual hierarchy?
Is all the correct information on
the card?
6 principles of visual hierarchy for designers
First there were stone tablets, papyrus scrolls and paper. Then came computer screens and electronic tablets. As the technology to display a page evolves, it remains the designer’s job to arrange the content clearly. But what’s the best way?
It’s an increasingly important question, as responsive frameworks force designers to think about many different pages at once. Faced with dense text and short attention spans, designers developed 6 principles to guide the reader’s eyes to the most important information.
These 6 principles of visual hierarchy will help you design everything from brochures to apps, guaranteeing a positive reading experience for the end-user. Clay tablet: Wikipedia (left); iPad: apple.com (right)
1. Page scanning patterns
All cultures read from the top down and most cultures read from left to right. But while that knowledge is important for page design, designers know the task is much more complex.
Recent studies have shown that people first scan a page to get a sense of whether they are interested, before committing to read it. Scanning patterns tend to take one of two shapes, “F” and “Z,” and you can take advantage of this in your design. F-patterns apply to traditional, text-heavy pages like articles or blog posts. A reader scans down the left side of the page, looking for interesting key words in left-aligned headings or initial topic sentences, then stopping and reading (to the right) when he or she comes to something interesting. The result looks something like an F (or E, or something with even more horizontal bars; but the “F” term has stuck). Heat map: Nielsen Norman Group
How can you utilize this? Align your important information left and make use of short, bolded headlines, bullet points and other such attention-grabbers to break up paragraph blocks. Z-patterns apply to other sorts of pages, like ads or websites, where information is not necessarily presented in block paragraphs. A reader’s eye first scans across the top of the page, where important information is likely to be found, then shoots down to the opposite corner at a diagonal and does the same thing across the lower part of the page. Source: tuts+
Web designers commonly construct their pages to conform explicitly to this behavior, placing the most important information in the corners and orienting other important information along the top and bottom bars and connecting diagonal. In the below design for the 2010 Build conference, important elements include the logo (upper left), “register now” button (upper right), and speakers list (across the bottom), all of which are strategically placed at the sweet spots of the Z-pattern. Website: Build
2. Size
This one is simple enough: people read bigger things first. If your eye goes to “performance” before “cracking” in the below ad for the Young Vic theater, then you should get in touch with a perceptual psychologist immediately: you can probably make some good money undergoing testing as a rare anomaly. Poster: Rebecca Foster
What’s interesting, is that this tendency is actually strong enough to override the top-down rule. In the above image, “cracking” overrides “time to act” because it is both bigger and to the left (so left-to-right rule lends a hand). But in the below page from Annual Report: Human Rights Campaign 2012 (designed by Column Five Media), we read the large-print “Fighting for Equality on the Campaign Trail” before the text directly above it, “Election 2012.” Annual report: Column Five
“Election 2012″ is the highest-level order of information: it tells us the general topic that the information below falls under. But the designer decided that the article heading was more interesting for readers and so sized it to be read first.
3. Space and texture
Another way of drawing attention is to give content ample room to breathe. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers.
As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space. Website: Draw to Click
When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page. This example by Bright Pink illustrates the concept nicely: Posters: Bright Pink (via Smashing Magazine)
In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent, thanks to a black rectangle that highlights “badminton” and sets it into its own space. In the third image, a background scribble interrupts the space of “Sports” but not “badminton,” and consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”
4. Typeface weight and pairing
Typeface selection is critical to establishing visual hierarchy. Among a typeface’s most important attributes are weight – the width of the strokes that compose its letters – and style, like serif and sans serif. Other modifications like italicization can play a role too.
Note how typeface affects the hierarchy order of the words in the below web design for The Tea Factory: “the perfect teas to keep you warm” is the focal point, but differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience. “See our selection,” the call to action, is more strongly emphasized than the text above it due to sizing and spacing. Branding: The Tea Factory
In some cases, the goal is to present a variety of information as equally urgent. Setting it all to the same size and weight would accomplish the equivalency, but would also make it monotonous. Differentiating the typefaces is one way to avoid this, as on the below Trendi magazine cover. Here, the five teasers around the periphery of the page are all equal on the hierarchy, but achieve variety by altering between two well-paired typefaces – one a mid-weight serif, the other a lightweight but tall sans serif. Magazine cover: Trendi (via The Kasper Stromman Design Blog)
5. Color and tint
Here’s another no-brainer: bright colors stand out from muted colors or grayscale, while lighter tints appear more “distant” and thus fall lower on the hierarchy than richer, darker ones. The website for Where They At contrasts highlighter yellow and color illumination against a black-and-white grid to striking effect: Website: Where They At The Guggenheim website uses color to accentuate important information like location choice, the list of exhibitions currently on view, and the links to special exhibitions. Website: Guggenheim Museum
The website for the Whitney Museum, on the other hand, establishes hierarchy within a single typeface, weight and tone (black) by using tint (which refers to the addition of white to a base tone, making it lighter). “Cory Arcangel on Pop Culture” is clearly beneath “New on Whitney Stories” on the visual hierarchy, not only because it is placed lower but because its tint is lighter, making it less striking to the eye against the white background. Website: Whitney Museum of American Art
Color is of particular importance in mobile app design, where a small screen size limits your ability to use other strategies like size differentiation and broad spacing. On Grainger Industrial Supply‘s app, the “proceed to checkout” button is colored red, making it stand out from any page where it appears. The “Narrow Your Search Results” bar, by contrast, is grey, making it roughly equivalent on the hierarchy with other elements like the search bar and product links. App design: Grainger (via codrops)
6. Direction
Page layouts are typically designed according to a grid of vertical and horizontal lines, both by convention and because this is the most legible format. In such a system, a new way to establish hierarchy emerges: break the grid. Text that is arranged on a curve or diagonal will automatically stand out against surrounding grid-locked text, taking center stage. This has long been an effective strategy in advertisements like the below bus stop poster by Frost Design.
Given previous knowledge from the two Adobe programs, the student will design a poster createdusing Adobe Photoshop and Illustrator.
Activity:
Students will complete a project creating a poster in Illustrator and Photoshop. Each assignment will be submitted to turnitintomsw@gmail.com and edmodo.
The Golden Ratio is something every designer should know about. We'll explain what it is and how you can use it.
There's a common mathematical ratio found in nature that can be used to create pleasing, natural looking compositions in your design work. We call it the Golden Ratio, although it's also known as the Golden Mean, The Golden Section, or the Greek letter Phi. In this article, we'll explain what it is, how you can use it, and point to some great resources for further inspiration and study...
01. What is the Golden Ratio?
Based on the Fibonacci Sequence (which you may remember from either your school mathematics lessons or Dan Brown's novel The Da Vinci Code), the Golden Ratio describes the relationship between two proportions.
Fibonacci numbers, like many elements found in nature, follow a 1:1.61 ratio - this is what we refer to as the Golden Ratio, and as it forms such a common sight in nature, it feels pleasing to the eye when we use this same ratio in our design work. The Golden Ratio is the relationship between two numbers on the Fibonacci Sequence......and plotting the relationships in scale provides us with a spiral that can be seen in nature all around usIt's believed that the Golden Ratio has been in use for at least 4,000 years in human art and design, but it may be even longer than that - some people argue that the Ancient Egyptians used the principle to build the pyramids. In more contemporary times, the Golden Ratio can be observed in music, art, and design all around you.
Examples
Use of the Golden Ratio is well documented in art and design throughout history, and can be seen in everything from architecture to the grand masters. By applying a similar working methodology you can bring the same design sensibilities to your own work. Here are just a couple of examples to inspire you:
The Parthenon
Ancient Greek architecture used the Golden Ratio to determine pleasing dimensional relationships between the width of a building and its height, the size of the portico and even the position of the columns supporting the structure. The final result is a building that feels entirely in proportion. The neo-classical architecure movement reused these principles too.
The Last Supper
Leonardo da Vinci, like many other artists throughout the ages, made extensive use of the Golden Ratio to create pleasing compositions. In the last supper, the figures are arranged in the lower two thirds (the larger of the two parts of the Golden Ratio), and the position of Jesus is perfectly plotted by arranging golden rectangles across the canvas.
Nature
There are also numerous examples of the Golden Ratio in nature - you can observe the ratio all around you. Flowers, sea-shells, pineapples, and even honeycombs all exhibit the same principle ratio in their make-up. So using the Golden Ratio in your design work is both appropriate and foreshadowed in our everyday environment.
03. How to construct a Golden Ratio rectangle
Creating a Golden Rectangle is pretty straightforward, and starts with a basic square. Follow the steps below to create your own Golden Ratio:
Step 01
Draw a square. This will form the length of the 'short side' of the rectangle.
Step 02
Divide your square in half with a vertical line, leaving you with two rectangles.
Step 03
In one rectangle, draw a line from one corner to the opposite corner.
Step 04
Rotate this line so that it appears horizontally adjacent to the first rectangle.
Step 05
Create a rectangle using the new horizontal line and original rectangle as guides.
05. How to use the Golden Ratio in your design work
Using the Golden Ratio is simpler than you might think! There are a couple of quick tricks you can use to estimate it into your layouts, or you can plan a little more and fully embrace the concept!
The quick way
If you’ve ever come across the 'Rule of Thirds' you’ll be familiar with the idea that by dividing an area into equal thirds both vertically and horizontally, the intersection of the lines will provide a natural focal point for the shape.
Photographers are taught to position their key subject on one of these intersecting lines to achieve a pleasing composition, and the same principle can be used in your page layouts, web mockups, and poster designs.
Although the rule of thirds can be applied to any shape, if you apply it to a rectangle with proportions approximately 1:1.6, you get very close to a Golden Rectangle, which makes the composition all the more pleasing to the eye.
Full implementation
If you want to fully implement the Golden Ratio into your design, you can do so easily by ensuring that the relationship between your content area and sidebar (in a website design, for example) adheres to the 1:1.61 ratio.
It’s okay to round this up or down by a point or two to make the numbers worth with pixels or points - so if you have a content area of 640px, a sidebar of 400px will match the Golden Ratio well enough to work, even though it’s actually a ratio of 1:1.6. Using the Golden Ratio in a web-page layout provides a natural, eye-pleasing resultOf course, you can also sub-divide the content and sidebar areas up using the same ratio, and the relationship between a webpage’s header, content area, footer and navigation can also be designed using the same basic Golden Ratio.
GoldenRATIO's favourites feature stores your settings for repetitive tasksGoldenRATIO is an app providing an easy way to design websites, interfaces and layouts according to the golden ratio. Available in the Mac App Store for $2.99, the app features a built-in calculator with visual feedback, a 'favourites' feature that stores you screen position and settings for repetitive tasks, and a 'Click-thru' mode which means you can use it as an overlay in Photoshop and still work on the canvas.
This calculator from Pearsonified helps you to create the perfect typography for your website in line with Golden Ratio principles. Just enter a font size, content width, or both into the field on the website, and click the Set my type! button. If you’d like to optimize for characters per line, you can enter an optional CPL value.
Phicalculator does one job, and it does it very wellThis simple but useful free app is available for both Mac and PC. Give it any number and it will calculate the corresponding number according to the golden ratio.
Atrise's tool lets you design visually according to the Golden RatioThis on-screen ruler and grid software saves you all that messing about with calculations and allows you to design using the golden section proportion visually. You can see and change the harmonious forms and sizes, while being directly in the process of working on your project. A regular license costs $49, but you can download a free trial version that's good for 30 days.
This Smashing Magazine tutorial explains divine proportion and the Rule of Thirds and describes how you can apply both of them effectively to your web layouts. Some good starting points you can build upon or develop further. Words: Sam Hampton-Smith This is an updated and expanded version of an article previously published on Creative Bloq.
Given developed skills in Illustrator, the student will learn about the honors convocation to create a cover for the Honors Convocation in Illustrator.
Activity:
Students will complete a project using Illustrator . Each assignment will be submitted to turnitintomsw@gmail.com and edmodo.
Below is a short adjective list that can get you started on your way to building an adjective list. These words can be used to describe feelings and appearances of objects and can make it easy to describe yourself, your surroundings, and your favorite things. You can use this list to build your own list, adding words you like and removing words you do not, replacing them with even more descriptive words. By keeping this list on your desk as you write, you can refer to is and learn to add more descriptive words into your writing.
adorable
adventurous
aggressive
agreeable
alert
alive
amused
angry
annoyed
annoying
anxious
arrogant
ashamed
attractive
average
awful
bad
beautiful
better
bewildered
black
bloody
blue
blue-eyed
blushing
bored
brainy
brave
breakable
bright
busy
calm
careful
cautious
charming
cheerful
clean
clear
clever
cloudy
clumsy
colorful
combative
comfortable
concerned
condemned
confused
cooperative
courageous
crazy
creepy
crowded
cruel
curious
cute
dangerous
dark
dead
defeated
defiant
delightful
depressed
determined
different
difficult
disgusted
distinct
disturbed
dizzy
doubtful
drab
dull
eager
easy
elated
elegant
embarrassed
enchanting
encouraging
energetic
enthusiastic
envious
evil
excited
expensive
exuberant
fair
faithful
famous
fancy
fantastic
fierce
filthy
fine
foolish
fragile
frail
frantic
friendly
frightened
funny
gentle
gifted
glamorous
gleaming
glorious
good
gorgeous
graceful
grieving
grotesque
grumpy
handsome
happy
healthy
helpful
helpless
hilarious
homeless
homely
horrible
hungry
hurt
ill
important
impossible
inexpensive
innocent
inquisitive
itchy
jealous
jittery
jolly
joyous
kind
lazy
light
lively
lonely
long
lovely
lucky
magnificent
misty
modern
motionless
muddy
mushy
mysterious
nasty
naughty
nervous
nice
nutty
obedient
obnoxious
odd
old-fashioned
open
outrageous
outstanding
panicky
perfect
plain
pleasant
poised
poor
powerful
precious
prickly
proud
puzzled
quaint
real
relieved
repulsive
rich
scary
selfish
shiny
shy
silly
sleepy
smiling
smoggy
sore
sparkling
splendid
spotless
stormy
strange
stupid
successful
super
talented
tame
tender
tense
terrible
testy
thankful
thoughtful
thoughtless
tired
tough
troubled
ugliest
ugly
uninterested
unsightly
unusual
upset
uptight
vast
victorious
vivacious
wandering
weary
wicked
wide-eyed
wild
witty
worrisome
worried
wrong
zany
zealous
Choose a company name:
_______________________________________________________________
What audience are you trying to target?
What colors will you use and why?
How will I unite my logo so that it looks like one in tact design?
