Pitching Your Design
March 3, 2010, 1:17 pm - By: Chad Halvorson
We've all seen the online comics about web design. (photo credit) They usually tell the same story; —web designer creates a design, client makes a ton of changes and thus "ruins" your design. While the common theme portrays the web designer as the victim, if objective strategies were applied to the presentation of the design, the outcome would most likely be very different.
The nature of client feedback can be shaped based on how the creative is "sold" to the client. As the designer, you've already sold it to yourself (over and over again). Here are few strategies for "selling your web design ideas".
Present the ideas/designs, don't send a link. Schedule a meeting to present your design, preferably in person. If not in person, then through a NetMeeting session or some other desktop sharing meeting service. The goal is for the designer / creative director to be the gatekeeper of the artwork until it has been properly presented. DON'T EVER send a link or JPG for initial review of creative. There are some exceptions to this, but generally you always want to present the creative.
Tell a story / paint a picture. You've put a lot of thought into the creative and your client has hired you for your expertise. Tell a story with your designs. Start with the homepage, discuss why you've chosen the layout and interaction model and how it works well with the interior pages. Keep your points matter-of-fact. The goal here is to show that you've thought about the entire user experience as a whole and based your creative decisions on the business objectives of the client.
Don't leave your creative decisions to interpretation. Even though you've made decisions based on creative instinct or "just because it looks good", don't leave the method to your madness open to interpretation. Have a game plan. You've made hundreds of decisions during the design process, many of them subconsciously; —defend them objectively.
Be objective even though creativity is typically subjective. Use your noggin, you have experience, you know what works and what doesn't, you know how to use colors to convey different moods, you know about typography, etc. There is always some level of objectivity behind good design.
Switching To TextMate
December 11, 2009, 12:11 pm - By: Wil Chow
Last month, I made the switch from Dreamweaver to TextMate as my primary text editor. I have been using Dreamweaver for years mainly because it is the editor that comes with the Adobe suite. The problem with Dreamweaver is that it is so packed with features it can be slow at times. TextMate on the other hand is light and fast. This is not to say it lacks features. In fact, it is quite the opposite. Among them are snippet support, code collapsing, auto-pairing brackets and characters. That is just scratching the surface. If you are a shortcut ninja, you will love TextMate. There are shortcuts for everything. Rapid development is what TextMate is all about.
Backing up Lots of Data Remotely
December 10, 2009, 1:54 pm - By: Chad Halvorson
Recently we started backing up a few of our workstations using BackBlaze. So far it works great; it consistently backs up all our project files to a nice, cozy off-site location.
Our company file server is another story. We produce a lot of video programs, website designs, code, graphics, animations, etc. So our storage needs are huge. With our file server being Linux, finding an off-site backup service that didn't break the bank was virtually impossible.
At this point we have roughly 3TB of data on our file server. We needed a way to get this data backed up to a safe location in an automated, daily fashion.
Weighing all our options we chose to build a second Linux file server and run it at a different location. After that it was fairly straight forward. We used "rsync", a free Linux based remote file copying tool.
Configuration took some thought. We chose to sync all files 3GB or less to the remote server. That would cover all project files and assets, however, most rendered and finalized videos would be left out. We were OK with that since all final renders and videos are backed up to disc and/or tape any way.
The initial backup took the longest. We closely monitored progress over the course of about 5 days. Yup, it only took 5 days to backup just under 3TB over a 10Mbit upload connection.
So far the results have been great. The servers sync every night, updating modified files, backing up new files and removing deleted files. The whole process now only takes 30 -60 minutes each day depending on how much data we transferred that day.
The upfront cost comes with the purchase of the second server. Ongoing costs are negligible; —additional storage when needed, broadband internet connections at each location, etc.
Common Overlooked Elements of a Website Redesign Launch
November 2, 2009, 2:33 pm - By: Chad Halvorson
A lot goes into the launch of a website redesign. Everything from the initial planning and web design to template creation and programming are core to the launch. However, there are a number of things that get overlooked and cause the new website to suffer following the initial launch.
Most of the forgotten tasks are related to the previous website that's being replaced. It's easy to forget about the old site and simply delete or archive it; —as if the redesign is going to make everything better and replace all negative energy surrounding the previous version of the website. While some of that is true, there are always elements of your old website that are left behind and need to be considered.
- First, think about the visitors that may have regularly visited the old site or bookmarked pages from it. What about links to your old website that may have been emailed and saved for future reference. It's important to consider the legacy of links that your previous website has left behind. All pages or links from your previous website need to remain in tact and be redirected to "content equivalent" pages on your newly redesigned website.
- Second, regardless of how optimized your old site was for search engine indexing, odds are some of the pages from your old site have been indexed by search engines. You don't want to cut off access to the old pages. Search engines may return results to your old website's pages for up to 3 months before eliminating them from their cache. This means you want to make sure quality redirects have been set up so all visitors that find links to your old website in a search engine are transparently directed to the new version of the old page.
- Finally, just remember that your old website doesn't go away the minute you launch your new website. Elements of your old website can linger for months, even years. Make sure that you take all necessary steps to clean up any mess your old website has left behind. It's important to ensure your redesigned website is well connected to your old site's link legacy.
CSS Support in Email Clients
September 2, 2009, 8:00 am - By: Chad Halvorson
Here is a great resource for identifying CSS properties that are supported in various email clients.
Guide to CSS support in email clients
Email and phone number validation with PHP
August 13, 2009, 12:45 pm - By: Chad Halvorson
Validating email and phone number's is a constant requirement with web forms. Here are the two functions we use for validating email and phone numbers with PHP.
function email_valid($email) {
if (eregi( " ^[a-z0-9._-]+@[a-z0-9._-]+.[a-z]{2,6}$ " , $email))
{ return TRUE; } else { return FALSE; }
}
function phone_valid($phone) {
if (eregi( " ^[0-9]{3}-[0-9]{3}-[0-9]{4}$ " , $phone))
{ return TRUE; } else { return FALSE; }
}
Phone numbers must be xxx-xxx-xxxx
Email addresses must be email addresses
The 960 Grid System
July 10, 2009, 1:15 pm - By: Chad Halvorson
Wil brought this to my attention. It's a great little design framework for speeding up the design and development process. Check it out.
http://960.gs/
IE Dev Tool Bar (like FireBug)
June 18, 2009, 10:27 am - By: Chad Halvorson
Found this great tool for monitoring web activity in IE. It's similar to FireBug and Safari's Activity Monitor. Big help when trying to find dead images that are loading from the wrong path.
Download: IE Dev Tool Bar
Shooting Green Screen Video for Websites
May 26, 2009, 7:41 am - By: Chad Halvorson
Green Screen Video for Websites
Green screen shooting (or iShooting to make use of the buzz word) for the web or interactive CDs requires a unique approach. We've shot a number of web hosts, spokes persons, web tour guides or whatever you want to call them. Regardless of it's intended use the production approach is the same.
One of the first things we determine is whether the talent needs to be shot full body, head-to-toe, or if we can crop the talent off at the waist or knees etc.
Whether it full-body or partial body, if the shot needs to be from at least from the waist up, we always mount the camera 90 degrees on the tripod. The reason for this is to ensure we are filling the 1080p frame with as much of the talent as possible. Even though we are considerably scaling the footage down for interactive use, it's always better—and looks better to have the talent fill as much of the frame as possible.
In terms of keying the more the talent fills the frame the easier and cleaner the key will be in post. Another thing to consider when keying green screen web video (or any green screen video for that matter) is the source. We use the Sony XDCAM EX3 which captures video to a SxS card and is compressed.
Most visual effects gurus will say compressed green screen footage such as this is not ideal for post— compression noise and grain often makes the post process dirty, etc. However, from my experience when it comes to the keying footage for the web, the difference is negligible. This is due to the fact that the 1080p footage is scaled down so significantly.
We've been working on some tests to illustrate the keying differences between uncompressed footage and compressed, but that's a topic for another entry—a video blog perhaps?
So what about head-to-toe green screen shooting? This setup clearly requires the most prep work and the most room. When shooting this type of setup for web, the lighting, green drop and overall details are very forgiving.
We typically use a 20x40 green screen drop and rig it on poles and c-stands to create a cyc-wall like environment. This probably isn't the best if pricing a 1080p production, but it works fine for web video and is much cheaper to the client than paying to have the entire studios cyc-wall painted chroma-key green.
You need a studio no smaller than 20x35 to pull this off. It's important to have enough space behind the talent so the cyc drop can be lit as independently as possible. The deeper the space is the better as well because the farther you can get the camera away from the talent the more out--of-focus the green background can be, thus softening the coffee stains, wrinkles and seams in the drop.
Beyond that just stick to your basic principles; light well and even—keep the drop smooth and shoes clean. Post should be pretty basic and not require a ton of extra work.
Shooting Devices for Tradeshows
May 19, 2009, 10:16 am - By: Chad Halvorson
We produce a lot of video presentations for medical device companies which sometimes requires us to deal with very small products. The current trend for tradeshow presentations is to use a large LCD monitor that is rotated 90 degrees—giving the video presentation an electronic poster feel.
For one client, we've been shooting their products on a solid black background in HD 1080p. The goal is to showcase the product through video similar to how the product is represented in the printed brochure literature.
To accomplish this we rig the device on a turntable. The turntable has variable speeds so we can control how the device ebbs and flows visually. Most products, such as pacemakers, are stationary and can simply be secured to a small wire while rotating, however, some products have unique movements and function—this requires some unique rigging.
Certain products need to rotate on the turntable as they move through their range of motion. For this I'll use some fishing line material to assist in the movement expected from the product. Other times no assistance is needed and we can simply put the product in action using it's native mechanism—usually a handle or dial. The shooting process is the same, but it can sometimes take longer to get the right shot when there are moving parts involved.
Another challenge we're often faced with is getting the device to fill the video frame enough to highlight the detail and design of the product. A pacemaker lead for example is very slender and small at its tip. Showing something this tiny requires a combination of camera and post production planning.
For most small products we can flip the video camera on it's side so we can shoot the product as full frame as possible. In post we find that we can scale the footage up to 120% without a significant degradation in clarity—another option we've considered is using the RED ONE camera to capture a 4K image and then scale it down as needed to 1080p.
Overall it's a fun process and the end results are visually very satisfying.