Reem Essayli - Graphic Design Portfolio Book

reem essayli design portfolio

welcome!

My name is Reem, and I am a visual designer based out of San Francisco, CA. Coming from a fine arts background, and a background working within the music industry for the past four years, my life passion is to find a way to incorporate my love for both art and music, into my design work.

I have a love for experimental editorial design, and I like to push the boundaries of conventional aesthetics within my own work. I thrive off of, and am greatly inspired by opportunities to be able to collaborate with other creatives of diverse fields.

I hope my design work has something of an aesthetic you’re looking for!

photography credit: Ellizabeth Hogue

contents 01 - 14 15 - 26 27 - 32 33 - 42 43 - 52 53 - 66

lucent magazine rebrand: great american music hall un declarartion of human rights poster app: present dubliners type design: in flux

intro

A creative magazine, open to all creative fields and mediums (art, design, light design, architecture, food, culture, etc), in which each quarterly issue is saturated with a different color. Lucent, meaning to give off light, plays up the meaning of the word, given the fact that color is created with light prisms.

So as a magazine, Lucent, gives off a saturation of colorful imagery to the viewer and reader. Every quarter, Lucent, will explore the colorful complexity of our surrounding world, to highlight a curated selection of some of the spaces, places, and art & design work, in which saturated color can be found.

lucent magazine

process

In the preliminary design process, I developed the concept behind the magazine, this being a magazine that places emphasis on one saturated color for every individual quarter. Once I’d decided on a basic concept/theme for my magazine, I began brainstorming words which relate to color, paint, and light. Part of this brainstorming process was doing research on what magazines already exist on market, to ensure that the potential names I was coming up with were completely original.

I also conducted a quick survey, to see which title my peers and colleagues were most attracted to.

3 . lucent magazine

naming process

lucent Lucent received a great deal of positive peer reaction, and as a word has an elegant sound and feel. I also saw a lot of design potential with a word like Lucent, for the magazine’s masthead.

phosphorescent

concentrate

polychromatic

lucency

prismatic

aestheticism

gild

wash

daub

lambent

Lucent

Lucent

L

L Lucent

typeface exploration

Lucent Allerta Stencil Braggadocio Italiana Julius Sans One Megrim Montserrat Subrayada Syncopate Rubik Mono One Wire One Gruppo

ucent

Lucent Lucent

Lucent The design decision of selecting the typeface Montserrat Subrayada for the magazine’s masthead was based on the fact that it is to me visually reminiscent of a neon sign. This “neon sign” could change color, in conjunction with the quarterly color themes.

visual research + inspiration

Inspiration for the overall mood and tone of the Red Issue of Lucent, was drawn from photographs shot by photographers Billy Kidd, Lambis Stratoudakis, and Andre Elliot. I also pulled inspiration from looking at places with extreme red lighting, and attending music shows in which the light designers primarily had red lighting illuminating the space, musicians, and stage.

7 . lucent magazine

reem essayli . portfolio

masthead iterations

selected masthead

cover iterations

reem essayli . portfolio

final design

reem essayli . portfolio

In the production process of the final prototype for Lucent Magazine, I collaborated with photographer Ellizabeth Hogue to produce a photography series exclusive for The Red Issue. This collaboration was incredibly inspirational for the development of Lucent’s look and feel as a contemporary magazine.

13 . lucent magazine

reem essayli . portfolio

intro

A mock-rebrand of the classic and historic San Francisco rock n’ roll venue, The Great American Music Hall. The Great American Music Hall, voted number six best rock venue in America by Rolling Stone Magazine in 2013, is the oldest rock venue in San Francisco. In this rebrand, I wanted to design a new logo which would bring a modern and elegant feel to this historic venue. Visual inspiration for the design of the logo came from the curvature motifs, which are repeatedly seen within the interior design, building facade, and signage. The new logo also brings in the curved motifs seen in music symbols, such as the treble and bass clef. The rebrand incorporates the deep burgundy coloring of the building’s facade, along with the gold found within the interior murals of The Great American Music Hall.

rebrand: the great american music hall san francisco, ca reem essayli . portfolio

process

Initial research for the mock rebrand of the Great American Music Hall involved compiling present and past images of the interior and exterior of the venue, along with exploring the history behind the venue and comparing its past and current logo, to inspire the current rebrand. My research findings found that the venue has a rich history, and had transitioned from being one of the most highly regarded fine dining establishments in the U.S., to eventually also turning into a speakeasy, and eventually being purchased by burlesque dancer Sally Rand and turned into a venue called The Music Box, in 1935.

