Massimo is a web and graphic designer and front-end developer based in Roma, Italy.
photo credit: listentoreason
An icon system can often become central design element in your web project. You can find a lot of free or commercial icon sets on the web, and they are often included in major CSS frameworks (Bootstrap 3 Glyphicons, is a perfect example).
Sometimes, however, you may need a specific glyphs not included in a generic set. Or you may just want to better coordinate the design of your icons with the other design elements of your project. In these cases you’ll need to draw a new icon set from scratch.
There are two widely-used methods to add a set of icons to your projects:
- Web font
Today I’m going to cover web fonts. We’ll cover the use of SVG in another article.
Traditionally classic font creation had been a difficult and demanding task, but thankfully building icon font sets , has become considerably easier than it once was thanks to easy online tools such as IcoMoon, Fontastic, or Fontello. Each allows you to build a font from either ‘cherry-picking’ pre-built icons from public libraries, or by uploading SVG files you’ve prepared yourself.
To build your own font, the first step is to draw icons – we will use Illustrator for this task – and then save them as SVG.
Find your design style
Before you start drawing, you need to define style properties for your glyphs such as stroke sizes, grid proportions and so on.
Begin by doing some readability test at different sizes and build a template you will use to draw all your glyphs. It’s no use designing finely-detailed icons that don’t work at lower resolutions.
It’s also very useful to sketch your font before drawing, also a very rough sketch (like the one below) will help you to find ideas for all the symbols you need.
You can then to decide the grid size for your glyph: my tip is to not draw directly at your target size (for example 16x16px) as well as at very big sizes. I’ve found that a square of 60-80px side is often good for me. Scaling up or down from this size is generally successful.
Of course, this is not a ‘set-in-stone’ type rule: project needs and experience will change on a case by case basis.
For this article, I chose to draw my icons with a stroke of 8px, without fill and set inside a grid of 64x64px.
Illustrator artboards are very useful for this job: you can draw each glyph in a different artboard, keeping each in a single file. The artboards can be rearranged, renamed and can be exported as standalone SVG files (which is precisely what we need for IcoMoon).
Each artboard can also have independent axis coordinates, that will be very valuable for objects alignment, as we will see later.
We can now start creating a new 64x64px Illustrator document:
Note that you can start create all the artboards you need using the Number of Artboards option: I prefer to add artboards as I need them, but there is no reason why you can’t create all your artboards first.
If you’ve spent your career dealing with web standards, and enjoyed watching the progressive disappearance of legacy browsers, your first contact with email newsletter building will be painful. You’re going to need to throw out a lot of your golden rules to get the compatibility you’ll need with email clients.
In fact, while in 2013 the Standard Web Project Team had been able to say “Our Work Here is Done”, the road to email standards still appears to be very long indeed.
You can see an example of how email clients render the same content looking at Email Standard Project Acid tests. In the screenshot below, you can see how the same mail appears in Apple Mail and Gmail:
Email design does require you to reinvent some of your skills, but don’t consider this as a limit to your creativity – instead treat it as a real challenge.
So, let’s start by summarizing the main points of email design to grant you maximum email-clients compatibility:
- use CSS3 rules and selectors
- use pseudo selectors or pseudo elements
- use floating or positioned objects
- use background images
- use forms
- use linked web fonts
- use tables for layout
- use inline CSS rules
- limit email content width to around 600px
Email building workflow
Set up a prototype
As you would with a standard web project, I recommend you start by drawing a prototype. This will help you to make each graphic adjustment you need and will help you present your work to your client before you start coding.
In this phase you’ll want to create a design that:
- catches customer attention
- draws them through to the end of the mail (you have a maximum of 8-10 seconds before a reader decides to delete a mail or not)
- brings them to some call to action (i.e. the “Buy now” or “Contact us” buttons)
You can find a lot of inspiration on the web. I’ve found some good resources are htmlemaildesigns.com, Really Good Emails or Newsletter monitor, provided by ContactLab and these are mainly focused on marketing strategies.
Coding Your Email
As we said earlier, email is rendered by mail clients in many very different ways: our efforts must be directed to cancel out, or at least to minimize, these variations.
Fortunately, emails tend to have a relatively simple structure, and in most cases this work is not particularly complicated.
I’ve always used Fireworks for prototyping. I found it simpler and more efficient for this job, while also more oriented to web graphics than its ‘competitor’ Photoshop. Fireworks has also a strong network of developers who created many plug-ins that can significantly increase its functionality.
But one of the major elements that drew me to prefer Fireworks is its ability to create multi page documents: it makes sharing resources and styles among every page of the prototype very easy and allows you to produce a unique PDF document that’s ready to be sent to the client for approval.
When Adobe decided to discontinue Fireworks development, I began to consider Illustrator for prototyping. Illustrator does allow for multi page document creation and incorporates a number of features that make it particularly suitable for this job.
Let’s compare Fireworks, Illustrator and Photoshop features for prototyping:
Feature Illustrator CC 2014 Photoshop CC 2014 Fireworks CS6 Multi page document Yes No Yes Creation of grid system guides Built-in With plug-in With plug-in Creation of interactive prototypes No No Yes Exporting as multipage pdf Yes – Yes
The Creation of grid system guides feature concerns the ability to build a set of guides to represent a grid system layout: both Photoshop and Fireworks need a plug-in to do this, while in Illustrator we can use the built-in “Split into grid” command.
Creation of interactive prototypes regards a very useful feature that is missing both in Illustrator and in Photoshop. In Fireworks you can create links through prototype pages to simulate navigation: this makes very easy the building of multi-page interactive prototypes. Perhaps you can find some workaround in Illustrator (you can also edit PDF in Acrobat adding navigation links), but arguably not with the same easy workflow offered by Fireworks.
Despite this, both Illustrator and Photoshop have great design capabilities, so the transition from Fireworks will surely not be so painful.
Let’s start with Illustrator
The first step is to create a new document.
When I need to create charts, my first choice is Google Charts or another dedicated library. Sometimes, though, I need some specific features that I can’t find there. In these cases, SVG images prove to be very valuable.
Recently, I had to build a report page that was able to show a map of Italy in which each region had a different color tone according to some values retrieved from a database. Thanks to SVG, this task was very easy.
Creating the SVG Map in Illustrator
First, I drew a map of Italy with Illustrator:
Every region is drawn as a single object, and each of them has its own level, with a name matching the code used in the database to identify its relative data (for example: “tos” for Tuscany).
Finally the map must be saved as an SVG file. You have to pay attention to set the “CSS property” option to “Style Elements” in Illustrator, as shown below:
Opening the file just created, you will see it contains a set of
gtags whose IDs match the names of Illustrator levels.
Building our HTML File
Each item contained in
gtags has a
st0class so that the
fillCSS properties can be assigned to them:
If you try to change those values, the map will change immediately: