Portfolio

The music school I teach at has been in need of a new website for a long time.  I am currently in the process of developing a more functional, user-friendly, and beautiful responsive website to suit their needs.

The first thing I did was create a persona, and then a journey.Persona
Actually, the first thing I did was google how to begin creating a website and UX Design, but I digress… I did a lot of research on the how before I started this process since it is my first real-world project, and I’m not just designing a fun website for my dog!  I wanted to get it right, so I read a lot of articles and books…

I went through quite a few varied ideas on Sketch, from really ugly to bizarre, before finding one I liked.

Screen Shot 2017-07-22 at 12.06.03 PM.png

I started with the current websites look and tried to create an “improved” version, which is the one you see creatively titled, “HomePage” and “HomePage View 1.”

Then, I did some research online, and looked at some very popular websites such as forbes.com and businessnews, and Apple, and came up with the standard black navigation bar with a full cover size image as the background.

For fun, and because I had been reading about Brutalist websites, I made a Brutalist style sketch as well- I knew it wouldn’t work, but I wanted to try everything and see what I liked best.

My boss liked the images I had found on unsplash.com, so I began fleshing out ideas for the image-centric homepage.

Screen Shot 2017-07-22 at 12.11.28 PM.png
I wanted to keep the navigation bar very simple, so I decided on using drop-down menus.  I also explored using a hamburger menu, which works much better on mobile and can include more navigation items without looking.

My boss had requested including a navigational sitemap on the bottom of every page, so I worked out an organized way to display everything in the footer.  It’s not a “real” sitemap, but I think it is easy to understand and includes all of the important information he had requested without cluttering the rest of the page.  He also wanted a video on the homepage, so I made sure to include a spot for where the video may go.  I added a contact form on my own volition because I think it will make it much easier for potential clients to contact KCSM.

Then, I got the news from my boss that Kansas City School of Music will be adding a dance division soon, which will mean that KCSM will become Kansas City School of Music and Dance.

After revising the current logo and creating a new logo to accommodate “and Dance,” I began experimenting on Sketch with a new layout for the homepage.  I ultimately decided on using a split-screen homepage because it is visually appealing and makes it clear to the user that they have two options: Music and Dance.

This time, I started smaller, and created grayscale thumbnail type sketches.

Screen Shot 2017-07-22 at 1.14.19 PM.png

I added images, and ultimately decided to do away with the top navigational bar for the homepage because it cluttered the split screen and was not necessary to understand the navigational menu.  I added color to the guitar image, which was originally black and white, in order to create more balance.  The high contrast between the white and black split screen creates more excitement and interest.  Color was still lacking, however, so I added a contrasting blue color.  Unfortunately, the original KCSM blue did not have enough contrast in this color scheme.

I kept the drop-down menus from the previous mockups and adjusted some of the listings in the drop-down in order to keep the visual appearance simpler at first glance.

Screen Shot 2017-07-22 at 1.17.29 PM.png
I also kept the rest of the page the same, with contact form and the “sitemap.”

I went overboard in how much I needed to do, and learned how to code the site as well.  I had taken the codecademy.com HTML5 and CSS3 Part 1 course last month, and combined that experience with googling things I didn’t know how to do, and was able to code this:

Screen Shot 2017-07-22 at 1.44.55 PM.png

Screen Shot 2017-07-22 at 1.45.39 PM.png

Screen Shot 2017-07-22 at 1.45.49 PM.png

Screen Shot 2017-07-22 at 1.45.58 PM.pngScreen Shot 2017-07-22 at 1.46.10 PM.png

The above screenshot has a subtle difference- the “Enter” button turns solid blue when the user hovers their mouse over it.Screen Shot 2017-07-22 at 1.45.26 PMScreen Shot 2017-07-22 at 1.46.24 PM.png

The one thing missing from my code is the video element, which will be placed below the main images, and above the call to to action contact form.

Here are the documents for the other pages of the website:

 

The main blog page:

Blog Main Page

Blog post:

Blog Format

The main faculty page:

 

Faculty Page

Click on a faculty member:

Faculty Individual Page

Click “Lessons” in the navigation bar:

Lessons Main Page

Click on one of the lesson types:

Lessons Individual Page

Click on “About us”

About Us Page

Calendar main page:

Calendar Main Page

Click on a specific event:

Calendar Individual Page

Lastly, our testimonial page:

Testimonial Page

Based on feedback and a request for a Carousel style homepage, I came up with the following examples of what we could do:

Homepage 3.1Homepage 3.0

This website is not live yet, and will continue to be revised with feedback.

Moving forward, the first thing I’d like to fix is the height of the navigation bar if we are going to move toward a carousel homepage instead of a split screen.  I’d also like to tweak some of the colors and make sure that the subheadings are all following the same rules as far as opacity and greyscale go.

