1—Grids, Divs & Josef Müller-Brockmann
“A grid breaks space or time into regular units. A unit can be simple or complex, specific or generic, tightly defined or loosely interpreted. Typographic grids are all about control. They establish a system for arranging content within the space of a page, screen, or the built environment. Designed in response to the internal pressures of content (text, image, data) and the outer edge or frame (page, screen, window), 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.”
ELLEN LUPTON
Thinking with Type
—
In this project you will translate the design of a notable Josef Müller-Brockmann poster into a single HTML web page. The design must include all components (grid, shapes and text) from the original design. Format the HTML page using a grid system that uses div boxes. The text in your design must use Helvetica. Be sure to make the page responsive.
Objectives of the Project:
Work with div boxes
Establish Hierarchy
Work with a limited color palette
Use the typeface Helvetica
Create an external CSS document
Be responsive
Due: Monday, September 21
Click to see your assigned poster: Alexandria, Benjamin, Fay, Jimmy, Kendra, Kirk, Marjerrie, Iris, Michael, Onusa, Ryan, Sydney, Tannia and Yvette
—-
2—Style and Interview
Designing for the internet requires a solution that embraces the web as a you will select a transcript from an interview from an online source. The interview an be between a celebrity, a politician, a news reporter, etc. The text should include no more than 3 people and only be a few pages in length (for your own sake). Using your selected text, republish the interview onto a single webpage such that it targets a different audience than the original interview. Establish distinct typographic styling for each alternating voice – consider font, size, color and scale. Integrate at least 4 images into the body of the interview that are relevant to the content discussed in the interview. Keep in mind the goals of this assignment are:
Keep in mind the goals of this assignment are:
Identify the target audience and goals of the original interview.
Where was the interview published? Who visits that site? Is it an entertainment blog, news site, conceptual art publication? What may be the typical age of the readers? Taking this all into account, how did the original design of the interview align or differ from the expectations of the target audience? How did type choices, colors, fonts, placement of images communicate to the target audience? How is the content arranged hierarchically? Which elements have importance over others—how and why was this done?
Correctly and semantically markup the content of the interview.
Which tags should you use to designate who is speaking and what is body text? Which header tags are necessary (<h1>…<h6>)? How can <blockquote> be used? Are there points in the interview where references can be linked to using <a> tags?
Consider a different audience and the goals of a site that would target such an audience. What may be the needs and aesthetic considerations of your new target audience? Where is this new audience reading? On the go at work? Relaxed time at home?
Use CSS to style and communicate these goals. Take on the dual role of online magazine editor + web typographer. Consider typographic voice, color, placement of images, and overall style of the webpage. When is an appropriate time to place a pull-quote or blockquote? How do images and pullquotes contribute to pacing for the reader?
Objectives of the Project:
Establish Hierarchy
Work with CSS Basics (external stylesheet)
Work with HTML (organized structure)
Due: Wednesday, October 7
—-
3—A Collection
“A collection is usually an attempt to somehow take hold of the world around us, to control at least a few of its parts. In this way, the wealthy collector tries to arrest things, to separate them from their function, ultimately separating them from a living world through the act of completion. An artist or designer, on the other hand, might prefer the continuity of things, or to mimic the precious collection by reinstalling some of the precariousness of life. The collection might then claim to have critical value, a way of confronting an over-excessive abundance of sign and object production.”
KAREL MARTENS
Karel Martens: Counterprint
—
In this project you will create, organize and sequence a collection. The collection can be comprised of either images, videos, sounds, etc. Your images must be created from scratch and gathered without using found imagery from online. You may photograph the objects in your collection or create illustrations in Illustrator or Photoshop. Think of yourself as a curator for a digital exhibition.
As you build the website, think of how your objects will relate. Some questions to consider:
Is there a process for collecting them? Do your images come from a particular time of day or a particular location? Is there a particular typology? What meaning is derived from the collection as whole or as individual components? How will a user navigate through the site? How do you organize and order the objects in your collection? How are they juxtaposed with or around each other?
You do not need to lead the user in chronological order per say, but consider having multiple links on the same page–does the viewer get a very linear navigation or disrupted sense of space. Develop a site map that demonstrates the complex structure of your hyperlinked website. On your map indicate how each page links to the next and how all your content will be split up across pages.
Objectives of the Project:
Self-authored imagery (photographs or illustrations)
Narrative sequence
Multi-page site
Clear navigation
Hyperlinks in, between and across pages
Minimum 20 objects in the collection
Due: Monday, November 2
—-
4—Concrete Poetry
“Generally speaking the material of the concrete poem is language: words reduced to their elements of letters (to see) syllables (to hear). Some concrete poems stay with whole words. Others find fragments of letters or individual speech sounds more suited to their needs. The essential is reduced language…with the reduction of language, the concrete poet is concerned with establishing his linguistic materials in a new relationship to space (the page or its equivalent) and/or to time (abandoning the old linear measure). Put another way this means the concrete poet is concerned with making an object to be perceived rather than read. The visual poem is intended to be seen like a painting; the sound poem is composed to be listened to like music. Concrete poets, then, are united in their efforts to make objects or compositions of sounds from particular materials.”
MARY ELLEN SOLT
Concrete Poetry: A World View
—
In this project you will translate the lines of a simple poem into a digital website. Using the concrete poems we’ve reviewed in class as a reference, select an existing poem or your own poetry to work with. Think carefully about the words and phrases of your poem, as the text needs to be something that can be visually conveyed. Consider the ways in which language can be divided or disrupted away from traditional grammatical structures.
With CSS properties, modify individual letters or groups of words. You may use any foreground or background color, but be sure to use only one color for each — thereby working with form and counterform only. You may stylize (simplify) your poem as needed.
Objectives of the Project:
Use the browser as a form-making tool
2-3 Color Palette (foreground / background / accent)
Use typography only
Due: Wednesday, November 18
**Resources:
Concrete Poetry Examples
Futurist Concrete Poetry Examples