Bare Naked App

In Amigo we’ve got percentage bars! This was the image that Jason came up with:

In turning this part of the design into something flexible on the website I saw two options; clever CSS, or ‘Lots of Images’. I decided that ‘Lots of Images’ was a bad idea:

• If they were generated in PHP you’ve got that extra overhead
• For each percentage bar you’d need to download another image - extra bandwidth & slower for the user
• Could get difficult for a designer to update (and, it’s an image after all)

… so clever CSS it is.

The Code

Okay, it’s not really that clever, it’s CSS not rocket science. It does however mean that no matter how many percentage bar’s will be displayed on the page the user will only need to wait for two images to be downloaded. I think it’s a nice solution that you might be interested in. Here’s the XHTML & CSS:

<img src="/images/percentImage.png" alt="9.5%" class="percentImage" style="background-position: -110.315px 0pt;" />

img.percentImage {
 background: white url(/images/percentImage_back.png) top left no-repeat;
 padding: 0;
 margin: 5px 0 0 0;
 background-position: 1px 0;
}

If you understand XHTML/CSS, you’ll see there’s two images involved. The first image is the border for the widget, inside of the border it’s transparent:

The second image is the bar’s color, split into two halves. The first 50% is the "full" color, the remaining 50% being the "empty" color:

What’s it doing

Notice, the alt attribute of the img tag (I’m with you Roger) is the percentage that the image represents for screen readers etc. - this is important information and we want to make sure it’s accessible!

The width of the img tag will always be the same regardless of the width of the background image we set in the CSS, knowing this we can position the background to the top left (as default) and set it not to repeat. The background-position is set to 1px so that the image fits within the border in the first image, however, we could make the image a little large if we wanted to.

The inline style handles what pecentage we want to display in the box by changing the position of the background-image. In our case a PHP script handles all the math for us (which is why it’s a little too exact, however I believe browsers will round that to the nearest pixel).

I’ll throw a few other thoughts out there for anyone interested in using this method:

• When inline styles become redundant in the XHTML standard
• Page Zoom (IE7) - how would that change the display of this widget

Some of you may know the history of DropSend. Basically, we had to change the name from DropBox to DropSend because we didn’t get the trademark (anyone see a pattern developing here?).

Due to recent events we’ve been thinking about DropBox again and how we felt when the name was refused. And also how we dealt with the name change. Looking back, I think that the name change worked out in our favour. If we hadn’t named the app DropBox then I don’t think we would have thought to use a box in the logo.

If we had started the design process with the name DropSend then it’s likely we may have used some kind of swoosh, or envelope maybe? We certainly wouldn’t have started with a box. Now that we have the box - coupled with the words drop + send - it makes you think that you might drop your large file in a box and send if off.

It works. It adds depth. And it illustrates that losing the trademark doesn’t mean game over for the logo.

We’re up to the stage with Amigo where we are finishing up the very last things that need doing before the beta can go live. One of those is the ’sign-up’ e-mails that people will receive when they register.

Jason had designed some really nice e-mails using the logo and the ‘Amigo’ colours. But, unless Jason wanted the e-mails to look like a bunch of text sandwiched between some worryingly empty boxes with tiny red X’s in them, then something was definitely amiss.

Of course the e-mails looked crap because the images were turned off. Luckily, we had read David Greiner’s article on Vitamin all about designing e-mail newsletters for real people. In the article he stresses the importance of creating an e-mail that makes sense with or without images turn on.

So that’s what we did. The image on the top is the welcome e-mail with images not downloaded. And the example on the bottom is the same e-mail with images downloaded. Of course the one on the bottom is preferable. But the one on the top is perfectly readable even though the recipient chose not to see the images. They still know where to click, and more importantly they know where the e-mail is coming from.

I’ve been getting some emails with questions about my process for logos and layouts, so I thought I would post some of them here with my answers:

How long do you sketch before moving to the computer?
Well, the short answer is: as long as it takes. I have strong opinions about hopping on to the computer too soon, but, that is because I am very observant of my work habits and understand what works for me. It’s different for everyone, but I find that when I start moving stuff around on screen without having a solid idea, I end up losing sight of the concept. What it comes down to for me is: the computer is a precise tool and my sketchbook is an imprecise tool. By using an imprecise tool first, it allows me to get my brain working on the idea rather than my hands working on the execution. It’s a cart-before-the-horse situation.

In the case of Amigo, I did something I rarely do: I showed the Carsons (the “client”) my sketches. This doesn’t work for everyone, and you really have to get that sorta gut feeling about a client. Some clients get really freaked out by seeing just sketches, and no amount of explaining that they are roughs will quell them. I knew I could show the Carsons my initial ideas and have them understand that I wasn’t showing them final ideas. They realized that they were actually getting the better end of the deal: more ideas to choose from up front.

What’s your next step after sketches/what programs do you use?
After I am done sketching, I jump into Adobe Illustrator. I know a lot of people who have a terrible fear of Illustrator, which is a shame, because it’s a very powerful and useful program. “Why not Photoshop?,” you might ask. Well, Photoshop is a damn fine program too, but I don’t like it for logo work (unless there is something concerning the logo that Photoshop inherently does better, eg. anything dealing with photography manipulation). I learned Illustrator before Photoshop, so that may have something to do with it, but Illustrator feels very fast for fleshing out my ideas, especially for heavy shape editing or color and font play. What’s more, I think it’s extremely important to create a vector version of your logo so that you aren’t tied to specific resolutions or dimensions; you can quickly edit and be on your merry way.

What kind of sketchbook do you use?
Well, yes, it’s trendy, but I use a Moleskine Sketchbook. The binding is durable, I really like the paper quality, and it’s just the right size. Say what you will, but when you find a sketchbook you like, you stick with it.

