Skip to main page content Navigation follows
Facebook
Linked In

Illustrator vs Fireworks

Please note: this article is now out of date. However, as of CS4 I still largely concur with many of my findings back in 2006. My view as of today (March 2010) is that Fireworks - even though it appears Adobe markets it more as prototyping software - is still the superior program for generating web template graphics. Photoshop is a bitmap editor and Illustrator is for generating vector illustrations. I think the basic lesson to take away from the comparison here which still stands true today is: 'use the right tool for the right job'.

Shameless plug: drop by Stem Pixel, my web design and development business. All examples of my websites were built using Fireworks, Photoshop and Illustrator, allowing each application be true to itself. If you like my work, I'm available for hire.

So, you're a web designer. You use Macromedia Fireworks to generate your website templates, but have been frustrated that you want a bit more creativity in your layouts. You know Fireworks can generate the sort of vector graphics that might give your work that bit more flair, but lets face it, when it comes to vectors, Adobe Illustrator is King. And what's the point of investing precious time learning the vector tools of Fireworks which will no doubt be more limited in function than Illustrator? Well, if you're that person, then you'd be something like me.

Yes, there is Flash too, which generates vectors very intuitively - but that orients its toolset for animation. If you want an application which will give you the greatest freedom for static creatives, Illustrator has to be the tool for the job.

So if Illustrator is so good, why not use Illustrator rather than Fireworks to generate website templates? Well, this is a question that has been on my mind for sometime, so I sought to find an answer on the internet. Unfortunately, I couldn't find any comparisons that addressed the specific questions that I had, so set out to do a comparison of my own, and this is the result of my findings.

I do not do a full review of each application, rather I just pick up on the points of interest as I sought to try to achieve with Illustrator the types of tasks I might want to do in generating creative website layouts.

For the comparison I used Illustrator CS 2, and Fireworks MX 2004.

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.

28 Comment(s):

Blogger Martin said...

What do you think to the Gnu's not UNIX image manipulation program (or GIMP for short)? Monday, July 03, 2006 2:30:00 AM  

Blogger Tim said...

I've not used GIMP so can't really comment with any authority, but I believe it's predominantly a bitmap editor - more an open source challenger to Photoshop. I read a little about it on the website, and it seems that vector editing is there, but it's a bit in it's infancy.

The thing I came to appreciate about Fireworks through the comparison is that it is written from the ground up to meet the needs of the web designer - the whole user interface, and the type of features it provides. I guess to have ultimate creative freedom, you would use a number of different sofware packages in combination. However, if I could only take one away with me on a desert island, for the purposes of web design, I think it would have to be Fireworks. Monday, July 03, 2006 12:11:00 PM  

Anonymous Ken said...

Thanks for a great review. This was exactly what I was looking for. I'm a web designer and you are doing the same thing I am doing. I'm very fluent with Fireworks but "thought" that Illustrator would be the application more suited. Wrong, Fireworks is a proffesional applications and it's use of Photoshop plug in's makes it my app of choice. There are some great books out on Fireworks and the results are proffesional. Thank you for saving me a lot time and unnecessary learning.

Ken Vaughn
IT Director
BS&R Design & Supplies
ken@bsrequipment.com Wednesday, July 12, 2006 3:30:00 PM  

Anonymous Louis said...

Found this article while Googling in my spare time to see what people think of Fireworks vs Illustrator ... and I found myself nodding for each point. Last March, I had the same thoughts - Both Photoshop and Fireworks are very bitmap-focused, yet web design primarily deals with rendered layers and objects, so wouldn't Illustrator serve better? As I saw the artboard-style layout, I thought it would serve well, but proceeded to encounter the same problems you highlighted. From lines appearing fuzzy (and disabling anti-aliasing to get the jaggies) to the odd problems with the text tools ... it was a mess.

I continue to do most of my web design work in Fireworks 8, though I do wish that Fireworks made it more natural to resize objects, so I could use simply the black arrow tool instead of doing CTRL+T to transform shapes (or painfully select each of the points with the white arrow).

One alternative that I haven't yet tried - Using InDesign for text and mockup, with Photoshop and Illustrator Smart Objects, and transforming my InDesign document to XHTML and CSS in GoLive.

Although InDesign has awesome text tools - and styles (!) - it still shares some of the problems you mentioned with Illustrator - primarily colour swatches and its print focus. Although, it's more friendly than Illustrator ... it's just not as simple as Fireworks.

I guess we'll both have to wait to see what the new Adobe lineup will be like in 2007. Perhaps they'll start to merge the products, for the best of both? (Or more likely, they'll get it half right and we'll have other problems to work around. Sigh.) Monday, August 21, 2006 10:44:00 PM  

Anonymous Robert Toth said...

Thanks for the useful information.
Robert.
Professional Website templates Thursday, August 31, 2006 4:58:00 AM  

Anonymous Uhl said...

Great comparison! I too have come to the same conclusions you have. I've been using Fireworks (for Windows) since version 4! I've attempted to use Illustrator multiple times, yet always fall back to Fireworks out of frustration.

It's just easier to do the the things I need it to do. I do user interface design and need a tool that blends bitmap editing with vector-based drawing.

I agree with your comment about the complexity of color selection in Illustrator. Don't even get me started on gradients! Saturday, October 07, 2006 5:37:00 PM  

Anonymous Anonymous said...

Thank you so much for this great comparison from a professional. I have started doing design as well recently and had a chance to use both Fireworks and Illustrator. I would like to add one point, in Fireworks you can have flexibility and efficiency by using symbols. Say your design is going to have lots of elements that should look the same. For example, you have lots of buttons that should have the same style(pin-shaped background), you can make the background into a symbol and create buttons using that symbol, and later on you want to change all the buttons to a square-shaped background, you make the change in one place and voila all the other buttons take on the new look. This makes it easy to experiment with different styles. You cannot do this sort of thing inside Illustrator even though it has something also called "symbol". Another real life example, in my work I had to design about 50 pages of content, on each page I have photos or notes that are clipped to a panel; and one day my boss looked at it and says "please remove the paper clip, I don't want to see it". I simply open up the symbol and hide the layer, and voila the paper clip disappears from all pages. With illustrator, I probably would have to go in to each place and make some change. Wednesday, December 06, 2006 9:55:00 AM  

Anonymous Anonymous said...

Oh, I forgot about another thing about Illustrator. I cannot preview the font as I move my mouse down the list of fonts - I don't have any idea of what an unfamiliar font would look like until I select it. So to select the right font, you would have to click and select lots and lots more times than in Fireworks. Wednesday, December 06, 2006 10:04:00 AM  

Anonymous Anonymous said...

Excellent review. I am just learning illustrator, but use Fireworks all of the time. I was searching for a comparison and this is what I was looking for
thanks Sunday, September 09, 2007 1:13:00 PM  

Blogger Nick Farina said...

Oh my LORD, I couldn't agree more with your points. Thanks for saving me 2 more weeks of frustration! Tuesday, June 10, 2008 8:47:00 PM  

Anonymous Ams said...

Hi ppl,

I used both Illustrator and Fireworks in the past years.

I am a software developer but vector graphics is one of my hobbies. Personally I find both tools interesting, but my favorite software is Xara.

I would recommend it to anyone without thinking more than a second. The only thing that AI and FW have and Xara lacks is the famous FW to XAML tool, or AI to XAML tool, ideal for WPF applications.

Andrei Thursday, June 12, 2008 4:58:00 AM  

Anonymous battery said...

[…] Read the rest of this great post here […] Friday, June 13, 2008 2:37:00 AM  

Anonymous Rodislav said...

