could have been an intersting article.. i did some website layouts with illustrator before and it has it’s pros and cons… but this article is far too short…

rbtb

Why not Illustrator? Because the web is pixel based, and any designer worth a damn likes to make sure that everything is pixel perfect, including anti-alaising etc.

The amount of times website designs have been provided in vector format to me are low, but every single time they are I have to spend hours nudging vectors so they align properly with a pixel grid and don’t look amateurish in finish because the anti-alias is over the edge of the container box. Not to mention the far bigger problem that vector designs tend to be at too high a DPI, and the design that gets handed over won’t work on the web because 6pt text isn’t readable on the web. So many scaling issues because someone worked in inches instead of pixels. Rescaling is NOT a bonus, it means ragged edges with the anti-alias creeping over box boundries.

Use vectors for illustrative decoration, by all means - but for the design layout itself do everyone a favour and use a bitmap program.

I left a comment, but after submit the page refreshed with no feedback whatsoever and my comment is nowhere. That’s annoying.

Designing websites in Photoshop Illustrator Fireworks! Why should you design in Illustrator, if you can use Fireworks?

Resizing things in Illustrator is easier? Easier than ctrl+T?

This article sounds like it was written a Print designer who has started doing web but can’t let go of DPI and point sized text.

Why would you want to start designing in one program and have to migrate to another half way through? There may be good reasons for this but this article doesn’t explain it.

Hey.

Nice idea Andy. I’m not going to join the crowds and complain about length, i know how short the guest entries were meant to be.

The issue I have with designing websites in Illustrator is that (as you mentioned) it’s not precise. I’d rather stay on paper than do mockups in Illustrator ;) I don’t think there needs to be a step between sketches photoshop - but i guess it’s totally a question of preference.. whatever works for you ;)

I think illustrator is great for designing. It’s quick and easy especially for coming up with layouts and ideas. However i wouldn’t cut up the vector image, becuase it’s not pixel perfect. I will use something like GIMP (free) or photoshop to produce all the images.

Link [dtsn.co.uk]

I agree with Maurits - Fireworks is the tool of choice for me. I have colleagues who use Photoshop and Illustrator, and generally find that Illustrator has a really round-about way of doing things that are just one or two clicks away in Fireworks. Photoshop allows advanced bitmap effects, but the way it tries to do vectors and geometric shapes is just laughable.

Fireworks’ hybrid bitmap/vector approach has proven to be extremely useful and I personally wouldn’t use anything else.

“could have been an intersting article”

Well said. It would have been interesting to develop this idea. Hope to see more about this subject in the future. Personally I use Corel Draw for webdesign.

What do the rest of you think are the benefits and drawback of this method?

yeah could have really been an intersting article but the limit is just a problem but then again. Fairplay.

I started doing my Screen Design at the start (when I got to graphic design) only in Illustrator. I was basically always backed away from photoshop because in Illustrator (Vector-typically) you coudl just go ahead drag out a rectangle and transform it as you like without loosing information or getting it pixel fucked.

Now in Photoshop you can do this too but first had to really spend hours with it to just get a feeling for the software when it comes to Screen Design.

I dont do my Screen Design in only Photoshop or only Illustrator. I do the basics in Illustrator like a navigation and as soon as I know my dimensions and am actually happy with color scheme, size and design I move to Photoshop. You can do way more things when it gets to Effects in Photoshop. you can do all sort of drop shadows and so on inside and around elements where Illustrator just cant top it.

Hope it kind of helps

to smashing:
The link to the companys Site is wrong. well its a dead link folks. I found this one:
Link [www.themcollective.com]

- to the site: the design is horrible and if the mockup is done in Illustrator, then it is badly done in Illustrator. You can also actually design good Sites with Illustrator. Sorry if this critisism is kind of too harsh. Dont want to hurt anyone here.

Cheers

I don’t think it’s a great idea. No other software can replace Photoshop, when it comes to creating web layouts. Illustrator is for all your great vector designs!! agree?? :D

If you want pixel perfect sites that are uber professional, never design your end visual in Illustrator, or Fireworks, (this is good for beginners though).

Your article has a great point though, as it’s seems as though you’re essentially designing visual represented wireframes here. I did exactly the same thing a couple of years ago, (only in grey scale though) and found Illustrator to be far quicker at doing wireframes. However, if you try doing wireframes in Adobe Indesign, you’ll be flying. It’s even quicker.