Well, those were the most common ones I got, if you have any others, feel free to fire away in the comments.

Jason wanted to use Futura Medium as the typeface for headers on Amigo. The only way to do this (to my knowledge) is sIFR, a clever technique with Flash that allows you to use any typeface you want, regardless of whether or not the user has it installed.

There’s one major drawback to sIFR though: if you increase your font size, it doesn’t dynamically scale. It will only rescale the browser text size if you reload the page. I think that this is a pretty big usability problem.

So in the end, we decided to go with bold Arial. Obviously not quite as fun, but definitely more user friendly.

Jason has been working hard on the interface designs. He’s pretty much finished most of the sections of the app. Here’s a sneaky preview of how they’re looking. They’re small so you can’t see the words but you get the general idea. Jason has coupled the logo with a smokey blue background and used a tab device to enable users to get around the interface. We really love the colours he’s used (not too serious but not too kiddy either). He’s also used a nice mix of serif and sans serif fonts that we think really make it that little bit different. Each screen is super simple with everything you need to operate the app in one tidy place. The Q&As are located down the lefthand side and will (hopefully) help us to answer users’ questions as they go.

Jason is still working on the interface designs so this is very much a work in progress. Some tweaking will occur as we go through each slide to test its usability. But initially we’re really happy with what we have so far.

While scouting around the internet in my search for concise web copy I also found some nice layout features - devices to help your readers either get to your info or help them understand your app better.

I thought I’d share these with you as they’re better off on the page rather than stuck in my head. So here goes…

The BNA Web App Oscars.

Cute Navigation

The prize for cute navigation goes to Skype for their very useable site map that appears at the bottom of each page. It’s a simple device and an old one at that but doesn’t it work well? With so much documentation on one site the map really is a Godsend. Skype site map

Best Sign-up Page

Shutterfly may not be everyone’s favourite Flickr imitation but they do sport a tidy sign-up screen. The design is a bit rainbow and too happy-go-family for my taste but the sign-up page really works. It’s simple without being childishly big, and there’s enough information there to convince you to sign-up without overloading your with data. The images tell the story which is normally the quickest route to get information across - they say ’see this picture of people having fun, this is you, and all you need to do is print your pictures and you can capture this moment forever.’ Heck they had me sold! Shutterfly sign-up

Dealing with a Split Audience Well

These people have a very daring application - a web app for the financial industry - yikes! They have the problem that their user base comes from two very different backgrounds (lenders and borrowers). It’s a problem that Amigo has to overcome too (if indeed it is a problem). I think they deal with it well, the split screen idea works very well and their icons draw you to the right area straight away. Ambitious but it works. Zopa split screen

Lightning Fast Info

BlinkSale’s ‘Learn’ section is the fastest in the West. They just use big pictures of the app in action with very little explanation. I was surprised to see how quickly I understood the app, considering it’s fairly complex. The screenshots were genius. Be warned though, you can really only get away with this if your interface is super-easy to use and well sign-posted. Blinksale’s ‘Learn’ section

Best Overall Communication

This prize goes to Skype. Now I know that some people will argue that Flickr is an overall top performer too - and I agree - but someone has to win! Skype just has it all for me, The whole site is very short, sharp and to the point which makes me feel like there really is nothing to this ‘free telephony thing’ (right or wrong). While the winning feature has got to be the animation on the home page. Any animation that still makes sense in Korean really does deserve to win. Skype’s animation

If you’ve got your own nominations, add them in!

Click the header to watch the video clip.

(more…)

Now that we are happy with the basic concept of the logo it’s time to work on the colours and fonts/text etc. This is what Jason said:

After exploring some more type options I realized that my problem wasn’t with the type so much as the “G” specifically. While I did try a bunch of other type choices, I didn’t think that any of them were nearly as strong or as simple. So, instead I just ended up redrawing the “G” to read better (especially at small sizes) and look nicer all around.

After that I whipped up some colour combos. I think there are some really strong color choices here. All of these are striking and don’t bring to mind petrol signs anymore. Even though these are more colorful than the original ones, they still retain that simplicity due to the basic shapes and smooth type being used.

There are certain ones that really stand out for us (the yellow, orange, and blue coloured ones). We realised that we want the emphasis to be on the word ‘Amigo’ not on the smiley face and those three do that. We ask Jason to work up the blue one with some variations on secondary colours.

We did have one other concern. That because of the capital ‘G’ people might read it as ‘Ami Go’ instead of Amigo. Jason has agreed to fine tune the ones we chose so we’ll see what he comes back with!

Okay so we had a chat with Jason and he managed to convince us that this logo was the way forward. In his words:

This smiley gets the imagination going a bit more. I know we have been referring to it as a smiley, but when it’s not around all of the other similar logos, it begins to be more abstract. Not to the point where you would miss seeing a smiling face, but it isn’t hitting you over the head. There is something about the stark simplicity of this one that is most striking. The other thing is I think the smiley does is convey friendliness and simplicity very well. It also helps to illustrate and reinforce the name by implying there is a face (an amigo) behind this service.

We’re sold - where do we sign?

When you are not a designer making decisions on design work is ’so’ difficult. You may like a certain design, or combination of colours but does that mean that it’s good, right or even relevant for your app? You need to use other criteria to make your decision.

This is where your initial list of ‘words that are associated with your app’ really come into their own. If you know how you want your app to make people feel then your logo should be doing that from day one. If you remember the words were.

• Simple
• Professional yet friendly
• Approachable
• It’s easy, not complex
• A service for everyone

The smiley does that perfectly. Not only that but it’s intelligent, doesn’t look like anything else out there, and is inviting.

We’ve learned that it’s good to listen to your designer. You chose him or her for a reason and they are the professionals here so let them do their job. You can agree or disagree but respect their opinion - they’re usually right!