Web Design Mock Ups in Illustrator

Web Design Mock Up in Illustrator

The majority of my work is for print, but also I occasionally create the look for websites as well. This will just be done to comp/mock up stage ready for someone else to code (though I am learning). What I have always found surprising is that when you hear of people creating web design mockups you usually hear them talk about Fireworks or Photoshop not Illustrator. I don’t know how to use Fireworks, I do use Photoshop but would never really think of it as a program for creating visuals in – for elements of a visual, yes, but not for planning, experimenting and designing visuals as a core program.

Whenever I have created web design mock ups I have always used illustrator, it’s quick and flexible allowing for rapid moving about of elements. If at the end you want to, you can export Illustrator to photoshop keeping all the layers intact. I was quite pleased to find a tutorial that leads you through the process of creating web design mock ups in illustrator and then how to use the image slices in you web designs. I had never realised Illustrator allowed you to create slices, name them and output them all for web. It then talks you through using these image slices to create a template in XHTML and CSS.

Take a look at this tutorial, its made for creating Drupal templates, but parts 1,2 and 3, on creating a mock up in illustrator and then slicing it up and then creating XHTML and CSS templates are useful for any web design.

Can You Teach Yourself Graphic Design?

I often receive emails with people asking me how they can teach themselves graphic design. Having taken the traditional college route I find it a difficult one to answer. I know from personal experience that what I learned at college was only a drop in the ocean (a starting point) and much of my current design experience has been gained from experimentation, friends and former colleagues.

There clearly are people out there who have taught themselves graphic design:

I asked Amanda Vlahakis from www.trulyace.com how she taught herself graphic design

I can only talk about how I self taught because I should imagine each person learns differently if you know anything about the different learning styles that each person will respond better to. For myself self teaching involved mainly ‘doing’ – so mainly practising by myself and nothing else in the way of tutorials or online courses or anything else like that.

Obviously I’m still learning, as we all are, I don’t think it ever ends.

My Methods

So I essentially sat down with the software and just started attempting to create things and then I practised for hour upon hour, for years, until I got better. Each time I didn’t know how to do something that I felt I needed to learn and couldn’t figure out for myself through trial and error I would go to Google and search for a solution, so research was part of my self teaching.

This searching for solutions via a search engine tended in my case to revolve not around the design itself but the technical things one has to learn; for instance about printing methods, printing file requirements and so on….to ensure that what one has designed comes out right at the other end when printed and to learn how to layout a design for print for different types of print product.

Another part of my learning, specifically my illustrative learning, was to the study the technical ability of other illustrators. For instance if I wanted to achieve the appearance of ‘glossy lips’ for an illustrated fashion character I would stare at the work of top illustrators and see how each different illustrator achieves these sorts of effects and learn from them.

It’s always a good idea to look at other designers anyway (not just graphic designers but all sorts of designers), for creative inspiration and to avoid becoming stale, which is actually quite a hazard I find, anyway I digress…..

They say there are three types of learners:

  1. Visual Learners, who learn through seeing. They need to see their tutors body language and facial expression to understand the topic, and may think in pictures and learn best from visual learning aids such as diagrams. Design tutorials with screen grabs would be perfect for this sort of learner I expect.
  2. Auditory Learners, who learn through listening. This person will learn most effectively by listening to a lecturer for instance, or a mentor who verbalises the topic to them. They may struggle to injest information in written form until it is heard. For this type of learner, it might be worth seeking out tutorials that are auditory as well as visual, and podcasts.
  3. Tactile/Kinesthetic Learners, I believe I am this type of learner, as I have always struggled to learn from listening to words (I tend to zone out within minutes and learn nothing) and although reading things I must learn isn’t too bad, it isn’t as ideal for me as actually ‘doing’ the task. I’ve always learned things much quicker and better if I physically do it. I have noticed this since I was about 16 (I’m nearly 35 now eek!)

It is said that this type of learner prefers the hands-on approach and may find it difficult to sit still for long periods become distracted by their need for activity. This is definitely true of me, I find it very difficult to relax for any period of time unless exhausted. But I must say that having your own business is ideal for tiring yourself out of an evening!

So I guess it’s a good idea to think about what of what sort of learner you are before you start, and expect to put in plenty of hours into practising no matter what type of learner you are. Never give up and no matter how rubbish you are to start (I was awful, not even joking here – really really awful), have complete faith that you can only get better and better if you just keep practising and never stop practising.

Max, a graphic design blog reader asked three questions about learning graphic design on my post about Open University

1) I am looking for a Graphic Design course online from some reputable institution which offers the course with a certificate and is least expensive and can be finished in shortest possible time.

