Designing Menu Icons for Android Devices

Recently we took on a client project which entailed building an Android app. The client delivered to us a set of sixteen 30x30 pixel PNG icons for use in the app. The icons displayed well on low-density screen devices, such as the Samsung Moment, but they were not large enough to accurately retain detail on higher density screen based devices, e.g. HTC G1 and the Nexus One. The solution was to redraw the icons in vector format and size them for the various screen densities.

Android uses a number of resource directory qualifiers for controlling which density-specific icon will be displayed for each device. In this case I focused on creating icons for low-density (ldpi), medium-density (mdpi), and high-density (hdpi) screens. Effectively, this means three specific sizes of each icon are needed—36x36 pixel, 48x48 pixel, and 72x72 pixel icons. It is worth noting that the new icon document resolution should remain at 72 pixels/inch for all icons, including high-density screen icons (don’t be fooled by the android density numbers).

The Process

The process began by importing all sixteen icons onto a single document in Adobe Fireworks. I used Fireworks’ vector tools to retrace each icon. Rather than using the merging tools on the vector paths, I used Rogie King’s Alpha converted vector groups technique to preserve a high amount of editing for the icons. The new vector paths can be seen in the icons below.

After vectorizing all sixteen of the original icons, I then set out to resize them. The Android developer docs contain useful guidelines for creating menu icons with consistent visual weight across all devices.

To maintain pixel perfect appearance, tweaks will often need to be made when vectors are resized up or down. The alpha converted vector groups helped facilitate the tweaking process. The icons below are sized for their respective screen densities.

After all the icons are resized and exported as transparent PNG images, they must be placed in their respective folder in the resources directory—drawable-ldpi, drawable-mdpi, drawable-hdpi. The filenames must remain the same for each icon, but be stored in the mentioned density-specific resource directories. Android devices will load the proper resources according to the screen density of the device.

Below are a few ‘before and after’ views of a few icons that went through the process. The icons appear much crisper, have sharper edges, and are now fully transparent. The end result provides a much more professional looking Android App, whereas the icons enhance the menu navigation by providing the user with a clearer interpretation of each graphic symbol.

Get your type back in shape with these simple tricks

Type looking a little flabby? Overweight? Want to give it a kick in the pants? Take a look at some of these tricks to really give your web type a workout.

Refine the Windows physique

Looking to make your type render a bit better for your Windows and Linux users? Try text-rendering: optimizeLegibility;. It will enable ligatures and kerning tables in the font file making the type look extra nice. It takes the text a little longer to load which could be a problem. It’s best to use it on headers, especially on those @font-face fonts, and refrain from using it on really large blocks of text.

Shed some Webkit weight

Everyone’s reversed Webkit type has a little extra weight in the hips. -webkit-font-smoothing: antialiased; will help you lose a little of that weight around the middle by using antialias rendering instead of the default subpixel rendering. It will make type just a hairline thiner when using light type on a dark background. Read -webkit-font-smoothing reloaded and check out the test page for more information.

Remove those pesky widows

Have a problem with widows? Use jQWidont to zap those problem spots away. It will remove all those pesky widows for you by inserting a non-breaking space right before the last word.

Get some rhythm in your step

Create rhythm the easy way. Try using tools like typograph and Modular Scale to create a nice flow within your type. Both use traditional type scales to calculate sizes to help with your vertical spacing.

Feel Justified

Using justified type on the web can sometimes be a disaster. Hyphenator and text-justify: newspaper; (Only in IE - WHAT?) will help make sure that you’re shaping up the word-spacing and not letting it get too big. Hyphenator adds in semantic soft hyphens for you but it could be dangerous leaving your hyphenating up to a script. text-justify: newspaper; will adjust the spacing between letters and words instead of relaying solely on word-spacing.

The Copycopter logo process

My process for designing logos isn’t much different than the process that I use to design for the web. It starts with a bit of research and sketching and then a whole lot of refinement. The Copycopter logo will serve as a case study as I travel through my process.

Stage 1: Research & information gathering

I start by gathering information, a description and a list of adjectives, about the company, product, etc. As the client talks, I take down notes of words or phrases that I feel are important themes. I ask a ton of questions ranging from stupid to hard to answer. Why do they need a logo? What kind of personality should it have? Where is it going to be used?

Then I start looking for real world examples—photography, illustration, typography and design—that convey the attitude, personality, and any relevant visual elements. I stay away from looking at any other logos as it tends to give me tunnel vision on those examples. When I’m done, I’ll throw all these files in a folder for reference later in the process.

In the case of Copycopter, this was a bit easier. I had already designed the interface for the app so I already knew a good bit about what it was and the personality we wanted associated with it. It needed to have a helicopter or at least part of a helicopter in some way since it wasn’t reflected in the apps interface. This direction allowed me to really focus my search.

