thinklookdosummer2019

[thinklookdosummer2019]

Notes on Type for Screens

From Typographic Design

When designing for the Web:

simplicity

type with elemental shapes

type with less extreme stroke contrasts

elaborate typefaces can get lost

san serif is simpler than serif

some designers say readers are moving faster on the web -- you should acknowledge that as a designer. 

workhorses: Helvetica, Univers, and Futura, 

san serif with a little more personality: DIN, Franklin Gothic, Gill Sans, Lucida Sans, Meta, and Rotis Sans

Font size and line height are declared in pixels for the tag in HTML. All other type is sized and spaced relative to these values via ems, rems (a root em), or percentages.

The subtlety of typographic variation that can be achieved in print goes unnoticed when viewed on screen. 

On screens we are still constantly losing typographic detail, which in turn lowers contrast. Because of this, all shifts in typesetting and typeface selection must be further emphasized. Make at least two typographic shifts for contrasting text items on screen. These properties can include typeface, size, weight, posture, orientation, margin, and color.

Line spacing:

60-75 characters per line optimal for scanning websites

35-50 for smartphones

Generous interline spacing is recommended for displaying text on a computer display: 140 percent of the type size for websites, and up to 160 for phones. standard for print is 10-12.

On screen, short paragraphs and the introduction of small units of text invite readers into the content. Text can be structured with the goal of bringing clarity and understanding to ideas, and preventing the monotony of vast seas of text, which severely inhibits the reading process 

[thinklookdosummer2019]

Homework: Final Project Part 1 Due July 1

Your final assignment is to design six high-definition wirefames for an iOS or android app. You are not creating an actual app, but a polished mock up of what that app would look like on a small screen. Your focus should be spent on the look of your screens more than the user experience or information. That said, you are welcome to upload your files to something like InVision to create a working prototype. http://www.invisionapp.com

This assignment will require several skills that you have picked up throughout this semester: kerning and line spacing, type combinations, basic layout and alignment, and a custom typeface.

Here are some questions to get you started:

What is the purpose of this app? 

Who will use it?

What do you need to communicate to your user?

What content needs to be on each page?

How will you establish hierarchy?

Here are Apple’s interface guidelines for iOS, which will be very useful for designing your app:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556-CH66-SW1

And the somewhat more complicated Android guidelines:

https://developer.android.com/index.html

You may use Illustrator or Indesign for your wireframes. Please print out all of your designs and bring them in for critique. The final project will be submitted as a PDF via drive.

You can design your own app, or you can create designs for one of the following (fake) apps:

Unicorn Rainbow, game

Mutiny, game

Days and Weeks, calendar app

Paparazzi, photo app

Netwerk, social

Mews, cat news

Your own project

The deliverables of this project are somewhat flexible, but I am firm on one issue: You may not use more than one image. This is a typography class, and I want to see type-based designs. (Geometric design elements like boxes, circles, triangles, and lines are fine.) This is another way of saying that you should probably start this project by thinking about a logo or an icon.

Here’s a checklist for the final project:

A custom logo or wordmark for your app. 1024 x 768 pixels. Possibly use Fontstruct, Illustrator, or Glyphs to create or manipulate custom type

Icon for your apps, one at 180 x 180 pixels and one at 1024 x 1024 pixels (ios), or one at 192 x 192 pixels (android). 

Six high-definition wireframes.

At least one wireframe must include a chunk of type (maybe three paragraphs).

At least one wireframe must include a list.

Here are two possible scenarios:

Mutiny (i based the following screens on the games 2048 and threes)

1. game screen with icon and score. buttons for best score, menu, and leaderboard

2. menu screen with the following buttons: keep going, new game, multiplayer co-op, multiplayer vs, how to play, and rate. 

3. how to play screen: swipe right to kill, swipe left to love, love your friends, vanquish your enemies.

4. high score screen: 56476, 44136, 35044, 27236, 15892 

5. options screen: music, sound effects, colors, show status bar, main menu

