Sunday, March 17, 2019

Ambient Type, Space, Environment

Using a phrase, quote, or series of phrases or quotes, students will create an indoor and/or outdoor typographic experience.

Goals
  • understand 3D space in digital and physical domains 
  • experiment with 2D typography fused with, within, or onto a 3D space
  • apply your knowledge of typography, kerning, and tracking to digital and 3D space
  • apply what you have learned from the Digital Type Exercise
 You may…
  • physically install this, actually building it in 3D space
  • manipulate photography, illustration, and typography, to "fake it" in Photoshop
  • do a combination of the two methods above
Specifications…
  • Media or Medium: open
  • Size, Scope: open
  • Color: open
  • Documentation: 4-6 photographs, ideally high-resolution
  • Optional: a 30-40 second video showing the space as a walk-through or other experience

Worth 100 points
  • 10% craft: rendered typography, phrase, quote
  • 20% legibility and readability
  • 30% composition: design in the environment
  • 20% conceptual merit, uniqueness 
  • 20% presentation/professionalism

Thursday, March 07, 2019

Exercise - Digital Typography

Read the provided links at Adobe, HOW, and YouTube, to learn about applying typography to 3D space and 3D elements.

Goals
  • understand 3D space in digital and physical domains 
  • experiment with digital software to have 2D typography fuse with a 3D space
  • apply your knowledge of typography, kerning, and tracking to digital and 3D space


I. Anamorphic, Illusion. Use the provided interior gallery space and building exterior. Apply your name to the interior and exterior walls. For the interior, show it "flat" and readable when looking down the hall and then skewed within the space when looking down the far left; for the exterior, apply your name to one of the walls for a "flat" read and then show it skewed when viewing the exterior from another perspective. Work in Photoshop, Illustrator, Dimension, or a combination of said software. Submit a total of four photos: (a) down the interior hall and (b) at the left of the interior hall, as well as (c) the front of the building's exterior and (d) viewing the building's exterior at an angle.

II. Consonance, Application to 3D Model. Use the supplied white 3D models and project your name onto them, fitting your full first name into one of the model corners. Capture an image of your name with "flat" reading so we see it in two-dimensions just like we'd see it on paper. Take a second picture of the 3D structure at an angle to show how your name would skew, distort, and stretch with the building and with the new vantage point. Submit two photos, one for each vantage point.

Worth 50:
25 points for each of the approaches above, numbers I and II:
  • 10 craft, detail work, rendering of type in space, correct rendering of perspective, vantage points
  • 10 techniques used and ability to convincingly synthesize 2D and 3D space
  • 5 professionalism, presentation, following directions

Monday, February 25, 2019

Long-Term Project Workflow