Stage 2: Sketching & idea generation

Sketching is the most important step in the logo process for me. It allows me to document a bunch of logo ideas really quickly. I get rid of the attachment that I have for my first idea and get all the bad ideas out of my head.

I fill up between two to four pages in my sketchbook with concepts. It’s a habit that I picked up at my first design gig, my art director demanded at least three pages. Each sketch should only take a half a minute and it should only take you an hour or two to get all your ideas down. While sketching I usually have the reference material that I just collected in-front of me and often continue the research while sketching. Don’t worry about the quality of your sketches or the quality of the concept while doing this. The time it takes to do one sketch allows for a shotgun approach. I’ve found doing this dump of ideas produces a better overall product.

I stop when the ideas that I am generating seem consistently useless. If I am struggling with ideas or want to dig deeper into an idea, I’ll start word association drills. This, then, leads to more sketching and research.

Stage 3: Selection

At this point, I narrow down the sketches to 3–5 of my best concepts and fire up Illustrator (my vector tool of choice) to mock them up. I’m still trying to work through these quickly so I’m not being exact with my vector points just yet.

I’ll stick to a dark gray usually during this process, which makes me concentrate on quickly seeing which concept could be the one that I really want to move forward with instead of focusing on color. This process also assures the logo will work in one color. If I do need two colors, I will use shades of gray. If the logo is a symbol, I will also start to pair it with typefaces.

In the case of Copycopter, I thought that one of my sketches was so on target that I took a photo of it with my phone and traced it in Illustrator. For the type, I was sticking to chunky sans-serifs and handwritten scripts. Both have a quirky friendly feel which is what the goal of the logo was. I used the color scheme that had already been defined in the web app instead of starting with gray.

At the end of this stage, when I have something that I think resembles the direction I want to go, I show the client. I only show the client one concept—the one I know is the best choice. The client was in-house for Copycopter and I was already showing the concepts that I had going.

Stage 4: Refinement

The refinement stage is all about fine-tuning the nitty-gritty details. I start adding color, refine the vector points and hone in on the other details in the logo. I really focus on the type, editing any characters that I don’t like or think could fit better with some simple edits. Most importantly, all the characters in the logo need to be kerned properly.

I really tried to refine the angle of flight for the Copycopter logo. The copter needed to be somewhat dynamic but not so much that it looked odd. It started out on a more drastic slope so I rotated it slightly. Getting the right angle and thickness right for both the blades and the tail made big improvements to the symbol.

This is of course an ideal process flow, it rarely is as linear as I have made it sound here. For example if I don’t feel any of my mockups I did in Illustrator are working, I’ll go back to sketching. I did this multiple times while trying to do the Copycopter logo. Also, because this was a thoughtbot project, I did not have to deal with the demands of a client. Dealing with demanding clients and the feedback they provide, the logo design process will often change from the example stated above.

If you haven’t already, check out the Copycopter logo in its environment at copycopter.com.

Dear Photoshop user, meet Fireworks!

Isn’t it time that we have a web design application that speeds up and enhances our web design workflow? Well listen up Photoshop user, let me introduce you to Adobe Fireworks.

Adobe Fireworks is a powerful tool for creating web and screen graphics. With CSS3’s incredible ability to style page elements that look identical to the hi-fidelity mockups that designers create these days, we should have a design tool that is as flexible as our stylesheets. Adobe Fireworks is better aligned with the way web designers work in preparation for front-end development.

For example, I’ve always questioned Adobe Photoshop’s inability to quickly adjust rounded corners without redrawing the entire shape. Shouldn’t it be more like CSS in which the designer can quickly change the rounded corners by tweaking a pixel value? Wouldn’t it be great if we could individually define the pixel value for each rounded corner? It would be awesome if we could define a set of styles (buttons, buttons-effects, text shadows, font styles, etc.) to be saved and applied at any time—similar to Sass mixins. Did you know these features are all available in Adobe Fireworks!?

When a design mockup is complete, Photoshop’s ability to edit the existing elements within the design is far less flexible than that of Adobe Fireworks. Adobe Photoshop saves layers and paths in a destructive bitmap-only manner, whereas Fireworks uses full vector paths combined with true bitmap editing, meaning you always get accurate control and preserved editing all the way down to the pixel level.

It is by this squaring of the circle - the combination of the best of both vector and bitmap - that users will truly be enabled to do the undoable. -Tom Arah

I’ll go over a few of the stand-out features of Adobe Fireworks CS5 that really help it excel in areas where Photoshop falls short, and also touch upon how Adobe Fireworks can enhance the web design workflow.

The Properties Panel

