Tim Thompson's blog: June 2006 archive

The background to my quest

The reason I don't already know how Illustrator stands up as a tool to generate website template graphics is that, despite having designed websites for some years now, it was not until recently that I had the opportunity to learn a fully-fledged vector illustration program.

For many years I have been wanting to learn a professional illustration package such as Freehand or Illustrator, though or one reason or another, with all the twists and turns that life brings, I've never been able to justify the time learning one. Well, in 2003 I acquired my first personally owned copy of Macromedia Studio. I was very excited that it came with Freehand, and thought this would be the time to dive in. However, it was also becoming painfully obvious that Adobe Illustrator was winning the war of the illustration packages. Macromedia had not updated its Freehand for the Studio 2004 release, and soon thereafter Adobe announced it's acquisition of Macromedia - so it was a no brainer really - Freehand was being end-of-lifed, and I was going to have to jump ship to Illustrator if I was to make my learning time a worthwhile investment.

In 2005 I made my first ever purchase of the Adobe CS 2 suite. My decision to purchase (as opposed to 'acquire') was a moral one; I was coming out to work for a Christian organisation here in Mexico, and thought it only right (quite ironic really, as this is the country of pirated software, but hey). So here I am in 2006, and have found the time at last to devote a bit of learning to Illustrator.

Learning Illustrator

I started - as I do with learning any new software - by picking up one of the many tutorial books available. In my case, I used Adobe Illustrator CS2 @Work: Projects You Can Use on the Job from SAMS Publishing. I ran through a few lessons that would help me get up and running quickly, and very slowly, Illustrator began to transform from this strange, foreign, complicated looking program, into something which began to feel more familiar and intuitive.

I began to understand how the tools and palettes worked, and which would be the most useful for me. Slowly, I began to feel like I was the one in control of the creativity and not the limits of my knowledge. I spent time practising and coming to understand the pen tool; I began to learn how to apply strokes and fills, and then apply effects such as blending, warping, masking and so forth.

After having developed some competency with the application, I turned my attention to how to use these skills to generate the type of vector objects, text effects and so forth that I would want to produce in the development of a creative website template.

Creating website graphics with Illustrator

Encouragingly, Adobe provides all the 'basics' to easily allow you to output graphics to the web. As with Fireworks, Illustrator:

offers a 'Pixel Preview', so you can see how the image rasters to a 72dpi screen,
allows you to view colours according to their hexadecimal values (eg #33FF99), and
offers 'Slicing' support, so you can export later on.

Great, I thought. Surely it would just be a matter of creating the text and geometric objects that would compose the template, and using Illustrator's superior creative tools, I could add that bit more magic to my layouts. Well, it's about at this point, after two weeks of labouring with Illustrator and the hope of all its potential, that my dream came to an abrupt, disappointing end.

As I began to generate the first of the 'boxes' that would form the basic framework to the template (page content, section navigation, masthead etc), Illustrator very quickly began to show that it is not an application optimised for generating webpage layouts.

Below, like the strewn-out wreckage from a plane crash, are all the problems that I encountered along the way in trying to generate a website template from Illustrator:

Pixel-level graphics do not render correctly

You draw a box, apply a stroke and fill as you would like to see it exported. However, looking twice at the box, you notice that one of the strokes that makes up the border is in fact feathered to a depth of 2 pixels. Once you've noticed this, you can't un-notice it. This might not sound like a big issue, but often, when you're creating a clean graphic that need to blend invisibly with a CSS-rendered 1-pixel line, this is a big issue, and a seemly silly one for what is a pro-level graphics application.

The documentation explains how Illustrator rasterises according to the position of the rulers etc. But it seems a no-brainer to me. If you have 'pixel-preview' and 'snap-to-pixel' enabled, specify your units of measurement by pixels in the preferences - when drawing a 1-pixel line, you should get a 1-pixel line! I did find one work-around, which was to disable anti-aliasing from the preferences box, but then all my other graphics would be rendered in a 'jagged' way, so this was simply not an option. Frankly, Illustrator does not provide the pixel-level accuracy of Fireworks.

Colours are difficult to choose, mix and apply

No, I'm not a circus entertainer jumping through hoops - but Adobe wants you to be one. That's what it's like to select and mix colours using Illustrator. The colour mixing method is in fact common amongst Adobe apps, and I'm not convinced by it. I won't go too much into the ins-and-outs here (which would merit a blog in it's own right), it just seems that somehow mixing and choosing colours in Fireworks is so vastly easier than in Illustrator. And I mean vastly easier.