maybe you can`t use illustrator correctly!?.. Tuesday, June 24, 2008 9:10:00 AM  

Blogger Matt said...

Just like everyone else who has posted here, I thank you for a fantastic comparison and for helping me feel better for thinking the exact same way. I truly thought that I needed to learn Illustrator more in depth to be a true professional, but it's not the case. I'll feel better as I continue to use the more intuitive Fireworks... Sunday, June 29, 2008 9:36:00 PM  

Anonymous Anonymous said...

Hi Tim,

Thanks a lot for doing this comparison. I had no idea that Fireworks was such a great product. I was going to start learning illustrator and you have just saved me a LOT of time that I might have wasted.

Thanks Again
Vivek..... Tuesday, July 29, 2008 6:13:00 AM  

Anonymous Daniel said...

I was just deciding which suite to buy, the one with fireworks, or the one without. I didn't know what fireworks was supposed to do or how it different from illustrator. As I do interface/web design, it was really helpful for me to read this! Thanks!!! Thursday, August 21, 2008 4:50:00 PM  

Anonymous Nick K. said...

Thank you, I can now go to bed now that this quandary has been rooted out. :-) Tuesday, February 03, 2009 10:17:00 PM  

Anonymous Martin said...

Thank you for doing this comparison - it helps me a lot in deciding where to focus my energy.. I, like yourself, assumed that Illustrator would offer the best possibilities for creating vector-based graphics for web, but you've saved me a lot of time and grief with this. I'm gonna dive straight into Fireworks now. Thanks again.. Thursday, April 23, 2009 12:39:00 PM  

Anonymous r4nd0msh1t said...

This goes out to the person talking about gimp.

Gimp, should only be used till you can afford Photoshop (gimp is mediocre compared to the ability's of Photoshop)

The purpose of Photoshop and Gimp are for Bitmaps, they are not the key to making a good website (Fireworks&Illustrator) Are the key =)

Btw, What are your inputs on using Illustrator for button graphics? Thursday, April 30, 2009 5:30:00 PM  

Blogger shaheen said...

thank you very much for this comparison. I read the whole thing.
This was exactly what I wanted. Thursday, August 13, 2009 3:11:00 PM  

Anonymous Ponsecke said...

Hello,

I'm very new to webdesign. I'm just following a course dremweaver. After this course I wanted to follow either Fireworks-course or Illustrator course. I'm using CS3. Are the things about illustrator in comparison with fireworks, as mentioned in the original message, still true?

Thanx Friday, October 02, 2009 2:16:00 AM  

Blogger Adad64 said...

Thank you very much! I was just wondering which would be better for website templates. Now I don't have to try and learn both to compare! I really appreciate it.

-Adad64 Monday, October 19, 2009 5:20:00 PM  

Anonymous Anonymous said...

Nice, thank you :) Sunday, December 06, 2009 5:44:00 PM  

Anonymous Milton Reyes - Ecuador said...

Thank you Tim for this article, I have been teaching Webdesign using Fireworks for about 4 years and the more I teach the more I like the tool, I've always received comments on "why don't you switch to Ilustrator?" but despite I refused to do it I start to learn ilustrator just to find the some dificulties as mentioned in your review but never did a deep comparison on both app. Your article details all the pros and cons in very gret way, so I can reinforce my opinion using your profesional expertise and research.

Thanks again.
"Let's make our part to keep the planet a good place". Tuesday, January 26, 2010 9:53:00 AM  

Anonymous bikman said...

Having been a long time user of Fireworks I haven't failed to notice that it has ended up as the runt of Adobe's litter. This is very disappointing as I love the ease of use of Fireworks and it does everything I need as a web designer.

But I feel that sticking with Fireworks is going to render me unemployable eventually.

Surely the flexibility of working in vectors lends itself to illustrator being the web designers app of choice?

But as you have discovered, illustrator just doesn't cut it for web design.

Most web designers seem to be now using Photoshop for their web design work and I am curious as to why. Maybe it is simply because of the influx of print designers into the web business and they are sticking with their tool of choice?

But I have always felt that Photoshop, as a bitmap editor, doesn't really work for web page design - it is so much easier to react to a client's propensity to want to resize things at the 11th hour when working in vectors.

Unfortunately when/if Adobe ditches Fireworks, then we'll be forced down the Photoshop or illustrator route and neither is as right for the job as Fireworks. Wednesday, January 27, 2010 8:08:00 AM  

Anonymous diseño web said...

Both programs are excellent and according to the project I decide which to use. I prefer to use photoshop for the photographic treatment and Ilustrator for the subject of vectors. Wednesday, February 10, 2010 7:11:00 AM  

Anonymous Shamima Sultana said...

Its such a great post...
thanks a lot Sunday, February 28, 2010 11:20:00 PM  

Blogger Tim Thompson said...

Thanks to everyone who has read this article and for the postive and insightful comments you have left. I appreciate knowing there are many others who have read this post and for whom it has been helpful.

Commenting will be now closed as this blog is powered by Blogger, which will be ending its FTP-based blogging service as of today. If you would like to see more of my work, you can visit my business website at StemPixel.com.

Thanks again, Tim Saturday, May 01, 2010 10:01:00 AM  

Post a Comment

Progress report - the 10 stage plan

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.

2 Comment(s):

Blogger Martin said...

Good to see the site design is progressing well. I think your methodical nature will help too - stop you getting bogged down in a little unimportant aspect and keep you on track. With any luck should be able to actually SPEAK to you on wednesday, through the magic of Lars & Sanna's technical expertise (as we are small-grouping at theirs).

Ciao for now,
ME Tuesday, June 13, 2006 2:01:00 AM  

Anonymous Anonymous said...

Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program! Saturday, November 21, 2009 3:34:00 AM  

Post a Comment

Other Posts

Powered by Blogger

Google
 
Web www.TimThompson.co.uk