Dear Photoshop user, learn the Properties panel. The Properties panel is where you will spend much of your time styling elements. It allows for easy repositioning and resizing of elements to achieve pixel-perfect alignment. You can adjust fill color and gradients, stroke weight and color, and add filter effects (equivalent to Photoshop’s Layer Style effects).

Quickly Change Rounded Corners

Dear Photoshop user, learn the Auto Shape panel. The Auto Shape panel is wicked for tweaking the corners of a rounded rectangle. It’s similar to the way we work with CSS—it gives the designer the ability to easily tweak the corner-radius to find which size rounded corners work best with the design.

Styles Panel

Dear Photoshop user, learn the Styles panel. The Styles panel allows you the easily save button styles, fill & stroke styles, text styles, and filter effects. They are easy to apply to new page elements and they can even be saved globally for use on new projects. If you’ve used Sass, think of these as mixins.

Align Panel

Dear Photoshop user, learn the Align panel. As a Photoshop user, you are probably used to the time-consuming process of manually aligning elements by hand. Fireworks solves this with an awesome alignment panel (super time saver). You can align or distribute based on the entire canvas or individual objects. The panel even allows you to set a specific pixel amount to space objects apart (think CSS margins).

Extensions

Dear new Fireworks user, use extensions. Given that we’re talking about how Adobe Fireworks can improve your design workflow, there are a number of awesome extensions that will really light the gunpowder under your ass.

• Copy To Clipboard Command Pack - Matt Stow made these extensions to quickly copy fill and stroke colors as either HEX or RGB values. The pack also includes a command to copy CSS dimensions to the clipboard.
• Commands Panel - Pair the above extension with John Dunning’s Commands panel and you’ve got a quick way to access these useful commands.
• Guides Panel - A must have for creating and saving the guide-based grids you use on a project-by-project basis.

The future to come

Adobe Fireworks has a bright future so long as development continues to focus on being a core design application for web and screen devices—which I have no doubt it will. Fireworks is completely extensible with Javascript as well, which puts a lot of power in the hands of users. Eventually I would like to see simple commands created for Fireworks to generate lines of CSS for easy pasting directly into stylesheets. Imagine how convenient it would be if we could run a single command that would generate a css declaration block from a screen element (e.g. background color/gradient, height, width, rounded corners, box-shadows, inset-box-shadows, etc.) As web designers, we should be vocal about our specific needs. We have an opportunity, as Fireworks matures, to be vocal about shaping the product into something even more powerful and better suited to our evolving workflows.

Are you willing to make the switch?

Quick Resources

• Aaron Beall’s Extensions
• John Dunning’s Extensions
• Matt Stow’s Extensions

Illustration by Kevin Burg

Introducing: Design With Boston

Design With Boston is a new meetup for web designers in and around the Boston area. It will be held at 7PM on the first Thursday of every month at the thoughtbot offices. We are located at 41 Winter Street, 3rd Floor, 02108. Everyone with an interest in web design is welcome, from beginners to experts.

The Format

Doors open at 7. Around 7:30 we’ll have a short 30 minute presentation from a scheduled speaker. The inaugural meetup will be featuring Jay Contonio speaking about the importance of content in a talk titled “Content isn’t lorem ipsum.” If you’re interested in speaking you can message me on twitter, drop me a line, or just catch me in person. Following the talk we’ll have some food delivered and hang out till you feel like leaving. Bring your laptop if you’d like to share any work or even help others work on their projects. If you’re familiar with the boston.rb hackfests our design meetups will be structured the same way, but for us designers.

Why

This meetup was born in order to solve a few different problems I have. First and foremost, I know there are many talented and interesting web designers around Boston but I don’t know enough of them personally. This is something that I’ve always wanted and instead of waiting to run into designers one at a time here and there, I’m organizing this event to facilitate new connections.

Another problem I’ve had as a local, successful, and fully employed web designer is having many companies or individuals seeking my help in finding good web designers to employ. Most of these jobs would appeal to me if I were looking for work so I’m always eager to help other designers in need. Sadly, I often don’t know of any designers looking for work but surely there are plenty of web designers looking for new opportunities. Hopefully some great work can be found through our meetups.

My final reason for putting this event together is to grow and become a better designer by surrounding myself with other good designers. I work with 4 great designers and talk to numerous others online daily. However, I feel that being able to mingle with a multitude of web designers face to face will prove to be invaluable.

Want to Come?

If you want to come just checkout the site and click “I’m Coming!” or “RSVP”. It will authenticate with your twitter account and add your twitter handle to a list of people that have also RSVP’d.

Stay up to date

Be sure to follow our twitter account for any changes in the schedule, location, or important news about the monthly meetup. Thanks for your interest!