Viget Inspire

Keith Muth, ON THE TOPIC OF Behind the Scenes and General

The making of VigeTurf brought together folks from all our labs.  In this series, we're pulling back the curtain to give a detailed explanation of how it was created.   Here, it's all about the design build.

There are a lot of design elements on the page that act as decoration I decided to cut the design up into two large background images. The obviously problem with creating large background images is that it increases the size of the site especially with the Flash element, Flickr feeds, and displaying the user created images. Since this was a fun, internal site that needed to be put up quickly, we tried our best to compress the images down and make CSS sprites for all the other smaller elements. For the main background I left some extra "paper" on the bottom in case the content scaled and saved the image as a JPEG to keep the file size smaller. Unlike the main content, the footer content would likely never change so that image is a fixed size and since it sits on top of the repeating wood texture, I made it a transparent PNG in case the main content ever pushed it down.

All the other elements on the page, such as icons and buttons, are found in one big background image and then CSS background positioning is used to give the coordinates of what part of that big image should be displayed. So that brings the total number of images I used for the layout to about 4 images (I'm not counting a couple really small repeating background images). Not bad! One could argue I could've gone even further and condensed those images into a bigger sprite. If you don't know about CSS sprites there are a lot of good resources on how to make them, such as this A List Apart article, and Yahoo has suggested using CSS sprites in their Best Practices for Speeding Up Your Website. Speaking of Yahoo, another useful tool I used was their YSlow plugin for Firebug. YSlow can give you stats on the performance of your page and I used it to check the size of the site.

Take an in-depth look at how the other pieces came together.

• Owen (Design) - The multidisciplinary design
• Erik (Design) - The Flash
• Matt (Development) - The application
• Hilary and Steph (PMs) - The production & coordination

Leave a comment ( 4 )

Erik Olson, ON THE TOPIC OF Behind the Scenes and Flash

The making of VigeTurf brought together folks from all our labs.  In this series, we're pulling back the curtain to give a detailed explanation of how it was created.   Here, it's all about the Flash.

Uploading/Saving Photos

The actionscript side of uploading photos is very simple, but more involved for Matt who had the mighty task of putting the entire site together and did an awesome job. I just referenced the FileReference class, which will tell your OS to open a file browser window when you call FileReference.browse(). Because of security restrictions in Flash player 9, you need to send the file to a remote server before you can access it. This changes in Flash player 10, where you can directly access files at runtime (woohoo!).

Once the image was fully clipped, I simply took a snapshot of the stage and saved it out as a byte array. Using Adobe's Jpeg encoder class, I saved the image back to the server, where Matt returned the unique (and fun!) url's.

Grass

The blades of grass were probably the most fun part of this project. I was so excited about the task of making interactive grass that I started messing around with it that night. (You can see the grass in an earlier version here.) All of the blades are individually drawn using the AS3 drawing API and are given a random height and angle to look like nice, organic grass. All the blades are placed into a movie clip because, later, I will need to convert that movieclip into a bitmap to enable erasing.

The interaction with the mouse pointer was a bit tricky, and the result was not perfect, but the effect works (right?!). When the mouse pointer passes over the blade, it sticks to the pointer until you bend the blade to 45 degrees in either direction. At that point, the blade stops following the pointer and a tween takes over to get that "snap back" effect. That effect is handled using a simple tween that sends it back to its original rotation. The ease on the tween is set to "Elastic EaseOut" to get that great pendulum-like bounce (I used the TweenLite tweening library from GreenSock, which has become my tweening class of choice). When first envisioning the grass, I pictured very life-like blades that bow organically instead of the stiff bend they have now, but I quickly abandoned that idea after Steph said I couldn't take several weeks to perfect it because it had to be done by the holidays.  Picky picky.

Continue reading "The Making of VigeTurf - Flash"

Leave a comment ( 2 )

Samantha Warren, ON THE TOPIC OF Behind the Scenes

One of my favorite aspects of being a web designer is the opportunity to learn about a wide variety of interesting clients. Zymetis, a company that is as passionate about biotechnology and the environment as I am about design, has been no exception. Every meeting with them was an enthusiastic adventure into the world of science and sustainable fossil fuel alternatives. The project gave me new insight into the world of bio-fuels.

Continue reading "Exploring Our Process: Zymetis Redesign from Start to Finish"

Leave a comment ( 12 )

Tom Osborne , ON THE TOPIC OF Behind the Scenes

When it comes to designer assignments, our ideal at Viget is to have one designer lead a project from start to finish – and in most cases they do. But the reality is that limited designer availability, summer vacations, or competing priorities have challenged us to find alternatives for certain projects. Respecting each other's design vision is imperative when we tackle these situations by re-allocating portions of the design responsibilities, which we just succeeded in doing with Interventional Paws.

We addressed this non-profit's simple redesign by having one designer do mood boards, another do design comps, and a third to build-out in ExpressionEngine.

Continue reading "Designing Through the Dog Days of Summer"

Leave a comment ( 8 )

Tom Osborne , ON THE TOPIC OF Behind the Scenes and Favorites

Sometimes you need to get a bunch of ideas in a short amount of time. Its not always easy for one person alone (though easier for some than others). Collaboration is key whether it be collectively or individually within a working group of people. Team design is one of the benefits of working in an agency or inhouse studio.

In borrowing from an idea that originally began in partnership with some of my former colleagues, the design team at Viget recently embarked on our first Design Flash Mob (DFM). You may have heard the term 'flash mob' to describe wacky collaborative events such as massive pillow fights where a large group of people gather in a single place, fight each other with pillows and leave with a pile of feathers on the ground as a residual reference to the event. The basic steps of these events are as follows:

1. Plan and promote in advance of the event. What do you hope to accomplish? When and where should this take place?
2. Gather at the designated time and place.
3. Act upon on what you set out to do.
4. Disperse and reflect on the madness.

In the spirit of design synergy we can take these steps and use them to collaborate quickly on things like logo designs, t-shirt ideas or rethinking user experience problems. Plan to do something about a week out. Think ahead about what you might want to create. When the time comes you'll be ready to jump in and start designing in a rapid but refined way. Take a morning or afternoon to hold the event. At the end, take time to talk about it and share different perspectives on working under pressure.

Another important aspect of a design flash mob is that it should not be treated as a competition. Even if one design is to be chosen it should be a democratic effort including those who played a part in the event. Benefiting the greater good should be the goal. In effect, the whole is greater than the sum of the parts.

One great place to start with a DFM is to have several people participate in designing desktop wallpapers. They're simple to design in a short period of time and have no production costs associated with them. This is where we started on our first Viget DFM. The assignment was simple. Take an afternoon (roughly 4 hours) to assemble one or more desktop wallpapers within the given time and include the Viget brand no matter how big or how small. Everything else was left up to the designer's discretion. Planning ahead was ok but no one was allowed to begin until the start of the event. Additionally, you didn't have to be a designer to participate. Our design team consists of UX designers, visual designers and production specialists with a wide range of talents and skills. How you work within the guidelines is all that matters.

Continue reading "How to Create Design Concepts in Rapid Fashion"

Leave a comment ( 13 )