W+W Design

High-speed photography

2009-07-30T12:44:00.000-07:00

Want photos that make an impact? Believe it or not, shots like this don’t require impeccably fast reflexes. I captured this photo of a lightbulb being broken with a steel ball shot from a slingshot using a shoe-mounted flash and a sound-activated trigger called a sound sync.

You can read the rest of this article, written by Jennifer, at MacWorld.com

Designing for the iPhone part 2

2009-05-13T15:07:00.000-07:00

Designing a Web site for the iPhone was an interesting challenge. I enjoyed every minute of it. I learned more than I really wanted to know about the code side of building a mobile web site. I found some really good reference sites that I will link to later on in this post. Here is the link to the mobile site, obviously it is best viewed on an iPhone, if you are viewing it on a desktop machine it is optimized for Safari. There are some parts of the site that will only work on the iPhone, but it should work well enough for you to see how the site is laid out and how it functions.

The first challenge I had to deal with was what size to build the site. Safari for the iPhone automatically assumes that all web sites are 920px wide and shrinks pages down to fit the 320px wide screen, even if the site is 320px wide (I mentioned this in an earlier post you can scroll down the page to see the samples). What you have to do is put this little piece of code (below) in the header section of your page that tells mobile Safari not to scale the page.

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0;">

Once I added the viewport code to each page I could build my mobile site at the native iPhone resolution of 320px wide, and not have to worry about scaling.

Now that I knew what size to build the site, I started designing the site in Illustrator CS4. I found a great template that Mordy Golding posted that helped me see what the site would look like on the iPhone as I was designing. Mercury Intermedia also had a downloadable vector file of native iPhone elements, like the button bar that is at the bottom of mobile Safari. I added the button bar to my iPhone template, so I could see how the elements on my page would interact with the bar. I did not worry about address bar at the top of the screen, I found a piece of Java script on the iPhone microsites site that hides the address bar on page load. That saved me 60px at the top of the page. That left me with a total image area of 320px wide by 416px high. Not very much when your goal is to have as few scrolling pages as possible.

The whole Web site fits in the iPhone's screen without the need to zoom, and there is scrolling only on the pages with a lot of text. Each button was designed to easily accommodate the size of the average finger (did you know the average finger is 50 - 70 px wide?), no zooming required. I also did not want to do a stacked list of buttons for navigation that is so common on iPhone web sites. That is such a waste of usable content space. The navigation bar at the top only takes up 35px of vertical space, and the buttons are big enough that you can navigate the site one-handed.

Launching native iPhone apps like maps and mail is easy from a web site in mobile Safari. Apple's developer site has all the link info you need to add application links to a mobile site. I created one click links to: call W+W, drop a pin on a map in the google maps application, and launch a compose window in mail already addressed to one of us.

Our mobile site is elegant and simple, easy to navigate, with most information accessible with one or 2 clicks from the home page. We minimized the amount of content, you can find out who we are, see what we do, and contact us in a matter of minutes. The mobile Web site design stays true to the brand look we have created, visually it is very similar to our Web site, but it is not just a shrunken version of our Web site, you can instantly tell it was designed for a mobile device. The type is set larger, 15px instead of the 12px size I use on a standard site, easy to read in the iPhone's high resolution screen.

I was surprised when I started researching Web sites designed specifically for mobile devices, how few there were, and how poorly they were done. Considering how many mobile devices are out there, I think a lot of companies are missing a very important marketing opportunity. Our next step is the optimize the site for a similar sized mobile device like T-Mobile's G1 running Android, you will be able to read about that in a future post.

iPhone apps for Photographers

2009-04-20T11:18:00.000-07:00

Most photographers love gadgets, which is why most camera bags have more than just cameras in them. Now you can add the iPhone to your bag. There are hundreds of applications for photography in the App Store. While many of these iPhone apps center on taking photos with your iPhone, I'll restrict this article to the ones that help you shoot with a separate camera. Unlike most camera gear, iPhone app prices are low -- about $1.99 on average -- yet they can turn your iPhone into one of the best assistants you've ever used.