I’ve always tried to separate out the elements of user experience design from the ‘art direction’ or ‘look & feel’ of the site. In my experience it makes for a better process.

Thanks for the article!

Comments so far:

“i do things this way so any other way is WRONG”

you can create great looking websites using a range of programs, you could even do it in ms paint if you spent long enough on it!

just because its not something you are used to or have spent long enough working with doesnt make it wrong

a bit more open mindedness would be nice

@ Matt Wilcox: wtf, he’s not saying you put this design on the web, he’s saying Illustrator is a good tool to do layouts, have a clear view of what you’re doing and easy resizes. Whatever you make in Illustrator is clearly not for web, it’s for comparing purposes and rough sketching. The canvas alone is a handy ‘tool’ to put everything in perspective.

From now on; please read before you burn.

Fireworks is the choice. I do every high and low project, from prototyping to final design in Fireworks.

Recently I worked with a third party design agency and they did every web project in Illustrator. The result was a muddy pixel imperfect mess that I had to redo all over in Fireworks. Simple things like drawing a 1px line in Illustrator is hopeless, as it turns into an antialias hell when you export the design in the final process.

You should have a look at the «pixel preview» in Illustrator ;-)
Fixes all the concerns you mentioned.

Ever heard of Fireworks???

Really good article, and i must say that i make all my site (in work and home) with illustrator, simply because can easly be dimensioned and it integrates easly in flash. For more art’works i use photoshop or gimp importations into illustrator.

You should know by now there is something called ‘Fireworks’ that combines both worlds, Photoshop and Illustrator. It’s actually the only program of the three that is actually developed for the web and nothing else. Photoshop and Illustrator server totally different purposes. So please update your article and stop ignoring Fireworks.

I use illustrator. I find layers fiddly and perfer things to select when I click on them. It’s easier to line things up, use shapes, type, etc. I even find gradients simpler.

I use photoshop to photo-shop (and paint, and sometimes illustrate - oddly enough).

As for pixel perfection you just need to set it up right:
1: use pixels for dimensions. (file:document setup / file:new…)
2: set raster resolution to 72dpi (effect:document raster effect settings…)
3: pixel preview (option-command-y / view:pixel preview)
4: (optional) use smart guides (command-u / view:smart guides).
5: save for web (command-option-shift-s / file:save for web and devices)
this makes it pretty much the same as fireworks (but without all the cheesy button styles)

«pixel preview»

does anyone know if Corel has this feature Like illustrator?

Thanks

#1 - agree!

But SM…. PLEEEASE upload articles that are longer then 200 words o0
If the guest writer tell us about the try to use illsutrator, then he should tell us why and how!

For those who say Illustrator is good just for vectors: You may work with pixel grid, align to pixels etc. in Illustrator. You may even turn on Pixel Preview so you see all vectors “pixelised” as you would see in Photoshop.

why don’t i use fireworks? because I don’t own it. and as near as i can tell (i last used fireworks at MX2004) illustrator set up like I mentioned above works the same.

I agree with the statement that “Illustrator is DIFFERENT”. Its name tells you most of its purpose. A friend of mine makes all her print works and also designs layouts using it, but that’s the way she does it - by illustrating. I’ve been working with PS for my entire life. I tried AI and I simply couldn’t do basic things. Maybe if I spent more time with it.. Anyway, it looked like it doesn’t serve me well ’cause I don’t illustrate, I photoshop ;-) If I ever need wavy shapes, I’m pretty satisfied with the pen tool in PS, but I can understand drawing a whole picture as if you were using a pencil goes much more easier in AI. So it depends on the techniques you use, I believe.

Well actually in the near future Illustrator might actually the design tool of the future, maby when SVG is better developed people will be able to create more vector scalable websites.

Thankyou someone else who has discorvered the power of illustrator for web design…I have used illustrator for designing websites for a few years, its amazing to get quick results and throw some ideas around. Good article.

I use illustrator for webdesign, since i discover the crop tool…. i can slice everything with the crop tool (more faster than photoshop) , for me works fine, and my websites are very pro! I only use photoshop for making background textures and extra stuff…