In Fireworks, you can just select a new colour from a pop-up swatch, mix it a bit to get a variant, and release to see your chosen colour applied. In Illustrator, for the most part, you have to have select a colour first, create a swatch from it, and then apply it. If you don't like the colour, it's not intuitive or quick to mix a variant.

I think this process of colour selection might be to do with Illustrator's print background - where choosing colours for print was and still is a much more complicated process. Thankfully, choosing colour for screen is much easier, and with Fireworks being a web-era screen-graphics program, it makes colour selection a pleasure rather than a chore.

You need that flexibility to play freely with colours when designing graphics for the web and Illustrator just doesn't provide it - and that's very, very frustrating.

There are no bitmap editing tools

Although a website template is composed predominantly of vector-based objects, it also often needs to incorporate bitmap images such as photographs. Personally, I don't need to tweak bitmap images that much - but I do often need to adjust their levels, colour settings etc, and this is a common task of mine. Although Illustrator allows you to import bitmaps, you just can't do that much with them. This means that Illustrator is dependent on having Photoshop open at the same time to tweak photos. But it gets a pain when you have to keep switching back-and-forth as you experiment with different settings.

Fireworks is a unique application in this respect, that it provides bitmap and vector editing in the same window, thus allowing you to work with photos and geometric objects at the same time. Without even having some of the most basic bitmap editing tools, Illustrator becomes cumbersome when needing to use in conjunction with Photoshop.

Support for applying patterns is limited

Of course, professional illustrators don't need pre-defined anything - they just get on and create what's in their imagination. The thing is, when creating web graphics, you often want to apply some kind of pattern to an object to give it differentiation. Patterns are handy, as they repeat accurately either horizontally or vertically (a useful characteristic in template development), and although Illustrator does support patterns through swatches, there are very few provided out-of-the box.

Fireworks on the other-hand provides a great many patterns together with a handy preview of them when you're selecting one. I considered creating a library of pattern swatches in Illustrator from the Fireworks patterns folder, but you still wouldn't get the preview facility - selecting a pattern from the swatch would be guess work.

Other li'l things

Here's a quick run-down of a few other little niggles I had when trying to use Illustrator to create a website template:

When experimenting with effects applied to objects, there is no way of quickly 'disabling' an effect, and re-enabling it later if you want to come back to it. Effects list in the 'Appearance' palette as they do in Firework's 'live effects' palette, but in Fireworks, you can choose to 'hide' or 'show' an effect - making the creative process much easier.
Dragging objects on-screen just drags their outline. This makes pixel positioning difficult. I often have to drag the object completely out of the way, then move it's outline back to get some semi-useful preview. I would like to find a preference to change this, but I can't.
In Fireworks, you can switch between standard Mac and PC gammas - this might be possible by creating different 'colour spaces' in Illustrator, but it's certainly not intuitive.

Conclusion

So there you have it: Firework is better for creating website templates, hands down.

This test was in no way intended to be a tirade against Illustrator - for the purpose of illustration, it is a very powerful tool (though I might still criticise its usability somewhat). I began this quest with the impression that Illustrator might be the right tool for the job in creating website templates, given its powerful vector illustration capabilities - however in this particular application it is by no means king of the hill.

You could say that I'm comparing one app against another, and not judging Illustrator by its own merits. However, I am trying to compare both apps against common tasks I perform as a web designer. There's no doubt in my mind that Illustrator offers creative controls that I would like Fireworks to have, but by virtue of it's design, if you're going to use Illustrator to produce a website template to your fussy creative satisfaction (which is important!), you're going to be one exhausted, emotionally drained designer by the end of it.

Salvage from the wreckage

The time spent learning wasn't entirely futile, however. I have come to apply much of what I learnt in Illustrator back to Fireworks. Although I don't think the pen tool is quite as flexible in Fireworks, I can now effectively use the pen and direct-selection tools in shaping paths, as they function in a very similar way to the equivalent tools in Illustrator - and if you're going to learn the pen tool, I think Illustrator is probably the better program for it.

Also I have come to understand better the types of work to which Illustrator lends itself. There are many occasions when I want to design small illustrations to complement a template, or add illustrations to particular articles in a webpage - contexts in which Illustrator would apply itself very well.

Final thoughts