6. special thanks screen: special thanks to those who went out of their way to support us: mom, dad, and jeff stark. voices by: Charlie Chaplin, Buster Keaton, Harold Lloyd, Douglas Fairbanks, Clara Bow, Theda Bara, Lillian Gish, and Greta Garbo. 

7. about screen (adapted from wikipedia): Mutiny is a single-player puzzle game created in Summer 2019 by NYU developer xxx, in which the objective is love your friends and vanquish your enemies. It is a type of puzzle game, and is very similar to several other games, but better. XXX created the game in a single weekend as a test to see if she could program a game from scratch, and was surprised when his game received over 4 million visitors in less than a week, especially since it was just a weekend project. The game is free to play and makes the world better every time someone spends an afternoon mindlessly swiping, swiping, swiping. The game runs on open-source code and has led to many additions to the original game, including a score leaderboard and improved touchscreen playability. Spinoffs have been released, but none of them are as good as the original.

Paparazzi (i based this on hipstamatic)

1. Paparazzi App Icon

2 Launch File (can be animated)

3. Captioned photograph screen: Add caption. Sample caption: Sarcasm is the lowest form of wit, but the highest form of intelligence.

4. Edited screen: No edits. Photos you have edited with Paparazzi will appear here 

5. Store screen: Featured: Retropak 9. With buttons for “featured,” ���search,” “print lab,” and “my gear.” 

6. Art School Film. Angular and moody. Popular back when photographers spent more time in the darkroom than the studio. Makes everything look more interesting. 

7. about screen (adapted from wikipedia): Paparazzi is a digital photography application for the Apple iPhone and Windows Phone. It uses the phone’s camera to allow the user to shoot square photographs, to which it applies a number of software filters to make the images look as though they were taken with a vintage film camera. The user can choose among a number of effects which are presented in the application as simulated lenses, films and flashes. Several of these are included with the application, while others may be acquired through an in-app purchase. The application has sold four million copies as of Summer 2019. Paparazzi is part of a retro trend in photography, which has seen a rise in the popularity of cheap and technically obsolete analog cameras (such as Lomography and Polaroid instant cameras), as well as software filters and smartphone software that emulate such cameras. Other vintage photography applications include CameraBag and Instagram. Like Hipstamatic, they often include social networking features. Some phones include similar built-in filters.

Here are some wireframe tutorials to help:

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

This is an Illustrator wireframe template for responsive design:

http://www.rubbercheese.com/a-wireframe-template-for-responsive-web-design/

and this is a comprehensive tutorial on the first part of your wireframe process:

http://www.lynda.com/Balsamiq-Mockups-tutorials/Creating-smartphone-wireframe/172857/195940-4.html

Additional: Ideally you will use Glyphs Mini to create a unique font for your wireframe app. Although I suggest you create a whole alphabet, I understand that there are limited hours in the day. As a compromise, I will accept at least 13 characters. That means if you were going to design a font for display in Unicorn Rainbow that I would accept U-N-I-C-O-R A-B-W plus four additional characters.

Finally: On our final day I will ask you to bring in two images of good and bad typography for discussion in class. I'm telling you now just in case you want to take a picture if you see something truly great on your way home today.

[thinklookdosummer2019]

Tutorials: After Effects and Kinetic Type

After Effects is massive and there are several ways into the program. I suggest keeping it very simple and following Adobe's own tutorials. Start on this page, choose Beginner, and follow the first three tutorials: 

Get to Know After Effects

Work With Compositions

Create and Animate Text

https://helpx.adobe.com/after-effects/tutorials.html

When you have finished two of the above three tutorials (including each section) you can move on to the After Effects exercise.

This is a text-based guide:

https://helpx.adobe.com/after-effects/user-guide.html

Exercise: After Effects

Create a five-second clip animating your first and last name. Start with the Ipad preset, use at least two sets of key frames, and set your composition to music or sound.

Tutorial: Kinetic Type

This is a quick introduction to another After Effects technique. It's a somewhat more advanced tutorial than the previous, but you should be able to follow the concept:

https://www.youtube.com/watch?v=fOi5P1qxrM4

[thinklookdosummer2019]

Font Review

- Gisele

[thinklookdosummer2019]

The planned work poster showing the track maintenance status and guidance inside the subway station is commonly seen all over the place. The poster is not overly designed but clean and straight forward in conveying its information by using Gotham sans throughout the whole page. It makes the pages seems to be serious, formal but also super easy to read and convey the information.

This poster is designed to promote a center for the LGBTQ group with mental problems. The color used is very colorful and matching the signature rainbow theme. The overall design with the bold, cute type as the title gave people a feeling of easy to approach, playful and interesting. The detailed information listed below is using the easy to read sans type to directly convey the information to readers clearly even if they are standing a bit further away.

— Yuming Lu

[thinklookdosummer2019]

Type Univers//// Melior

Univers

Univers was released in 1957 by Adrian Frutiger. It is a classic Swiss Neo-grotesque typeface. Released in a similar time period to Helvetica. Now the typeface has more than 44 different weights and styles.

Melior

Melior is designed by Hermann Zapf in 1952, released by the Stempel foundry of Germany. The typeface is particularly suitable for newspaper columns and magazines. The uppercase of the Melior font family works well in circumstances where authority is needed in the message. The distinct feature of the typeface is its strong squared serifs.

---- Thomas 

[thinklookdosummer2019]

Type Review

PMN Caecilia

PMN Caecilia was designed by Peter Matthias Noordzij. He started his design process in 1983 and the type was finally published in 1990. It belongs to the slab serif class, which in general has some modern touch to the traditional type design. The type has a relatively geometrical design that gives viewers an organized and disciplinary expression.

Neutraface Slab

Neutraface Slab was designed by Christian Schwartz and released in 2009. Written in its name, Neutraface Slab belongs to the slab serif class. This type has a high x-height and geometrical forms, so it seems to have a low center of gravity, which makes it visually steady. By looking at it, I think it reminds me of light strips, especially the thin and light forms of this type family.

--- George Feng

[thinklookdosummer2019]

Poster Reviews

This is an advert for Shakespeare in the park. The use of primary colors is really eye catching. The designer uses what looks like a humanist sans typeface and does a lot of manipulation of it like making it like a narrowing cone and slanting the baseline. She also uses multiple weights and style of the font making it feel more chaotic and modern, but the consistency of using the same typeface still makes it coherent.

This an advertisement for Travis Barker and the Suicide Boys’s collaboration, Live Fast Die Whenever EP. It has a very chaotic feel, similar to ransom notes. The multiple type faces and the alternating backgrounds for each letter also helps with the chaotic feel that matches the meaning of the title of the EP.

- Deborah

[thinklookdosummer2019]

ITC Avant Garde Gothic and Plantin

ITC Avant Garde Gothic was designed by Herb Lubalin and Tom Carnase in the 1970′s and was inspired by the logo for Avant Garde magazine which was also designed by Lubalin. It’s a very popular sans serif type that has 40 different styles and families within it which were designed by several different artists. 

Plantin was desgined by Frank Pierpont in 1912 after he was inspired by a visit to the Plantin-Moretus Museum. It was made to be used for machine composition and is best suited to books and editorials, although it works well on screen. It has strong texture and historical roots which gives the type weight and authenticity.

- Aleka Agre

[thinklookdosummer2019]

Knockout & Lexicon

#1 Knockout

Knockout is a sans-serif typeface designed by Jonathan Hoefler and Tobias Frere-Jones in 1994. Knockout is very functional and uniform that contains nine different widths.  With the functional benefits of a family that’s well-organized, and the visual appeal of styles that are individually designed, Knockout’s nine-width, the four-weight family offers a range of voices that’s impossible to achieve with even the best Modernist sans serifs.

#2 Lexicon