the pixels are perfect, the resolution is perfect, the anti-alias is perfect. no complains at all…. You just have to put the options that @Daniel Sherson mentioned.

only once so far I designed in Illustrator, just because the client wanted to .ai and .eps file. Honestly it wasn’t bad, Illustrator has it’s own pros especially with minimalistic and simple web designs. In the future I plan to try Fireworks more thoroughly.

Could have been a nice article but it’s way too short… Don’t remember what the limit was in the contest rules but undoubtedly it was, too, way to short…

Any way it look like a lot of people doesn’t understand the concept of “coarse paper” nor know about illustrator…

Wow, some strong, opposing opinions in here. All good though, I am motivated to check out fireworks AND Illustrator now. :)

The article title doesn’t really work in Google reader, I sat there wondering what Photoshop Illustrator was before clicking through to the article!

I always design WEB page in Illustrator in combination with photoshop…. EASY.. :)

I love Fireworks and use(d) it extensively, but Adobe only now came out with Fireworks in CS3.3
Unfortunately my work bought CS3 when it came out, and isn’t really willing to spend more cash because I like using Fireworks more than Photoshop for web layouts.

With Daniel’s settings I might just start using Illustrator for the rapid prototyping stuff.

100% agree with using Illustrator, not only for wireframes but also for production. For those complaining that you cannot make accurate pixel level images in Illustrator then follow the tips of Daniel Sherson (above). As far as I’m aware I’m at no disadvantage in not using Photoshop. Can anyone point anything out that Photoshop can do that Illustator can’t (pertinent to web design obviously)?

Why use Illustrator when there are Shapes in Photoshop that in my case are all you need to make a mockup of a website.

98% of my designs are shape based, because it’s easy to change color, apply gradient layer styles(with taste of course), masks, etc…I find Illustrator’s color and gradient panel quite irritating. And of course the control points of Photoshop’s shapes are much easier to work with.

Fireworks - I tried that, not quite what I needed. Somehow I got lost in it all the time :) But one excellent thing in fireworks are the patterns which are really easy to apply. And there are a lot of standard stripe patterns etc.

Of course everyone has their own tools - which is good, some distinction :)

I use Illustrator quite a lot for the numerous iterations of websites. It’s really easy to add gradients, resize, change the shapes and dimensions of more complex shapes.

You can also do some pretty neat tricks when it comes to gradients, and it is true that a lot of product designers use Illustrator because it gives a better look and feel than photoshop.

Don’t knock the man, give it a try and you’ll probably be surprised.

Fireworks!!!!

I use Illustrator for my line work in logos. While you can do some of the styling in Illustrator, my brain isn’t yet as cofortable in it as it is with Photoshop. I really *want* to use Illustrator for more layout elements, as Bruno said to avoid pixel-f*ck situations - smart objects seem to be the great middle ground for this. Lately I’ve been taking my sketches into photoshop with “quick and dirty” in mind to get the styles close to what I want, then starting a fresh document and mixing Illustrator / Photoshop to create the final polished artwork. I won’t worry about things being pixel perfect until I’ve gotten that rough comp approved as the direction the client ultimately wants to go.

I suspect with the amount of “this article could have been more amazing” comments you might be taking a crack at doing another in the future. Some things which would be of benefit to me in that:
-How to setup the document so that you are working with equivelent scale between .psd and .ai
-How to isolate / select elements for export as smart objects
-How to setup the pasteboard to be multi-page as some of your screenshots showed

I don’t mean any offensive by this, but what’s the deal with the recent crappy articles?

Smashing Magazine used to have maybe one post per day, always of the absolute highest quality, but in the past few days there has been a huge number of articles, most of which aren’t worth clicking.

