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
G r 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