Although this was for the same weekend homework I separated them into two separate posts. We were to find a responsive website and a non-responsive website and evaluate them.

Food Sense is a responsive website that interacts with the viewer’s device or window size. When viewed on the larger scale the main picture (slideshow) is most of the viewing page with the labels to the left. As it is sized down the labels move above the picture and eventually loose the icons next to the words. The circle logo is in the top left hand corner and eventually comes right between the labels and the picture. There are pictures nestled under the big picture and when sized down they stack on top of one another with their descriptions like a blog. When it is sized down, it can be said that it would be easier to view on a smart phone like the iPhone.

Urban Outfitters does not have a responsive website. When the account is viewed from the larger scale it looks as any other website would appear. But when it is scaled down, it scales down as though the website page is just being cut off and can not be viewed anymore. It does not size down to a smaller typeface or smaller picture size so that all of the important elements are still visible and user friendly. If I was on my iPhone I would have to zoom out in order to see where I wanted to go and then zoom back in to click on the image. But if this website was responsive to my screen size then I may be more likely to buy something right from their website on my iPhone while I was on my way home from school, but without it could just take too much time for me to deal with before I have to get off the bus and walk home. 

I have started a screen design class this semester with the focus of web design and our first assignment is to read the article "Responsive Web Design" by Ethan Marcotte and reflect on what responsive design is and why it is important. 

Screen Design

Reading Assignment: “Responsive Web Design” by Ethan Marcotte

Responsive design is associated to web designing that is exactly what it says, it is responsive to the device that is being used to view the website. This takes into account the size of the device and the viewing screen that is used so that all important elements of the certain website are seen. This had been done for an individual device until it was pointed out that the coding could be altered in order to adjust to different viewing-mediums.

This is especially important today because we are using a larger range of devices to view the web and it changes rapidly. It would be overly excessive if a new coding was having to be written for a new device coming out, and then do that for every website. It just sounds silly to me. With responsive design, one is able to get their point across in a timelier manner or the user of the site is able to maneuver it in a timelier manner because it was user-friendly. This can be quite imperative in marketing because the amount of time that a company has to capture their audience’s or customer’s attention, could be a matter of how well they were able to use the website on their device, whether it be their computer, phone, or iPad, it is essential to cater to those using the sites the most.

We are encouraged to listen to the voices of others insight and read it so that we can broaden and improve our insight. As our class assignment, were to listen to a few interviews from this sight, Observer Media, so that we may implement our early stages of knowledge in design and begin conversing of the topic that strikes interest.