Quality over quantity, please. :(

I ALWAYS do my mockups in Illustrator. Easier to line things up, I also have PhotoShop effects which I can apply. If I need PhotoShop elements, I’ll place/link them. Once I’m done I’ll open the Illustrator file in PhotoShop and do my slicing for the web. The best of both worlds.

I know alot of people and Adobe suggest using FireWorks for layout but it’s too clunky for me to get around.

i don’t understand the aim of this kind of article, sorry…

I totally agree and have been doing this for a while. It’s idea, then Illustrator, then Photoshop, the Coda/CSSEdit. Great workflow that has all the speed and advantages of vectors, but lets you create those 1px tweaks that we all love.

It’s funny how someone actually manages to write about “why we don’t use a program, intended for print-design, to make rasterized web designs” hmm..

I know someone who isn’t winning an Apple Air.

photoshop or fireworks - illustrator os for illusrations and logo’s, use applications for what they were made for. Photoshop for designs, Fireworks for web site mock ups, saves you hours by being able to link navigations between pages etc…

@Matt Wilcox: All is said… I totally agree and I will refuse to code an webdesign made with Illustrator…

Illustrator = logotypes, pdf generation and print
photoshop = web, photography (among some more)

I would like to comment on the above who have said Illustrator is not pixel perfect - it is if you know what your doing. The reason graphics do not appear pixel perfect or blurred when exporting out of illustrator is because the vector graphics and not sitting on an exact pixel co-ordinate. i.e. If a point is sitting at say 10.00 it will be pixel perfect, but if it sitting at 10.2 then it will blur. Its simply a case of setting up your canvas and grids correctly in the first place.

We have just finished building a huge website in Illustrator and the graphics online are pin-sharp. However our next project website we are now building in photoshop. I am not defending illustrator just pointing out its all about using the right tool for the right job.

From my experience taking an Illustrator design and turning it into HTML and individual images is a pain in the arse. You can’t export small segments or elements of the design down to the pixel like you can in Photoshop.

Wow, a LOT of comments on this short, yet insightful article. I see a lot of strong opinions in multiple directions. I am part of a web design company, and we have some guys who like working in illustrator, and some in photoshop; and thanks to CS3, without much effort, we can go seamlessly between the two. I have tested fireworks and found it to be effective, but haven’t used it enough to get used to it yet. I personally use illustrator for most of my web design, and, as was mentioned above, if you use the right settings, and thanks to the crop area tool, you can “Save for Web” with pixel perfection!

I believe it’s the individual designer’s preferences and tastes, but let’s just make sure we stay open to the opinions of others and not think ours is the only right way (as was already mentioned).

Also, @Nick, there is an article contest going on, and whoever can get the best reviews for their article will win a nice prize, hence of the short articles. Great comments guys,

-Joshua

This is a really bad article, I know it’s probably for the competition but it is detrimental to Smashing Magazine! Because it’s on Smashing it looks like they’re presenting it as a proper article. Also the reputation of Smashing gives the article credability when it deserves none.

The whole premise of this claim is that it’s easier to look at your designs in illustrator!

(1) I don’t see how it’s easier at all unless you’re not very good in Photoshop.
(2) It’s not really a very good reason to switch to using illustrator.

It’s easier to resize and fast to move stuff!? These extravagent claims aren’t even supported in the article.

A bad workman blames his tools.

when i got to the SM home page and saw this blurb, i thought wow, this is the winner. but it falls completely short in being anything actually informative. i wanted screen shots and examples of how they used illustrator or examples of how a site could benefit from illustrator, not a metaphor about polishing stone.

Guys, this is extremely interesting discussion for me as a web design amateur. Could someone actually write some overview of “best practices” how a web can be done? I always thought I have to do a design in Illustrator and then when I am happy with it (proporstions, colors, fonts), redo it in HTML+CSS. I always thought Photoshop is more for editing something rather than starting with white canvas. Am I completely wrong? Thanks very much.

Anyone still building designs in Photoshop needs to be taken out back and shot — it’s not 1997 anymore, and you can be pixel-precise in Illustrator with a slew of other, better tools meant for building designs.

Designing web pages in Illustrator seemed like a very foreign concept to me until I saw one of our new designers do it and see how wonderfully efficient he is. His documents looked much like the canvas screenshot in this article.

The problem is that I’m just not familiar with Illustrator as a tool - a problem I’m working on. I understand photoshop very well, so the likelihood of me trying this out is very slim unless I’m absolutely forced to do it.

So I can see why there are some negative comments here - for people used to using other non-vector-based tools, saying “You can do this in Illustrator, too” seems strange. But I can understand Andy Brown, too, wanting to wave his hand up in the air a little bit in and say, “Hey, this tool actually has a lot of value for what all you people do for a living!”.

I appreciate him doing it - and perhaps we will begin to see a few more illustrator tutorial and tip sites to balance out the immense multitude of photoshop ones out there.

I have used Photoshop, Illustrator and Fireworks. I prefer Fireworks.
But it all depends on what look you are trying to accomplish.

ahum… fireworks…

I think this article turned out to be a great article with the comments. Could have been posed as more of a discussion starter though.

Personally I prefer a mixture of Photoshop, Illustrator and Fireworks.

For quick prototyping I’ll knock something up in Fireworks, refine in Photoshop and then create details or graphical features in Illustrator.

The question ‘Why use Illustrator instead of Photoshop’ seems a bit silly to me. You wouldn’t use a screwdriver to hammer a nail in, but you might use a screwdriver *and* a hammer to build a bookshelf. A good designer/developer/craftsman asses the tools available to him and decides which is going to be the most efficient for the job in hand.

As for the quality of the article, it could have been interesting if the author had actually gone into any sort of detail, instead we get little more than a twitter.

Uh…that’s it?? I thought there would be an in-depth look at how to do this in Illustrator. Did I miss something?

@Michael Thompson

Pfff…don’t be ridiculous.

An Illustrator tutorial might of went somewhere with this one, or maybe the file used to create the screenshots and some explanations on how it was created. Currently I use Illustrator to resize vector art for designs created in Photoshop, that’s about it. This article is no incentive to have to learn a new tool, it could of been though. Starter templates or something would of been usable maybe. Nice try.

…mmh illustrator maybe good for flash design, but if you use illustrator to get faster to resize move etc… USE FIREWORKS !!! :) it’s made for this :p

