Monthly Archives: December 2011

sketching-467x2881-275x275-53

The Messy Art Of UX Sketching

Original article by Peiter Buick for Smashing Magazine. Read original article here.

Designers seem to fall into two different camps. The sketchers and the ones who take their creativity straight to the computer. I used to say that I belonged to the latter, but more and more, I find myself starting out the old fashioned way. While my sketches are far from perfect, I do find it helpful to put my ideas onto paper and just see where it takes me.

According to Peiter Buick of Smashing Magazine, you don’t have to be good at drawing to sketch your ideas. Rather it is about establishing a hierarchy, and figuring out what needs to be emphasized over other elements. In his article, he writes:

“When evaluating your sketches, ask yourself, ‘How could I better communicate these thoughts?’ Getting caught up in evaluating your drawing ability is easy, but try to separate the two. Look at your sketch as if it were a poster. What’s the first thing that’s read? Where is the detailed info? Remember, the eye is drawn to the area with the most detail and contrast.”

In case you doubt your ability to sketch effectively, Peiter goes on to show his method of sketching in layers in the video above. This is  a technique that I plan on adopting myself.

Do you sketch your ideas out when you kick off a project?

ipad-portfolio1-54

Ditch the Book and Show Off Your Work With an iPad Portfolio

One of the things that I got most excited about in my beginning design days was the day I got to go and pick out my portfolio. I did my research, saved up and got the portfolio book of my dreams. Aluminum cover, screw-post bindings, and at a large 11×14, I thought it was pretty  impressive. Of course in those days, my book was almost entirely comprised of print work. Makes sense, right? To show print design in printed form. The problem came a few years into my career, when my work started shifting to include an ever-expanding collection of website designs and banners. Since I wasn’t designing these things to be printed, did it make sense to print them out and stick them in my portfolio? Not really. Printouts of something designed at 72 dpi looks pretty lackluster on paper, so how was I going to show it?

I bought my iPad last year for the sole purpose of using it as my portfolio. It has proven itself as useful in countless other ways, but I love using it as a showcase of my work when meeting with clients. I can show print work, just like I always did in my printed portfolio, and now I have the added bonus of my web work looking great in meetings as well.

Another advantage of an iPad portfolio vs. a printed one is that you can save different versions of your portfolio to appeal to different types of clients. When I was putting together my old book, the one thing that I heard over and over again was to not show the same work to everyone. Its important to put together a custom experience for each interview or meeting. That’s absolutely true, but it was always such a cumbersome and tedious task to rearrange everything for each viewing. Most iPad portfolio apps allow you to drag and drop portfolio pieces in different orders, and save different versions. I have about 10 different variations of my portfolio that I show, ranging from “corporate websites” to “creative logos.” And if I run into a situation where none of my current versions is quite right, I will make a new one, and save that for future use as well.

The one caveat is that since the iPad doesn’t support Flash, I can’t show any of my animated web banners or several of my sites that use Flash elements. But since we are kind of getting away from Flash more and more, it is becoming less of a problem.

Do you have any experience using your iPad as a portfolio? Or do you prefer the traditional printed kind?

mobile-website-designs-275x275-55

A Showcase of 10 Creative Mobile Website Examples

Nearly half of all internet users are using a mobile device to access it. I just read a report predicting that by 2015, mobile users will overtake people using PCs. So you can bet this mobile website thing isn’t going anywhere for a while. Designing for mobile devices comes with its own set of issues: designing for a variety or screen sizes, load speeds, making buttons large enough to not be accidentally clicked by those with larger-than normal thumbs, etc. Sometimes you can get away with a site performing double-duty, and just use what you have for mobile devices as well. Sometimes that just isn’t a feasible option.

When designing a dedicated mobile website, either for yourself or for a client, you must keep the above rules in mind, but there is no rule that says it has to be a bare-bones snore-fest either. I would compare it to decorating a studio apartment – its a limited space, but if you work smart, you can still fit in all the essentials, and make it inviting as well. Here are ten examples of mobile sites that have done an amazing job with a limited amount of real estate, and are simple and easy to navigate.

Mode

Branding & interactive agency

This site does a great job of presenting eye-catching work in a straightforward grid, with 2 simple navigation items at the top.

Hacker Group

Business to business and consumer direct marketing agency

Simple navigation is boosted by a strong focal image with a clear marketing message.

Hooppps

Dribbble’s mobile site

This fun and simple offshoot of Dribbble takes their clean interface and makes it even cleaner for mobile, letting the showcased work take the lead.

Big Bite Creative

Digital creative design studio

Minimal and retro, this page features an easy dropdown menu and homepage mini-slider.

Quaintology

Web development portfolio

Super quirky and retro, this mobile site has a rich feel, but it still employs a pared-down navigation to keep things simple.

Warface

Digital designer portfolio

The colors, the typography choices and the imagery all add to the fun, clean nature of this designer’s mobile site.

FXNINE

Visual creative group

Big menu items and even bigger typography make a big impact on this site. I also love the subtle use of lighting effects on the navigation.

Moiré

Marketing partners

Bold use of color and shading not only brand the site very well, but make it really easy to find your way around as well.

Tyler Michaud

Music producer, DJ and record label owner

With a dramatic full-bleed background image and prominent navigation placement, its easy to catch up on this guy’s music, and even download podcast episodes.

Formas Do Possivel

Graphic design portfolio

With a simple yet striking interface, you know exactly where to go to check out this guy’s work, contact him, even add him on Facebook or LinkedIn.

What do you think of these examples? Have a favorite, or another one to share?