To read the rest link to this article Jennifer wrote on CreativePro.com

MacGyver would love Photoshop

2009-04-08T16:29:00.001-07:00

This is for all you who have Photoshop CS3 or CS4 Extended. Among its many fun 3D tools and video tools, there is also a new menu called "Analysis". By using Analysis and measurement tools like the ruler, Photoshop can figure out the size of objects in an image. I've seen a demo of this with medical x-rays --"just how long is that nail that's stuck in your foot?" type of stuff. But u designers and photographers can use Analysis for other purposes.

Recently W+W was asked to help with environmental graphics at Adobe's headquarters. They were to be large posters that might take up entire walls. We could have brought a tape measure, but my dSLR worked just fine.

I lined up Monika firing squad-style against the wall and popped off this image.

Back at our office, I opened the image in Photoshop and went to Analysis > Set Measurement Scale > Custom and drew the ruler from her head to her heels. Since we know that Monika is 5'6", plus an extra inch for her shoes, I was able to add a logical height of 67 inches.

Now that I had set the scale for the image, all I had to do was use Photoshop's ruler to measure the height of the room (9ft), the width of the wall (19ft), and even the size of the picture frames behind her (34"x42").

You can even measure in perspective using Vanishing Point.

All the cool kids are doing it

2009-04-01T15:13:00.000-07:00

Not many businesses today lack a web presence. But 10 years ago that was a different story. Just as the web was to 1999, social media is to 2009.

Most people use all sorts of tools now - Facebook, Blogger, Twitter, and MySpace are just a few. To stay current you need to get your business visible in this new information soup. It is a great way to continue to touch your clients and customers. The old adage that keeping old clients is cheaper than making new ones still rings true, and this is a great way to stay connected.

Let's assume that you have a great product to sell or an awesome service that everyone needs. You're now an authority that people can come to when making a purchasing decision! Tell people what you know and how it relates to them in a blog. Most blogging tools are free; Blogger and WordPress are very popular. You don't need a web programmer to start, but do consider branding your blog with your company's identity so that customers make the connection between your product and you.

Once you have made a blog post, broadcast it to your Facebook and MySpace pages, and Twitter so that your followers see that you have new information for them.

Consider making your website more dynamic. In the past most people had "brochure-ware" site. That is just as it sounds: a brochure that you create once and don't change until the next season. Today you can bring people back to your website over and over again if you are constantly serving up fresh content. If you are a restaurant, post rotating specials on your home page, and Twitter the daily specials to your loyal fans (just make sure you do it before lunch!).

Make sure to stay consistent. Start off blogging every Thursday morning (or whatever day works for you). Then if you want to, you can increase the frequency of your blogging and messaging. All of this takes more of your time, of which I am sure you don't feel you have any extra, but the payoff is worth it. Once you start you will see it gets easier and quicker.

While you're at it follow us on Twitter, become a fan of ours on Facebook and link to us on Linkedin.

Making your site mobile

2009-03-27T12:51:00.000-07:00

More and more people are viewing web sites on their mobile devices. Since we have just redesigned our company site, the question came up about how our site looks on a mobile device. The answer, better than IE 6. Our site does not look bad, but is this the best user experience we can give our visitors when they look at our site on a mobile device.

We have decided to design a completely mobile version of our web site. Not just shifting the existing content, but editing the content to be more in keeping with the mindset of the mobile user. The way a user interacts with a mobile device is completely different than when you are sitting in front of a desktop or laptop computer.

Here is a list of questions we try and address when designing or re-purposing a website for a mobile device.

Navigation for me is the #1 issue on an iphone, I hate having to zoom in on a nav bar to make it big enough to tap on with my finger. Most sites, even apple, try and fit navigation designed for a 1024 pixel wide screen onto a 320 pixel screen. Drop-down navigation does nor work well either on a mobile device, so we are simplifying the navigation so the user get to each section of the site with just one click.