“However, if you try doing wireframes in Adobe Indesign, you’ll be flying. It’s even quicker.”
+1 on this, Indesign is great for doing wireframes quickly on multiple pages, then just export to a pdf.

I can’t really follow the logic of designing webpages in illustrator, especially if you’re going to bring it into photoshop eventually. The only positive is that you can select all elements with the same color. PS offers far more design flexibility within one program. Many developers expect .psd files anyways.

Would anyone care to post some examples of websites they’ve designed primarily in illustrator? I’d be interested to see the type and quality of these designs.

Hey !

what about FLASH ??

does anyone use it?

Yeah. It’s called Fireworks.

And to the poster who uses Corel Draw - They still make that program?

Yeah, kind of like this article; it was over in a flash.

Michael Thompson -
You know nothing.

I am sure Illustrator is useful for site ideas but I use Photoshop to design sites because of layer comps (which I find very useful) and pixel perfection. I suppose Illustrator may be useful for different “sketches” or comps.. but yes this article is too short. What are more pros v. cons of using either?

Should have been a list post, “10 reasons to use Illustrator instead of Photoshop for your web designs” or similar. That way we’d have more content and more ideas. Could have been a good post, but sadly underwhelming due to lack of meat :o)

It’s not that Illustrator is better. It’s just different.

Aren´t there other tools for specifically designing websites? I’m talking about tools like Azure, or ConceptDraw, even Visio or Omnigraffle. They are more for doing the wireframes, conceptual UI, site layout/map, etc. What are your best tools for prototyping a user interface for a complex site, so the client can visualize it before it’s built, and perhaps even for including sample data? THAT would make a good article.

If you are using illustrator CS3 and have the welcome screen activated, just click “Web Document” under the “Create New” section and illustrator will present you with a dialog that will let you select the document size (in pixels) and all the other options that Daniel listed.

I switched to Illustrator a couple of years ago. I find it easier to get nice clean lines, and position things more accurately. If you start designing the site with the preview mode set to Pixel Preview it’s very simple to ensure the pixels are aligned correctly.

Can’t really comment on Fireworks as it’s a long time since I’ve used it, but I love designing in Illustrator and I’m sticking to it.

I do think you should use whatever method or program works best for you though, and that there is no correct program to use.

@Drewl

I read it. But anyone who works in a small to medium agency, and works on projects with short deadlines, will also know that once you’ve got a look & feel down, that’s the program it stays in. You’re not going to re-create all of those elements again in a bitmap package if they exist already in vector. I say start as you mean to go on.

Unless you are certain you have the time and budget to re-do the thing from scratch again…

Doesn’t anyone use MS Paint to make websites anymore?

