Elaine McVicar, Digial & Web Design in Glasgow

Colour

When I started out as a designer colour was something I really struggled with when designing a site. I found it really hard to find nice palettes that worked, and colour tones that gave the impression that I wanted. The ColourLovers site was a blessing to me - it was the tool I needed to make my designs work. 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!

Trying to sew

I've been trying to get back to being more crafty. I still enjoy knitting, but it can be a rather slow process, so I've turned pulled out my old Singer sewing machine and I've put together a couple of things.

My capri length jeans

I cut the length of each leg to shin length, then sewed all the way down the sides to create a super skinny fit width. Finally I just rolled up the bottoms to create the right length of leg and to make them look finished.

My shopper bag

In the future I want to create some really nice shopper bags, but for the moment I thought I'd try just putting one together with some black jersey material that I already had. I cut out a long rectangle, then sewed up a hem and each end. I then sewed up the sides to make the bag. I then sewed diagonally across the fold to create a more rectangular base. After this I cut out some long strips to make the handles. I folded each strip in half, joining them along the length, then sewed them securely as handles. It's quite roughly put together and won't hold anything heavy - but it's given me a good idea of how to construct a shopper bag better.

Anyway...

If you're lucky I might manage to get some pictures up, and I still intend to try out a few more things. However, for now I'm going to stick to knitting and try to get my jumper finished.

My Javascript Pop Up Hell

Okay, that's quite a bit of an exaggeration, maybe purgatory rather than hell. Anyway, I don't really know any javascript so I rely on help from the bountiful internet so I can do things with it. Lucky for me there are a bazillion javascripty jquery type pop ups, however unfortunately there are A BAZILLION javascripty jquery type pop ups. Well again, I'm overreacting slightly. But here are a few of the pop up plugin type things I tried out.

Lightbox

Lightbox is the one everyone has heard of, but it annoys me slightly - although I'm not entirely sure why. Simple to use and install, but unfortunately wasn't any use for me this time as it can only show images, rather the sections of HTML that I required.

Colourbox

Colorbox is nice. It produces nice looking pop ups. Smooth transitions. It can load up flash, video as well as HTML. However, again I couldn't use it for the project I wanted as I needed a div to pop up then stay where it was allowing you to interact with the rest of the page. I think you might be able to get Colorbox to do this, but I struggled with the coding.

DOMWindow

DOMWindow was my saviour in the project I was working on. I didn't want a hover pop up, or one that fills the entire screen, but with one click a little window should appear, then it should close when the user clicks on the close button. Very simple and easy to use.

A few others

Fancybox Thickbox Shadowbox

Arniston House

Beautiful country estate near Edinburgh, Site was developed and is maintained by Ladarnas.

Greener Grass Company

Greener Grass Company brings you Slogro. The Alternative lawn care programme. Site was developed and is maintained by Ladarnas.

Flying Scot Airport Parking

Book and pay for your parking online. Site was developed and is maintained by Ladarnas.

Low Cost Airport Parking

Book and pay for your parking online. Site was developed and is maintained by Ladarnas.

Typical APR only 2686%

I found this website today and I'm trying to work out how I feel about it... Wonga - Short Term Loans They'll lend you up to �400 for up to 30 days to help you pay a bill, and they'll approve it and transfer the money in under an hour. The APR sounds shockingly high, but as the loan is only over the maximum of a month the repayment isn't horrific, i.e. if you borrow �200 over 15 days you'll have to pay them back an extra �35.90. You can even get them to pay direct to your service provider. I certainly think in the past this could have helped me out, although it's worth considering if the interest charges are going to be more or less than the bank charges. I guess time will tell if they'll become a useful service for people struggling a bit with their cash flow, or if they will horrifically rip people off when they are needing help.

Geocities-izer...amazing

So, make any web page look like it was made by a 13 year old in 1996, huh? You know - that is better than the first site I made when I was 17....no, I'm not going to EVER let anyone see it. Geocities-ize your site

i {heart} knitting

I love arts and crafts in general, but one of my main hobbies is knitting. I love that it is so relaxing, then at the end of it you have something beautiful, original and generally useful that you have made yourself. Check out all the adorable little knitting things in this smashing magazine post - The Beauty of Knitting. These kinds of things always give me inspiration. Here is a few of the adorable creations. [caption id="" align="alignnone" width="352" caption="Eye of the Beast by kathrynivy.com"][/caption] [caption id="" align="alignnone" width="500" caption="Daphne and Delilah the Momma and Baby Monster by Rebecca Danger"][/caption]

The day I fell out of a plane

