LORRAINE

LI

LORRAINE LI

Graphic Designer and Programmer

Designs and builds brand identities, typographic systems, websites and digital tools. BFA in Graphic Design from Rhode Island School of Design. Previously at Manual, Studio Lin and 2x4 New York. Currently at Instrument.

Contact:
info@lorraine.li
IG @lorrr.l

1.
font-remix
Web-based Tool, 2019

Font-remix is a web-based experiment that proposes the process of configuring letter forms at runtime and generating a customized font file for download. Using opentype.js and performing boolean operations on the vector letterforms, two open source typefaces are combined according to a set of grids.

Email info@lorraine.li to request a Beta version:)

2.
Joiii Photography Site
Website, 2020

Personal photography site for Joiii, artist and photographer based in Tokyo.

The site features navigation by color and scale via sliders. The color slider is a gradient visualization of the amount of photographs tagged each color on the content management system.

With Taographicdesign.

3.
Doublehood Website
Front End, CMS, 2020

Web development for Doublehood, an agency based in Vienna and Shanghai.

4.
Cyprus Pavilion Website
Front End, CMS, 2021

Web Development for the Cyprus Pavilion using Kirby CMS. The site scrolls by the baselines of the mono-spaced typography accounting for dynamic content lengths.

With Studio Lin.

5.
Instant Acumen Shownotes
2020

Shownotes are inspired by the podcast's name(热敏) and takes the form of heat-sensitive printing.

6.
Instant Acumen
2020

Visual direction, cover templates for Instant Acumen, a podcast on words, language and rhetoric. Each episode is centered around a word and hosts discusses its association, context, connotations.

7.
Math Museum
Graphic Identity, 2019

Fictional identity for the Math Museum in NYC referencing Lissajous Patterns.

8.
ForA on the Urban Website
Design, Front End, 2020

Design and front-end development for ForA on the Urban by Institute of Architecture at University of Applied Arts Vienna.

With Studio Lin.

9.
RISD GD Senior Show 2020
Website, 2020

Website design and development for the RISD GD Senior Show themed Intersections.

Branding by Gabriel Abascal
Senior show committee: Damini Agrawal, Emily Mahar, Gabriel Abascal, Grace Young, Lorraine Li, Maddy Teh, Minji Koo, Xio Espana

intersections.risd.gd

10.
Robert Brownjohn
Font, 2021

Robert Brownjohn is an open source font created using the Font-Remix tool.

With Jonathan Maghen of Primary Foundry (primary-foundry.com) based on the 1959 Grishman-Ryce Duo cover art designed by Robert Brownjohn.

primary-foundry.com/typefaces/robert-brownjohn/

11.
Mid-Autumn
Poster, 2019

Two-color(black and gold) Riso poster for the Mid-Autumn Day event by RISD CSSA.

12.
Work Lamp

Poster for the Work Lamp by WUU. Through animating the lamp's 3D model, showcases the lamps's versatility that adapts to anyone's needs and stand the test of time.

13.
Color Lab Beta Site
Website, 2019

Temporary site for the RISD Color Lab launch event.

The site acts as a shared canvas that each user can pour colors onto. The landing page that each user sees is created by the last user. Each user’s reading experience can be altered by other users who access/edit the site in real time.

Collaboration with Minkyoung Kim.

14.
How do you feel?
Experiement, 2019

A web poster that documents visualized user input. User enters the site, answers a simple question and chooses a color as an avatar, which mirrors the conventional action of RSVP. The site becomes a visualization of its users in an unordered fashion. Mobile version of the site shuffles according to device orientation.

howdoyoufeel.lorraine.li

15.
Rewind Festival
Experiment, 2020

A sound-reactive logo lockup. (opentype.js, p5.js)

16.
Algorithmic Reading II
Experiment, 2017

The project attempts to distill the narrative of The Old Man And The Sea to meaningful symbols compiled with computational method, with hopes to create a visual story parallel to the cannon narrative.

All semantic information are gathered from the text using Python, visualized using Processing for “type-setting” in Indesign.

*Footnotes in the book are quotes in the text that correspond to the bracketed line of symbols.