k I agree that illustrator is not the final tool for webdesign as it’s a vector illustration tool BUT there are some things that I use it for:

Creating icons in illustrator and bringing them into photoshop as smart objects - makes sense as you can resize them and modify them quickly over multiple documents

Creating or modifying logos - smart objects

Doing any type treatments that photoshop can’t handle.

I would steer away from actual layouts though.

I agree with the lack of direction/shortness of this article but it has sparked a very interesting dialog in the comments. Personally I am more comfortable working in Illustrator than I am with Photoshop or Fireworks, that is why I use it for web-design. Whatever tool you can get results with quickly and efficiently, that is the right tool for the job.

People saying Illustrator is a tool for print design are stuck in the dark ages. In the last few years it has become as much a web design tool as a print design tool.

Look in your menus people. Turn on Pixel Preview. You can see everything in raster while you work. Turn on snap to pixels and you won’t get blur-inducing anti-aliasing. Set your rulers to pixels and it will be every bit as pixel accurate as photoshop.

This article fell down by not completing the loop and saying HOW you can work in Illustrator to produce sites. In the end it’s just another tool. People use what they prefer. Illustrator is now a viable option. If you take the time to learn about the web-production focused enhancements Adobe has made in the last few versions.

What you can say me about the HTML exportation?

We’ve been designing website in Illustrator for years at our studio. It’s a lot faster to edit and update layouts; I highly suggest it. In fact, I’ve been meaning to post a detailed blog about it for quite some time… this just might be the time to do it. Link [mercurystate.com]

I’m a professional web designer and I always use illustrator to mock my designs and create complex vector elements for it and I am just as good with Photoshop.
It comes to a surprise to me that so many people are so furious about this article - most don’t seem to know Illustrator enough to make the comments.
Also, I didn’t see anyone mention the fact that you can paste an Illustrator image into Photoshop as a smart object and then have all the benefits of both.
I can create my vector files much much quicker with illustrator, then paste it into photoshop and do whatever other effects on it that illustrator lacks.
I have just created an entire social networking site with all its graphics/icons/logo and everything using Illustrator and Photoshop and I couldn’t have done it without illustrator.

Don’t ever mention using fireworks to create web pages! If you dont know css/html you shouldn’t be making web pages in the first place.

I always start w/ Illustrator, it goes fast and you can get the ball rolling, then once yr at a point where you want to move further w/ a design, you can export and save as a layer PSD. so great!

I agree with Nick ^^. The quality of the articles recently (including this one) is leading smashing magazine down the crapper. Hope they can pull out of this new trend.

@ Joshua - forgot about the contest. Still, I think several articles shouldn’t even qualify for being a finalist. However, it can’t be a contest without some poor entries.

yeah

WHAT ABOUT FLASH?

I’ve designed almost every website I make, correction… EVERY website in illustrator or indesign. Illustrator is just so good to use.

Too bad you didn’t tell us about anything else. It’s like saying you can drive a car to go to work but you can also take a bus and then not telling us where to get in the bus and how the buis works.

So far all these articles dissappoint me.

I prefer designing in Illustrator over Photoshop. Once the design is finalized I choose Export>PSD. If you organize everything well with layers and groups the design converts flawlessly and is easily editable (for the last minute client changes) in Photoshop. I have also noticed a slight difference in quality if its exported at 300dpi and then converted to 72dpi once in Photoshop.

too short….do some more research then try again.

i swear ive read an article like this before…except longer

You’re absolutely correct. I’ve been using Illustrator to conceptualize rough layout designs and even build vector outline shapes for later enhancement in Photoshop for years. While Fireworks is a powerful tool, the UI is clunky for many conceptual approaches and Illustrator is great for focusing on the layout before getting to the details.

I totally agree with you!

Fireworks! You might as well use Microsoft Paint if you are using illustrator or photoshop for webdesign. If you want precise design, use fireworks.

Link [www.davidpcrawford.com]

Where is the article? All I see is a title and a preface …

Teach us how to fish, don’t just wiggle that salmon in front of my face and lick your lips.

How?
What?
Tips.
Bait…

Fireworks people. It was designed for designing and slicing / exporting web graphics. Photoshop was built to modify photos (for print) and it’s great for that purpose. I set up layouts in Fireworks, and usually use Photoshop to enhance any key elements / imagery.