On February 7th 2010 I fell out of a plane. I can't really claim to have been the one to jump out of it - the instructor did that for me - I didn't really get the choice once I was up there. Anyway...I'd been wanting to do a a parachute jump for a while, so when my friend Gill said she was going to do it I thought it would be fun. Always easier to do these things when you have someone along with you. We booked our 'first' appointment wa-a-a-ay back in September 2007, but thanks to the wonderful weather we have in Scotland we had to go up another 4 times to get the right weather. But what a beautiful day the 7th of February was. Gorgeous clear blue skies, a little cold though, well only -22�C in the sky! We learned from our experiences to get to the centre sharp, to ensure we were one of the first to jump, so, nice and early we got all our gear on. Looking rather ridiculous in our dodgy hats, goggles and jump suits, but that's all part of the fun. At this point we're really not that nervous - after so many times going up the nerves just fade away. Off we shuffle to the little plane, my instructor Bob with his rabbit fur hat leading me out by a strap, like I'm a puppy on a leash. I'm jumping after Gill so I get into the plane first with Bob behind me - all snuggled up in the back, further away from the gaping hole in the plane - oh yes, the plane has no door - just what you need flying in below freezing skies. As the plane lifted off the ground my nerves started up a little, but after about 20 minutes of looking at the beautiful scenery you kind of forget what you are about to do. At 8,000ft things start happening (We jump at 10,000 ft). We get ourselves strapped to our instructors tighter, and our goggles come down. Right - no time to think! Gill's instructor shuffles forward to take her to the edge of the door. This is it! Before I know it Gill's instructor has gone and I see Gill fall in to the sky. "Aaaaaah! What the hell am I doing?!?!", but before I know it Bob is shuffling forward too! We're on the edge of the door and I'm thinking 'Don't look down! Head back. Arms crossed. Legs under the plane'. Then I tip over.....and I'm gone. There's nothing you can do now. I think I screamed for a little bit, but then I realised there is absolutely no point to it, and thought I'd better get myself into the right position. Free fall is amazing. Wind is just flying past you and you can barely see, then before you know it, you feel this gentle motion and then you are vertical again, lightly floating down to the ground. It felt so calm and relaxing, so even when I looked down at my toes wiggling thousands of feet above the ground it just felt nice. We did a bit of spinning round in circles, then started to prepare for the landing. We came in fast and bumped to the ground, no harm done. Then we pick up the parachute and trundle back to the hanger. And that was it over, it all happened so fast. I'm ready for the next time...I just hope Scotland's weather is.

The Designer vs The Developer

This article was sent around my office the other day causing a little bit of a stir...5 Good Reasons Why Designers Should Code. 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.

Let's get some thinking time

For the past couple of weeks I've been doing some 'thinking time' for some new projects. It has involved researching the brand, target market as well as the competition, then creating a concept that provides the user with something a bit more unique; something that has a point of view, rather than just a nice looking design. 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.

Working emotionally

When designing websites in the past, I've tended to be very logical and practical, especially if I get stuck with something. I make logical choices for positioning, colour and layout. This is really quite an important way to think to create functional, user-friendly websites. However, to create something a bit more special and visually appealing you need add something else to the design. I believe this to be the personal and emotional input that a designer imbues into the work they do. 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.

Text replace - using sIFR 3

I've been looking into a few methods for how to replace text on a page. 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

Flash ActionScript 3.0 - Uploading an image

I've been having trouble implementing the code to upload an image to a server. The code is basically this:

Set the variables for the file reference, file types to filter by and the url to send the image to:

var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
var fileReference:FileReference = new FileReference();
var uploadURL:URLRequest;
uploadURL = new URLRequest ("upload.php");

Select which file you want to upload to the server.

 fileReference.addEventListener(Event.SELECT, selectHandler);
fileReference.browse([imagesFilter]);

Function to tell Flash what to do once you have selected your file.

 function selectHandler (event:Event):void {
var file:FileReference = FileReference(event.target);
file.upload(uploadURL);
}

Then use the following PHP code in a file called upload.php.

So, why wasn't is working

So basically, this code wasn't working, and I had no idea why. I kept getting the generic error [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2038"]. A nice relaxing sleep later I did some more searching and discovered this wonderful post: Romantika.name | Flash Uploader Error. Which basically informed me that there can be a security issue with Flash trying to upload things to a server. I updated my .htaccess file and ta da....all worked perfectly.

She's got the look?

When I started out as a designer I found the idea of creating a brand identity to be a mystical and exciting thing. Putting shapes and words together to create something with it's own personality, to encompass what a company was about, was quite appealing, but as I developed my skills in both print and web design I discovered that it was something I tended to struggle with, and then just neglect. Then, as I found my interests lay more towards web design, with it's wonderful mix of problem solving, creative design and programming, I just never quite got around to getting any better at it. 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!

dache

The visual works of David Pache - creative consultant, a brand and identity designer in Switzerland

Equator

Full service, integrated digital marketing agency

CSS Switcher by month using Javascript

I've been creating a website where I wanted to change the look depending on the season.� I've used Javascript to control what CSS was applied by checking what month it is, then changing the href property of the css tag.

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.

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 of the page.

Done!

Spam away

I'd been getting really fed up with the silly amount of spam comments I was getting. Decided it was time to take some action! Installed the Simple Captcha plugin. Very excellent so far! Anyway - aside from that I do feel like I've been neglecting this blog for a while. Got a couple of things I'd like to write about - I'll get to it soon.

It's time to get on with it

I'm still working on a few freelance projects. I've been learning how to make an Adobe Air application (frustrating, yet still rather enjoyable - DAMN YOU AS3!). Still have an illustration to do - it's been sketched out on paper, but I still have to work on it in Illustrator. My blog theme has been woefully neglected. Really need to get all these things finished, but instead I've had a lovely morning and early afternoon relaxing and reading a good book. Monday is going to be a productive day. I'm certain.

What's the big idea?

Are you a marketing super kid? Ideas just stream out of your head at an exponential rate? I'm certainly not. Despite occasionally having a great idea pop into my head I quite often struggle to create exciting and interesting concepts. So, if you're not a marketing genius, or are just on a bad day, what do you do? Well, for me it's all down to research, brainstorming and hardwork.� I try to soak up as much as I can about the subject, target market, brand or whatever, then start doodling, writing and sketching whatever comes in to my head. It can also be really useful to sit down with a bunch of colleagues and just bounce ideas off each other. All you need is a few not too bad ideas, then just work on developing them. I think with that you'll get there in the end, and sometimes it will even turn in to that genius idea you were looking for.