Lexicon is a serif typeface designed by Dutch type designer Bram de Does between the years 1989 and 1992. The typeface was specially designed for use at very small point sizes in Van Dale's Dictionary of the Dutch Language. Lexicon no. 1 is basically the dictionary version, which has very short extenders, while Lexicon no. 2 has extenders of a more regular length. 

--- Cissie Wang

[thinklookdosummer2019]

1. Miller

This typeface was created by a designer Matthew Carter and was released in 1997. Because its style is originating from Scotland, we call this design “Scotch Roman.” The letter is categorized into the transitional serif and because the letter gives clarities well through its figures, it is often used in the newspapers and the magazines. It was popular in the 19th century. 

2. Doko

This typeface was designed by Ondrej Job. He wanted a somehow futuristic and modern typeface that also includes serifs. Since the typeface was drawn from various inspirations like cartoons and illustrations, the letter itself contains some entertaining aspects. It carries various curves. Thus, the letter could be used for many applications like creative editorial designs, packaging, and etc. 

[thinklookdosummer2019]

archer + knockout - fiorabella cogley

archer:

a slab serif typeface designed by hoefler and frere-jones privately for a martha stewart magazine in 2001. it was made public in 2008. the feel of it is very martha stewart (friendly and inviting) but it is very overused because of those feelings. it is availble in 5 weights (light, book, medium, semibold, and bold) and can be used comfortably in italics and small caps. it takes inspiration from designs like rockwell. it is considered unique because it was able to combine geometric and humanist style well together. 

source: https://en.wikipedia.org/wiki/Archer_(typeface) , https://www.typography.com/fonts/archer/design-notes , https://www.typewolf.com/site-of-the-day/fonts/archer

knockout: 

a sans-serif typeface designed by the same as archer, hoefler and frere-jones. it was released through them in specific in 1994. it is unique because of its nine different widths and how they were designed to have some subtle variations between them all. it was an expansion of hoefler’s first typeface, champion gothic. it is seen as great and popular because it is great for display and big print but also text. it was started for the new york times and has been redesigned for sports illustrated. its common with old school boxing or sports posters as well as now used more editorially and for edge. 

sources: https://www.commarts.com/project/5676/knockout , https://www.typewolf.com/site-of-the-day/fonts/knockout

-fiorabella cogley

[thinklookdosummer2019]

Type review

William Henry Bradley was an American Art Nouveau illustrator and artist. He is nicknamed as the "Dean of American Designers" by The Saturday Evening Post and he was believed to be the highest paid American artist of the early 20th century. Bradley's artistic style is considered a branch of Art Nouveau though it draws heavily from the aesthetics of the Arts and Crafts Movement and Japanese block printing.

Bruce Rogers was an American typographer and type designer, and sometimes he is regarded by some people as the greatest book designers of the twentieth century. Rogers was known for his allusive typography, rejecting modernism, seldom using asymmetrical arrangements, rarely using sans serif type faces, often favoring faces such as Bell, Caslon, his own Montaigne, a Jensonian precursor to his masterpiece of type design Centaur.

——Bethany Peng

[thinklookdosummer2019]

Type review -- Emily gibson

In the Coney Island sign, three different types are used in the design. The script of the “greetings from” evokes a sense of a handwritten post card—quick, yet heartfelt. The “New York” is written in block letters with a geometric feel: it is sans serif and italicized which stress its importance. “Coney Island” is composed of three dimensional letters which show images of what can be found in the amusement park within—the letters are large and take up the majority of the sign.

The second photo is from a collection of postcards of New York City. The type features a unique style of kerning that smushes all of the letters together. That, the outline of the thick stroke letters, and an uneven baseline gives the collection a playful feel.

[thinklookdosummer2019]

Homework: Due June 26

Your assignment is to print and bind one copy of your book. Printing and binding are difficult, even with sophisticated tools. Make sure to allow yourself plenty of time and frustration in your calendar for this assignment, and don't wait until Wednesday before class. Indesign has a very helpful tool called "Print Booklet." With this tool and a double sided printer you can make magic happen. That said, this can still be frustrating. Make sure to print in advance.

