As I gained in experience I used the ColourLovers site less and less, but recently I found myself having a new challenge with colour.

I’ve been working on a site that has a strong colour palette of bright greens and blues. The challenge was to redesign the homepage content to make certain components stand out and had two main goals – lead a new customer to the next step of the buying process, and provide a customer call to action area for existing customers.

My first attempts had a few issues with them.

• Strong and dark components in different colours made the page look heavy and hard to read
• Light and soft components didn’t create enough differentiation between components, making the page look fussy
• A variety of lighter and darker components made the page looked busy and complicated

I used different colours and tones to try to get a clean page with clear distinction between components, but kept having the same issues. Eventually, taking a fresh look at it, I realised the following…

I needed to rationalise how I was using the colour

Just considering how these colours should work on the site improved it greatly. Deciding what colours should be consistent through all components and which ones should indicate different types of content made the site visually more cohesive.

I needed to reduce the amount of colours I was using on the page

I reduced the background component colours I was using to 2 strong feature colours, and one neutral light colour. One of the feature colours used had to really stand out, as this was the acquisition piece, but the other also needed a strong stand out on the page. To solve this a unique blue was used on the acquisition component, then a strong green that matched the background colour on the site was used for the secondary component. This allowed me to reduce the colours used, while also creating strong components.

I needed to consider the colour tones

Using a variety of tones of colour on the site also made it look more complicated and harder to scan the components. To deal with this I ensured that I only used two colour tone levels – one strong background colour for the two main sections, then a very light one for secondary components. This helped create a more even page that attracted the customers eye to the right places, without creating too much distraction.

Well, after around 11 versions I am eventually happy with it – let’s hope the client is too!

I think what caused the fuss wasn’t the actual content, but rather, the context it was sent in, i.e. by a developer to the whole company. It was seen as an insult, implying that the design team aren’t doing a good job, rather what it should have been, which was a comment on how we could all work better together. I do agree quite strongly that every designer should understand how websites are built. It can only be a good thing that the designer understands the capabilities of the tools to build websites, helping make best use of them to create a richer user experience.

On the other side of this though, the developer should also understand design. We can often battle against the belief that us designers are just styling. What we are really doing is attempting to create a good interactive user experience; considering a whole barrage of things, including content, structure, client brand, how to prioritise content and create visual cues, for example, by using contrasting or consistent colours and styles, using white space or even round corners to make it easier to distinguish between components.

Well, the list could go on and on, and I’ll hopefully get around to writing more on it another time, but the main thing to consider is that each member of a team has a role to play, and with good communication and understanding we would all create better websites.

It’s been a little hard going trying to keep my ideas fresh, but I’ve actually really enjoyed getting into creating the brand concepts for them. I’ve also been doing my emotional thinking, that I was talking about in my last post, to make sure that I’m doing something that users can identify with. Well, I still need to push myself in this way for all the design work I do, but it does feel nice that I’m progressing as a designer.

Without actually thinking about it I think most designers make emotional choices, whether it’s colour, styles or shapes. These help create a site that fits the brand and the intended purpose. Understanding what these emotional cues are will not only make it easier to make the correct decisions when creating a new design, but also allow us to be able to explain to the client exactly why the design should look as it does. This should help us communicate better with the client, and end up with a design that everyone is happy with.

I’d initially used CSS to replace text with images, this is quite an awkward solution as you have to create a new image for every item you want to replace. I did a bit more searching and discovered siFR 2. sIFR (Scalable Inman Flash Replacement) allows you to replace text on a page with any font you want, using CSS, Javascript and Flash.

I’d struggled previously getting this version to work properly and behave the way I wanted it to. Mainly for each item in a navigational menu to look the same. So I was rather happy when I discovered there was actually a version 3. This version is incredibly easy to use. I love being able to apply CSS styles, as well as defining the font size.

Take a look here: sIFR 3

