Demo 1.2 Basic Design
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Demo 1.2 Basic Design as PDF for free.
More details
- Words: 2,027
- Pages: 23
Basic Elements Of Page Design TEKS 126.24
Dr. John Yearwood, Lamar University
Monday, July 13, 2009
What’s on a page? Headline Characteristics: Larger size type, darker type face, usually stands above the story (at the “head” of the story)
Dominant image Characteristics: the largest image on the page, sometimes the only image on the page, can also dominate the text by challenging the text borders
Text--all the words White space--what defines the edges of the designed chunks Monday, July 13, 2009
White Space [headline]
eye can enter here
[text]
[text]
[image]
Monday, July 13, 2009
eye can enter here
[text]
White space is everything that is not an image, text, or a headline. In this well defined page advertising a Suzuki motorcycle, the white space has been thoughtfully used to allow the reader’s eye to flow among and into the elements without being trapped. I have outlined the major elements of the page so you can see how the white space works for the design instead of against it. Here you can see that the eye has a way to enter the design and it is drawn to and ends at the dominant image. The image of the cycle is what sells it, so that’s where you want the eye to go.
when white space doesn’t work In this business card made by a student, there is no white space at all. The result, as you can see, is clutter and illegibility.
Monday, July 13, 2009
when white space doesn’t work
The separation at the top of the card asks our eyes to push the two elements apart rather than unifying them. Likewise at the bottom of the card, our eye wanders in towards the address and then gets stuck, nowhere to go. The worst part of it is the
Monday, July 13, 2009
space between the small bottom line and the piano, where the eye gets trapped again. A big part of this student’s problem was a lack of alignment, which generally solves most white space issues.
absence of white space One of the most egregious examples of the failure of white space can be seen in typical typewritten pages. This journal article is all but unreadable because of the inattention paid to the requirements of the readers’ eyes to assess and understand the text Also: the column of text is too wide: the most convenient width of a column is about the width of the spacing between the eyes, or around 3 inches; 6 inches is pushing it, and over 7 makes it confusing and difficult to follow. An even better rule of thumb: keep the line at 10-12 words wide, no matter how large the type. Another problem here: lack of contrast
Monday, July 13, 2009
text
There are two ways to talk about text: as a collection of words and as individual letters. First the collection: The decision to impose order on words by constructing them to be read in columns is evident in hieroglyphic and cuneiform writing thousands of years old. This is not a new idea. In our sample here, you can easily see the columns. Four of these columns are “justified”—that means that the left and right edges are straight. The little half-column on the right is “left-justified,” or “ragged right,” or “quad left” (all these terms mean the same thing: the left edge of the column is straight, the right edge is not). Justification makes alignment easier. It also makes everything so much neater. You want to use justified columns when you have serious matter to discuss, because the justification gives the text a sense of formality. It is as though it is standing at attention. If you have unjustified or ragged right text on the same page, that unjustified text will seem more casual and less significant. Here, this example bears out this impression. The half column on the right looks like a series of afterthoughts marked with little red square bullets, not like serious, important story. Also, note the use of white space in this layout.
‘justified’ Monday, July 13, 2009
‘ragged right’
text alignment
Notice that the tops and bottoms of the columns are aligned horizontally.
Monday, July 13, 2009
More text definitions The “N” is called a “drop cap” The text beneath the picture is called a “cutline,” not a caption. A caption comes from the Latin word for head. You would place a caption above something. A “cutline” goes beneath a “cut.” This is derived from printer slang for a lithographic image or engraving originally “cut” into a sheet of metal before being placed on a printing press.
Are the columns justified or unjustified? (correct, they are
unjustified or ragged right)
Monday, July 13, 2009
typography and mood When you compare the Jonathan story with the other stories on the page, you see that it contrasts significantly with the scope and danger of the other news. Jonathan may be symbolic of a generation of young students, but his troubles do not have the impact that Pakistan’s nuclear security or a tax scam have. The ragged right columns of his story tell us that this will be a story that deals more with human interest than with hard news. This fact alone will determine how we as readers approach the information communicated in the story—we may be interested and willing to be concerned, but the story focuses on Jonathan, not on our personal safety and money. Jonathan’s story requires from us a certain empathy. The other stories are warnings of danger. The darker, thicker letters in the other two headlines also tell us how to respond to Jonathan’s story. The other two stories, again, are warnings. Jonathan’s story is interesting and evokes sympathetic concern, but does not elicit a fear response from us. (Probably it should, but that’s another issue)
Monday, July 13, 2009
type and readability Many studies have been done of readability issues. There is no magic solution, but there are a few things we know.Visual organization helps a lot. Chiefly, alignment, contrast, and proximity help readers associate and track visual information. In addition, however, because of a principle I call Yearwood’s law of mental dynamics, the brain seeks shortcuts in every possible way. This goes for reading, too.
Monday, July 13, 2009
The eye does not look at individual letters when it reads, unless forced to do so. It does not look at the space between the letters. But it does look at the shapes of words. Most “speed readers” in fact are scanning the pages for sequences of word shapes, some of which are fairly common in English. For some reason not yet clear to researchers, serif text seems to be easier to read because the shapes of words made from serif letters are more recognizable by the trained visual cortex.
text as type There are two main classes of text: serif and sans serif
Tt Tt serif
Serif text has little wings. The word “serif” comes from a Dutch word meaning “swoosh” or “swash”. When using a quill pen to form a letter, it is virtually impossible to write without leaving these little wings on the letters where the pen touches and then leaves the paper.
Monday, July 13, 2009
sans serif
Sans serif text does not have the little wings on the tips of the letters, and most of the strokes that form the letters are the same width throughout. You get this kind of letter when writing with a pencil or a ballpoint pen. It has a clean, uncluttered feel to it, but is actually more difficult to read (ironically). The name comes from French: sans means without in French, so the name means without serifs.
text as type There are four main categories of “face” (sometimes also referred to as “weight”)
Regular Italic
Monday, July 13, 2009
Bold Bold Italic
text as type: styles of type Type has six main categories of style:
4.Sans serif
1.Oldstyle
5.Script
2.Modern
6.Decorative
3.Slab serif
Within these six categories there are many hundreds or thousands of examples
(There is more about this subject in Lecture 4) Monday, July 13, 2009
Oldstyle text Based on handwritten script, the letters have a slant typical of the angle left by a quill pen on the paper. While angle is the defining feature, serifs are not. However, most Oldstyle types are serif. Oldstyle text lends a formal air, but is also the most readable in print Monday, July 13, 2009
O
Notice where the thin parts of the letter are, and where the thick parts are. The place where the stroke goes from thin to thick is called the “thick-thin transition,” and the angle of the center of the two thinnest parts defines “oldstyle” type. In “modern” type, the angle is exactly vertical.
Modern type Modern type was developed at the end of the 19th century and became popular as a variant on oldstyle. You should never mix oldstyle and modern types on the same page because they are too close together. Remember: use contrast in typestyles as well as weights.
Monday, July 13, 2009
O In Modern type, the angle formed by the centers of the thickthin transition is 00
slab serif, script, decorative Slab serif: text with serifs that are thick, sometimes as thick as the stroke of the letters. It draws attention to the edges of the letters, emphasizing word shape, but does not really boost readability. Used for a “demonstrative” or “assertive” mood. This example is “courier bold”
Monday, July 13, 2009
Script: text that imitates handwriting and can be irritating when used too much. Harder to read. Decorative: for special occasions and in VERY limited quantities for emphasis and headlines. Unreadable as body text or in small sizes
sans serif Sans serif type is most often used for on-screen display, some modern magazines, and for headlines. It comes in thousands of varieties and is readable. However, the shapes of words are not as immediately recognizable as word shapes in serif type. Varieties of sans serif have thickthin transitions as do Oldstyle and Modern serif types.
Monday, July 13, 2009
Some varieties of sans serif do not have thick-thin transitions and are known as “monotype.” Common examples of monotype sans serif include: Arial, Helvetica, Myriad pro, Chalkboard, Casual(really a decorative typeface), Futura, and many others.
1.
2.
play time Identify the numbered type
3.
4.
Monday, July 13, 2009
1. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
2. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
3. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
4. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
1.
2.
play time Identify the numbered type
3.
4.
Monday, July 13, 2009
1. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
2. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
3. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
4. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
more play time 1. Match the numbered type samples to the appropriate descriptions. Choose all that apply
2.
1. 3.
a. Serif b. Sans Serif c. Slab Serif
2.
d. Script e. Decorative
4.
3.
f. Monotype g. Italic h. Regular Face
4.
i. Bold Face j. Oldstyle k. Modern
Monday, July 13, 2009
1.
answers Match the numbered type samples to the appropriate descriptions. Choose all that apply
2.
1. 3.
e
a. Serif b. Sans Serif c. Slab Serif
2.
c, i, k
d. Script e. Decorative
4.
3.
f. Monotype b, f, g, h
g. Italic h. Regular Face
4.
i. Bold Face b, f, g, h
j. Oldstyle k. Modern
Monday, July 13, 2009
NOW READ LECTURE 4
Monday, July 13, 2009
Dr. John Yearwood, Lamar University
Monday, July 13, 2009
What’s on a page? Headline Characteristics: Larger size type, darker type face, usually stands above the story (at the “head” of the story)
Dominant image Characteristics: the largest image on the page, sometimes the only image on the page, can also dominate the text by challenging the text borders
Text--all the words White space--what defines the edges of the designed chunks Monday, July 13, 2009
White Space [headline]
eye can enter here
[text]
[text]
[image]
Monday, July 13, 2009
eye can enter here
[text]
White space is everything that is not an image, text, or a headline. In this well defined page advertising a Suzuki motorcycle, the white space has been thoughtfully used to allow the reader’s eye to flow among and into the elements without being trapped. I have outlined the major elements of the page so you can see how the white space works for the design instead of against it. Here you can see that the eye has a way to enter the design and it is drawn to and ends at the dominant image. The image of the cycle is what sells it, so that’s where you want the eye to go.
when white space doesn’t work In this business card made by a student, there is no white space at all. The result, as you can see, is clutter and illegibility.
Monday, July 13, 2009
when white space doesn’t work
The separation at the top of the card asks our eyes to push the two elements apart rather than unifying them. Likewise at the bottom of the card, our eye wanders in towards the address and then gets stuck, nowhere to go. The worst part of it is the
Monday, July 13, 2009
space between the small bottom line and the piano, where the eye gets trapped again. A big part of this student’s problem was a lack of alignment, which generally solves most white space issues.
absence of white space One of the most egregious examples of the failure of white space can be seen in typical typewritten pages. This journal article is all but unreadable because of the inattention paid to the requirements of the readers’ eyes to assess and understand the text Also: the column of text is too wide: the most convenient width of a column is about the width of the spacing between the eyes, or around 3 inches; 6 inches is pushing it, and over 7 makes it confusing and difficult to follow. An even better rule of thumb: keep the line at 10-12 words wide, no matter how large the type. Another problem here: lack of contrast
Monday, July 13, 2009
text
There are two ways to talk about text: as a collection of words and as individual letters. First the collection: The decision to impose order on words by constructing them to be read in columns is evident in hieroglyphic and cuneiform writing thousands of years old. This is not a new idea. In our sample here, you can easily see the columns. Four of these columns are “justified”—that means that the left and right edges are straight. The little half-column on the right is “left-justified,” or “ragged right,” or “quad left” (all these terms mean the same thing: the left edge of the column is straight, the right edge is not). Justification makes alignment easier. It also makes everything so much neater. You want to use justified columns when you have serious matter to discuss, because the justification gives the text a sense of formality. It is as though it is standing at attention. If you have unjustified or ragged right text on the same page, that unjustified text will seem more casual and less significant. Here, this example bears out this impression. The half column on the right looks like a series of afterthoughts marked with little red square bullets, not like serious, important story. Also, note the use of white space in this layout.
‘justified’ Monday, July 13, 2009
‘ragged right’
text alignment
Notice that the tops and bottoms of the columns are aligned horizontally.
Monday, July 13, 2009
More text definitions The “N” is called a “drop cap” The text beneath the picture is called a “cutline,” not a caption. A caption comes from the Latin word for head. You would place a caption above something. A “cutline” goes beneath a “cut.” This is derived from printer slang for a lithographic image or engraving originally “cut” into a sheet of metal before being placed on a printing press.
Are the columns justified or unjustified? (correct, they are
unjustified or ragged right)
Monday, July 13, 2009
typography and mood When you compare the Jonathan story with the other stories on the page, you see that it contrasts significantly with the scope and danger of the other news. Jonathan may be symbolic of a generation of young students, but his troubles do not have the impact that Pakistan’s nuclear security or a tax scam have. The ragged right columns of his story tell us that this will be a story that deals more with human interest than with hard news. This fact alone will determine how we as readers approach the information communicated in the story—we may be interested and willing to be concerned, but the story focuses on Jonathan, not on our personal safety and money. Jonathan’s story requires from us a certain empathy. The other stories are warnings of danger. The darker, thicker letters in the other two headlines also tell us how to respond to Jonathan’s story. The other two stories, again, are warnings. Jonathan’s story is interesting and evokes sympathetic concern, but does not elicit a fear response from us. (Probably it should, but that’s another issue)
Monday, July 13, 2009
type and readability Many studies have been done of readability issues. There is no magic solution, but there are a few things we know.Visual organization helps a lot. Chiefly, alignment, contrast, and proximity help readers associate and track visual information. In addition, however, because of a principle I call Yearwood’s law of mental dynamics, the brain seeks shortcuts in every possible way. This goes for reading, too.
Monday, July 13, 2009
The eye does not look at individual letters when it reads, unless forced to do so. It does not look at the space between the letters. But it does look at the shapes of words. Most “speed readers” in fact are scanning the pages for sequences of word shapes, some of which are fairly common in English. For some reason not yet clear to researchers, serif text seems to be easier to read because the shapes of words made from serif letters are more recognizable by the trained visual cortex.
text as type There are two main classes of text: serif and sans serif
Tt Tt serif
Serif text has little wings. The word “serif” comes from a Dutch word meaning “swoosh” or “swash”. When using a quill pen to form a letter, it is virtually impossible to write without leaving these little wings on the letters where the pen touches and then leaves the paper.
Monday, July 13, 2009
sans serif
Sans serif text does not have the little wings on the tips of the letters, and most of the strokes that form the letters are the same width throughout. You get this kind of letter when writing with a pencil or a ballpoint pen. It has a clean, uncluttered feel to it, but is actually more difficult to read (ironically). The name comes from French: sans means without in French, so the name means without serifs.
text as type There are four main categories of “face” (sometimes also referred to as “weight”)
Regular Italic
Monday, July 13, 2009
Bold Bold Italic
text as type: styles of type Type has six main categories of style:
4.Sans serif
1.Oldstyle
5.Script
2.Modern
6.Decorative
3.Slab serif
Within these six categories there are many hundreds or thousands of examples
(There is more about this subject in Lecture 4) Monday, July 13, 2009
Oldstyle text Based on handwritten script, the letters have a slant typical of the angle left by a quill pen on the paper. While angle is the defining feature, serifs are not. However, most Oldstyle types are serif. Oldstyle text lends a formal air, but is also the most readable in print Monday, July 13, 2009
O
Notice where the thin parts of the letter are, and where the thick parts are. The place where the stroke goes from thin to thick is called the “thick-thin transition,” and the angle of the center of the two thinnest parts defines “oldstyle” type. In “modern” type, the angle is exactly vertical.
Modern type Modern type was developed at the end of the 19th century and became popular as a variant on oldstyle. You should never mix oldstyle and modern types on the same page because they are too close together. Remember: use contrast in typestyles as well as weights.
Monday, July 13, 2009
O In Modern type, the angle formed by the centers of the thickthin transition is 00
slab serif, script, decorative Slab serif: text with serifs that are thick, sometimes as thick as the stroke of the letters. It draws attention to the edges of the letters, emphasizing word shape, but does not really boost readability. Used for a “demonstrative” or “assertive” mood. This example is “courier bold”
Monday, July 13, 2009
Script: text that imitates handwriting and can be irritating when used too much. Harder to read. Decorative: for special occasions and in VERY limited quantities for emphasis and headlines. Unreadable as body text or in small sizes
sans serif Sans serif type is most often used for on-screen display, some modern magazines, and for headlines. It comes in thousands of varieties and is readable. However, the shapes of words are not as immediately recognizable as word shapes in serif type. Varieties of sans serif have thickthin transitions as do Oldstyle and Modern serif types.
Monday, July 13, 2009
Some varieties of sans serif do not have thick-thin transitions and are known as “monotype.” Common examples of monotype sans serif include: Arial, Helvetica, Myriad pro, Chalkboard, Casual(really a decorative typeface), Futura, and many others.
1.
2.
play time Identify the numbered type
3.
4.
Monday, July 13, 2009
1. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
2. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
3. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
4. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
1.
2.
play time Identify the numbered type
3.
4.
Monday, July 13, 2009
1. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
2. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
3. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
4. This type style is serif sans serif slab serif script monotype
italic regular face bold face oldstyle modern
more play time 1. Match the numbered type samples to the appropriate descriptions. Choose all that apply
2.
1. 3.
a. Serif b. Sans Serif c. Slab Serif
2.
d. Script e. Decorative
4.
3.
f. Monotype g. Italic h. Regular Face
4.
i. Bold Face j. Oldstyle k. Modern
Monday, July 13, 2009
1.
answers Match the numbered type samples to the appropriate descriptions. Choose all that apply
2.
1. 3.
e
a. Serif b. Sans Serif c. Slab Serif
2.
c, i, k
d. Script e. Decorative
4.
3.
f. Monotype b, f, g, h
g. Italic h. Regular Face
4.
i. Bold Face b, f, g, h
j. Oldstyle k. Modern
Monday, July 13, 2009
NOW READ LECTURE 4
Monday, July 13, 2009
Related Documents
Demo 1.2 Basic Design
July 2020 22
Demo 12
October 2019 15
Mechanical Design Demo - Arnold Labares
July 2020 5
Bt Basic Design
November 2019 13
Basic Design Of Reactor
May 2020 8