However, the biggest thing on the “next” list is building the site itself, remotely, and doing so on a short time-frame- I’d like to have most of it done this weekend.

Thoughts

kc button

I made a button!! Still working on building a website… I’ve been reading about Brutalist websites and recently discovered one in the wild when I was searching for sunglasses of all things… It’s very cool in a retro kind of way.  Retro is so in right now.

I”m also in love with gradients…. hmm.

Learning Sketch

Here are the results from some great tutorials I followed to learn Sketch, and one ad at the end that I copied.

futuristicracerscopy

My first Sketch tutorial.  My favorite part was making the air vents.  Click here for the link to the tutorial by Nikola Lazarevic. I used this confetti plug-in to make the stars… save yo’ self some time!

Difficulty: Moderate (Difficult if you’re a beginner!)
Time it took me: 3 hours (I didn’t know what I was doing!)

mtncopy

This one was much easier. If you’re starting out, maybe start with this one. Also by Nikola Lazaveric.

Difficulty: Easy
Time: 1 hour

paper lighthouse

Actually, this one was probably the easiest.  Maybe do this one first if you are a beginner. I added some shadows to create a paper effect.  I hadn’t figured out how to pull the colors from the original image yet (I know, I know).

Difficulty: Easy
Time: <1 hour

RobotcopyI used the noise fill at the very end to achieve a closer match to the end product of this tutorial.

Difficulty: Moderate
Time: 2-3 hours (but it could take you a lot less time if you’re quick)

copyofad

I saw this image by OUTLANE on Twitter and decided to see if I could replicate it.  It’s missing a shadow here and there, and the size of the background isn’t quite right but it is close.

Difficulty: Hard (would have been a lot easier with an Apple pencil or something similar…)
Time: 3-4 hours
Overall, I am happy with how much I’ve learned in the last week or so.  Adobe Illustrator is next!   I want to learn how to illustrate like Jenny Yu.

Do you have any favorite tutorials?

 

Beginner’s Guide to Voice Lessons

Are you thinking about starting voice lessons? Here is what you can expect (at least from me).

Voice lessons are typically half and hour to an hour long, depending on skill level, and meet once a week.

What to bring:  Bring a bottle of water and a notebook.  The water is to keep you and your voice hydrated which is essential for setting yourself for successful singing.  The notebook is for either you or your teacher to write down notes for what you worked on, and what you should work on until your next lesson.

For your first lesson, you can expect a discussion about what your goals are and why you want to take voice lessons.  This will let your teacher know how intense you want your study to be. Of course, most teachers want you to have the best experience and make great progress, so if they are like me, they will challenge you to do your best every week.

Typical voice lessons consist of roughly half the time spent on technique and half the time spent on songs/ repertoire.  Beginners are not generally required to warm-up prior to their lessons. Instead, your teacher will warm-up your voice with vocal exercises.  Then, you may work on specific exercises to work on vocal technique.  After that, you’ll sing through your repertoire and your teacher will give you constructive feedback about what was good and what can be improved and how to improve.

Here is a rough general outline of most voice lessons I teach:

  1. Stretch (body warm-up)
  2. Breathing exercises
  3. Vocal warm-ups and vocal technique
  4. Ear Training/ Solfege
  5. Repertoire/ Songs

Of course, the very first lessons would start off more simply, and week by week, new skills will be taught and added to your list.

Choosing the right voice teacher is essential to your success and progress. Not every voice teacher is created equal – make sure you find one that suits your needs and goals. Don’t be afraid to take trial lessons and take one lesson from one teacher, one lesson from another, so that you can find the teacher right for you.  You may need to clarify from the start that you only want to take one lesson to see if you like it.  This will give you a chance to see what their teaching style is like and for you to see if you are a good match.

 

Racism still exists.

When I was in high school in small town Iowa, a friend started telling me to go back to my homeland, and a group started to gather. She continued to make jokes about my race (“Do you know how they name Asian babies? Throw a pot down the steps. Ching Chang Chong”) and more…

My college was in a tiny but progressively liberal small town, and I continued experiencing racism in a milder, not knowing any better, form. “Where are you from,” and “no, where are you really from?” Came up much more often.

Since moving to KC, I think KC citizens are much more aware and sensitive to racial issues since there is more diversity in the city. It’s wonderful.

But I have one more point…

As a first generation American (ever notice how only ethnic groups have to classify themselves as _____- American, and whites get to say ‘American’ without a classifier?)… I struggled with my racial identity growing up in a town that had a 0.02% Asian population. For a while, I pushed against my heritage, trying to fit in and be “normal.”

Being told to go back to my country was a particularly hard insult to swallow. I was born here, in CA. I’m a citizen. I’ve spent my whole life here trying to figure out how to succeed. So it’s tough to hear fellow Americans, even friends, joke that I am not welcome here, that I don’t belong…