Reviews: For your reviews, you have a choice: You can review two choices from the last page of the syllabus, as usual, or you can take pictures of two real-life designs in New York -- like a poster, a map, or a sign for a restaurant. Please focus on the typography.

[thinklookdosummer2019]

Exercise: Type Design

Bitmap fonts. Practice drawing again. In class.

Must be two inches tall on graph paper.

From Thinking With Type, via every design program ever:

Create a prototype for a bitmap typeface by designing letters on a grid of squares or a grid of dots. Substitute the curves and diagonals of traditional letterforms with gridded and rectilinear elements. Avoid making detailed staircases, which are just curves and diagonals in disguise. This exercise looks back to the 1910s and 1920s, when avant-garde designers made experimental typefaces out of simple geometric parts. The project also speaks to the structure of digital technologies, from cash register receipts and LED signs to on-screen font display. Print your own graph paper. Each letter must be at least 2 inches tall. You must create the following letters:

hopnuqd

plus three of your own choice

In honor of future guest Jason Engdahl, consider beginning with the letter R.

Use this site to print your own graph paper:

http://www.printfreegraphpaper.com

5. Exercise:

Font Editor

FontStruct is a simple font editor with a web interface. You can use it to make your own typefaces and share them with others. For this exercise, I want you to use FontStruct to design a font for an iphone or android game. The game is new, but it deliberately invokes the retro aesthetic of video games from the 1980s. You must develop a full alphabet.

You have four choices:

Mutiny: A scrolling shooter that requires you protect earth from aliens. Carnival Creep: An RPG adventure game set in a decaying amusement park Unicorn Rainbow: A fighting game targeted at young girls Your own game

http://fontstruct.com

Font editors are often incredibly complex programs that help with a lot of the detail work of creating type. They also allow you to import letters from illustrator files and similar programs. I recommend you try a good program for this week's assignment. The following are all good programs, and will walk you through the process of creating type from scratch:

Glyphs Mini. Free 30 day trial. https://glyphsapp.com/get-started https://glyphsapp.com/tutorials/sketching

Font Lab Studio standard mac, pc. Free trial.

FontForge open source unix app. Free.

What kind of typeface do you want to make? What type classification? Will you base it on an existing type? Letters on the street? Adorable animals? What kind of details? If you want to start working ahead, consider whether or not you want to use a custom typeface for your final project. Now would be a good time to start.

(By the way, you should use Glyphs Mini. If you're really ambitious you can use Font Lab Studio.)

[thinklookdosummer2019]

Tutorial: Print Booklet

I want you to be prepared to print your book for next class. If you don't know how to use the Print Booklet tool in Indesign, check out the following tutorials:

Lynda https://www.linkedin.com/learning/indesign-cc-2013-essential-training/printing-a-small-booklet?u=2131553

Alternative guide to the Print Booklet function in Indesign Design Like a Pro https://www.youtube.com/watch?v=NQAUiKpvaLc

How to layout a book in Indesign: http://www.creativebloq.com/print-design/design-and-lay-out-book-indesign-4137471

INTERMEDIATE: If you want a little more contact with Indesign, here are two more tutorials to help you navigate:

How to use typography in Indesign Lynda Indesign Typography: Part 2 https://www.linkedin.com/learning/indesign-typography-part-2/

Indesign basics: How to manage pages Lynda Indesign Managing Pages and Text: https://www.lynda.com/InDesign-tutorials/Inserting-deleting-moving-pages/466174/559631-4.html

ADVANCED: If you have a good grip on Indesign and printing, you can do a bonus tutorial that will help you start to incorporate Photoshop techniques with Illustrator files.

Follow one of Nigel French's Type Projects on Lynda. You can choose Punk Album Art, Swiss Style Poster, Grunge Poster, Constructivist Poster, Dada Poster, Art Nouveau Poster, or Victorian Ad:

https://www.linkedin.com/learning/designing-a-typographic-constructivist-poster/