Gestures: The Art and Music of Chuck Clevenger

Gestures: The Art and Music
of Chuck Clevenger
A contemporary website build-out
for a local professor, artist, and musician.
Phil Schanely
MFA Portfolio Process Book
Savannah College of Art & Design
Contents
Introduction . . . . . . . . . . . . . . . . . . . . . 3
Research and Planning . . . . . . . . . . . . . . 4
Inspiration . . . . . . . . . . . . . . . . . . . . . . . 4
Layout sketches . . . . . . . . . . . . . . . . . . . 5
Site Map . . . . . . . . . . . . . . . . . . . . . . . . 6
Design . . . . . . . . . . . . . . . . . . . . . . . . 7
Look & Feel . . . . . . . . . . . . . . . . . . . . . . 7
Directions A and B . . . . . . . . . . . . . . . . . 10
Direction C . . . . . . . . . . . . . . . . . . . . . . 11
Analysis . . . . . . . . . . . . . . . . . . . . . . 12
Final Solution . . . . . . . . . . . . . . . . . . . 13
Introduction
This project from early in my program at SCAD challenged me to move
beyond my comfort zone with HTML and CSS to build skills as a visual
designer in order to create a simple responsive website.
The project was a biographical site about the pianist, painter and professor, Dr. Charles Clevenger. Dr. C,
as he is called by his students, had worked at Cedarville University for most of his career and was nearing
retirement. The site was to act as a tribute to his life and artistic work.
The intended audience was very open; the site should inform any visitor about Dr. C’s activities creative
work. Therefore, I envisioned a home page with an artistic statement. The also site featured a biography, a
section devoted to his artwork, and another section devoted to his musical performances.
Stylistically speaking, the site should have a subtle watercolor textured feel to it, while also maintaining a
modern but rich color and typography.
Introduction
3
Research and Planning
INSPIRATION
Inspiration
Research and Planning
4
LAYOUT
CONCEPTS
Layout
sketches
Research and Planning
5
Site Map
SITEMAP
Gestures
The Life and Art of Charles Clevenger
Home
index.html
Biography
bio.html
Research and Planning
Art
Music
art/index.html
music/index.html
Artwork
pages...
Performance
pages...
music/artworkname.html
music/performancename.html
6
Design
LOOK & FEEL
Look & Feel
Adjectives
Artistic–lightlytextured,artisIn the• design
phase I first sought exticelements(hand-drawnlines,
isting sites
that represented similar
brushstrokes,etc.),focusonartwork
imageryandmedia
or potential directions in look and
• Intelligent–clean,somewhat
feel. I used
the following adjectives
minimalistic,blendofmodernand
classictypography
as an aid in this process:
• Amiable–bright,friendlycolors
• artistic – lightly textured
with artistic elements (handdrawnReferences
lines, brushstrokes,
Design
>
etc.), and a focus on artwork
through crisp imagery.
• intelligent – clean, somewhat minimalistic, with a
blend of modern and classic
typography.
• amiable – bright, friendly
colors.
Examples for design reference are
shown to the right while typography,
colors, and textures follow.
Design
7
LOOK & FEEL ... continued
Typograpy
Gestures: The Life and Art of Charles Clevenger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia, metus vitae aliquam bibendum, nibh mauris varius risus, vitae
tristique mauris libero eget felis. Proin auctor non ligula a rutrum.
Pappo’s Blues Band Official Font
Merriweather
Gestures: The Life and Art of Charles Clevenger
Loremipsumdolorsitamet,consecteturadipiscingelit.Fuscelacinia,metus
vitaealiquambibendum,nibhmaurisvariusrisus,vitaetristiquemauris
liberoegetfelis.Proinauctornonligulaarutrum.
Gestures: The Life and Art of Charles Clevenger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia,
metus vitae aliquam bibendum, nibh mauris varius risus, vitae tristique
mauris libero eget felis. Proin auctor non ligula a rutrum.
Jellyka Vampire Street
James Fajardo
Gestures: The Life and Art of Charles Clevenger
Qwigley
Gestures: The Life and Art of Charles Clevenger
Kristi
Colors
Design
PT Serif
Roboto Slab Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia, metus
vitae aliquam bibendum, nibh mauris varius risus, vitae tristique mauris
libero eget felis. Proin auctor non ligula a rutrum.
Open Sans Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia, metus vitae
aliquam bibendum, nibh mauris varius risus, vitae tristique mauris libero eget felis.
Proin auctor non ligula a rutrum.
Source Sans Pro Light
8
INSPIRATION
LOOK & FEEL ... continued
Artwork
Textures
INSPIRATION
Design
9
Directions A and B
With some design elements in mind, I began exploring possible directions.
Design
10
Direction C
After feedback from peers and further reflection, I decided to push on a third direction that
used less texture, favoring instead a more contemporary clean approach.
Design
11
Analysis
I was rather nervous about applying for grad school, especially in pursuing a degree from SCAD, a school
I saw as very prestigious in the design community. My fear stemmed from insecurity over my own design
abilities. I was thrilled to be accepted but still nervous. Would I have what it takes? A friend reminded me
that this was not necessarily an opportunity to display my existing expertise, but to be unashamed to do
my best, be open to criticism and critique, and grow through the process.
In this project, I was presented full-on with this opportunity. I was ready for the technical aspect, and quickly jumped into the project to consider what the site needed to be—functionally speaking. I created a solid
sitemap, conducted fluid discussions with the client, and had an unashamed confidence in producing a
responsive website.
However, while my initial ideas about a design direction were well-founded, they turned out to be too
limiting. I initially felt that an artist needed a more “artistic” site. I tended towards texture and elements I
thought would give the site an “artsy” feel—and the first two compositions show it. But they lacked focus,
presenting very dated concepts. My confidence began to waiver, but I pressed forward, remembering that
the upcoming feedback was just as important to helping me grow.
The critique paid off. Comments from peers pulled back the veil from my eyes and I realized my flaw on the
project was to convey “artsiness” through texture, but that I could accomplish this even better (and with a
more contemporary flair) by truly letting the artwork be the focus. In the final design composition, I pealed
back the textures, enlarged the imagery, and adjusted some of the colors to allow the artwork to speak for
the artist.
Analysis
12
Final Solution
A live prototype of the website can be found at:
projects.philschanely.com/clevenger »
Final Solution
13
Final Solution
14