Today GAMH Is still regarded as one of the top music venues in San Francisco, and so the aim for this rebrand was for it to be sleek and contemporary, but also be an ode to the significant history of the venue.

17 . great american music hall rebrand

ornate interior

exterior signage reem essayli . portfolio

past

current

The old Great American Music Hall logo mimicked the ornate flourishes found in the interior architecture, and the overall forms of the exterior signage.

The current logo is representational of a ticket stub, which I found to be and ordinary concept, and much less dynamic than the architecturally inspired forms in the former logo.

19 . great american music hall rebrand

GRE A

G R EAT AM E R I C AN G RE AT A ME R I C A N MU S Zorus Serif Braggadocio Betty Noir Desdemona Andes Oswald Charlemagne Std Rispa Copperplate Gothic Engravers MT Raconteur NF

GRE AT A ME RICA N M

AMERICAN MUSIC HALL

g reat a me r i ca

C HALL

typeface exploration

G R EAT AM ER I CAN

GREAT AMERICAN MUSIC HALL

m er ic a n music h a l l

Gr e at A mer ic a n Mus

logo iterations

During the iteration process, I experimented with more decorative logos for the rebrand, but ultimately decided that a more simplistic design would visually read better when at different size scales, and would also bring the more contemporary and modern feel I was going for in this rebrand.

21 . great american music hall rebrand

Oswald Regular final design

AB CDE FGH I JK L M NO P Q R STU V W X Y Z a bc d ef g h i j k lm n o pqr stuv w xy z 012 3 45 6 7 8 9

CMYK 42.89.69.63 RGB 76.21.30

CMYK 0.36.80.18 RGB 210.147.63

CMYK 10.9.11.20 RGB 163.162.160

reem essayli . portfolio

reem essayli . portfolio

staff shirts

25 . great american music hall rebrand

reem essayli . portfolio

intro

The United Nations Declaration of Human Rights is a crucial, but very often, globally over-looked document. The concept behind this poster was to draw attention to the Declaration of Human Rights, by turning this document into a visually appealing poster. Hierarchy was created between the various articles, and the articles which emphasize human rights as a right to all, (using words like “all” and “everybody”), are larger than the other articles. The articles are presented on textured gold letters, because the UN Declaration of Human Rights is a document that should be upheld as if it were precious gold.

.sthgir dna ytingid ni lauqe dna eerf n rob era sgnieb namuh LLA

.doohrehtorb fo tirips a ni rehtona eno sdrawot tca dluohs dna ecneicsnoc dna nosaer htiw dewodne era

U united nations declaration of human rights poster reem essayli . portfolio

process

The process work for the creation of this poster involved 6 stages: space, style, scale, emphasis, experimental, and final composition. In the “space” stage, emphasis was placed on simply creating harmonious spacing of the declaration’s articles in the provided space. The “style” stage, involved beginning to style the selected font (bold, italic, etc.) depending on the articles chosen for emphasis. In the “scale” stage, I began to create hierarchy between the articles, using size. In the “emphasis” stage, I began placing more emphasis on articles which fit the concept I wanted to emphasize from the declaration.

Finally, in the “experimental” stage, I began to incorporate color. And in the final composition, I incorporated texture from a photographed hand dyed silk I had created, and refined the placement of the articles, and the overall scaling of the piece.

29 . UN poster

hand dyed fabric used for texture on the UN poster

space

scale

style

emphasis

experimental

reem essayli . portfolio

final design

31 . UN poster

reem essayli . portfolio

intro present promotes presence.

Present is a social presence and productivity app to combat technology addiction. It tracks the amount of overall time users are spending on their smartphones and social media apps, and gives them the option to limit this time and become more present in their day, and to become more socially present without using the phone as a social buffer or a crutch, as mobile phones have increasingly become.

present. reem essayli . portfolio

process

The initial research process in the pre-production stages of Present, involved intensive research of the latest quantified self phenomenon in present day technology. The research stages also involved a competitive audit, to get a sense of what sort social presence and productivity apps exist on market, what their features are, and to get a sense of how Present can differentiate from these pre-existing apps.

35 . present

competitive audit

Through my competitive audit research, I found that much of the market competition had complex and visually unappealing looking interfaces. I directed my design energy towards creating an app that would be minimalistic and direct. The user should not be spending any excess time on their phone using a clunky interface; I believe a busy interface would completely diminish the purpose of Present.

reem essayli . portfolio

rough template for app interface & logo

interface iterations

After the sketching process, I created a rough Illustrator template of the general layout of Present.

From here, I designed a couple different versions of the app before I was satisfied with a final version.

37 . present

settings

settings

iteration #one

presence