So, around ten years later the idea of creating a brand for myself didn’t even cross my mind. When creating this site, I just naturally created a little ident that I was rather fond of, instead of spending hours thinking of what I wanted my logo to say to other people. Hence, I was rather surprised, and flattered, when David Pache contacted me to ask if he could include my website brand in part 3 of his 100 Brands of Interest.

This has gotten me thinking about my original love for brand identity and how I’ve never quite felt comfortable around it. I believe the time is now to re-examine it. I’ve enjoyed developing my illustration skills, and thanks to iStock’s new product, Logos : Logos come to istock, I have a great new avenue to help me rediscover my lost interest in logo design.

I’ll let you know how I get on!

Adding the default stylesheets to the HTML

I created one main CSS file, that held all the styles that will never change, as well as a four separate season CSS files for Summer, Autumn, Winter and Spring. I used the Summer css file as a default and added an id called season.

<link href="main.css" rel="stylesheet" type="text/css" />
<link id="season" href="summer.css" rel="stylesheet" type="text/css" />

Javascript code to select the CSS

Firstly I get the date, then use an if statement to set a variable with the correct filename. So, between December and February it will show winter.css, March to May spring.css, June to August summer.css and September to November autumn.css.

Then I just set the href property of the element with id ‘season’.

// Get CSS JavaScript Document
function getCSS()
{
datetoday = new Date();
themonth=datetoday.getMonth() + 1;

if (themonth == 12)
display = "winter.css";
else if (themonth <= 2)
display = "winter.css";
else if (themonth > 2 && themonth <=5 )
display = "spring.css";
else if (themonth > 5 && themonth <=8 )
display = "summer.css";
else if (themonth > 8 && themonth <=11 )
display = "autumn.css";

document.getElementById('season').href = display;
// End -->
}

Call the function

All that’s left to do is call the function in the<head> of the page.

<script type="text/javascript" language="javascript">
getCSS();
</script>

Done!

The basic anatomy

The workspace

1. Artboard – This is the main page area that you are drawing on
2. Tool bar – Where all your main creation and editing tools are. This is shown in front of the artboard as a floating panel or attached to the side of the artboard
3. Panels – Where you control and change your shapes. These can be shown attached to the side of the artboard with icons to denote the panel, or they can sit over the artboard.
4. Top menu – This is the usual type of top menu that includes ‘File’, ‘Edit’ etc. This is where you’ll find all tools and options in the menu list format

Tool Bar

Panels

The tool bar

This bar contains the main tools you’ll use.  If you can’t see the tool bar on the artboard then use the top menu to find it.

Window > Tools

There are a few different types of tools in the tool menu, so here is a quick run down of them.

Selection

1. Selection tool - Select an object or grouped objects on the artboard
2. Group selection and Direct selection tools – This lets you select a single object (Group) or a single point/line (Direct). This is useful if you want to edit an object that is part of a group, or edit the shape of an item
3. Magic wand – This lets you select objects with a similar fill colour/pattern
4. Lasso tool - Also a selection tool, just draw a shape and it will select everything within the shape

Object creation (Drawing and typing)

1. Pen tool – This selection of tools let you draw out a shape point by point then edit it. Clicking once and releasing creates a point. If you click and drag you can create a curve.
2. Type tool – Write text with one click, or create a paragraph shape by dragging, then click on this to write text within this text box
3. Line tool – Allows you to draw different types of lines, such as straight, arcs, spirals and grids
4. Shape tools – Draw different types of shapes
5. Paint brush tool – This creates a stroked line using a brush (This can be found in the Stroke and Brush panels)
6. Pencil tool – You can freehand draw a shape or line. If a shape is selected you can also go over the same line again to adjust its shape

Reshaping