Then… I went to China recently, and visited relatives I haven’t seen for over 10 years. My cousin and other relatives frequently referred to China as my home. I didn’t have the heart to correct them, but it’s not. I don’t live in China. My whole life has been lived in the US. As a child visiting China, I actually heard “Go back to America!” from some sweet school kid bully who caught on to my not speaking Chinese. I felt like I didn’t belong anywhere.

It’s also interesting to consider how the Chinese (in China. Not the USA Chinese-Americans) treat other races. There is no diversity in China, or hardly any, especially in smaller cities and towns (of 1 million, more or less). My Caucasian husband was treated like a celebrity. People wanted to take pictures with him, with permission, and sometimes, without permission (looking at you, giggling schoolgirls). A shopgirl exclaimed, “too handsome!” and nearly died when she realized I could understand what she was saying.

I’m not advocating for that to happen here – that would be weird, and even inappropriate for US culture. In 99% Asian China, any other skin color person is almost guaranteed to be a foreigner. In the USA, it’s not.

In the USA, it can be hard to tell if an Asian person is a foreigner or an American because our skin color is the same. (An easy way to tell is by the accent FYI) Regardless, the US strives to treat everyone equally. It’s our golden rule to treat others as we would want to be treated.

In 2016, racial issues have come up again and again in events far worse than I have experienced. Yet, I know people who think these issues are overblown, and that racism doesn’t exist anymore.

We may all have voting rights, and equal rights on paper, things are not as bad as they were in the past (Japanese internment camps, anyone?), but racism still exists. If you are not a minority, you may not have had a direct, hurtful experience of racism, but that does not mean it doesn’t happen.

Please be aware.

China – Day 3 Finding Coffee and more fun facts

Right now, it is 5am and I can’t fall asleep so it is time for a new blog post. I had just started thinking about how I must be superwoman because I’ve been sleeping SO WELL until today….

Yesterday, Friday morning around 8am Tyler asked if we could find some coffee.  Tyler is no average coffee lover- we have about 6 different coffee makers at home and a coffee bean grinder, scale, and special water pourer (can you tell it’s early? What are those called?).

The day before yesterday, we saw a Starbucks outside my aunt’s apartment building.  Spoiler alert, it was closed and won’t be opened for a while.

So Friday morning we asked my cousin about coffee places and guess what? She said they won’t be open until 11am!

The coffee place turned out to be a tea house – you walk in and there are private dining rooms just big enough to fit a table and booth chairs.

IMG_1180.JPG

Success.

IMG_1181.JPG

Cute tissue box.

IMG_1186.JPG

We also also ordered tea.

IMG_1187.JPG

It had dates and berries in it- so sweet and warm.

 

 

More Fun Facts:

1. Glasses are tiny.  When you have a bunch of spicy food and one tiny glass of water/ coconut milk, you better ration yourself.

2. Chairs can be tiny.  In the countryside, which I haven’t posted about yet, and in older apartments, people use tiny kid-sized chairs.

3. Tissues are used in place of napkins.

4. There are so many dialects in China – my mom says every city has its own dialect… so it’s no wonder I can’t understand much! I’ve been able to understand Mandarin fine, but I’m quite lost with all the other dialects!

5. I’m continually amazed by the lack of auto regulations.   Check out this parking job lol:

IMG_0229.JPG

 

6. Also, double lines are ok to cross for passing. I tell you, it’s a mad world out here on the streets.  Surprisingly though, I haven’t seen a single accident! Maybe it’s because everyone has to be aware, and everyone’s honking the second there’s a slight possibility of collision?

 

 

 

 

China

After 20 hours of traveling, we arrived in Beijing to wait 5 more hours before a 2 hour plane ride to Wuhan, followed by a 1 hour car trip to Hanchuan.  Hanchuan is a suburb-like city, but it is twice as big as Kansas City, with a population of 1 million people.  Wuhan’s population is 8.3 million people.

Right now, I’m hanging out in my aunt’s apartment on the 19th floor of a building so new, construction is not yet finished.  She was the first resident to move in!

A few fun facts I have learned in the past two days:

1. Honking is constant.  Ten years ago, most people didn’t have cars, and now it’s much more common.. and most people are still getting comfortable with learning to drive.  Yesterday, when a car in the left lane decided to turn right, every car in the intersection joined into an elongated honking chorus.  Also, there are no time limits on honking… 2am, 4am, there will be honking.  There are also no rules about jaywalking.  I saw a lady walk straight into an incoming car on traffic (they stopped, she was fine).  We told my cousin that in the US we wait for the cars to stop coming before we cross the street. She said, if you do that here, you’ll never cross!