Illustrator? Logos. Vector images….illustrating

I aways start my projects on illustrator, but i usually work with the photoshop in parallel, using it in pos production. Illustrator is 90% of my work life :P

I feel more control of color and forms, and any ajustments are done more easily.

“It’s not that Illustrator is better. It’s just different.”

… Different … As in “meant for drawing illustrations”… I couldn’t agree more with Mike. Use Fireworks! Do you know how much work it is for a production crew to build out a site that has been comp’ed in illustrator? Especially when things aren’t on exact pixels? Especially when It is a single artboard with stuff scattered all over the place with no central coordinate system…

I missed the August 5th deadline, but I might still submit my article anyway… “Top 10 mis-uses of Adobe Illustrator.” How to get your web designer to design with something actually useful to the site builders

Ive always use illustrator for designing websites, its faster, lighter and easier to work with exact pixels and geometric forms, and yes, you can compare your layouts on the same canvas!!
once the design and layout its done, i use photoshop for the final touch, backgrounds and fine details.

Just read through the rest of the comments - surprised nobody mentioned the “multi page” and “shared layers” feature of fireworks - Which is in my humble opinion a considerably better workflow than using illustrator with a giant artboard and no common coordinate system between pages.

Especially when it comes time to batch produce elements of the site design from different sections - I.E. If you have a “hero spot” with different images - you can batch export that “slice” from every single page as a unique image.

Its incredibly handy.

Having used all three (PS, Illy and Fireworks), I use prefer illy because of the freedom and speed it gives me to layout and design. PS is good for finishing and fireworks is great for slicing up for build.

Horses for courses. Ultimately, it’s the end result that matters. And all three will get the same results if your design is strong enough.

I prefer to start out my initial designs in PowerPoint - not only is it powerful but it’s easy to use and when it’s time to present the design to the client it’s already in a presentation. Once it’s time to build though a little extra horse power is needed so I drop it into Publisher to put on that extra polish.

Comment 15 - “Mortens” note about having to redo stuff is a key item for any web design/development team to consider regarding workflow and speed. I can’t tell you how many times I’ve had to “redo” stuff that was comp’ed in illustrator CMYK documents because artwork placement was off, and colors were in a different space…

The issue that all designers should consider is that if you really want to control the final output of your design - designing your site in illustrator will give you a false sense of how “real web sites” will render at least three key items:
1. Font Rendering, Kerning, Aliasing, Weight
2. Anti Aliasing of line art and shapes
3. Color Rendering

So you are essentially designing in an “artwork” application that will ultimately need adjustment in final build - and thus creating an extra step in your workflow… and an extra cost in build time and review. It’s just a bad idea all around from the guy who writes the checks, to the designer who is super picky about having builds be exact replications of their ideas.

The problem with Illustrator’s “pixel preview” and “snap to pixel” is that if the designer doesn’t start with the document that way - then it is impossible to get those elements to snap to real pixels. I.E. If the line is on 10.93 pixels, and you turn on pixel snapping - it will move to 11.93 pixels… or 9.93 pixels…

And then there’s a whole separate issue about overlapping shapes with clipping masks that don’t let you “click through” the masked area to the shape below… Not sure how this one made it through usability testing.

I’ve had colleages bag me about using Fireworks, but now they use it as well. Haha

Fireworks ftmfw!

Just to add to the din of the other voices clamoring “Fireworks!”, I’ll add my two cents. This is an excerpt from an article I wrote on my website, Link [www.magnateinteractive.com]:

“…Hand-in-hand with reusable assets is using the right software for a given task. Before being introduced to the proper way to use Fireworks I did all my website layouts using Illustrator, with further refinements in Photoshop. But Fireworks combines vector and raster methodologies, meaning that unless I have serious image editing to do in Photoshop, I really only need to have one program open for wireframe roughing, planning content flow, creating image slices, and all but the most involved photo retouching. Complex gradients, patterns, and shape editing are a breeze in Fireworks, and I believe that no matter how fast a web designer is at the Illustrator-Photoshop-Shuffle, using a single program designed to efficiently do both is an order of magnitude faster.”