1. Rotate tool – Select and object before you select this tool, then you can either double click to enter a rotation, click once on the artboard to the the rotation registration point, or click and drag to rotate the object
2. Scale tool – The scale tool works in a similar way to the rotate tool, but with changing the scale of an object
3. Warp tool – Drag across an objects to change it’s shape
4. Free transform tool -This tool lets you scale and rotate an object using the bounding box handles. These are the little squares shown on the object when it is selected. To maintain the proportions of the object, hold down ‘SHIFT’ while you drag. Holding ‘ALT’ will let you transform the object from the center point rather than a corner.

Additional tools (Painting, graphs and more)

1. Symbol tools – This tool lets you spray paint and edit symbols on the artboard from the symbol library (Symbols can be found in the Symbol panel)
2. Graph tools – This tool lets you create a variety of types of graph. You can select a size and enter the graph details.
3. Mesh tool – You can create and edit mesh lines on an existing shape. Click to create a mesh point then you can adjust the shape and fill.
4. Gradient tool – If you have a shape with a gradient fill (i.e. by using the Gradient panel), then this lets you drag across the shape to change the gradient.
5. Eyedropper tool – If you have one item selected and click on another item it will copy the colour/styles over to your first item.
6. Blend – You can blend two items together. Select either an anchor point or in the middle of each item and the blend tool will blend these together.
7. Live paint tool – Lets you fill in sections of shapes on the artboard. A shape with a hole or different sections in the middle is called a ‘Compound path’
8. Live paint selection – Selects the shape you want to fill

Artboard

1. Crop area – You can select what area of the file you would like to export  (i.e. File >  ‘Save for web’). Double-click to select the options, or you can click and drag.
2. Erase – This tool lets you erase sections of your selected item.
3. Drag – Drags your view of the  artboard
4. Zoom – Click to zoom incrementally, or click and drag the area you want to zoom to.

Colour

1. Colour selections – You can double click on the fill square or outline square to change these colours of the selected shape. You can also click the arrows to switch them. If the colour is white with a red line through it, this means that there is no colour.

There can be little arrows on the bottom corners of a tool. This denote that if you hold the mouse down there is a choice of tools.With some tools, such as the line and shape tools, you can click once and you will be able to type in options for the object, rather than just clicking and dragging on the artboard. Also, for some tools you can also double click to change the tool options.

The panels

These panels I normally have on the right of my screen. If you can’t see them use the top menu:

Window > #Panel Name#

The panels are grouped together with each other and can be selected with tabs. There is also a little arrow on the right that will give you more menu options.

I’ll order these in the approximate order I have them in on the screen

1. Colour – RGB for web stuff and CMYK for print. This lets you drag the arrows to create a colour, or double click for the colour picker
2. Swatches – These are saved colours. You can drag the colour square to the swatches panel to keep it. If you double click on this you can give it a name, change it, or set it as a global colour. Making a colour swatch a global colour will let give you a colour slider for the swatch when selected and you can change the tint.
3. Brushes – These adjust your stroke lines and can be used in conjuction with strokes around the shape and the paintbrush.
4. Symbols – These are little symbols you can re-use again – You can also create your own by dragging them into the symbol panel.
5. Stroke – This lets you set the outline of the shape. You can change different options for your stroke in this panel.
6. Gradient – You can change gradient colours by dragging them on the gradient bar from the swatch panel, you can also drag these little colour squares and change the angle and location options
7. Appearance – This allows you to change the order of the fills, strokes and effects (Shown in the Effects top menu item). You can also add strokes and fills using the arrow option to the right i.e. to create double lines etc.
8. Layers – This allows you to have different shapes on different layers, you can view, hide or lock these as well as change the order
9. Transform – This lets you change the position and size of the shape you have selected. You can also change the angle or skew it. The little link icon on the right after the W and H, lets you either keep the shape in proportion if on or just change one dimension if off.
10. Align – This lets you align shapes against each other, i.e. centre them all together
11. Pathfinder – Use this to cut out or join shapes. Select all the shapes you want to change, then click on one of the pathfinder icons.
12. Character – Basic text options such as font, font size and leading
13. Paragraph – Further text options if you have created text within a paragraph shape

The top menu

