Week 8- Outside of Class

Non-Profit Organization Project (Determined)

Dancing Dreams

http://dancingdreams.org/

What they do...

Dancing Dreams is a non-profit dance program that gives children with physical and mental disabilities a chance to dance! They focus on their abilities rather then their disabilities and gives them the opportunity to dance. Dancing dreams wants to give everyone the opportunity to put on a tutu and allow them to achieve their dance dream. 


On campus I am apart of the Millersville University Dance Team. By using my interests it wasn't difficult to find a non-profit organization. Dancing Dreams studio inspired me to use there company content because they have an inspiration mission for their studio and are doing good deeds for the community. I prompted by phone call by saying I was on the Dance Team at Millersville University. I didn't think it would be a smart idea if I stated that I was a graphic designer looking to use their dance studio concept to create my project. I simply incorporated questions that I would of asked as a designer but used my background experience in dance to get a more personal response.

Phone Call with Dancing Dream's Studio
Joann

1.) How did Dancing Dreams begin?

Joann's profession out of school was a pediatric physical therapist and during one of her sessions a little girl was unbelievably upset because she alway's wanted to dance but no professional dance studio would let her. During the child's sessions she would use dance techniques and have the little girl dress up into dance apparel. Joann said she knew she was changing the little girl's life. Joann said that she felt more fulfilled in life by giving people with mental and physical disabilities the change to dance and live our their dreams. She then open her studio and it has blossomed ever since.

2.) Are there any other studio's out there like yours?

Joann said that there are other studios out there in the U.S that give dancers with physical and mental disabilities a chance to dance. She explained how Dancing dreams is different from other studios because each of the dancers has there own student teacher that helps dance and perform with them in classes and performances. The student teachers are high school students that have a passion and background in dance that want to volunteer and get to know the dancers.

3.) What types of dance styles does Dancing Dreams offer?

"We mostly offer ballet classes as ballet helps strengthen the minds and bodies of the students. The dancers are challenged through choreography and the techniques of ballet. We do not push our dancers if they can not do all the positions or dances. We mostly encourage them to dance to the best of their ability and stray away from frustration."

4.) Is your company ADA compliant? Is your website ADA compliant?

"We must keep our studio ADA compliant as all the dancers have different needs and we must think of each girl or boy as an individual with individual needs. As a pediatric physical therapist I've learn that everyone has different needs in order to be comfortable in their environment. As for the website, I believe it is ADA complaint but at times I feel like the information is over crowded."

5.) What is the main purpose of the website?

Joann explained that the main purpose of the website was to give an overview about Dancing Dreams mission and the different programs/opportunities they offer. Most of the girls that registrar with our Studio call or set up an appointment to go over their child's needs upon entering the studio. At some point in the future Dancing Dreams would like to have a registration online for the dancer to sign up. As Dancing Dream's is still growing we are not overwhelmed and can still keep track of the information through spreadsheets and forms.

Other responses why someone would go onto their website is to registrar as a student assist or teacher. The website is also used as advertisement viewport from the different publications that have written about the studio like the New York Post and DailyNews.


My response:

I had to agree with Joann's comment about the content becoming over crowded on the website. Everything seems jammed together which makes it difficult to pick out the information you are searching for. I don't think the website is 100% ADA compliant because the font faces are switching constantly from script to extra bold, to serif and back to sans serif. The stars are distracting from the fonts because they sit right behind some of the text.

---

Reading

Visual Inventory: http://danielmall.com/articles/visual-inventory/

Daniel Mall focuses his efforts on creating responsive websites for his clients. As designers serve for the client we must analysis all the deliverables they would like to see in their website. Other process of creation examples besides visual inventories are style tiles, style prototypes, element collages, and moodboards. Visual Inventory focuses on the over feel of the webpage. Visual Inventory touch on questions such as: color, typography, concept, direction, tone, etc. In other terms the visual inventory is the look and feel of the website.

Week 8B

Sub-Page Class Critique 

During our class critique we were able to go over the changes with made to our homepage and talk about our decision making process for the sub-page. Overall the main reason of why I chose to design the rules and regulations page was because I thought it would be a challenge for me since there was a lot of content.

Changes on my Homepage
- One of the comments I received about my homepage was how I made the "when & where" smaller and it seems much more appealing.
- They enjoyed the variation between the wheel and how I incorporated it into my favicon.
- Change the gradient in the porthole view (where the image is placed).