I have yet to find anyone who has said they have taken an online graphic design course so I would love to have any blog readers input on his one. Are online Graphic Design Courses any good, I don’t mean learning programs like photoshop and Quark, but a real Graphic Design practical and aesthetics course. I tried a web design course with the Open University but was unimpressed by the course. W3 schools have free online lessons in HTML and CSS which lots of people swear by but this is purely for the coding side rather than design.

My suggestion for anyone teaching themselves graphic design would be to:

2) A real good book/learning CDS or DVDS which is good to learn/ study Graphic Design and perhaps is used in in some leading universities as a course material.



  • For learning all your graphic design and web programs I know many people are big fans of www.lynda.com where you can subscribe for $25 month to watch all the tutorial videos on the site. You can buy the DVDs and some books too.

3) Web sites where one can-FREELY- read or study and download materials for Graphic Design.

Did you teach yourself Graphic Design? How did you do it?

Open University Web Design Course

A few months ago I was desperately trying to find a part-time/evening course web design course in CSS and HTML. I hunted through course listings from local colleges, but there was very little out there locally for me apart from a few 2 day Dreamweaver courses, which were still teaching tables rather than CSS. I found a couple of downloadable courses in HTML and CSS and learned some of the basics but what I was really looking for was something which included support when needed.

I finally found an online web design course with the Open University and though I wasn’t interested in following it as a exam course I decided I would take the course and just skip the end written dissertation. The 12 week part time learn from home course promised that students would become confident users of HTML and CSS. I searched the web for reviews of the course and even asked in a couple of forums but could find no impartial information about the course.

It is now week six of the web design course and I have all but abandoned it. I had high expectations of this course but I am deeply disappointed. The majority of the course seems to be on a theoretical basis, in my opinion far too much. Take for example one lesson which teaches you that the size of images should be kept to a minimum for fast loading, now I agree this is something everyone should know but it then proceeds to tell you how to calculate loading time with a formula. To me some of these theoretical lessons would be fine if it was a one or two year course but not for a twelve week course. Another lesson asks you to work out how you would manage your team (who does what, programmers designers etc) to create your website – now if I had that team would I really be taking this course? The book that is provided is also not very easy to follow, I have far superior books from www.sitepoint.com

If you are a print based designer like myself looking to learn more CSS, HTML and web design I would give this course a miss. The people who might find this course useful are people who have a good understanding of CSS and HTML but want to fill in some theoretical gaps they may have missed. I am still trying to teach myself more about designing websites so will pass on any useful links I find.

Have you tried any online or local evening classes in web design, what did you think to them?

How do you Choose a Graphic Design School?

I have received a few emails recently from people asking me for advice on choosing a graphic design school/university. It’s a long time since I was at design college and so I thought I would throw the question open to you to see if any one else can help.

  • What made you choose the Design College or University you went to?
  • What did you like dislike about the course?
  • Are there any specific design schools/universities you would recommend?
  • What specific things/subjects would you look for in a design school/university?

I actually went back to my old college to look at the end of the year design show and was shocked by what seemed to be a lack of web design examples everything still seemed focussed on design for print when I would have thought this was a key area that should have been pushed. A lot of the students didn’t even appear to have online portfolios. I think if I was going to college now I would make sure that web and multimedia were a key part of the course as well as design for print.

has a series of links to articles about choosing a design school which you may find useful.

Design For Print Check List

Lauren over at Creative Curio suggested a print checklist would be a good idea for a post, so here are my suggestions on setting up a graphic design job for print.

When you are designing a job that needs to be printed there are certain things that need to be remembered and checked.


print check list1. Make sure all images are 300dpi at actual size and saved as a tiff or eps
Note: if you blow a raster (Photoshop) image up in your layout programme (Quark/Indesign) you are in effect lowering the image resolution. Vector (Illustrator) files are resolution independent, which means they can be blown up without image quality deterioration.

2. Make sure images are set to CMYK
Note: CMYK stands for cyan, magenta, yellow and black, the colours the printer will use to create the print. Small dots of these colours will make all the different colours in the printed document eg. small dots of yellow and cyan will look like green.

3. Allow Bleed on a document – usually 3mm unless otherwise stated
Note: Bleed is an amount of image/colour etc that reaches out past the trim lines. This allows for print movement and slight inaccuracies, so if the guillotine moves slightly you won’t have a white edge for instance where there should have been blue.

4. Convert illustrator eps text to outlines
Note: Before you send a job to print if you are using an illustrator eps with text within it convert the text to outline. This prevents any font issues from the embedded font. make sure you save yourself a copy of the files without the text turned to outline in case you ever need to amend it.