Debbie Millman does a good job of pulling in her subjects’ (interviewees') past while relating it to their current design applications and motives. In particular, she points out Grace Bonney’s past of being a Phish-head and how that created some connections for her later in her career. Networking has come of interest to me recently and understanding the value of the connections made with others. Whether these connections are of like-interests or not, they can be quite useful in the future. Even though it is not mentioned what Bonney’s connections within school were like, she made valuable connections outside of school within her social life that made stronger ties than she may have realized or intended when she began. These connections have made her blog and website what they are today.

From a design side, Bonney does express her beliefs in the importance of embracing the design that is happening within schools because that is where the designs of the future lie. In a sense, I believe our society has begun to loose those businesses that thrive off of what someone's desires and interests are. Bonney did not get into this business for the money and still isn’t in it for the money. She has a bigger picture of something that she wants to give and provide during her life. And that something is a new eye of design and how it can interrelate with our new media and social connections. She does not feel that she has to rely on other businesses that would impose their insight and convolute what she started in the first place. She realizes that she has created a business out of what she loves and wants to continue to evolve those fresh looks and ideas. But she has come to realize that businesses can have a different kind of partnership and work together in other ways. I commend her strong belief in giving back to where intellectual design really starts, in schools and universities, and her strive to continue the cycle. This reflects with the idea of recycling and renewing that our society has begun to bring to the forefront again. She provides the opportunity for a student to explore their creativity so that it may be paid back and make the circle when they come into the market and are applying their new ideas and designs. 

I feel that John Hockenberry brought the social recycling insight into view for me during his interview. Millman, the interviewer, asked what Hockenberry thought of our social media today and what is expected of the declining formality in journalism. Hockenberry enlightened me when he pointed out that although journalism is being offered readily now in informal fashions, a turn is started to be made within our society to bring the formality back. He makes the parallel with the music industry and how music was first heard on the radio and then we began creating a physical form of music in records, tapes, and CDs so that people could feel that they owned that music. Now we are starting to move into an online music store instead of one that we drive to. We do not feel like we have to physically have it in our hand, but have it there when we want to listen to it. The same thing is happening with magazines and newspapers. Those that we felt we had to have and hold in our hands are diminishing on a certain level and we are doing without the physical handheld products besides the one object that lets us have access to it all, our phone or computer, just like the radio once did for society. And going back to the formalism and professionalism of journalism. Blogs are creating a new world of journalism. When blogs are written, whether they are professional writers that are writing or stay-at-home moms that write about their family. We are in the beginning stages of organizing these so that people may chose how formal they want their articles and posts when they read them. I feel that we are in the process of understanding a new way of looking at our social media and how to organize it to our benefit. Journalism will have its light shed on it once again. But until then, we will just have to organize those blogs and informal posts ourselves so that we may push our media further. 

The Crystal Goblet

The Crystal Goblet


Warde stresses the importance of creating works of type that convey more than just the words on the paper and with this process, seamlessly.  She stresses the fact that the typography has the ability to hold the mind of its reader by the way the type is chosen and applied.  It can be looked at, through, or embraced with its surroundings as a compliment to what it portrays.  Type, besides Calligraphy, should not be considered a fine art simply because that would mean "its first purpose was to exist as an expression of beauty for its own sake and for the delegation of the senses."  Printing with type should be a means of doing something, meaning that it has a purpose beyond just the shapes that are created on the paper.  It is when that is in place is when the foundation of the "crystal goblet" has formed and you may build up from there in forming the printed piece.  

Grid Chapter

Now that we have done the Grid Torture project.  I am beginning to understand the usage of the grid.  It is still tough for me to use it and apply it myself, but I feel that it is something that will come with time.

Define:

grid-page 151, establishes a system for arranging content within the space of a page, screen, or the built environment; "an effective grid is not a rigid formula but a flexible and resilient structure, a skeleton that moves in concert with the muscular mass of information"

grid as frame—sketch an example- page 153

grid used to divide space—sketch an example- page 161

grid as program—sketch an example-page 165

grid as table—sketch an example-page 170

golden section—sketch an example-page 176

modular grid—sketch an example-page 194 has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right; these modules govern the placement and cropping of pictures as well as text; devised by Swiss graphic designers

Lupton Appendix

Know and be able to identify the following proofreading marks:

Delete-a strikethrough the word(s) horizontally with a loop at the end on the right

Transpose-it looks like a sideways number two when put on a word and the middle of the two separates the beginning of the word from the end

STET/let it stand-the delete symbol on the word with a dotted line under the word

add space-a vertical line through the area that needs more space with a number symbol to the left of the line

Lowercase- multiple left diagonal lines through the word

uppercase- three horizontal lines underlining the word

insert-the upwards carrot symbol 

paragraph-backwards uppercase "P" with two vertical lines instead of one

Not in Lupton

These items are not described in Lupton, and will be discussed during class.

Define, be able to identify, and know the correct usage of:

hyphen- only used to hyphenate

en dash- used for telephone numbers, date ranges, to set off phrases (open set- there is space before and after the phrase)

em dash- used to set off speakers in a play- to set off phrases (close set)

Define:greeking- is used to check layout and overall appearance without the distraction of the actual text; there are two types of greeking and one is with text and one with non-sense text used as a placeholder of real text

Text Chapter

Within the text chapter I have begun to understand the aesthetics of the letters together and the meaning of its communication when put into words.  This chapter also supplies vocabulary of typographical terms and how a graphic designer may use them to be able to describe their method with one another.  For example, on page 125, the term(s) dropped capital is introduced and how one may go about doing this in InDesign.  Three other important terms that were introduced in this chapter and that have already begun to be mentioned in class an are leading, kerning, and tracking.  I feel that I will be able to distinguish these terms better once I begin using the programs a little more hands-on and discussing these in class.  

Define:

text-an ongoing sequence of words
body-comprising the principal mass of content in the main block
running text- it can flow from one page, column, or box to another

leading—How did it get its name?- p.108 (also known as "line spacing") the distance from the baseline of one line of type to another, as leading increases lines of type become independent graphic elements; its name came about from the strips of lead that were used to separate lines of metal type

kerning (and know which fields adjust kerning in InDesign)-p.102 an adjustment of the space between two letters, there is metric kerning (space that was set up by the type designer) and optical kerning (excuted automatically by the page layout program which access the shapes of all characters and adjusts the spacing wherever needed), to adjust word kerning use the Paragraph>Justification menu in InDesign and can also be set in part of the character styles

tracking  (and know which fields adjust tracking in InDesign)-p.104 adjusting the overall spacing of a group of letters; by expanding the tracking across a word, line, or entire block of text, the designer can create a more airy or open field, commonly used in headlines and logos

            normal, positive and negative tracking-negative tracking is rarely desirable but may be used at times in order to bring up a short line of text

hierarchy—What is its purpose? Identify cues that can be used to signal changes in hierarchy-p.132 expresses the organization of content, emphasizing some elements and subordinating others, each level of hierarchy should be signaled by one or more cues which are applied consistently across a body of text (using no more than three cues for each level or break in a document), cues can be spatial (indent, line spacing, placement) or graphic (size, style, color)

How can you create emphasis within running text?-by using one of the cue combinations

How can you signal new paragraphs? List all methods you can come up with.-change in direction of lettering, adjust tracking, adjust leading, adjust kerning, line indenting, point size, color, style

Typesetting: be able to define the following, and identify when it is good and evil

justified text-makes a clean shape on the page, is efficient use of space except when the column width that is too narrow can be full of gaps (designers often use negative tracking to fit additional characters on a line, or positive tracking to even out a line of type that looks too loose)

flush left/ragged right text-the left edge hard and right edge soft, there aren't ever big holes, respects the flow of language rather than being confined to a box, the more random on the right the better

flush right/ragged left text-rarely employed for large bodies of text, they form effective marginal notes, sidebars, pull notes, punctuation can weaken the hard right edge

centered text-symmetrically aligned; often appears on invitation, title pages, certificates, and tomb stones, center lines should be broken to emphasize a key phrase or also known as "breaking for sense," it should be broken into phrases with a variety of long and short lines

stacked capitals/lowercase-p.120 capital letters form more stable stacks than lowercase letters

vertical baselines—what is the most common orientation?- no fixed rule determining this, but it is more common to run text from top to bottom

in InDesign:

Which fields/locations adjust the following:

Typeface-Type>Font>choose the desired font

Type structure (within a family)-Type>Character

Typesize-Type>Size

Leading—be able to identify auto leading-Type tool> select text> Type menu> character> select value from leading menu (looks like an two A's on top of one another, horizontal line in between, and a little double arrow beside the A on the bottom)

Tracking-select the Type tool> select the text> use the tracking menu that looks like the AV with the arrows pointing in opposite directions under the letters> change the numbers as desired

Kerning-select the Type tool> select the type> select the kerning menu that has the AV with the arrows pointing inwards and diagonal line running through the A and V> change the number to the desire kerning

Be able to name and identify the selection and direct selection tools in InDesign

What is ‘snapping’ in InDesign?-when a tool being used in InDesign snaps to a grid

What does the command key look like?- it is on each side of the space bar and has a square decorative symbol on it

What InDesign is used for? -Text in documents

Be able to identify:

The edge of the page, the pasteboard, margins, and guides.

Know the keyboard shortcut to turn on/off guides, as well as go into preview mode.
-turn on/off guides- Command with ;
-preview mode- View> screen mode> preview 

Letter chapter

I have recently become interested history and the origin of individuals and although anatomy of our being (human anatomy) is something that I applaud others to grasp and find interest, it is not something I have pursued to grasp.  But I had not considered other types of anatomy, like the anatomy of typography.  I was continually reminded of my own uses and misuses as a went through the Letter chapter, but my interest was struck with the type classification on page forty-six that shows the differences of the classifications beside one another and describes them.  It is interesting because this is probably one of the first pages that I would past over with little consideration of its meaning because when I first skimmed through the book I did not see the differences in each uppercase and lowercase "A".  But now I see the differences these "A's" that were enlarged on the page.  I understand the significance of learning the history of typefaces.  On page 32 is says that "graphic designers consider the history of typefaces, their current connotations, as well as their formal qualities.  The goal is to find an appropriate match between a style of letters and the specific social situation..."  And I now understand how the knowledge of typographical history can enable a graphic designer, or anyone for that matter, to use and apply an appropriate typeface for the matter or project at hand.

Type History:
Who was Gutenberg and what did he do? Why is he important in the history of typography?
-Gutenberg was a German inventor of movable type printing, which is important in the history of typography because his invention enabled mass production of printing and the ability to repeat letters of a certain style or design after being created.
What were the first typefaces modeled after?
-The first typefaces were modeled on the forms of calligraphy.
What are humanist typefaces?
-Humanist typefaces are ones that were created by humanist writers and scholars of the fifteenth century Italy, whom had rejected gothic scripts in favor of the lettera antica, which introduced wider and more open forms.
What are Gothic scripts?
-Gothis scripts are a handwriting style used in the Middle Ages throughout Europe.  This style can be described with having uniform vertical strokes that end on the baseline and use of angular lines instead of smooth curves and circular strokes.  Today this style may be used more on diplomas and certificates.
Where and when were italics introduced, and how did they get their name?
-Italic letters were introduced in the fifteenth century Italy because it was more economical for calligraphers write because it could be written faster and saved space when printing.  From what I understand Italics got their name by word of mouth and use of society, once Aldus Manutius invented it and was using within his own inexpensive books, and who alternatively called it Aldino and Italics.
Who were Didot (pronounced dee-doe) and Bodoni and what did they do?
-Firmin Didot (from the early 19th century) and Giambattista Bodini (from 1798) modernized serif fonts.
What is ‘wood type’ and why was it needed? When was it invented/used?
-Wood-type was created in 1834 because it was realized that, when carved, could be used at large scales with the printing presses versus lead that had been used for letters at a smaller scale.  It was important to begin using letters at the larger scale at this time because of the industrial revolution and higher demands of various forms of advertisement.  The use of the wood-cuts also allowed a new system to be created of combining the pantograph and the router.
What influence did the industrial revolution have on type design (e.g. Bauhaus)?
-The Industrial Revolution influenced type designers to steer away from the resemblance of type with the body, but instead relate it more to simplistic forms (to have been thought of as elements of universal language of vision) geometric forms—the circle, square, and triangle.  The letters were created a lot more abstractly than they had before.
Introduced in the 1980s, what technology influenced type design? How did it influence type design?
-Zuzana Licko created course-resolution fonts for desktop screens and printers in 1985.
Who designed Gotham (one of ECU’s official typefaces)?
-Tobias Frere-Jones designed Gotham, derived from letters found at the Port Authority Bus Terminal in New York City.

Be able to identify and name the following letterform parts:
(most definitions from Typographia.org, and remainder from Google)
capline—Do all capitals terminate perfectly on the capline? A line marking the height of uppercase letters within a font.  And not all terminate at the capline.
x-height-the height of the lowercase letters which have no ascenders or decenders
baseline— Which letters terminate on it perfectly, and which dip slightly below it? the line along which all the capital letters (and most lowercase letters) are positioned
stem-the main (thicker) part of a letter
bowl-the rounding curve of curved letters
serif-a small cross stroke accentuating the end of the main stroke of a letter in some typefaces
descender-the part of certain lowercase letters that extends below the baseline of the letter
ligature-a special double character in a font representing two letters as one
ascender-the part of certain lowercase letter which extends beyond the "x" height of a font
spine-the central curved stroke of the letter "S"
uppercase- capital letters derived from the practice of placing these letters in the top (upper) case of a pair of typecases by printers when laying out text 
crossbar-horizontal stroke across the middle of the uppercase "A" and "H". and also the enclosing horizontal stroke of a lowercase "e"
small capital- capital letters that are the same height as "x-height", true small caps (with correct proportions and weight) are only found in expert typefaces
counter- the white space enclosed by a letter form, whether wholly enclosed or partial
lowercase- noncapital letters derived from placing these letters in the bottom (lower) case of a pair of typecases

Type measurement:
point (and its equivalent in inches)-the smallest unit of measure, and equals 1/72 inches
pica (and its equivalent in inches)-unit of measure consisting of 12 points, which equals 1/6 (.166044) of an inch
How are points and picas abbreviated?- pt for point, and pc for pica
set width-the horizontal width of characters
What factors affect differences between typefaces when set at the same point size? (see page 37)-set width

Type Classifications: (be able to define each class and identify a typeface for each)
Humanist or Old Style-closely connected with Calligraphy and movement of the hand (Sabon)
Transitional-more abstract and less organic (Baskerville)
Modern-abstract and less organic (Bodini)
Egyptian or Slab Serif-Clarendon typeface, heavy stab-like serif, introduced in the 19th century for its bold and decorativeness (Clarendon)
Humanist Sans Serif (aka Old Style)-Sabon typeface, based on sixteenth century typefaces by Claude Garamond and emulated classical calligraphy, designed by Jan Tschichold in 1966 (Gill Sans)
Transitional Sans Serif-Baskerville typeface, sharper serifs and more vertical axis than humanist letters, designed by John Baskerville in the mid-eighteenth century (Helvetica)
Geometric San Serif-Futura typeface, built around geometric forms (O's are perfect circles and peaks of A and M are perfect triangles), designed by Paul Renner in 1927 (Futura)

What is a type family, and what is an example of a type family (list all the variations in the family)?-p.48 Typefaces organized into matched families, like roman or italic. (Example: Adobe Garamond Pro Reg, Adobe Garamond Pro Italic, Adobe Garamond Pro Reg (all caps), Adobe Garamond Pro Bold and Semibold, Adobe Garamond Pro Bold and Semibold Italic)
The typefaces Verdana and Georgia were designed for which purpose?-p.72 Both designed by Matthew Carter in 1996, for the computer via the World Wide Web. Veranda was designed for digital display for its larger x-heights, open forms, and loose spacing. Georgia is a serif screen face built for with sturdy strokes, simple curves, and generous spacing; is used on the web.
What is used to construct bitmap fonts?-p.74 built out of pixels (picture elements) that structure a screen display or other output device (while PostScript letters consist of a vector outline), a true bitmap character contains a fixed number of rectilinear units that are displayed either on or off, they are used on devices such as cash registers, signboard displays, and various small-scale screens