To everyone who’s laughing with Coreldraw I can say it’s still alive and kickin’ I’ve been using Coreldraw since version 3 and I must say Illustrator can’t beat it! Of course, many of you love Illustrator so much and will laugh with me because ‘Coreldraw is so unprofessional’ but you probably haven’t had a look at it recently. It has much better bezier node editing features, the layout is more customizable and usable. Coreldraw used to be the underdog, and still is, but it’s an awesome program and I miss it on a daily base (I’m using Illustrator at this moment because we bought the Adobe Suite at work).

@tantalic - Best comment yet. Although a real designer would use Keynote. :)

Tantalic exclusively uses Powerpoint because Keynote Files have issues with Subversion.

How about firework?

Aargh!!! Stop writing words for the sake of writing words!

Yeah i use flash for web layout design

For those who didnt read the article, this psot is an eye opener, letting people know that they can design in illustrator, it even says in the post

” Photoshop (in my opinion) cannot be beaten. However for the stage between initial sketches and finishing touches Illustrator is a worthy tool and worth a try if you haven’t already.”

its jsut one of those things, its a technique that could be used to create quick mockups and layout,

any way i was nodding my head after i read it

I’ve been using illustrator to do weblayouts for years now, and love it. I’ve always found the font tools in photoshop to be slow, tedious and downright annoying. While illustrator’s type tools are fantastic. Furthermore, the pixel ‘issue’ disappears when you use pixel view and snap to pixel.

I come from a print background so I am very comfortable with Illustrator and Photoshop. As a few have mentioned before I use both, each have a distinct purpose. I usually use Illustrator for the original client comps simply because when printed out they look much cleaner. As for the bitmap images that must be used I use high resolution photoshop files and import them into Illustrator. When it comes time to produce though, it all gets done in Photoshop. I’ve tried to use Fireworks more than a few but I have just never “got it.” I can’t discount Fireworks though, just look at the work that Jon Hicks does with it.

I recently had to create a mock-up for a website redesign, and for the first time decided to use Illustrator. “I was pleasently pleased with the whole process”. I found Illustrator to be faster and simpler to use than Photoshop. I guess what I liked the most was being able to quickly drag an element to and from the pasteboard, also the fact that resizing vector graphics does not cause fuzzy images.

After the mock-up was approved we were able to cut the graphics out of Illustrator and get accurate measurements for our CSS.

I will certainly use Illustrator for web design again.

And why not use open source software such as Inkscape? I do all my website mockups in Inkscape — costs no money and works just fine.

I can also store all my source files in a Git repository and have a Makefile make the final images for the website straight from the mockup.

Why should you design in Illustrator, if you can use Fireworks? True, seems like a print designer wrote this article… Is this Smashing Magazine or a student blog?

Its obvious that you don’t know much about Illustrator if you think that you shouldn’t use it for designing in web… there is a pixel preview and you have to make sure that you snap to pixels

Some webdesign with illustrator.
Link [www.flairbartender.nl]
Link [www.cult.nl]

Illustrator is usually better for the whole process in my opinion.
But as mentioned, it has it´s cons.
None of the solutions really blow me away though.

Well I designed the last webpage whole in illustrator. The next thing was plain html and then css over it from scratch. The images for download buttons and other visuals were imported from ai file to photoshop and then saved for web to reduce the size. I really do not see a big problem with using a vector program, if nothing else I can move and swap things faster then in photoshop and also cmd+alt+y gives you a pixel preview for everyone that says you can not see it properly.

The only viable debate is between Fireworks and Photoshop and then it just comes down to preference.

This article shouldn’t have even made it onto Smashing.

You only need to look at Link [www.the-media-collective.com] to see that the writer has no authority on web design.

this a good example where the most interesting is not the article but the comments!

All applications mentioned CAN produce good pixel accurate results if you know how to configure them to do so.

I myself used to use photoshop and illustrator but then I discovered Fireworks. The best of both worlds in an app specifically designed to create graphics for pixel based medium [monitors].

All the tools are easir to use /quicker to get at and very rarely do I miss any of the things I thought I needed in photoshop…and most of these are in firworks anyway…just in a slightly different way.

Bring on CS4 with its in context symbol editing, type styles, new font engine and xhtmt/css export for quick prototyping. GIVE IT A TRY..oh but don’t try to print anything from it…it sux for this

I always use Illustrator to design websites, but thats because I am better in Illust