In all, Fireworks is a very capable creative application for designing website templates. With superior usability and unique vector and bitmap editing tools within the same interface, the small ways in which it falls behind Illustrator can be forgiven. If something is so important that it needs to be done in Illustrator or another vector app, then that's an option, but for 95% of the task, Fireworks will do the job just as well, with none of the frustration of Illustrator, and in a fraction of the time.

If you found this article useful, or would like to provide feedback, please leave a comment in the space below.

Progress report - the 10 stage plan

Monday, 5 June 2006

I have been promising for sometime to show progress on the Milamex website as it is being developed. I'm writing this as part of a planned series of 'progress' blogs to keep you in touch with what I'm doing. As I put up samples and screenshots of my work, if you have any thoughts or reaction to my ideas that you think would be helpful, this is an opportunity where you can give me feedback.

In this blog I play a little catch-up, as I take you from when the project began back in March, to where I'm at today, but I break it down into nice sub-headed sections, so you can skip to the bits that interest you the most.

The Process

Every website and software development project has what's called a 'project lifecycle', where the development is rationalised into phases. One UK design agency used a 5-stage process when working with my former company, where each stage was branded with a word beginning with 'E'. As I recall, something like: 'Enlighten', 'Envisage', 'Enable', 'Execute' and 'Equip'. Only a design agency could come up with that!

Well, maybe I'm not quite so well branded, but I've identified 10 key stages in my journey of bringing the Milamex website to life. I've hammered through five of the stages so far, with a projected launch date for 'Version 1' of the website in mid-August.

Below I talk a little about what I've done in the five stages already completed.

Stage 1: Consultation

This is quite an important phase, primarily in building my relationship and trust with the client. What I want at the beginning is for the website to be a success at the end, so it's important that we're thinking on the same wavelength, to avoid mis-understandings, false expectations, and make the process a fun and constructive one.

It is here that I ask questions like: What does the client want from the website? Who is the audience? How will the website make a difference to the organisation? After discussion, I often have my own ideas to add, and we discuss all the ideas we bring to the table.

At the end of the primary consultation phase in March with Sally, the mission director, (I say primary, because consultation is really an ongoing process), I had developed a good idea of what's needed to be done. I discuss a little bit about this phase in my earlier post Discovering Milamex.

At this stage, I also take client through a few visuals - either past websites I have designed, websites of other organisations in a similar market, or some plain conceptual websites. One great site I look to for inspiration as a designer is CSS Zen Garden, a wonderful fountain of conceptual website designs that always challenges me to be more creative. I took Sally through a number of visuals, and it gave me a good idea for her taste of colours, designs and layouts etc.

Stage 2: Planning timescales and deliverables

If I were designing a website as a freelance project, it would be very important to plan how long a project would take, and what I could actually achieve in a given timeframe, not least from the point of view of charging for the work. However, with Milamex, I'm not quite so bound by these constraints, as I have ample time, and am not charging for it! However, I am driven by a desire to serve God, and want to deliver a website that glorifies Him.

To deliver a website that will best serve Milamex, one of the skill areas I need to improve on is in programming. Although I have built up a lot of programming experience in recent years (including having attained an MSc in Computing), one of the things I need to do for the Milamex website is develop some type of database-driven content management system (CMS), an area which I've not ventured much into in the past. My timescales therefore need to factor in time for training in this area.

In April, it was my plan to spend some weeks/months refreshing my programming knowledge and develop the skills to design a CMS. However, as reported in my Guatemala post, one decision I made after returning from the Latin Link retreat in early May, which I strongly feel was lead by God, was to deliver a website in phases, so we could get a basic version launched sooner, with a more advanced version delivered in stages thereafter.

