Homepage

Designer Choices

General

Background

My goal with this website was to create a holistic view of my life while representing my personality.
When the user first enters the site, he or she may not know anything about me besides my name. To me, an image of space represents a lack of knowledge. As the user scrolls down, distinct colors slowly fade in as he or she begins to learn more about me.
The dual background creates the 3D parallax scrolling effect, and this extra dimension symbolizes a deeper understanding of me.

Layout

    L A Y O U T
  1. Welcome
  2. Why I Do
  3. What I Do
  4. How I Do It
  5. Interests
  6. Designer Choices
The first thing I want the viewer to learn about me is what gives me motivation every day: my overarching goal and approach to life.
I added the interests section because these non-academic parts of me contribute to who I am as a person. I created a section for my choices as a designer to capture how much thought I put into every small detail of this site.
The multi-page layout allows viewers to holistically understand who I am through the homepage and go in depth with a certain topic through a link to an external page.

Color Scheme

Rich Black

Dark Gunmetal

Royal Blue

UCLA Gold

Linen

Colors can be used to subconsciously create a feeling or convey a message. For example, the main color on my website, Royal Blue, is not too relaxed or too aggressive. It is a calm color. However, I did not want to create too calm of a feeling with this website, so I added a secondary color: UCLA Gold. Gold/Yellow inspires feelings of happiness, energy, and movement. This balance between gold and blue add to the focused yet energetic mindset and outlook on life that I strive to have.

The Golden Circle

Order

WHY
HOW
WHAT
Simon Sinek poses the question of why equally qualified and well-funded candidates were not successful. His conclusion is that successful people are able to capture audiences in an emotional way using a persuasion technique called the Golden Circle. If you order your ideas in the order to the left, people will listen closer. My website, however, does not contain a "How I Do It" section because it would have been another external page which would make my website too spread out.
Click the circle to the left to watch Simon Sinek's video.

What I Do

The size of the four bubbles which contain my main activities represents how those are the most important parts of what I do. The smaller bubbles in the background symbolize the smaller parts of my life which take up less time, like hanging out with my friends or doing chores.
When the user hovers over a major activity, the other bubbles go out of focus. This is because when I am doing one of those four activities, nothing else matters. For example, my mind is completely concentrated on the music when I'm playing the drums.

Challenges

Limitations in Creating the Website

idea
To increase my initially limited knowledge of web design, I analyzed random people's websites and created animations that follow patterns in nature, like the parallax effect.
The coding languages I used sometimes limited me from presenting the content the way I wanted. Most of the times, I found solutions after many hours of experimenting. The image to the left represents how I originally wanted to show the content for "What I Do" but wasn't able to do using HTML/CSS, JavaScript, and Jquery.

Conveying a Message

INSPIRATIONS
ASPIRATIONS
STRATEGIES
lang
Another challenge I faced was putting the information in a way that would be the most understandable by someone who doesn't know me. For example, I had to cut out the two sections to the left from the homepage because they were not essential to understand who I am. Instead, I incorporated them into already-existing content.
I picked the images and phrased the sentences in a way that would be the most engaging to the audience.