Meg Robichaud

Updating Icons

One of my latest tasks for Placeling was to create a gas station icon to fit in an existing set of icons.

The original icons:

Fairly obvious requirements in order to fit the style: beige colour scheme, some perspective, hint at retro feel.

Per usual, I started in the sketch book.

With a little feedback, I decided that just the handle was the way to go. I thought it turned out alright.

Unfortunately, not everyone could identify what it was immediately (oh no!). Back to the drawing board. That’s okay, it’s nice to have options.

Feedback was split down the middle, everyone seemed to have strong opinions towards one or the other. Real helpful. Eventually I boiled it down; most prefer the close up aesthetically, but worry that it’s not as easy to identify. Ultimately, it’s more important to work then it is to look good, so I suppose that the one on the left is the clear winner, right?

Unless there’s a third option.
Too often, designers make the hand off to a client, wash their hands of it and never look at it again. It is important to remind yourself that this is your work, these are your clients; and you want the very best for both of them. Just because your clients are satisfied with what you did for them months ago, doesn’t mean that you should be. If you see an opportunity to improve, do it - if you see a problem, fix it (please don’t wait to be asked).

I’m sure you can see where I’m going with this. The issue with my icon set, is the constraints in the colour scheme. I know it’s a problem for this icon, and will continue to cause problems with each icon that is added to the set. Let’s fix this.

The obvious place to start: adding colour

Some of them look great full colour…

But as a set, I find the colours to be awkward.

Try again. This time, I only added a *smidgin* of colour.

Better… But what if it’s not the color that’s the problem? What if I can solve this with just the contrast?

Or even, add colour AND contrast??

Awesome. Now. I’ve been staring at these for so long that I have no idea which one looks good.

20 Jan 11 short url

Gas Station Icon

Working on a “gas station” icon for this set:

Turns out there’s a lot of different types of gas pumps…
{I’m leaning towards the one in the top right corner}

Thoughts? Comments? Concerns?

17 Jan 7 short url

Cool! I made a loading GIF!

(They are not easy?)

3 Dec 11 short url

Updated the Placeling login page per the ever helpful community, forrst.

I made the following changes:

Changed the outline of the signup buttons such that they look extruded, and like you should press them. As Andres Botero pointed out, they looked like the had already been pressed - which is particularly bad on a touch screen.
Andres also mentioned that the submit button didn’t look like you should necessarily be able to press it - fixed!
Changed the colour of underside of the ribbon to match the outer side, per Joshua Hibbert’s advice - I ended up mucking with the shadows on it too.
Added a “forgot your password” button that shows up when the username doesn’t work
Changed the Logotype to white and matched the styling to the cancel button (per Joshua’s advice, again)
Changed the cancel button such that it matches the rest of the design better
Took out some of the grunge in the top bar
… moved the clouds around (I am never happy with where the clouds are …)
Changed rope to wrap the edge better
fixed alignment on password & username
Changed “forget” to “forgot”
Fixed alignment on forgot password button
Fixed alignment & corner radius of submit button
Fixed alignment & corner radius of signup buttons
Changed error message

Thoughts? Comments? Concerns?

27 Oct 13 short url

Working on the iphone gem for Placeling

It’s been a lot of fun making the iphone gem for placeling - instagram really paved the way for some highly detailed, beautiful icons in that space. It’s cool to take a turn trying to make one. So here’s what I came up with…

Since it’s a location-based bookmarking app, I went with a map. Since the existing identity is fairly fun and whimsical, I interpreted the map as such.

There were a few other options that I was considering. I’m particularly fond of the sepia-toned city, with the bright red marker. However, I’m worried that it’s confusing when the logo is two markers.

Thoughts? Comments? Concerns?

23 Oct 17 short url

Placeling Thus Far

You’ve probably seen the these three before (because you all keep up with my comings and goings so diligently .. right??) - I had posted them earlier. They are actually the same page in three different states, for when you arrive at a place, and you haven’t been there before (first), look at a place that you have marked, on your map, but haven’t done anything with (second), and when you have contributed or starred information for a place (third).

I’ve made the following updates:

Refined the typography
removed a few unnecessary elements
polished the map
polished the photos
designed some new custom icons to fit the icon set designed for another page
Updated the “bookmark it” button to “Place it”

(A close up of the new icons you say? Don’t mind if I do.)

I’ve also got a new page for you: Profile! The goal is to give information and stats about the user at the top, and then lead into recent activity.

Finally, there is the home page (in retrospect, I probably should have lead with this…)

Thoughts? Comments? Concerns?

18 Oct 6 short url

Map Markers: Surprising Challenge

Today I spent a good deal of my day making the Placeling map markers - and was very surprised to find out how difficult the are to make properly (and even more surprised to realize that google was the one that nailed it).

First, you have to figure out the shape - not an easy task. There are four major competing ideas:

the tap area has to be sufficient that you can easily tap the location;
the point has to be narrow enough such that it is clear where the marker is actually pointing
the whole marker has to be small enough that it prevents crowding when you zoom out of a heavily populated area
it looks *so* much better when the markers are short and fat

Luckily I anticipated these issues and was able to use the markers from the logo as a starting point:

Only a few adjustments required; added a brown outline to the bottom, flattened the bottom out a bit, added appropriate shadows… (okay actually I tried a pile of other stuff, before I came back and decided that I had it right the first time)

While the highlight and gradient look nice, they were actually a critical part of the functionality. The highlight allows multiple markers to lay on top of each other without losing definition. The gradient contributes to this, while also helping to define the specific location the marker is indicating.

and it just so happens that I need two markers (one for “My map” and one for comparing my map to a friends)..

Now here’s the challenge..

What do you do when both people have marked the same place..?

So far.. I’m stuck. I’ve got a lot of failed markers, and a lot of mediocre markers, but nothing is knocking it out of the park. I’m not sure if you know this about me, but I like to mark it out of the park…

(Okay, you don’t have to comment on the checkered ones, I know that they aren’t working, but I just kind of like the look of them - you know for something some day, they’ll be just right)

Thoughts?

*EDIT*

I got so much great feedback from tumblr, twitter AND forrst that I thought I would quickly post a few more variations (based on all of YOUR ideas!)