1. File – This has your usual, ‘New’, ‘Open’, ‘Save’ and ‘Print’ type options
2. Edit – Basic edit controls such as copy and paste, as well as preferences and settings
3. Object – Controls the shapes on the screen. Some of the basic object controls are:
   • Transform – Changes the shape using ‘Move’, ‘Rotate’, ‘Reflect’, ‘Scale’, ‘Shear’ etc.
   • Arrange – Changes the order of the shapes on the screen. This will change the order only within the selected layer
   • Group – group selected items together
   • Lock – Lets you lock an item so you can’t select it – you can ‘Unlock all’ from here if you want to select them againExpand – This lets you expand text to outlines, and expand compound shapes, effects and fills
   • Rasterize – Creates a flat bitmap image from the object(s) you have selected
4. Type – This is for controlling and editing the text/fonts
5. Select – Lets you select specific items, such as if they have the same fill colour
6. Filter -This menu lets you distort vectors, as well as having a filter menu that can be applied to bitmaps – I suggest you stick to Photoshop for these though.
7. Effects – This menu lets you add effects to items such as Drop shadows and rounded corners as well as other fancy effects. You can find anything you’ve added in the Appearance panel mentioned before. These can be edited or deleted.
8. View – Viewing selections for the artboard, as well as options such as ‘Ruler’ and ‘Guides’
9. Window – Where you find all your panels/tools if you can’t find

Now, getting started…

Hopefully the above has given you a bit of help with how Illustrator is put together, and although it’s not a completely comprehensive guide I know I’ve learned a few things writing this that I hadn’t know before. So, now you’ll need to learn about to actually use Illustrator, for how here is a few useful places to visit.

Useful beginner tutorials/articles

Create an envelope icon – Lovely tutorial to start on
How to create a cute Hippo character
Getting started with Illustrator
Use Adobe Illustrator to create a clean website layout

Resources

Vectortuts+ – Great place for Illustrator tutorials

Smashing Magazine -  find useful tutorials and articles

Blog.Spoon Graphics – 50 Illustrator Tutorials Every Designer Should See

Did some research into finding one that would suit, and found these:

Flash Page Flip – from FREE to $499

Had a go of the free version. This is HTML based so didn’t suit my purposes of importing it into the flash as an internal component, and the license with the source code was out of the budget. Animation feels nice and smooth and there are plenty of page controls, but the page images load in dynamically, so if you are flipping through quite quickly you seem to get a lot of blank pages.

View demo

Page Flip, FlippingBook – from FREE (trial) to $299

I liked the smoothness of this one as well. It also has plenty of page control features and comes in a variety of types:

• FlippingBook HTML Edition – View demo
• Flash Component – View demo
• SWF Object – View demo
• Joomla Component

With the Flash Component you can add ActionScript for external navigation, page links and video. Although no source code is supplied, the component should cover any common uses. Images also load in dynamically. It seems faster than the Flash Page Flip one, although this may be related to the image file sizes. One thing I wasn’t so keen on was that the shadows seemed a bit on the dark side, but overall seems like handy and easy to use page flipping tool.

Dynamic Page Flip v3.5 – from $26 to $435

This page turner offers all the standard page controls, but also has the option of auto page flipping, hard front/back cover, page tearing and right to left written books. Again this one allows you to load in either your image or swf pages dynamically, and is controlled by an XML file. Page turning animation doesn’t quite feel as smooth, but has a lot of extra features and good documentation on how to use it.

View demo

Page Flip v2 – FREE/Open Source

Page Flip also offer a completely free open source version of their Page Flipping component. Has almost all the same features as v3.5, however you import your page images directly into the FLA file.

View demo

So…

These all seem to be really good page turning components with slightly different usage methods and features.

I’m trying not to obsess too much about constructing it in the right way either. It’s easy to get caught up in the minutiae, but it will take me less time in the long run if I work out the details as I go along. I can always re-structure things later if I have to.

Anyway, best get back to it.