Critiques about my Subpage
- My footer was overall more organized form the last pre-critique.
- Icon are good but there is a slight unity issue between my icons because are perfectly flat and others have gradients in them.
- The text in the 4th sections is too dark.
- Recreate my trophy icon. It doesn't reflect my other icons and the half line in the middle of the trophy is distracting.

Week 8A

Non-Profit Organizations

5 Options for the our Next Project

S.P.E.A.K - Staying Positive Equals Amazing Kids
http://www.phillyspeak.org/
Is a non-profit organization that commits to providing educational opportunities and programming for young adults, preparing them to enter society as productive, responsible citizens.to providing educational opportunities and programming for young adults, preparing them to enter society as productive, responsible citizens.

Meals on Wheels of Lancaster
http://www.lancmow.com/
Meals on Wheels of Lancaster provides freshly prepared meals at a reasonable cost to anyone in the Lancaster community who cannot reasonably provide meals for themselves. Meals on Wheels is an independent non-profit corporation supported and sustained by a dedicated group of community minded individuals, corporations and the general public.

The Moyer Foundation
https://www.moyerfoundation.org/default.aspx
The mission of The Moyer Foundation is to provide comfort, hope and healing to children affected by loss and family addiction.

Teach for America
https://www.teachforamerica.org/
Provide an excellent education for kids in low-income communities. Although 16 million American children face the extra challenges of poverty, an increasing body of evidence shows they can achieve at the highest levels.

Creative Commons
http://creativecommons.org/
Creative Commons is a nonprofit organization that enables the sharing and use of creativity and knowledge through free legal tools.

---

In Class

In class we went over some small elements that could have a big impact on your overall design and making your website look professional to another client. Some of the elements we talked about were highlighting the selector text, adding meta tags, adding comments into our css and html page. Another one of the elements we talked about were Favicons. This element is located in the tab of your browser or can also be seen when you mark a bookmark. 

This is the favicon I created for my Slamin Salmon Derby.

After talking to the professor for our mini-critique for our sub-page that is due next class some of the elements I need to change was lining up the horizontal lines, make the point size of the horizontal line slightly thinner, minimizing long wordy text, and some type of visual in the prizes selection of my subpage. Other things I may need to fix or re-look at is the alignment of the boxes in the contact form at the bottom of my footer and to think about the ampersand & in my header because it starts to look like an E. Although, I will probably keep my ampersand in the logo. 

Week 7- Outside of Class 3

Sub-Page (Rules)

I choose to design the sub-page similar to the home page. The gradient of the background colors represent the ocean going down and how the color of the water seems darker as you go down. I choose to do the Rules as my sub-page because it had the most content from the original website. 

Here are screenshots of the elements I made in illustrator. I kept the same flat design scheme as the homepage. 

Week 7- Outside of Class 2

Off Campus Event

Matteo Bologna

God is the Kerning: Branding from a Typographer's Point-of-View

Wednesday, March 11, 5:00 pm, DeMeester Recital Hall at York College of Pennsylvania 

Matteo Bologna is the co-founder of Mucca Design and many other design organizations and clubs. He was born and raised in Milan, Italy but he shared his story of obtaining the American Dream and the steps he took to get to American and become a well-known designer. He specializes in architecture, graphic design, illustration and typography. His talk was very humorous and entertaining. He talked about his work and how he was one of the first in Milan to purchase a Macintosh in order to create designs and therefore he was a Graphic Designer. He had heard about what was happening with design in the U.S and had to be apart of it. He never spoke of himself as a master of design but always honored when asked to design for companies whether it's the typo-logo of a company, a entire alphabet designed for the company or the overall mood of the company. Matteo was actually one of the first designers that I've listened to, that said he works directly on the computer creating display faces or typefaces and never really sketches. If someone wanted sketches of his work he would create fake ones.

When Matteo would create typefaces for companies he would either create original designs or re-design the pre-existing type. He said that the typeface is the sound of the voice of the company and without this then the company has no true voice. He always tried to connect the atmosphere of the company into his designs. One of the questions I had going into the talk was copying pre-existing typefaces into designs  but he covered that and put in perspective of why not to use them with one point. He said it's not good to buy pre-made typefaces because you have the fear of someone else using it and it's not original anymore. But sometimes he has to buy them because they are so well done and it helps make the brand. Matteo really enjoys old fashion type and ordainments but it's not very sophisticated and very feminine. So he tries to make middle mean between big strong sophisticated type and girly cute type. Although he has designed script he isn't really a fan of loose all over the place script because you can't read it. He was very hypocritical with type because he would say one thing he didn't like but do it anyway. For example AIGA asked him to design the cover of their Thirty Anniversary but in the process Matteo created a poor legible type design but AIGA didn't care because it look good. 