2.  Tyler, a size M in the US, is a size XXL here!  He went to a shoe store as well, and asked for his size.  The shopkeeper looked at his feet and said, “too big!’ because they didn’t carry his size (10 in the US lol).  However, I could not be happier with the shopping situation!  I walked into a store, and the entire rack of jeans looked like they could fit me without any mending! I tried on a few shirts as well… some of them are one size fits all!

3. Tyler is a celebrity here.  He was trying on some shirts, and two girls took his picture, giggled and walked away.  The shopkeeper turned to me and said, “he is too handsome!” He also caught some people staring at him through a window. He waved, and I think my mom died lol.

4.  Coconut milk is easier to find than water.

We made it to China! Today we found out that Tyler is a XXL shirt size here.

A post shared by Sophia Zey (Huang) (@sophiazey) on

At the hotel we spent the first night.

My cousin is so sweet!! #chanel

A post shared by Sophia Zey (Huang) (@sophiazey) on

My first grown-up full size perfume!

Found the cutest lipstick for 10 yuan, or $2 USD! #winelipstick

A post shared by Sophia Zey (Huang) (@sophiazey) on

 

 

 

 

 

 

 

Aspen Music Festival and School 2016

I had a great time as a fellowship opera coach at Aspen.

13508839_10208482305633275_5804206534251134552_n

I grew up in small-town Iowa and went to a private music school for undergrad and then, UMKC’s Conservatory of Music and Dance for M.M. Vocal Performance.  This was my first year exploring vocal coaching, and auditioning for vocal coaching positions at summer programs.  A number of lucky events steered me towards vocal coaching, but that is for another post – the final push for auditioning for Aspen was from Vinson Cole, who has been nothing but kind and supportive to me.

At Aspen, I was totally immersed in the world of opera and vocal coaching.  In the last few weeks, my scheduled was often 10am to 10pm (with lunch and dinner breaks, mercifully!), and I loved every minute of it.  I did a lot of coaching both group rehearsals for opera scenes, and individual coaching on general repertoire.  As a student coach, I had the wonderful opportunity to learn from senior coaches, who would lead the final coachings prior to the performance. I always felt proud of the singers when we were well-prepared when it came time for the senior coach to come in.

2016-08-11_235344426_c85d8_ios

Paradise Cafe ice cream

It was also quite fun to put the Berlioz together!  I and another student were the student coaches for Berlioz’s Béatrice et Bénédict, and we got to coach the roles and covers in addition to helping out as chorus masters!

I spent weeks preparing the French, by reading through the Grubbs and the newer Nedecky book on French diction, and checking every word.  Maestro asked me if I was fluent, and complimented me on my french, so I feel content with my preparation!

At the end of the summer, I realized I hadn’t asked for as many lessons as I could – we had the option of getting up to 8 total lessons from senior coaches.  So the final week of Aspen, I had FOUR lessons!  I wanted to make sure that I had a chance to work with every senior coach, so I did – I asked for lessons with everyone except my senior coach that I had worked with all summer.

I think they went well, although truth be told, since our schedules were so packed, it was hard to find more than one hour a day to practice!  If I was lucky, I’d have two hours.  I mean, who wouldn’t want to practice here?

My practice room today. #iloveaspen @aspenmusicfest

A post shared by Sophia Zey (Huang) (@sophiazey) on

My practice room today 😍

A post shared by Sophia Zey (Huang) (@sophiazey) on

aspenpic

So I think my life has come full circle now… I started with piano at a young age, then I studied singing opera, and also taught on the side, and now with vocal coaching, I get to do everything!

 

What I want to be when I grow up

Whenever someone asked me what I wanted to be when I grow up, I gave a different answer every time.  When I was five, I wanted to be a scientist like my parents, so my dad read his Virology book to me when I was sick. When I was eight, I wanted to be an artist, so I checked out how-to-draw books from the library.   When I was ten, I wanted to be a concert pianist, so my mom drove me two and half hours to take piano lessons from the best piano (OK, one of the best) teacher in Iowa.  When I was eighteen, I wanted to be a choir teacher, so I went to Luther College, a well-respected choir school, learned to conduct and sang in the Nordic Choir for three years.  Two years ago, I wanted to be an opera singer and went to grad school for vocal performance.  And this year, I wanted to be an opera coach and went to Aspen Music Festival.

When someone asks me what I want to do, the easiest answer is “everything.”  I love to teach, I enjoy performing on stage, and I love coaching singers!  I’m just as happy teaching seven year old basic musician skills and seeing them progress, as I am prancing around stage acting like a seven year old (“Flora” in Turn of the Screw).  And this summer, I found out that I’m also just as happy to coach singers and rehearse from 9am to 10pm at night.  Each job is enjoyable and challenges me in different ways – my overall job, indoctrinated by my parents, is to do my best.  That’s the mantra I impart to my students from the day they walk in the door, and the mantra that I continue to live by.

I don’t know exactly what I’ll be doing by this time next year, but I hope… everything.