5. Check your document only contains only the 4 colours CMYK.
Note: Make sure if you do have any spot colours that they are specified to split into 4 colour process.

6. Add a percentage of a colour to large areas of solid black

Note: If you have a design that uses large areas of solid black it is a good idea to add a percentage of another of the process colours to it to give more density. For example if I am doing a job with a large area of black I would perhaps create a new colour called special black with 100% black and 50% cyan (make sure it is set to split to process colours). This is often known as a shiner. You do have to be careful using this technique if you are using small text on the black, as any slip in the colours could mean that your white out text, ends up cyan. If in doubt it’s best to take advice from your printer on this.


1. Make sure all images are 300dpi at actual size

2. Make sure images are set to duotones (or you can use monotones of one of the colours)
Note: If you are using duotones (images made up of two colours) make sure you have named your two colours the same in photoshop as you have in Quark or Indesign. Any slight differences will mean your document will output to more than one plate. For example if you have chosen pantone 144cvc as one of the colours in your duotone, but then choose pantone 144cv (no c at the end) you are in fact creating an extra plate.

3. Allow Bleed on a document – usually 3mm unless otherwise stated

4. Convert illustrator eps text to outlines
Note: As mentioned in point 2 also make sure you have named colours the same throughout your files.

5. Check your document only contains the 2 colours you need and they are set up as spot colours
Note: (you won’t be able to get rid of the CMYK colours but in Quark can remove the default RGB blue green and red)


1. Create your cutter guide in illustrator and colour the stroke a SPOT colour, I usually name this Cutter. in illustrator specify in WINDOW – ATTRIBUTES overprint stroke (checkbox).

2. If you are pulling your cutter guide (as above) into quark – go into EDIT COLOURS – EDIT TRAP and set your cutter colour to overprint. This makes sure the cutter doesn’t interfere (knock out) with any of the print work below it.


In general I leave quarks trapping to its defaults, except in the case of cutter guide as mentioned above or if I am working on a 2 colour job where I have text in one colour going over a pale tint of the other, when I will specify the text to overprint. Otherwise you get a spreading effect. If in doubt ask the printer to check the trapping for you.


Whenever I am designing a document – unless I am just a concept stage I will ensure my images are all CMYK and 300 dpi and I have include 3mm bleed as I go along. Once I get the go ahead to send the artwork I will however do a final check. I use Quark so I will double check:

  • I have include bleed wherever needed
  • That all my colours are set to 4 colour process (for a 4 colour job) and I remove the default RGB Red Blue and Green colours in the Quark palette.
  • Then I do a collect for output and open up all of my photoshop images to check they are CMYK and 300dpi and open up my illustrator images check them and convert any text to outlines
  • If possible send a printout or PDF to the printer so the files can be checked against it. If you are using any spot colours make sure these are specified to the printer.

There are programs such as Flightcheck that will check your print is set up correctly – in terms of colour splits and images, but this is quite expensive.

If you are looking for more information on setting up design for print http://www.printernational.org has some good advice.

David Airey Graphic Design also has some good advice on on things you should consider before printing.

If there is are any suggestions or methods you use to check your design before it goes to print, please feel free to add them to the comments below.

Can Design be Taught or Do you Need Talent?

teach design
How much can be taught and how much is raw talent?
Does a graphic designer need to be able to draw?

A graphic designer in my opinion needs to be a reasonable good artist and therefore must have raw talent. I have often wondered if there are good designers out there who can’t draw? When I was at college a few of the students admitted their drawings skills were somewhat limited. Surely a designer must have at least some artistic ability to see the balance on a page?

How much can be taught. If your average “non artistic” person was taken out of an office job and taught about grids and balancing elements on a page could they ever be a good designer?

To me there are two types of jobs the type that can be learned and the type that you need talent for. Athletes, artists, performers, designers to me would all come under one category – raw talent required, while many other jobs can be learned, that’s not to say to varying degrees of ability. A non artistic person can be taught to organise information in a logical and pleasing form but I don’t honestly think they can truly create a good design, but I guess that is where the question “what is good design” comes in. One advantage that a non design person could have over an “artistic” designer is you would imagine they could be more focused on functionality and readability?

Computers have made it so easy to put together a document (however badly) that I have seen some sites showing the portfolio of “the designer” who is clearly not a designer. They perhaps can use a few design programs, and perhaps programming, but have no sense of design and aesthetics.

What do you think can designed be taught or do you need talent?

For tips on learning design straight to your inbox click here