264 points, Final Typeface Design (due exam day, Tues. Apr. 30 at 8am): making the letters, numbers, punctuation, and/or other glyphs, with 52 glyphs in all and vectorizing them in Illustrator (any/all type must be vectorized, even if you have made it with pen and ink or a brush); handlettering is also acceptable but must be digitized in some way; students will also create a spec sheet (all of the glyphs on a single format, showing every glyph they've made), a branding board that has the name of their font, and three capabilities with your design used in 3 ways (may be any or all of the following, print, digital, 3d, environment, etc.)

See the class calendar for critiques, deadlines, and milestones.

Required Reading, Playing:

Create a total of 52 glyphs: Letters, Numbers, Punctuation, Symbols, Flourishes, Alternate Characters. Glyphs shall be delivered as vectorized character outlines, produced in Adobe Illustrator, saved as outlines in both Adobe Illustrator (AI) and Adobe Acrobat (PDF) formats. Letters may be drawn or painted first, scanned in for vectorization, and handed in as AI and PDF files. Letters may also begin in Illustrator, as pure vector files.

Character Options: students must create 52 characters in all, and can choose one of the following approaches
  1. 26 uppercase, 26 lowercase
  2. unicase - 26 uppercase, plus others* (see below for full list): numerals 0-9, punctuation, swashes, and/or other characters
  3. unicase - 26 lowercase, plus others* (see below for full list): numerals 0-9, punctuation, swashes, and/or other characters
  4. any option not listed above must be approved by the instructor
*the 26 others
  1. items 2 and 3 below are required for the others, and students may choose from items 4-11 for their additional characters
  2. digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  3. punctuation: periods, commas, open/closing quotes, apostrophes, colons, semicolons
  4. alternate characters, such as various styles of one or more letters, see Amanda Moore's Tonic from last term as an example
  5. swashes, such as stylized ampersands (&) or upper- and lower-case letters
  6. fractions: ½, ⅓, ⅔, ¼, ¾
  7. math symbols, multiplication, plus, divide
  8. currency symbols, US, EU, Asia, UK currency marks
  9. miscellaneous: copyright, registration, trademark, servicemark, diamonds, arrows, octothorp, pilcrow
  10. crosses: Roman, Orthodox, Celtic
  11. Latin accents: grave, acute, circumflex, tilde, diaeresis, ring, macron, breve, ogonek, caron, etc.
Final Deliverables. In addition to creating your font, students are expected to create the following to market their typeface and give it a personality. The model for the items below is the Lost Type Co-op, where they have name boards in their browse section. Note: all sizes below are in points, so size your layouts accordingly. You can build these in any program (Illustrator, Photoshop, InDesign), but note the file requirements asked for when turning in the work.

A. Multiple Spec Sheets: 842 pixels wide by 597 pixels high, 300dpi, RGB, TIFF—will include all 52 of your characters, can be color, should have your name, as the designer also listed in the layout, as well as the font's name too. This is noted as Multiple, as in many spec sheets because some students may need to show more than one spec sheet, especially those with layered typefaces. But these are the ones you are required to show:
  • black text on white ground
  • white text on black ground
  • others (as needed) perhaps colored for layer effect

The following works in sections B and C shall be assessed and counted as a separate grade from your letter design work.

B. One Brand Board: 700 pixels wide by 300 pixels high, 300dpi, RGB, TIFF—this will have the name of your typeface on it, and use materials and color in order to promote a look and feel, the character if you will, of your font. Consider how a background image, faint or full, or texture, can add to that character. 

C. Three Capabilities Layouts: your typeface used in situation, and applied to a layout or other design application; the application should be appropriate, meaning it makes sense as it's applied; an example of an inappropriate application would be Comic Sans used on the resume of a banker, which would look rather dubious; format may be rectangular as portrait or landscape, may also be square in shape, but cannot be any smaller than 500 points in any one direction, must be 300dpi and RGB, TIFF; examples include but are not limited to: billboards, wordmarks and other brand identity, tabular layouts such as stock information, album covers, posters, bumper stickers, book covers, eight track cassette tapes, vinyl record labels, CD cases, railroad signage, trading post signage, stationery, envelopes, rock band poster, classical music posters, toy packaging, real estate advertisement and/or identity, cigarette packaging or advertisement, cigar packaging or advertisement, alcohol packaging or advertisement, etc., etc.

Worth 264 points total, with category points as follows:
  • 20 craft
  • 124 composition of glyphs, including legibility and overall unity of 52 in the set
  • 20 research and development
  • 40 presentation and professionalism
  • 60 capabilities designs, collateral's quality, composition, rendering
  • detailed assessment criteria will be shared in-class

Monday, February 18, 2019

Experience Type, UX

Work in your assigned team to learn about your assigned website and redesign their digital experience, taking a "type first" approach when it comes to the look and feel, and overall design.

This project is worth 100 points in all, and has multiple parts. 

I. Preliminary Design Research

  • Absorb the content: get to know your assigned client; conduct field research; conduct competitive research; interview students, readers, experts, users
  • Analyze the content: understand what's important, know the site hierarchy and architecture, and understand use cases
  • Define personas: identify no less than 4 personas who currently use the site, with 1 of those personas being new users you hope to win
Use class time on Feb. 20th to work in teams to understand the site content, site's purpose, and overall brand identity. Students will have to present their findings to the class on Feb. 25th, incorporating any visual aids into a PDF.

Goals for Feb. 25th Presentation
  • general content audit: clearly and concisely show us the site's architecture, hierarchy; use a diagram to do so
  • use cases: present no less than 10 use cases, showing how the site gets used for content creation/editing/push/output and also how a user can absorb/read/input/digest that content (see your notes from our Feb. 18 discussion); How can role-playing help you define these things?
  • personas: show no less than 4 personas who currently use the site, with 1 of those personas being new users you hope to win
  • challenges: state any technical challenges as they currently exist, specifically challenges that are part of the site content, how users interact with the content, or "bandwidth" challenges that might exist (see reading placed on Turnstile_2 for further information)
  • look and layout: show us how the site is currently designed, and propose (if needed) a new layout, new grid, new schema—if you redesign it, you must have a good reason for doing so—and you will need to show all of the following, including but not limited to mobile, tablet, laptop, desktop, smart-screen such as a teacher's widescreen smartboard
  • use design research methods for your work above, see this textbook
  • format your presentation's visual aids as a PDF, playable on our Rutledge 221 iMac

Research Worth 30:
  • 10 inclusion of all required content
  • 10 craft, composition of layout(s)
  • 5 research, critical thinking employed
  • 5 demonstration of design research methods  



II. Information Architecture & Visual Design due Wednesday February 27th
  • newly created wordmark, lettermark, or logo, a rebranding
  • mobile web layouts
  • desktop web layouts
  • app design
  • use of site via smartclassroom display, television (for Wikipedia)
  • use of site via sales platform, search platform, or other portal for push (for Craigslist)
  • search, in other words, how you can integrate your brand's product comfortably and with "low friction" into search abilities
  • +innovation, something unique your team designed for the brand that is on-brand, a new and unique touchpoint
  • submit final design work as PDF files
Tools: Students do not have to code/program their site, but rather, you are designing for the front-end, and may use Illustrator, InDesign, Sketch, or Adobe XD. Further reading here:
  1. Sketch
  2. Adobe XD 
  3. Adobe XD (more)
  4. see also, "_software and tools" links in our Project 3 folder on Turnstile_2
Final Design Due Feb. 27th, Worth 70 points: shared work, shared client, shared grade… in other words, each member of Craigslist gets the same grade and each member of Wikipedia gets their own grade for their work
  • 40 design, layout, typographic sensibilities, use of the grid, precision, appropriateness of typography used, readability
  • 20 function, appropriateness
  • 10 professionalism, portfolio-worthiness


    Monday, February 04, 2019

    Visualization, Book Cover

    Design a cover for your book, be it a paperback or hardcover, fiction, non-fiction, biography, autobiography, memoir, textbook, you name it… any book works but it cannot be a children's book nor graphic novel, nor any other book that is primarily about visuals or one that primarily uses visuals. This should be a book for deep reading, long reading.

    You may work in color, you may include textures, patterns, and other graphic applications. However, neither photographic images nor icons/symbols may be used. Nothing representational. In other words, if you are designing a book cover for a book titled Astronomy Past, Present, and Future, you cannot use stars, rocks, planets, nor anything similar to the shape of those things. Type only. Be mindful of appropriateness, contrast, and readability of images; also beware of any denotation or connotation.

    Preliminary Design Research
    • Absorb the content: get to know your material, your book; conduct field research looking at related books; interview students, readers, experts
    • Analyze the content: understand what's important, what the "big idea" is; how to differentiate your idea from others, how to make your cover unique and appropriate
    • Understand your audience 
    • Have a concept, define that concept
    • Render your visuals: draw, collage, set type; revise as needed
    • Test: get feedback in class; via peers

    Choosing Type: Suggested Approaches
    • Direct: using a font that appears as if it is a "close match" to the content in your book 
    • Simple versus Complex (contrast): using a simple font in conjunction within (or with) a busy environment; or using a complex font within a simple environment 
    • Historical Relevance: the font can have historical connection to the material in your text, such that it was designed during a period of significance in your text's content, or maybe it originated near a country of significance 
    • Atmospheric: uses textures, patterns, overlapping, layering, transparency, collage, etc. to evoke the sense of that topic; evoke, verb: 1. bring or recall to the conscious mind: the sight of baseball evokes pleasant memories of going to baseball games with my dad; 2. to elicit a response: the awkward kid who evoked giggles from his sisters via Oxford English Dictionary

    For additional suggestions and creative paths, read the very wonderful Type, Image, Message by Skolos and Wedell, and consult your Typographic Design textbook from VCOM 258 as well. Also, you can make your own type!


    Goals
    • use style to inform message, and enhance your concept
    • use typography expressively and to further your concept, manipulating it where needed with the use of Illustrator and/or Photoshop and/or traditional and non-digital media
    • render type and various styles using color to enhance message, concept
    • use principles of semiotics
    • use your visual and formal vocabulary with regard to glyph rendering, drawing, editing, and making

    The final product will be a front book cover and spine of the book, produced as a high-quality mock-up that is physical (printed and in 3D) and also digital (photographed professionally). Physical book must be a 3D mock-up made with a printout of your design, wrapped around the book or a book. Digital files must be presented as PDF (flat layout from Illustrator, Photoshop, etc.) and photograph of your 3D work (PNG or JPEG).

    Related Work


    Worth 100:
    1. 20 points craft
    2. 40 points composition, originality
    3. 20 points concept
    4. 20 points presentation/professionalism

    Monday, January 14, 2019

    Style as Message

    Students will design a series of iMessage stickers that will function within the latest version of iOS for the iPod, iPhone, and iPad. Students will produce all of the necessary designs and graphics, as well as mock-ups, but will not be required to upload/propose the stickers to the App Store. If students wish to sell the stickers there, they may do so on their own.
    • Design a series of iMessage stickers
    • Use only typography, colors and shapes are also acceptable
    • Mock-up your stickers in an iMessage composition, showing them used in a situation or situations

    Requires the creation of at least 9 stickers that may be:
    1. a word
    2. multiple words
    3. slang
    4. sentences
    5. exclamations
    6. onomatopoeia
    7. questions
    8. invitations
    9. commands
    10. abbreviations
    11. wordless vocables, nonsense syllables, melodies, beats

    Goals
    • use style to inform message, and enhance your concept
    • employ freehand drawing skills, as well as use of Illustrator and/or Photoshop
    • render type and various styles using color to enhance message, concept
    • employ the design principle of unity and variety to create a series of typographic designs/illustrations
    • use your visual and formal vocabulary with regard to glyph rendering, drawing, editing, and making

    Worth 100
    • 30 points craft
    • 30 points composition, design, includes readability and legibility
    • 20 points concept, message, clarity, originality, appropriateness
    • 20 points professionalism, formatting, "portfolio-worthiness"

    Development and media, working process:
    • students will be assigned a topic by the instructor and must collect information that relates to that topic
    • Jan. 23, each student will present appropriate research to the class in the form of a lecture with a total of 6 individual slides, each slide will have visuals to teach us about your subject matter and theme
    • Jan. 30, final works submitted

    Final Format
    1. three separate iMessage sticker screens, as shown specified by the instructor
    2. total of 9 unique stickers must be shown in the sticker screens
    3. saved as PDF (best possible formatting and file type) to Turnstile_2

    Sunday, January 06, 2019

    Hello

    Welcome to intermediate typography!

    Awesome Ampersand

    Awesome Ampersand introduces you to one of the more mysterious glyphs. The '&' has many uses, but one meaning: 'and.'

    Read about the ampersand:
    The ampersand is fun and fancy. But don't let anybody tell you that it's frivolous, without purpose or value. Designing the ampersand takes practice, patience, and a no-nonsense approach. And even the best type designers can find it challenging. Read about what Terrance Weinzierl said about the ampersand. If you can make an ampersand and make it well, then you can make almost any glyph.

    Worth 50 points, will require you to draw not 1, but 5 ampersands.
    1. script (formal or casual)
    2. serif
    3. slab serif
    4. sans serif
    5. student's choice (fancy, novelty, stencil, silly, or a different script style) 
    The sky is the limit. Look for inspiration everywhere and anywhere, such as at foundries:
    1. House
    2. TypeTogether
    3. Avondale Type Foundry
    4. Just Another Foundry
    5. P22
    6. Emigre
    7. OH no Type Co.
    Or look for inspiration elsewhere online.

    In the end, you will make your own Awesome Ampersand.

    Learning Outcomes:
    • learn and refine freehand drawing skills
    • learn and refine digital drawing skills, as well as drawing input and refinement in Adobe Illustrator and/or Photoshop
    • exploration of type styles, including but not limited to script, sans serif, serif, slab serif, and decorative
    • awareness of visual and formal vocabulary with regard to glyph rendering, drawing, editing, and making
    • appreciation of ligature, such as the 'e' and 't' used to form the '&' 

    worth 50 points total
    • 10 points for each of the 5 ampersand styles
    • 4 points craft
    • 4 points composition, includes legibility
    • 2 points originality

    initial development and media, working process
    • this is open, but should start with traditional tools such as paper, pencil, pen, marker, brush, ink, etc.
    • when final hand-rendered ampersands have been reviewed and approved, they will be moved into digital format (see final format below)

    final format:
    1. scan your ampersand and digitize it in Illustrator and/or Photoshop
    2. each ampersand should be rendered with a solid black fill and a white background
    3. all ampersand strokes (a.k.a. line work) must be solid black, no grey, no gradients
    4. each ampersand must fit within a 5 by 5 inch square, and cannot break the format
    5. submit each of the 5 ampersand styles in 1 of 2 formats; submit both formats if needed
      • vector file, outlines, saved as Illustrator.EPS
      • bitmap files also accepted as pixel-based file, saved as PNG (ideally PNG-24 format) with transparency and no compression, RGB, 600dpi
    6. submit digital files to Turnstile_2
    See the Course Calendar for deadlines.