The idea here is that whilst I am developing more advanced functionality for the website, a simpler version (which to the public eye, won't be that much simpler) could be live, serving Milamex sooner. The principle type of functionality I need to develop thereafter is one which will allow Milamex to maintain the website themselves, and whilst this is essential for the longer term, it needn't be in place for day one.

On discussion with Sally, we have planned to launch a 'Version 1' of the website sometime during mid-August this year, allowing me to work on much of the 'back-end' functionality in the months ahead.

Stage 3: Site architecture design

My favourate part would be to jump straight into the visual design of the website. I really enjoy the visually creative part, but I hang back on this, as the most important part of the website is of course the actual 'content'. As Vincent Flanders puts it 'Content is King'.

Having talked during the initial consultation about what information we are going to put on the website, and what we'd like it to do, at this stage I think about how to best structure that information in a heirarchy of pages and sub-folders.

There is a balance to be found, as in my highly logical mind, I am tempted to structure information into a deep nest of accurately categorised sub-folders. The problem here though is one of usability, as people don't really want to be clicking 4 or 5 levels deep to find the information they need. Likewise, I need to bear in mind how the website might grow, and don't want to be doing a major re-organising of the site because I had developed too rigid a structure from the start. Conversely though, I'm not a great fan of 'flat' websites, where every page sits at one level, with a long list to choose from. I do like some structure, so the trick was in finding a balance.

In early May, after working through a number of options with Sally, I came up with a structure that I think balanced well a folder hierarchy with the flexibility of a flat structure. See this Tree diagram (PDF), showing how I propose to break down each key page of the proposed website. The word 'Inicio' in the diagram refers to 'Homepage', which sits at the top of the structure.

Stage 4: Page layout design

Here I jump into my first bit of visual design. Though it could be left to a later stage, I think it's helpful for the client to visualise how the website might look. The website design process in its early stages is quite a theoretical one, with lots of discussion and writing, but where possible, I like to keep things as visual too, to keep the client 'inspired'.

Not to be confused with graphic design, page layout design shows how I might arrange the the various blocks of information on the page. In a website, you have common page areas such as the 'masthead', which may contain the branding, the navigation area, the main page body, and areas for auxiliary information such as search boxes. How this information is laid-out on the page is affected to some extent by the site architecture, so builds on the decisions made during that stage.

I produce page layouts as 'wireframe' diagrams, avoiding as much as possible any use of colour, styled text or other aesthetic consideration. I'm always amazed by this, but the one thing I consistenty experience in clients is how easily they get hung up over colours - almost as if that was more important than what will actually be on the website. Keeping diagrams as wireframes at this stage helps the client focus on what is important - I don't think you can really discuss colours effectively (and other graphics issues), until you have a better idea of what information is going to be on the page and how it's going to be arranged.

For Milamex I produced a proposed layout for the homepage, and two layouts for how the rest of the site would look. Click on the links below to see these wireframe diagrams (small GIF format images), then click on the 'back' button, to return to this page:

I presented these ideas to Sally in mid-May, and after some discussion the homepage idea was approved, and 'Page layout concept 2' was chosen as the template for the rest of the pages. Although, as ideas evolve, the final website may actually differ to some extent from what's shown here, these provide a good starting point from which to begin the design.

Stage 5: Page writing guidance

The last stage before I develop some proposed visual designs is to commission the actual writing of the pages themselves. Although the website is much more than an 'online brochure', there are still a fair wack of pages to write text for. The client is responsible for writing the text, though I want to bring my knowledge of how to write text for the web, before they start. I advise in ways to help make text as usable and readable as possible. I recommend on what key topics need to be discussed, how each page relates to the other, and how the information might be structured on the page. Furthermore, there are some tricks in text writing to improve listings on search engines like Google, which clients are always interested in learning.

With Milamex, I produced page writing guidance for each key page of the website (about 30 in total), as listed in the Tree diagram from Stage 3. I know that Sally, who will be doing the writing, is an extremely busy person. She doesn't really have the time to think from a blank slate on each of these pages, so the fact that I've done the ground work here, I believe will be a great help for her getting the pages written. I presented these to Sally a couple of weeks ago, so for a mid-August launch of Version 1, I'm hoping that she can have these pages back to me by about the end of July. But with all the deadlines that make that lovely 'swooshing' noise as they pass on by, we'll see if it happens ;-)

But at least while Sally's writing the pages, I can be getting on with my favourate bit, the design.

Where I'm at today

So here I am in early June, a mid-point of getting a 'Version 1' website complete. The remaining stages of the project are as follows:

Stage 6: Visual design concepts
Stage 7: Implementation - where I go ahead and develop the website
Stage 8: User testing
Stage 9: Bug fixing
Stage 10: Launch

The visual design stage is quite exciting for me, but it can also be a bit frustrating if I'm lacking in creative ideas! I plan to give Sally 3 or 4 visuals from which we can work. No doubt the choice of colours will be a lively topic, but at the end, we will have a template on which we can build the design of the new Milamex website.

In my next progress update, I will put up screenshots of some proposed visuals developed during Stage 6, and discuss the thinking behind them.

If you've not guessed by now, I'm quite a methodical person.

Earlier Posts

Archives

More

Illustrator vs Fireworks