Skip to content

Latest commit

 

History

History
187 lines (120 loc) · 8.38 KB

01-character-description.md

File metadata and controls

187 lines (120 loc) · 8.38 KB
Raw

Character & Description

Brief

90 percent of design is typography. And the other 90 percent is whitespace.

—Jeffrey Zeldman

A large painted black serif capital letter O with a white oval center, on an off-white background.

Hilma af Klint, Atom Series, 1919 (via coa.edu)

Alt text description: A large painted black serif capital letter O with a white oval center, on an off-white background.

Alternative text should be succinct, yet descriptive of the content and function of an image. Lengthy alternative text (more than around 100 characters) often indicates that extraneous content or content that is not available to sighted users is being presented.

Perceivable guideline via WebAIM’s WCAG 2 Checklist

  1. Design a bespoke character; working from the modern English alphabet, choose a single letterform from A to Z (one of 26 letters) using any style (lowercase or uppercase, sans-serif or serif, cursive or fantasy, etc.) and technique (analog or digital).
  2. Write a concise, accessible, and semantic alternative text description of your final letterform artwork as a single sentence in under 100 characters.
    • For example: A large painted black serif capital letter O with a white oval center, on an off-white background.
  3. Also consider text for a caption: Letter, designer, and a list of materials or process.
    • For example: O, Lauren Cook. Assorted moss for floral arrangements, hot glue, and wire.

Details

Artwork

Capture and save final artwork in a digital format using these guidelines:

  • Size: Use a square with a width and height of 1080 px × 1080 px at a resolution of 72 px (think Instagram artwork size).
  • Format: If it’s a photo, save as a JPG; and if it’s not a photo, save as a PNG; or if it’s animation or video, save as an animated GIF but consider including an alternative still frame as well.
  • Name: Use a meaningful filename, in all-lowercase, and separate words with hyphens. See Naming guidelines and Dashes vs. underscores for details.
    • Use the filename convention of case, letter, first name initial followed by last name (surname) combined with the best practice of all-lowercase and separate words with hyphens.
      • For example: uppercase-and-jgagne.png

Optional:

  • Collect and save sketches to document your process (as a case study).

Text

  • Write your description as a single sentence in sentence case; start with a capital letter and end with a period.
  • Keep your description short; aim for 100 characters or less, unless there is a lot to describe (120 is a good limit).

Note:

  • Capitalize abbreviations and acronyms, but remove ampersands.
    • For example: The acronym (and brand) “C&A” becomes “C and A”.

Handoff

We’ll discuss the work and handoff details in class. In the interim, share via email or Slack for optional feedback before class.

Update: Share your repo URL in the 01-character-description channel of your Slack workspace.

GitHub Config

  • Create a project folder (repo) with a Markdown and image file.
    • For example:
      • 01-character-description
        • character-description.md
        • uppercase-and-jgagne.png

Markdown Files

  • character-description.md
## Character & Description

![A close-up of a 16 point ampersand typed in Trebuchet MS viewed in Illustrator’s Pixel Preview mode.](uppercase-and-jgagne.png)

*&*, Justin Gagne. Screenshot of an artboard in Adobe Illustrator.

- - -

**Alt text:** A close-up of a 16 point ampersand typed in Trebuchet MS viewed in Illustrator’s Pixel Preview mode.

Optional:

For those with additional artwork (sketches) and text (information), please collate and show that work using basic Markdown to create subheading, lists, etc., as shown below.

## Character & Description

![A close-up of a 16 point ampersand typed in Trebuchet MS viewed in Illustrator’s Pixel Preview mode.](uppercase-and-jgagne.png)

*&*, Justin Gagne. Screenshot of an artboard in Adobe Illustrator.

- - -

**Alt text:** A close-up of a 16 point ampersand typed in Trebuchet MS viewed in Illustrator’s Pixel Preview mode.

### Process

#### Sketches

![Short text description.](uppercase-and-sketch-1-jgagne.png)

Caption for sketch 1.

#### Keywords

- ampersand
- pixel
- preview

Artwork Naming

  • Use the filename convention of case, letter, first name initial followed by last name (surname).
    • For examples: uppercase-and-jgagne.png

Note:

  • Keep artwork and text as separate pieces of content.

Examples

Analog student work from Experimental A–Z, 0–9 taught by Cassie Hester and Joey Hannaford.

Readings

Alt Text

Design

Markdown

Typography

Resources

Writing Tools

Tutorials

Vocabulary

  • Alt text
    • Short for alternative text. Alternative text provides a descriptive textual alternative to non-text content such as images and charts in web pages and digital publishing formats.
  • Accessible
    • Easily understood; approachable. Accessible content that’s friendly and usable by as many people as possible.
  • Bespoke
    • Handmade; made by hand. Bespoke type can make a first impression count, and is often one of the first things people notice about a brand.
  • Semantic
    • Meaningful; relating to the meaning of a word, phrase, sentence, or text. Semantic markup is HTML that introduces meaning to web page content rather than just visual presentation.