The Lighting Nightmare: Taking Bio Pictures

What is worse than a “Meet the Team” page full of pixelated selfies? NOTHING! My task for this week was to work on the “Meet the A-Team” page for the new website redesign for Salon Avenue. On the old site, a viewer would initially be met with a series of “Instagram selfies” of beauty professionals. As a client of this salon, I was super frustrated to see how these photos completely misrepresented the stylists and staff their level of professionalism. So I decided enough was enough!

I arranged a quick photoshoot to collect new bio pictures for the website. This process was super frustrating because I was dealing with a lot of different time schedules. As a traditional photoshoot was not possible at the time, I thought that taking quick photos of the stylists on a white wall located outside of the salon would be perfect. Of course, life always throws me a curveball. I ran into one major problem during the shoot which was the weather. I had planned on it being a sunny day outside or at least a partly cloudy day, so that the l would not have to bring a lighting kit. Even if it was not a sunny day, I had planned on renting an external flash from the Stevenson Photo cage, but i got the hours mixed up and they were closed. Anyway, mother nature decided not to corporate with me, so it not only rained but it poured. The lighting was awful and I had to resort to my camera flash which casted a horrible shadow on the white wall.

My worst nightmare was coming true, and I was running out of time. I decided that the best thing for me to do was use my iPhone camera which would allow me to capture the photos quickly with better lighting due to the natural wider aperture. These photos came out a lot better. While I was shooting the bio photos, I realized that everyone was really stiff the first couple of shots. I began to talk to them as I was shooting, and immediately noticed them loosening up in their appearance. I even got to know a little bit more about what they’re passionate about. One of the barbers, Marcus, is actually an artist. I had great conversation with him about the art that he does and even made a new connection.

Once I had all the photos it was time for me to edit them and put them all together on the bio site. I went through several different designs before deciding on a grid style layout with hover bios. Everything was finally coming together until I decided to test the site on a mobile device. Suddenly, I had forgotten basic common knowledge: hovering boxes and mobile devices are not a match made in heaven. I am really glad that the value of user testing has been drilled in my head, because I would not have picked up that very important point. I hope to incorporate user testing more frequently in the design process, rather than just waiting until the design is completely finished in my head. This will help me break that emotional attachment I have to my designs.

Overall I learned that when working with stylists, you have to be more aggressive when it comes to demanding time. You have to establish urgency without being rude. I also learned that I need to be better prepared for lighting issues. Trust me! I will never make that mistake again. I am excited to finish up the Meet the A- Team page and start working on the next page.

 

Week 3

This week was a little different from last week in terms of technical difficulty. After updating my original banner my challenge was to create a smaller version of the first banner and manage to integrate a child like/school feeling with a wooden background and a vegetable basket. I literally sat for about 2 days trying to figure out how in the world I was supposed to this. In the article “10 Tips to Improve Your Banner Ad Design and Click-thru Rate” it talks about knowing the message you want to convey and keeping the design simple. I knew I wasn’t able to overcrowd the smaller banner with information so I had to come up with an idea that was super simple yet effective. I decided to  integrate a paper doll outline and blending it into the wooden background. After changing around the composition, I finally got everything exactly where I wanted. Next I had to figure out which format was best to optimize my images in. I read that JPEG is best for images with continuous tone, gradients, and traditional photographs. So since my file consists of a combination of photographs I figured this would work best.   Then came the challenge of creating the html page. Actually everything was fine when it came to writing the Hank, I only had difficulties remembering the correct url. Over all this project was fun and challenging and I’m looking forward to the next project .

Resources/Links

http://hubpages.com/business/10-Banner-Ad-Design-Tips-to-Improve-Your-Click-thru-Rate 

http://codestyle.org/servlets/fontstack

http://www.fontsquirrel.com/

 

 

 

Week 2

This week our challenge was to design two cover photos for Wheeler Farms CSA program. I took a look at some awesome designs that were done before for other companies. One of my favorite was a simple textured design for Braid Creative&Consulting. They used a chalkboard style background and font to draw attention to their concept. I decided to play around with texture in my cover design by making my text seem as if it were engraved on wood panels. I got to use some features in the style panel of fireworks. There are so many cool features and font styles to play around with that I couldn’t just choose one. http://electricpulp.com/ features examples of wood texture used creatively.

The beginning of chapter 3 of The Principles of Beautiful Web Design was pretty much review of the elements and principles of design; line, shape, texture, etc.. I am familiar with those from previous fine arts as well as design classes. What i found more interesting about this chapter was the section about CSS. I knew that CSS controls the visual aspects of a website however i never knew that you could create artwork using CSS. The book features a robot made purely from CSS. I really cant imagine how long that took but its pretty impressive. More CSS artwork can be found at http://nicolasgallagher.com/pure-css-gui-icons/demo/  . Overall i really learned a lot this week about fireworks, html, and CSS and i look forward to learning more next week!