question 2 is content, does the mobile user expect an abbreviated version of a website. For our site, we figure a mobile user is going to have a limited amount of time to view our site, so we are editing the content to give a high level overview of who we are and our work, the user should be able to get through the top level of content in just a few minutes.

the next part we are working on letting users access built in iphone functionality, when they chick on our phone number, they will initiate a call, click on our address and google maps will be launched.

The last consideration to be aware of is the fixed browser size on a mobile device, the current version of Safari on the iphone, sees all sites as 980 pixels wide.

This is a screen shot on the iphone of sample page built st 320 px wide with a 17px high font size

This is a screen shot of the same page built at 980 px wide, the font size in the purple section is 21px high.

Apple has published a helpful tips document on there developer site you will have to sign up to see the document.

Stay tuned to see the final W+W mobile site.

Our 60 megapixel camera

2009-03-17T17:16:00.000-07:00

No, we didn't just get the newest Hasselblad or the Phase One P65+.
Sometimes software just delivers. I mean really smokes it down the center for a strike. Photoshop CS4's Photomerge is just one of those things.

We were teaching a week long class on CS4, mostly Illustrator and Photoshop, and eventually got to the Photomerge command. I was trying to draw a real life example of how and when the group might use this to improve their design lives. After all panoramas of beautiful landscapes are great but can have a limited use. What you can get out of a Photomerged image though is much higher resolution than you could achieve with even a high end DSLR. So after teaching that during the day we went for a walk around Modesto just before dinner. Armed with a Canon G10 we passed the Gallo Center for the Arts. First we made a quick shot of the entire building to compare resolution later, then we zoomed in and took 6 shots covering the entire building. No tripod, no planning, no RAW - total time spent - less than 5 min.

Back in Bridge CS4 I selected all six images, then went to the Tools>Photoshop>Photomerge... and choose OK.

The resulting image provided a 171mb file verses the 41mb file I got from the single shot. You can see the difference in the images of the lights below. Effective resolution bump - 14.7 megapixels to 60 megapixels.
Nice.

If this image was needed for anything of size such as a trade show booth graphic or a a poster background we would have had to rez the single shot up and risk a major loss of detail. Here is the final result.

Tour of California rides through town.

2009-03-03T12:55:00.000-08:00

On February 16th, amid a serious downpour we gathered up our camera equipment and walked just two blocks away to watch the Tour of California. We were oh-so fashionable in our raincoats and ziploc bags tied around the front of our lenses. As we waited for the race to come by we enjoyed chatting with the other spectators and sharing exposure settings. About an hour after we got to our location the sun came out and the race came through.

Levi Leipheimer was in the lead

The next group had Lance Armstrong (in front)

Then Francisco Mancebo wearing the yellow jersey

And even Floyd Landis (in front)

It was a great event and we are hoping that it comes through Santa Cruz again next year.

Just hangin' around the studio

2008-09-05T14:42:00.000-07:00

Our studio is on the second floor of what was once a train depot. The building has since been rebuilt but they kept some of the old depot stylings like the clerestory windows. We are also, predictably, right next to the train tracks and a cool train tunnel. The other side of the tracks is covered in blackberries which attract birds and people alike.

Yesterday though, we saw some new visitors, two juvenile raccoons just working their way through the bushes eating away.

A Day in the Life of W+W Design

2008-08-11T14:23:00.001-07:00

Recently we were hired by Bell Microproducts to develop and design and internal sales campaign. The theme was to focus on golf, specifically the LPGA as Bell is sponsoring a LPGA tournament in September.

We knew the key to portraying the LPGA players was to hire a top notch photographer. We looked around and were very impressed with Chase Jarvis based out of Seattle. After selling his style to the client and negotiating budgets we were able to book him for a shoot in mid-May.

It was a great experience for the client. Chase really understands how to keep everyone happy. His crew put together this video of the day.

Here is some of the work we produced for the campaign:

A brochure to inform the sales people that the campaign/contest is happening. This also highlighted the LPGA players that were sponsored by Bell.

Banners that were put up around the client's offices

Life-size cutouts of the players

There you have it - a professionally produced campaign using LPGA players and top notch talent.