presence user comparison

user comparison

app locks usage graphs

app locks usage graphs

goals

today

35x unlocked

6 hr off phone

iteration #two

3 hr on phone

goals

today 35x

3 hr on phone

unlocked

6 hr off phone

reem essayli . portfolio

final design

menu

Goals can be set to appear as notifications

The final design of Present was designed to be simplistic and approachable. The features this app offers are all oriented towards the user being on their phone less. The user can for example set phone free goals, and set themselves to lock-out of certain apps after a given period of time. A beautiful and meditative image will positively, and gently, remind the user to put down their phone, and return to being present in their day, when they have exceeded their daily limits.

swipe down for other feature cards daily phone usage stats

Color coded for levels of importance Magenta = high importance Teal = low importance

39 . present

customize daily usage limits

The user can view a visual infographic of how much time they are spending on social media apps, along with how much time they are spending scrolling through their phone. A percentage of this scrolling may be aimless, and done as a social buffer.

Users can view a quantification of where they stand in phone usage, in comparison to other users of Present.

Tracks the user’s scrolling motions of the screen of their smartphone throughout the day Color coded for usage intensity Magenta = high usage Teal = low usage

time-out screen

reem essayli . portfolio

intro

Created a modern design for a collection of short stories from James Joyce’s Dubliners, originally published in 1914. The selected stories are all love stories: “Araby,” “Eveline,” “Two Gallants,” “The Boarding House,” “Clay,” and “A Painful Case.” The design goal of was to create the feeling that the reader is flipping through someone’s melancholic memories of lost or fleeting love, past times, and past feelings. The minimalist amount of text on each page is meant to emphasize this feeling of flipping through memories, and as memories often are, more profound and emotional moments and statements stand out, while the details get smaller and fade away.

Each image is meant to compliment the memory on the adjacent page.

The layout of the book is as meant to be as delicate as these memories are.

book design: dubliners by james joyce reem essayli . portfolio

visual research + inspiration

Photographic inspiration was drawn from photographers such as Robert Mapplethorpe, Man Ray, and Edward Weston’s sensual photographic style of the human body.

Inspiration for the minimalistic layout was pulled from the design aesthetic of Japanese designer, Kenya Hara.

45 . dubliners

reem essayli . portfolio

preliminary spreads Examples of some preliminary concept spreads created for various stories within Dubliners, using placeholder imagery.

Preliminary spreads experimented with various typefaces and various grids.

47 . dubliners

cover iterations

D

l ub i ne rs

James Joyce

Dubliners James Joyce

final design

reem essayli . portfolio

reem essayli . portfolio

intro

The creation of the typeface In Flux, is based off of San Francisco neighborhood, South of Market (more commonly referred to as SoMa). SoMa has a long history of being an industrial, warehouse district, but in the past decade, the large amount of space in SoMa, and its proximity to downtown san francisco, has made it a hub for tech startups and new businesses. This typeface draws inspiration from the contemporary typography now seen around SoMa, which is thin, sans serif, and metallic, and the old typography found around SoMa, which is typically hand painted, bold lettering on now abandoned or repurposed warehouses.

In Flux aims to show this merging of the old and new, representing this gradual merging with subtle thick and thin strokes.

ABCDE FGHIJ KL MNO PQ RST U V WX YZ

ABCDE FGHIJ KL MNO PQ RST U V WX YZ

ABCDE FGHIJ KL MNO PQ RST P U V WX YZ

6 7 8 9 $ # ! ?. ,0 1 2 3

E J O T

ABCDE FGHIJ KL MNO PQ RST U V WX YZ type design: In Flux

reem essayli . portfolio

visual research + inspiration

Visual research was conducted by choosing a portion of the SoMa neighborhood to focus on for the development of the typeface, and then taking walks around this select area, gathering photos of the typography found in the neighborhood.

I also found inspiration online looking at typefaces which are minimalistic and mechanical in style.

55 . in flux

reem essayli . portfolio

sketches

In the sketching phase, I experimented with the idea of designing a typeface which is blocky, and more akin to the blocky, hand-painted type found on old warehouses in SoMa.

57 . in flux

reem essayli . portfolio

final alphabet

The final alphabet was created in Illustrator, then kearned in Glyphs.

ABCDE FGHIJ KL MNO PQ RST U V WX Y Z$# SOMA

59 . in flux

01 23 45 67 89 & . ! ,?

URBAN MECHANICAL DELICATE MINIMAL TALL & LEAN reem essayli . portfolio

potential use

reem essayli . portfolio

type specimen book

63 . in flux

reem essayli . portfolio

poster

reem essayli . portfolio