Anatomy of Illustrator (CS3) - for super beginners

I was helping out a friend who is almost completely new to design, and discovered that there is very few tutorials explaining the very basics of Illustrator and how to use the tools. The variety of panels and menus can be quite confusing to a beginner and there is very few guides out there to ease a new user to the program. If you've not had any training it can be a struggle to teach yourself in the beginning, so here is a simple beginners guide to using Illustrator that I wrote for my friend.

The basic anatomy

The workspace

Artboard - This is the main page area that you are drawing on
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
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.
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

[caption id="" align="alignleft" width="61" caption="Tool Bar"][/caption] [caption id="" align="alignleft" width="253" caption="Panels"][/caption]

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

Selection tool - Select an object or grouped objects on the artboard
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
Magic wand - This lets you select objects with a similar fill colour/pattern
Lasso tool - Also a selection tool, just draw a shape and it will select everything within the shape

Object creation (Drawing and typing)

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.
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
Line tool - Allows you to draw different types of lines, such as straight, arcs, spirals and grids
Shape tools - Draw different types of shapes
Paint brush tool - This creates a stroked line using a brush (This can be found in the Stroke and Brush panels)
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

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
Scale tool - The scale tool works in a similar way to the rotate tool, but with changing the scale of an object
Warp tool - Drag across an objects to change it's shape
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)

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)
Graph tools - This tool lets you create a variety of types of graph. You can select a size and enter the graph details.
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.
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.
Eyedropper tool - If you have one item selected and click on another item it will copy the colour/styles over to your first item.
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.
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�
Live paint selection - Selects the shape you want to fill

Artboard

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.
Erase - This tool lets you erase sections of your selected item.
Drag - Drags your view of the� artboard
Zoom - Click to zoom incrementally, or click and drag the area you want to zoom to.

Colour

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

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
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.
Brushes - These adjust your stroke lines and can be used in conjuction with strokes around the shape and the paintbrush.
Symbols - These are little symbols you can re-use again - You can also create your own by dragging them into the symbol panel.
Stroke - This lets you set the outline of the shape. You can change different options for your stroke in this panel.
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
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.
Layers - This allows you to have different shapes on different layers, you can view, hide or lock these as well as change the order
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.
Align - This lets you align shapes against each other, i.e. centre them all together
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.
Character - Basic text options such as font, font size and leading
Paragraph - Further text options if you have created text within a paragraph shape

The top menu

File - This has your usual, 'New', 'Open', 'Save' and 'Print' type options
Edit - Basic edit controls such as copy and paste, as well as preferences and settings
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
Type - This is for controlling and editing the text/fonts
Select - Lets you select specific items, such as if they have the same fill colour
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.
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.
View - Viewing selections for the artboard, as well as options such as 'Ruler' and 'Guides'
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

Busy month of May

Well, I have to say that I'm glad May is almost over. My poor little brain has been working on overdrive, although I have really enjoyed the projects I've been working on. The main project has been a wonderful Flash interactive feature. A little mini educational game for kids. It's really stretched my coding skills, and the timescale has been tight which as added extra pressure, but overall it's been fun. I've also got to animate fun little bits of it, which I always love doing. And, it's given me a bit more motivation to think about creating another game for myself on my own time. But anway, June is almost here. This is my favourite month, mostly because my birthday is in it. Celebrations (and much shopping) shall ensue!

Four cats

Illustration of four Pastel Cats - Sitting, Sleep, Playing and Hissing

Go baby, go baby, go

