We started her project by looking at lots of imagery, which I posted on the online interactive whiteboard  service Stixy.com. She told me she liked blues and greens, and gave me exmples of a few other sites she liked that had both a retro/cute factor and a certain sex appeal. This gave me enough direction to get started and what emerged was the desire for a nostaligic feel with a modern twist.

The above image caught her eye for a number of reasons, mainly because of color, but also for the imaginary fuzzy memories it seems to evoke. The ones that followed were from photos of found graffiti along with pinups and airplane bomber girls.

She definitely wanted to have a woman as part of her logo, so my job was to find a perfect pose and create the logo from it. From this point on it became a game of cutting and pasting pinup girls, turning them into digital “paper” dolls, with me manipulating their limbs this way and that until I got the perfect pose.

From here, however, I would need to get a model to put in this pose as plagarism is not my strong suit. I didn’t want to rip off anyone else’s work, so I set to finding a model.

Since I don’t have a lot of female friends who are pin-up models, the simplest thing to do was get on Flickr and contact a girl that might be interested in posing.

Turns out the perfect girl lived in Sweden, but she will willing to do the job remotely for a fair price, so I hired her to do the pose. Incredibly, she took her own photos and posed from her living room, and was able to make the necessary changes to get the perfect angles.

Once I had the reference photo, I set to work on adjusting contrast and some slight figure adjustments, and had my girl.

I put her in illustrator and once I got her looking the way I wanted, added some type. I used a font called “B-Movie” as the basis for the logotype, and made changes to the letterforms here and there to give them a more rounded feel. I left them alone for the “Served Hot” bit.

Now a theme was emerging and I discussed the idea of creating an identity that harkened back to old diner menus, which was well-received. This would also translate well for a webpage. I wanted to create a sense of playfulness on the page, and came up with some restaurant terms for the navigation, such as “Daily Specials,” “Our Entrées” and “Hot Plates.” Spinning off of this was a “Motto,” which was sometimes put on family diner menus, and “Hot off the Grill,” for press releases.

I built the site on the ExpressionEngine CMS platform, which to non-web people means that she can edit the website herself with the help of a fairly sophisticated framework that allows for password protected photo galleries, automatic press-release formatting, and fancy magazine flipbooks. Visit High Profile Media online.

Since they didn’t have any complete projects yet, I suggested we use illustration to get the message across, and later they could update new pictures of their work. They wanted a Flash animation for conveying their most important concepts, and a framework they could keep updated themselves without much training, so I suggested WordPress.

I designed the color palette of the site to go with updated colors on the logo, but after the site was built they decided to revert back to the original colors.

The color palette needed to compliment the existing identity system, and they wanted to incorporate illustrations to quickly convey the complex nature of the company’s product. I came up with several versions for the home page, and they chose the third one in this lineup. The inside page style is underneath.

One of Panpoticon’s Marketing people was interested in seeing a comp with a functional wheel that would engage people coming to the site.

Below is the design direction they chose.

This is the inside page template design.

In addition to designing the pages, I animated several of the illustrations which included links to inside pages. I partnered with Craig Miranda of Miranda Design to build out the site.

The website also needed to provide people with all of the information they needed before, during and after their journey. Each page includes a Flash-driven slideshow (in the image area) that cycles through slowly and continuously. We worked together on organizing the content and I encouraged her to link the content from page to page as much as possible to keep people looking around on the site. The client also wanted music on the site, which she provided. Visit Custom Tours in Tuscany.

I also thought it would be nice to commission a watercolor artist to paint a portrait of the building which could be used on postcards left in the rooms. Hotel owner Michele Nasatir agreed, and they have been reprinted several times over. This website is currently maintained by the client, and text has been added in several areas that differeed from the original. Visit the Embassy Hotel Apartments website.

Below is a coordinating inside page with dynamic imagery and text in the left column that changes upon refresh to another random bit of text and image. This is a large site with upwards of 80 pages of content.

Both the homepage and the “Team” page have videos playing in the TVs. The “Team” page also has skater photos and bios.

The “Products” page has two sections built in, T-shirts and Boards. Each thumbnail changes to a large image when clicked on, and the product information and pricing changes. All the prices are dynamically loaded from external text files, which can be easily updated by the client. This site has PayPal integration for checkout.

Upon page load, there is a short animation of a skater silhouette that comes down the curve and jumps over the edge before skating off the right side of the page. Visit False Profit Skateboards.

A more recent development was their desire to have their website contain dynamic pricing and apply their pricing structure to the current price of platinum and gold. I helped them come up with a formula that would allow them to input the fixed price information, and then the formula would be applied with the dynamic price of the day for gold or platinum. This way all the prices on the site would be current and it would save them time re-calculating prices at their desks.

In the bridal section there is the option to view rings in groups of four, one at a time, or all at once on a long page. In addition, the side has video and a blog, as well as searchable database of local jewelers that carry their product.

On the detail pages, each ring has a quote associated with the name, to enhance the unique quality of each piece. In addition, alternate views of the rings are shown in thumbnail size at the bottom of the page.

This site also has a custom admin page where the client can upload new ring photos, descriptions and pricing, and re-arrange the order in which they appear on the site.

Update: This client wanted to make their site more search engine friendly, so we reduced the size of the Flash animation on the home page, and added quite a bit more text and links. Here is the updated page design.

]]> http://www.wraycodesign.com/archives/611/feed 0 http://www.wraycodesign.com/archives/223 http://www.wraycodesign.com/archives/223#comments Fri, 17 Jul 2009 23:02:26 +0000 MLAW http://wraycodesign.com/blog/?p=223 Wrayco Design was contracted to design a new logo for local TV station and it’s governing body, Community Media of the Foothills. They wanted an identity that both reflected the local flavor of community, and that they are a broadcast organization.
Because of the large number of Victorian and Craftsman homes in the community, as well as the old-fashioned flavor of the city’s Old Town, I decided this would be a good place from which to draw inspiration. I studied the color palettes from these periods and decided on one that would echo the richness of the colors used on Craftsman Homes.

For the style of the illustration I wanted the simplicity of a woodcut but wanted it to be modern looking and scale down well and still be recognizable at a small size. One of the reason I chose the mountain “range” as part of the image as it is often used in designs related to the San Gabriel Valley, where the City of Monrovia is located.
I chose the Syracuse font because of it’s Arts and Crafts feeling. Here is a formal description of the font: “Syracuse is a font inspired by the typefaces of the “Arts & Crafts” designers of the early 20th Century. As such, it has a distinct “hand” look. In “Syracuse” you will find hints of Dard Hunter’s work at the Roycrofters in East Aurora, New York, a little of the Art Nouveau style of 1900 Vienna, even a touch of Charles Rennie Mackintosh’s design ideas in Glasgow, Scotland. The font was named for the city in New York where Gustav Stickley produced his Craftsman furniture.”

The logo also had to be able to accommodate the names of three stations, and so I created an area below the image that could change according to which station they needed it for. I also did color variations for each station, but they decided to keep the colors of all of them identical.

Following the approval of the logo, I was commissioned to design a business card and letterhead, and then a website. The station wanted the website to convey both television and coordinate with the newly established branding. They also wanted to maintain the site themselves, and have it be easy for people to scroll through the most recent videos.

I created the new website on the WordPress platform, and kept with a look consistent with the new logo and color palette. Visit the KGEM-TV website.