I would definitely listen in one of Matteo talks again because it was so entertaining and informative. All the work he showed was very professionally done and always came out to reflect the company perfectly. His designed were also very inspirational. 

Week 7-Outside of Class

Fixing Critique Comments

From the critique some of the changes I made was the correct name for the <title></title> tab, fixed the pixel that was off in the hero image, made the footer be responsive and fixed the bug by making sure the row fix was inside the container. I also made changes to the logo by even displacing the lines around the half circle by creating a brush stroke in illustrator. The last change I made was creating a viewport around the boats image to add another circle motif and similar flat illustrator to my designs.

Week 7B

Homepage Critique 2 

What worked well...

• Color Palette was well thought out
• Illustrations work well to the atmosphere of the event and weren't over powering.
• Having the logo be a ban width on desktop/tablet and circle logo on mobile was a smart way to solve my issue of wanting the circle logo on all three devices.
• Typography had a good sign and cue throughout the page. It was bold and clear to the point. The typography also had well planned line spacing. 
• In terms of creating motifs in my webpage, I incorporated the circle shape through out my page by having a steering wheel in the logo, life raft circle and the image was clipped into a circle shape. 
• Over all I keep a good geometric feel.

What didn't work or needs to be fixed...

• The hero image has a slight pixel off at the bottom of the image. 
• In the footer the first half of the information isn't becoming responsive and shifting in an odd way.
• Try to incorporate the navy blue into the navigation 
• The lines in the logo around the circle are uneven. To change this you can create a brush stroke in illustrator and repeat it around the half circle shape to get it perfectly vectored.
• Add something to the circle image (boats) ...like a viewport or rope. 
• Change the tab name in the <title></title tag.

Week 7A

Class Critique ( In-progress) 

In class I showed them my circle hero image version. Overall everyone liked my concept and design. They thought the colors and hierarchy were working nicely together. Some of the critiques I got in class was fixing the kerning on the "start and ends" script typeface because they were overlapping. Add some type of contact information and links in the footer. My collage images should be circles like the top hero image to add cohesiveness. The when and where section feels crammed. Another comment was to add more line-height in between the <p> tags. Overall the critiques were minor changes that I can definitely do.

Once I talked to my professor he made me rethink my circle hero image. Due to his reason it made sense to change the circle hero image on the desktop view to a span width because there was too much extra white space and at a lower resolution size the logo would be cropped off and you would have to scroll even further to get to the information. 

Extra Help

My professor helped fix my bugs. For some reason the image wouldn't span across the website and would just stay in a box. He added a gradient that would repeat with the background and the gradient would be what spans across the browser. 

This really helped. 

Homepage Design Re-fixed

Here is my final designs for the home page of my Slamin Salmon Derby. For the Desktop and tablet view you will see the first logo below with the typography to left of the mountains and in the mobile view you will see the second circle logo with the typography over the mountains. 

I made a lot of changes to the design. But there are still some bugs. 

Week 6- Outside of Class

Outside of Class:

For homework we were suppose to get further in our designs. I finally decided on a logo for my Derby. I designed a half circle logo that sort of represents the sun rising over the mountains. The two typefaces I decided on were Nexa Script and Bank Gothic. I struggled to find an appropriate placement for the salmon because it kept getting lost in the mountains. 

After I decided on a logo I moved on to created a collage full of different imagery you would see at the Derby and text for the when and where. I'm not completely set on this typeface because online it didn't get all smashed together and now once it's on the screen all the letters start to overlap.

I also decided on staying with the ban width for my designs that hold information.

After several trial and errors with trying to span the logo across the browser it just didn't seem to work. Instead I thought of creating a circle logo to be responsive on all the different devices. This would fix the spanning problem. 

Week 6B

REFOCUSED IDEA:

In class I realized I wasn't happy with my designs and I wasn't getting the full fun spectrum of the Derby. I decided to go in a direction to capture the essences of Alaska beauty by incorporating mountains, water, jumping salmon with green and blue colors with a pop of salmon color. I created a flat design background for my logo to pull my strong illustrations that I can create through Illustrator. From my previous designs I kept the salmon but readjusted it's body in Photoshop by using the puppet tool. Below that is the process of creating my mountain atmospheric background. 

Creating the logo was probably the hardest part. Trying to figure out the most appropriate typeface and typeface mixture took some time. The styles below were only a few examples of the styles that I went through.