Aside from the fact that the catchy, yet slightly annoying, song from the Noisettes (Don't Upset The Rhythm) is on the radio at the moment, I've also been rather on the busy side. I'm getting through my freelance projects at a steady pace, while not stressing myself out about it. I'm looking forward to getting a few more of them finished and getting back to a few of my own personal projects. I have a few illustration ideas in mind, some crafty things I'd like to do...and I've itching to re-design my website for quite a few months now. I don't think I'm working too hard. I'm working just as much as I have to.

Too much on my mind

I think I'm trying to do too many things at the one time. Lots of ideas for new things I want to do, and a whole backlogue of things unfinished...but not abandoned. I think I need to get through the freelance work first, then just attack each of my unfinished projects one by one. I am not allowed to start anything new...well, maybe once I've finished at least one or two things...

And the microsites just keep on coming

Working on another Flash microsite. I've not even finished the first one yet. Thankfully I can reuse a lot of the work I've done on the other one, and I'm really enjoying the amount I've been learning while working on them. Classes are really great way for me to easily reuse the code, and with each of these sites I'm working on I'm refining them. Right, back to work.

Seven Things

Well, while I find this Seven Things, blogging link exchange thing, that Felicitas Betzl has tagged me in, eerily like a chain mail, I'm going to break with my usual tradition of not getting involved. What the hell, it's almost 2010, and I'm almost 30.

Seven things about me

1. One the most important things that has shaped me as a person is having an identical twin. My sister Jennifer has always been someone I can rely on and trust, and I could never properly express how great and supportive she is. 2. I have a phobia of tic tacs. Yes, those harmless (ick) sweet type things. I only have a vague memory of my elder sister tormenting me with them when I was younger, but I can't look at them now without feeling on the queasy side. TV adverts must be switched off, and just the sound of the box rattle makes me twitch. Yes, even typing this is making me uncomfortable. I have challenged my phobia. A few years ago I tried to eat one. I removed it almost immediately and it doesn't seem to have helped. 3. I hate when people spell 'weird' incorrectly. I even had to correct it from the Rules section below. All these stupid english rhymes have done is confuse people. 'i' before 'e' except after 'c' is NONSENSE: weird, their, abseil, beige, caffeine..... 4. I don't really think I can deny being a geek. I've been programming computers (badly) since I shared a ZX Spectrum 48k with my sisters from aged 7/8. I make a point of knowing what actors and directors are associated with what films, and by now I have a pretty decent movie knowledge. I read sci-fi books and watch sci-fi tv shows. I play computer games on PC or console till early in the morning (even if only at weekends). I wear glasses. I read books on the bus. And well, I slouch forwards when I walk....does that cover it? 5. I will NEVER EVER let anyone see the first web site I made (notice how I didn't use the word 'designed'). It first reared it's ugly head in the year that I discovered the internet...I think that was about 1996. You know, I actually wonder if I actually still have the files. 6. I'm addicted to sugar. The 2 sugars in my tea could easily get turned to 3 unless I keep an eye on it. If I'm in the supermarket and they have those 3 packs for a �1 fizzy sweetie selections I have to buy them. And I also just finished eating a Sherbert Fountain. DAMN, there are no more sweeties in my flat. 7. I have a BEng (Hons) degree in Product Design Engineering. The only parts of it that have come in handy is the Accounting and Marketing classes. But, you know, I met a great bunch of people, so I can't really feel bad about it.

Tagging along

Rules

And here�s the rules of the game:

Link your original tagger(s), and list these rules on your blog.
Share seven facts about yourself in the post - some random, some weird.
Tag seven people at the end of your post by leaving their names and the links to their blogs.
Let them know they�ve been tagged by leaving a comment on their blogs and/or Twitter.

And just to finish - due to my dislike of chain nonsense, would all the people I've tagged please NOT feel obliged to do this unless they really want to!

Flash page turning components

Part of the microsite I've been working on requires a page flipping component. 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.

Back to my Flash microsite

I'm working on the Flash microsite site again. Cheered me up quite a bit, as I really feel I can get my teeth into it. Starting to add the visual elements to it, so it's becoming more fun to work on. 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.

I {heart} gradients and rounded corners

I do. I love gradients and rounded corners, but it's turning into a sick, sick addiction. Every site I design now is full of gradients and highlights and little rounded corners...but it's got to stop. I'm now in the habit of, once I've finished designing a page, removing all the rounded corners to decide whether they actually benefit the design or not. However, my gradients and highlights are still a problem. I need to expand my design skills. So, I'm determined that the next site I design will have NO GRADIENTS...just to see if I can actually do it. I'm already a step towards it; the latest illustration that I'm working has no gradients in it at all....um....yet.

Welcome to the new me

Well, while I'm almost fully converted from Elaine Simpson to Elaine McVicar, and now I'm getting converted from Danu Design to Elaine McVicar. You may not have noticed that my domain name has been changed over, with only a few hiccups, from yesterday, but here I am elainemcvicar.com. You know, I really like how that looks.

it's all about class

I'm building a Flash microsite at the moment with the consideration that it should end up being a re-useable template, as there may be additional microsites in the future. So best way for me to do it is to create classes that control the functionality of the site. So far I have a main page structure set out. This includes one FLA file that imports a navigation class. This class creates the menu and controls the navigation between pages. I've even managed to get SWFAddress working. This lets the user click back and forward on their browser through the Flash site. I've also created a separate class for all of the content pages. This ensures that the actionscript for each page doesn't interfere with the others. Next steps are really to code the specific pages, add the content and reskin it to fit the design. I know I'll have quite a few challenges, and the timescales I have to work on it are really tight, but I'm looking forward to seeing this project through to the end.

Heart breaks and stomach aches

Well, I'm glad this week is over. It's been a pretty awful one. Redundancies announced at the start of the week, which has made work a very depressing and slightly more stressful place. So, I've occupied myself with pottery class and climbing, which are two very good things to get yourself out of your own head. Also realised that when I started this blog my intention was to write about my thoughts on my general day to day work in design, but I seem to have gotten distracted into trying to write articles and tutorials. So, from now on I'm going to try to go back to my own thoughts. This is about me.

I'm creating an RSS feed...I hope

Well, today I'm going to try to create an RSS feed for my homepage updates. The blog one is already handily incorporated by WordPress, but I'd like to create one that involves all my updates. Now the XML tags are pretty easy. This website, Make RSS Feeds, gives you the basics. However, what I need is one that is automatically updated when I update my website. I believe PHP is the answer. I've found this site: Web reference - Creating a Custom RSS Feed with PHP and MySQL. Let's have a go! Okay, that took me some time using the tutorial above, and the PHP code from my homepage updates... First try in the validator brought out a few errors. I believe they are to do with the header information so I'm going to search from more help with creating an RSS feed using PHP. So an hour later, I've managed to get it to work - excellent! Seems like the tutorial I followed had a few things in it that was causing me problems, although I'm not sure why. Now, after some tweaking, here you go, my homepage RSS feed. Please let me know if you have any problems with it, and I will try to sort them.

CSS Tricks

Handy CSS resource

Positive Space

Full of really interesting articles for designers

Here we go again

Well, it's the start of the new year, and I don't know about you, but I could really do with a lie down somewhere. I'm not quite on a work schedule yet. But apart from that, I'm really looking forward to this year. I have quite a few projects that I'm enjoying, and I'm looking forward to getting far more creative stuff done this year. You know what? I think I'm going to go make a list!

Docu-docu-documentation

I think I'm all documented out. Last week and the week before I was mainly working on a Functional Specification (how each page/section works, as well as how it all fits together) for a website, which has come in at almost 7 thousand words, as well as a Component Specification (explains how each component should be set out, as well as text/background colours etc.) which is only sitting at 756, altohugh, I'm still working on that as I do the design. Documentation is important so we can keep a log of how everything should work, but I'm starting to wonder if we are approaching it in the right way. It's difficult for people to grasp how something works from dry text, and I've spent quite a bit of time explaining things as well, but then maybe that's just because I need to work on the way I write. Initially I'd used a lot of bullet points to try and make it clearer, but I think this is actually more confusing because it's more difficult to understand the context. I added simple wireframes, which definitely helps, but this should also perhaps been taken to further detail. Yes! More diagrams! That will be fun...um... Anyway, keeping documentation up to date can also be troublesome, it's easy to get distracted with other things. However, as the project goes on it's best to keep an accurate document on the website, that way we always have something to fall back on, and to check, especially if the client wants to make further changes. Well, I'm reaching the end of the documentation stage for me (hopefully), so it's back to the pretty pictures. Excellent.

Favourites of 2008

Well, it's coming to the end of the year so I thought I'd do a quick run down of some of the sites I've really liked this year. It's mainly about the overall look and feel rather than any kind of functionality, but they all have something that I find inspiring in some way.

Carsonified Events

Big fonts, sketchy graphics and muted colours.

Ma.tt

Feels like it's a worn away painting on a wall. And, what a great domain name.

The Statement

The white on black makes the old newspaper style feel like something a bit more special.

The things we make

Perhaps the mix of colours, wooden floorboard background and zig-zaggy lines. Just feels nice.

Satsu

Pencil sketches. Love it. Love it. Love it.

Meomi

It's just so gosh darn cute.

Carbonica

Nice and sketchy.

Kyan

Clean, simple and lovely

Studio MIK MIK

So pretty. I really like the pale blue and brown. Ah well, I'm sure there are tonnes more than that, but I'm getting tired now.

One of my other creative pursuits

Well, I started working on this...hmm...around May, maybe June, so now 6 months or so later I have finally finished it. My main concerns are how it is going to do in the washing machine. I'm sure the knitting and the wool will be fine as long as the temperature is under 30�, it's the stitching together that concerns me. Oh, anyway. I'm rather happy with it. [caption id="" align="alignnone" width="500" caption="Baby jumpsuit"][/caption]

It's started...

This week has involved the first Christmas work I've done this year. Not too bad starting in mid November, starting to get me in the Christmas mood. And it's been fun - I've just been doing little illustrations of snow, holly and stuff like that. Hmm, maybe it's time to start thinking about my Christmas shopping....nah, I have plenty of time!

When you are all tired out

Trying to be creative when you are tired out can be really difficult.� It's really easy to just keep distracting yourself from what you are doing, by checking email, Facebook, Bebo or whatever. So on the days that you struggle, how can you stay productive? I'm sure there are different ways for everybody, but for me, it comes down to being organised. I write out the things I want to achieve, and keep make lots of sketches and notes to keep me on track, but really, you've just got to keep going and do your best. Hopefully at some point the inspiration will come back. Or maybe just, write it off as 'one of those days' and check your email again. Yeah.

Reading alone

Illustration of a girl sitting cross legged reading a book and crying

Paul MacLeod

Flash, sheen and animation guru

i {heart} trebuchet

When I'm designing a website I normally stick to Arial in most cases, and quite often Georgia if it's something a bit less businessey (yes, I know that's not a real word), but I have now discovered my new favourite web safe font. Look, here it is, Trebuchet MS. I'm finding it very pretty, and rather less formal, so excellent for less corporate sites. My main problem now is going to be not using it for everything.

Research is soooo tough

It is always really important when starting a project to get under the skin of the product or brand that the design is going to be for. Mostly, this involves getting a lot of information from the client about their brand and product, as well as researching them, and their competitors online, but sometimes you get to do great stuff, like go shopping. So, on Thursday, for the new project I'm working on, myself and another couple of girls took a trip around the high street stores in Glasgow researching our client's product and their competitors. Phew, what hard work! But, anyway, apart from a nice day walking around Glasgow, we managed to get really valuable insights about the product, customers and the perception of the brand. It's now going to be so much easier to create a design that will make the client happy, as well as their current and potential customers.

Typetester

Handy website to compare fonts for the screen

Logo Design Love

Even the name cheers me up

On iStockphoto

Well, I'm now rather impressed with myself as iStockphoto have accepted a few of my illustrations. Something I'm going to hopefully be added to reasonaly regularly. Check me out

Mr Crocodile loves his laptop

Illustration of a happy crocodile businessman on his laptop

Captain Bumble and Squawky

Illustration of a happy pirate and his parrot

Poor little me

Illustration of a sad zombie sitting alone at midnight in a forest

A List Apart

Articles for people who make websites

Running Legs

Illustration of 2 men and 3 women running in the same direction.

Creative people

I'm trying to decide if I believe in the concept of 'Creative people'. It's something I hear all the time at work. Creative people are meant to be a different breed, man. Free spirits, livin' in chaos, expressing theirselves, yeh! Now, I love being creative. I love a variety of creative pursuits, from designing to drawing to painting to crafts, but is this something you develop in yourself, rather than something you are innately born with? I'm not denying that there are some amazingly talented people out there, creative geniuses, perhaps, but the rest of us? I mean, I'm a very logical person, very practical. Being creative is something I've learned to do better. I know what web design layouts work, what colours look right together, but this is from experience rather than instinct. I believe that all of us have the ability to be creative, there are just some of us who spend more time developing it. So, pick up a pencil, start sketching or something, then you can call yourself a 'creative person' too.

How to design a good email

It's been a long time since I've designed an email, so before I start here are a few basic things that I should consider.

Designing the email

Who's it for: While designing the email you should keep in mind who the target audience is. The email should be relevant and interesting to the reader, otherwise it will often be considered to be spam.
What do you want them to do: You should also think about what you want the reader to do once they have read the email, basically, what is the call to action. This should be simple for the user to find, so keep irrelevant copy and links to a minimum.
The layout: It's very important that the reader immediately recognising who the email is from, so keeping the logo to the top left is a good idea. Also consider that the email will be viewed in different browsers and applications and may also be initially viewed in a preview pane. This means you should try to get the message across to the reader without taking up too much space. Think about how the content is set out. Titles should be short and informative, any images should be relevant to the content and try to be as concise as possible. Also minimise fonts, colours and images as these can make the email confusing and difficult for the reader to scan quickly. And finally, make sure the call to action is prominent in the email, so the reader can easily understand what the email wants them to do next.

Writing the copy

The subject line: The subject line is the motivation for the reader to actually read the email, so it's very important to get this right. You should briefly describe the emails' content, and add something attention grabbing. It's also a good idea to add a call to action whenever possible
Personalise: If you have a name associated with the email address it's a good idea to use this in the email. It will help confirm that the email is not spam, and also make the reader think the email is more relevant to them, hence making it more likely to be read.
Talk to the reader: Copywriting is a skill all on it's own, but quite often it will also be one of the designer's tasks so it's worth thinking about carefully. Try to think of the email as a conversation, rather than dry information and keep it simple and concise so the reader doesn't have to read through lots of text to find out what the email is about.

Building the email

Click, click, click: Make sure any images and relevant text are clickable; you want to give the reader as many opportunities as possible to click on the email.
Important links: There are a some additional links that should be on every email. Having an unsubscribe link is essential. It will reassure the reader and is also a legal requriement. Another good practice is to add a link to a web version in case the reader has problems viewing the email.
Compatibility and stuff: Finally, remember all browsers and applications have different rules for displaying backgrounds and images, so your email may not be viewed exactly how you want it to be. This means you should try to build the email as simply as possible, you should never use background images and all styles and colours have to be applied in the HTML rather than with external CSS.

So...

I'm sure there are many more issues to be considered when creating an effective email, so perhaps try a few of these resources too. 20 Tips for Good Web Copy Email Guidelines Good HTML Newsletter Design

Presenting...Help!

Well, I had to do my first client presentation yesterday. I've always known it's not one of my strong points, and although it went fine and the client was happy with the work we'd done, I think I've worked out where I went wrong. My past experience in doing presentations has been at University, so the presentations all tended to be more information based and practical, rather than visual. The setting is also very different from the very formal standing in front of a screen with an audience in front of you to the more relaxed sitting around a table discussing the project. So, when I went about creating my powerpoint file and planning what I wanted to say, I ended up preparing for it with my past experience in mind, but what you really have to do in a client presentation is connect with the audience. You have to basically tell them a story, show them all the thought and passion that you actually put into the project, and discuss all the little details that make it what it is. Well, I think next time I'll be better, and have a better way of going about it.

Spam!

Well, I've had 2 surprising different spam emails in the past couple of days. One was telling me there has been a nuclear explosion in London, and I should open a zip file containing a list of victims. The second was telling me there had been illegal activity in my internet usage, so my account was being suspended. A zip file was attached with details. Excellent. I look forward to the next one.

Just one of those days

Well, it's feeling like winter is creeping in now. I have my fingerless gloves on while I'm working to combat the cold, and the dark grey clouds are filling the streets with rain. So, along with Summer, my motivation has gone into hiding, although hopefully it will come back before next year (I'm kind of hoping Summer will come back for a bit too, but that's looking less likely). Time for a cup of tea!

Now for the fun part

My features spec is just about there. I'm sure there will be more to add to it at a later date, but I think it covers everything for now. So, I've actually started on designing the initial look and feel of the site. I'm having to combine the latest branding from the print agency, which heavily involves circles (not the easiest to implement in a website) with a functional, reasonably easy to build wireframe. It's been enjoyable so far. Lots of gradients, shines and rounded corners, even though a part of me is twitching slightly. Lots more to do!

Smashing Magazine

Articles, tutorials and information for web designers and developers.

Hello Mrs McVicar

I have finally changed to my married name on my passport, my bank account, my driving license, my Boots Advantage card, and yes, my website. So, if you are looking for Elaine Simpson, she is no longer here. Goodbye Elaine Simpson, hello Mrs McVicar.

Flash Banner Basics

This is a quick beginners guide to creating advertising Flash banners, including some technical issues you should consider.

Before you create your Flash banner

Before you begin creating your file there are a few things you will need to confirm with your client, advertising network (i.e. MSN or Yahoo), or digital marketing agency (i.e. TradeDoubler) . These are, for example, banner sizes, file restrictions (such as animation length, looping, file size), and URL.

Banner sizes

A banner can be of almost any size, and can be dependent on placement, geographic location and company. Some common sizes are:

MPU - 300 x 250 px
Skyscraper - 120 x 600 px
Full banner - 468 x 60 px
Leaderboard - 728 x 90 px

File restrictions

Animation length

Some advertising networks will require a limit to your animation length, so before you start ensure you know what this is if there is one, otherwise take a look at IAB Rich Media Standards. They recommend 15 seconds for the length of the animation.

Looping

Some advertising networks also do not allow the animation to loop, so find out if this is so. It's also worth considering whether the banner will benefit from looping the animation, or if you want to finish on a final frame with a strong call to action.

File size

There will be a file size limit to your Flash banner, so optimising your banner is essential. It's a good idea to consider this at the design stage. Try to keep everything as simple as you can. Bitmap images and a variety of typefaces will increase your final file size, so on your publish settings select the option to generate a size report to discover where you can streamline your file. Also, take a look here for some further advice on optimising your banner.

URL

The standard method of passing a URL to the Flash banner is by using a clickTag. This code allows the banner clicks to be tracked. The page that the Flash is placed in will tell the banner what the 'clickTag' value should be, i.e. the URL with the tracking code, then the Flash banner will use that value as the URL when it is clicked. The format of the clickTag is also dependant on the placement. 'clickTag' seems to be the most common, however, 'ClickTag', 'ClickTAG' and 'clickTAG' are also used.

Starting the Flash banner

Frame rate

Too fast and some processsors can't keep up, too slow and the animation is jumpy and awkward. So what should you set your frame rate too? Here's some info on the 'Magic Frame Rate'

"About magic frame rate numbers: Recommended fps values for your FLA document are either 21 or 31, otherwise known as the "magic frame rate numbers". The reason for these values is that the default document setting of 12 fps is more often than not too slow for tween animations, resulting in "jerky" motion. So most of the time it needs to be higher. In addition, it has been found that two SWFs published to the same fps, will run slower on the Mac Flash Player than on the PC Flash Player, given equivalent processing power. Sometimes the lag time is quite noticeable. To counteract this "bug", we must set our FLA to either 21, 31, 41, 51 or 61 fps to negate this effect. But of course most computer processors cannot keep up with a frame rate higher than 31 fps, or performance issues in the Flash Player may occur. Thus it is advised that only frame rates of either 21 or 31 be used for most FLA documents. Only if you are running an FLV video player in your browser with the video at high resolution (larger than 320�240) would it be advisable to drop the frame rate of your FLV down to 12-15 in order to conserve performance. See Tom Green's CMX article for more details on video performance in Flash."

Taken from: Community MX : Understanding the Movie Clip Architecture. So, I'd recommend keeping your frame rate to 31fps, to ensure minimal performance issues while still keeping a nice, smooth animation.

Background

Always remember to add a solid background to your banner, rather than setting the background property in Flash. Quite often, when a banner is placed it will have the 'wmode' set to transparent, so you can lose your set background colour.

Border

It is also recommended to have a solid border differentiating your Flash banner from the content surrounding it. This is quite often a restriction requested by advertising networks to ensure that your banner does not appear to be part of the site content.

Button

Unless you want different parts of your banner to link to different places, a good habit to create a transparent button covering the full size of the banner. Then add the button action, something like this:

on (release) {
getURL(clickTag, "_blank");
}

Providing an alternative

Also remember that you may have to create a gif alternative to the Flash banner. The file size restrictions will also be an issue here, so try to keep it as simple as possible. It may be a good idea to keep this static if possible.

And finally

If you are looking for some more information, check out Adobes Best Practices when advertising with Flash or read my other article on Flash Banners Ads.

Mercury Thread

If you're looking for SEO and other such mystical things, then take a look here.

Is your head big enough to fit a whole site in to it

This is harder than I thought it was going to be, writing this Features Specification, that is. Well, I've almost finished the first draft of the written document. Then my plan is to print it out, read it through, sketch out a site map and then work out where all the holes are. There is a lot to think about. I want to ensure that I'm making the user experience as smooth and beautiful as possible, while considering all the functionality that the client wants to include. It's felt a bit like I'm chipping away at it for days, but soon I'll be able to see the big picture (Sorry to mix metaphors!)

Preparation before design

As I'm a Designer, it's normally expected that I'd want to get straight into actually working on the visuals for any project, but as it turns out I'm the main advocate of creating a detailed Features Specification for the current project I'm working on. It's really important before a project goes ahead to know it's full scope for a variety of reasons. 1. To make it clear to all involved in the project what the purpose and functionality is of each page, and the site as a whole. This clarity ensures that at the start of the project everyone knows what we are aiming to acheive. It documents our intentions and ensures we are going to create something that properly fits into the clients requirements and expectations. 2. To make the design more cohesive by defining components. When designing numerous pages there can end up being many different elements. Just a bit of thought into grouping these elements as similar components can make it easier on design and build. 3. To accurately plan and cost the project. If we are all aware at the beginning of a project of what the level of work will be required, especially in development, then the cost will be more accurate and the planning will be much easier. 4. To make it easier to actually design. If there is a clear set of content and functionality for each page, then when it comes to designing the site, there will be more time to concentrate on the look and feel, rather than what is actually going on each page.

Designers Talk

A community for designers.

Zoom. Zoom. Zooooooom....and drag

Well, I'm rather impressed with myself (even though I really shouldn't be, because this has taken me days). Anyway, I eventually managed to get my Actionscript 2.0 Zoom Class working. It will let you drag a� movie clip and make it zoom in and out from either the centre or top left of� the screen, rather than the centre/top left of the actual clip. Sounds a� bit confusing, but once it's finished I'll put up a sample and you can see what I mean.

ActionFlash go!

Well, I'm back to working on some Flash Actionscript today, which is nice for a change. I'm creating an image gallery, which should be quite simple, but I'm going to employ my new found fondness for Actionscript Classes. Still getting the hang of using them, but they are going to be really useful when we want to re-use them for new projects.. I think I'm going to need 3 Classes. One which someone has already written, will load in the images, then crop if required. I'll write the second to zoom in and out, and the third will let you scroll through the images horizontally. Will hopefully all come together beautifully!

i {heart} icons

Something I really want to spend more time on, is creating icons. Cute little darlings scattered across the internet. From favicons in your address bar to folder icons on your desktop to an extra touch in the design of a website. Little visual cues - telling you what's going on, what's it about, or just where abouts you are. Who doesn't recognise the blue and white Facebook 'F', or the Windows Messenger figure. Even I've created my little pixel icons as part of this latest web design (let's call it v01, just in case I redesign this at some point in the future), which if you really fancy you can download here. Anyway, here are some free icon sets that I think are really adorable: Turbo Milk Monster Icons ~dimpoart on deviantART Yummy Icons Icon Buffet Sushinobi Icons And, if you want to make your own, try this out Axialis Icon Workshop

Best Web Gallery

Another place for me to take a peek and well designed, and well built sites.

Check it everywhere!

I've been building a site for�the past few days, that I haven't actually designed, and it's been quite interesting. Although, a small part of me is dying inside because it's been designed by a print designer who doesn't really have a clue how to design websites. So, anyway, as I've been building it I've been checking it in Firefox 3 (I really should've done Firefox 2 as well, hmm), IE7 and, thanks to this program, Multiple IE, IE6 as well. The first thing I learned, which has solved so many problems, was to make sure I was defining the margins and paddings as zero. Solved quite a few of my basic errors. And this wonderful add-on for Firefox, FireBug, makes it really easy to visually work out what is going on. (I really want one for IE now). Another thing that I've had to use to accurately follow the designs is use transparent PNG's. Which works in Firefox and IE7, but alas not IE6. One to be considered later.... And another lovely part of their design was to have input boxes for log-in with the label as the text value inside the box. So what do you do about the password box? So, I turned to Google for answers, as my Javascript skills are pretty non-existent. So far I have a solution that works perfectly in Firefox, and only partially in IE6/7. I think I'll look to someone with more experience for answers in this one. So, let's all pray for a day when all browsers compile the code in the same way...sigh.

Testing. Testing. 1 2 3.

Today I've been doing some testing. Running through one of the sites we've been working on. Was really initially meant to be testing the layout in IE6, but due to my slightly pedantic nature I'm pretty much running through a lot of the functionality and logging the rather numerous, if minor, bugs. There aren't that many IE6 issues anyway. Testing is actually something we're normally quite bad at doing right. It always gets scheduled in at the start, but as a project goes along, and things take longer than expected - especially the development work, the time for testing gets shrunk. It is a really essential step though. It's hard to view something you've been working on objectively. You know where to click and what button takes you where, so you never get lost in a site, and unless there is an error, your expectations are always fulfilled. So, you require an outsiders eye. Someone who has absolutely no idea what's going on (Okay, that's a slight exaggeration). Anyway - there is lots to check and fix. Fingers crossed for the deadline on Monday!

Back to the sign up forms

I'm almost at the end of working on this sign up process, so here are a few basics.

Ensure that having to sign up is actually necessary
Inform the user what the benefits are if you sign up
Only request the minimum amount of information required
Show links for 'Sign in' and 'Forgotten your password?'
The form labels should be simple and obvious
When showing form errors, make it explicit where the error actually is (i.e. explain if it's either the email or the password that is wrong)

Well, there is still lots more to learn, and if you are interested, here is a little bit more reading :

Smashing Magazine, Web Form Design Patterns: Sign-Up Forms
User Interface Engineering, Account Sign in: 8 Design Mistakes to Avoid
A List Apart, Sign Up Forms Must Die ( excerpt from the Web Forms Book mentioned before)

Oh, look over there....

Well, after my last post about Twitter, I've actually added a Twitter Tools widget to my blog. See over there in the side bar. I'm impressed with myself.

Right, what's this Twitter nonsense

I've decided it's time to experiment a little with a few more of those social networky things. Let's call it 'industry research' (I'm not just trying to avoid working on this Sign up process). So.....Twitter? I don't quite get it yet - it seems to pop up everywhere in different guises. Time to head to the Twitter FAQ....well, that's answered some questions. Next step is to try and actually utilise it. Let's see how I get on.

Newsletter Sign up forms

Well, the next exciting thing I'm doing is revising a sign up process. What I really need to do is look at this book: Web Form Design: Filling in the Blanks by Luke Wroblewski . Actually I'm pretty sure there is copy around here somewhere. Again it's all about user interaction, creating a simple effective form that is easy to use. You want the user to not even have to think about what they have to do, but just do it. I'll let you know how I get on.

Modify a booking - Argh

Right, so I'm trying to get my head around how to design a page to modify a hotel booking. However, there is quite a major limitation to this. The system cannot actually modify anything; you can only cancel the booking then re-book it, if what you previously had is still available, unless, of course, you are just changing something simple like room occupancy, guest name or payment method - then it can just update the original booking. That's not complicated at all, especially when you work out how many scenarios there has to be! So, my main challenge is how to create a seamless process for the user, while not making it a nightmare for the developers to actually program. Hmmmm. Firstly, I created a beautiful (well, practical) process flow chart to help me work out what the page has to do for each scenario (quite often ignored in the design process, because really we just want to get to working on the pretty pictures, and, as well as helping we work out what the page has to do, it should also help when it comes to the actual programming logic). It looks something like this... From the flow chart I've been able to decide the page content and structure, as well as how many visuals need to be done to fully explain the process. All I have to do now is put them together...Well, that wasn't as hard as I thought it was going to be.

This is the beginning

So I've managed to set up Wordpress on my server. The next thing I really have to do is design a theme for this now. Okay - let's go..