Nelson Croom's Blog

Design tip #5: HTML Snippets Series - Attention please!

by Hamish Long

Here's a nice simple way of drawing attention to a message using CSS. It displays an icon, a coloured background and coloured borders with the message. Customise the code to fit your requirements. If you have any questions, please leave a comment.
Add this class to your stylesheet:

.attention
{
background: #C9E9F4 url(../images/snowflake.gif) center no-repeat;
background-position: 6px 50%;
text-align: left;
font-family: Arial;
font-size: 12px;
padding: 10px 10px 10px 40px;
border-top: 2px solid #0099CC;
border-bottom: 2px solid #0099CC;
}

On your webpage, put your message in a div tag with the “attention” class. For example:

<div class="attention">
Please take extra care when out and about at this time of the year as the pavements can be slippery due to ice. You should wear sensible shoes. Espadrilles are a no-no.
</div>

My example looks like this:

The icon image and text will stay vertically centred regardless of how much text your message contains.

Styling our programmes

by Hamish Long

We aim to be as flexible as possible in terms of styling the look and feel of our programmes. Not only does this increase the aesthetic value but enables us to meet our clients’ design brief requirements. 

To aid this, we have been gradually increasing the amount of elements within a programme that can be altered using stylesheet overrides. What this means is that we can change the appearance of say, all the page titles, in one fell swoop by applying the change in the stylesheet.

We have always been able to change the font and main look and feel colours in the stylesheet, along with other basic elements such as list items and horizontal rulers but as more elements are assigned their own classes, we can amend elements that were previously fixed.

The images show "before" at the top, and "after" below. You'll notice that the course colours have been applied to the left navigation buttons, the page heading and the activity heading panel.

These are just a few examples of elements that can be changed in the stylesheet overrides, and we continue to develop more for even greater customisation!

Creating a colour palette 'the natural way'

by Hamish Long

I'm always excited about a brand new project when the client gives me free reign. One of the first things I create is a colour palette for the website. "Fresh and "vibrant" are words I hear a lot and with spring just around the corner (hopefully!) let's create a palette with a seasonal twist...

I find that good quality nature photographs offer stacks of inspiration so I've carried out a search in my stock photo library, www.photos.com, and found this great image of a yellow spring tulip in bloom.

I then open the image in a graphics application, in my case, Adobe Fireworks. Next I create four squares and use the colour picker tool to find a nice selection of colours from my tulip image. You might need more colours for your project but I find four gives me enough variety without over-complicating things.

 

As this website will not have colours bleeding into each other, I add a white border to my squares and overlay them so I can see how they sit together. I have duplicated the yellow square so all colours touch each other. I have also created a 40% opacity palette.

 

I can then start mocking up website layouts and colour combinations. You may be creating a palette for a different project - a slideshow presentation or a newsletter perhaps. It can be difficult to get started when creating a palette so I hope this technique of finding an image to match the mood of the project will prove useful.

Design tip #4: HTML Snippets Series - bullets and bars

by Hamish Long

You can jazz up a plain looking html page with some coloured bullets and bars. Here's an example:

For the green bar you use:
<hr style="color: #66cc00; background-color: #66cc00; height: 10px;">
and can change the colour and size to match your needs.

For the bulleted list:
<UL style="LIST-STYLE-IMAGE: url(images/bullet.gif)">
in this example I have my bullet image in a subfolder called "images".
I find the best size bullet image is 6x6px with a 4px space above it.

Which is my best side?

by Katy Hillary

I was about to write about some design work I have been doing on the big dental project that I’m sure we’ve all mentioned (it is taking up a lot of our time at the moment!) but then I spotted something.

The pictures of each other that we are using on the blog. Did anyone ever explain where they came from? Did we commission a Nelson Croom portrait to celebrate a good year? Did Alan bring in paints to amuse Edie and Leo when they came to work with daddy one day? Has Hamish lost the plot design-wise or is he aiming for a more “naïve” feel?

Well actually we painted them at our Christmas party last year. We sat down in pairs, with a refreshing glass of something festive and some poster paints, and tried to immortalise our partners on canvas. Some were more successful than others as I’m sure you can see!

I painted Angela, who seems very bright and larger than life, possibly due to arrested development of my painting abilities aged about 12. Angela’s version of me on the other hand, seems to be visiting from beyond the grave, and I’m clearly not very happy about it either. Of course, next morning as I boarded the red eye flight to Belfast, having got up at 5am with a bit of a headache, it was actually a pretty accurate likeness...

Can you guess who painted each of the others?

Design Tip 3: Icons at your fingertips

by Hamish Long

Icons are a great way to add a graphical, professional look to documents. You might however think it would be time consuming sourcing such graphics but did you know that you’ve got a vast library of them right at your fingertips?

Open a new document in Word and then choose Insert > Symbol. Change the font to Webdings. You’ll now see a grid of all the available symbols – double-click a symbol to insert it into your document. As it’s a font character, you can change the size and colour as you would with any other font you were using in your document. You’ll find additional sets of symbols in the Wingdings, Wingdings 2 and Wingdings 3 fonts.

Here’s an example of what you might create:

A number of the symbols will appear illegible at small sizes because of the detail involved so you may have to experiment. If you have a good graphics package you will be able to make super-clear icons by adding an anti-alias to the symbol. Here’s an example of a set of icons I made using the symbols in Adobe Fireworks:

You may find this document that I have put together useful - Download symbolMaps.doc It contains the keyboard layouts (standard Western keyboard) of the shortcut keys to get to most of the symbols. Especially useful if you want to make icons in a graphics package as you probably won’t have access to an insert symbol command.

If you're having trouble tracking down the symbols then in Windows XP you can open the Character Map utility by selecting Start > All Programs > Accessories > System Tools > Character Map. On a Mac, choose Applications : Utilities : Key Caps.

Design Tip 2: Keeping it in the clip art family

by Hamish Long

When we are putting together a multiple page document or presentation we often want to jazz it up with images - we might want to add interest and complement the text. It can be a headache trying to achieve this with clip art. Clip art gets a fairly bad press these days - it's seen as amateurish and old fashioned. This is fair comment in a lot of cases, but we can use it in an eye-catching way if we stick to the same style. For our multiple page document we want to build a "package" and using clip art with the same style creates a familiarity, a look and feel, across the document.

Here are a couple of examples of how a PowerPoint presentation could look:

I think you'll agree that the second one is far more palatable! But how do you go about sourcing a family of images?

1. Head to Microsoft's clip art website
2. Input your search term and click the right-hand tab of the "search" button and select "clip art"
3. When you have found an image you like, click it and see if it has a style number (above the keywords). If it does, click the style number and all the images in that style will be displayed.
4. Put all the images you want in your selection basket for downloading

Don't worry if the images aren't an exact match for your text - they only need to be a nod towards the subject matter - see the above example.

Design Tip 1: Sharp edges

by Hamish Long

I'm always looking for new ways to use graphics and design techniques to make Nelson Croom's online courses stimulating for our learners. Each project creates a challenge with different learner and client needs, and the graphics and interactive elements need to reflect not only the organisation but also the content. It keeps me busy, but there are a number of simple techniques that you can use to bring your own projects to life. This post is the first in a series of design tips that I hope you'll find useful.

When we find ourselves having to use a set of images that have little in common in terms of colour depth or background, it is usually desirable to find a way of presenting them as if they are part of the same group. Have a look at this example:

It looks a bit messy doesn't it? A quick way to smarten it up is to add a border to all of the images:

The images now appear to be locked in place and they can easily be associated with the relevant text.

You don't necessarily need a graphics package to add a border to an image - many popular software packages allow you to do this trick without actually having to manipulate the image. For example in Microsoft Word, locate your images using

"Insert > Picture" from the dropdown menu,

click an image to select it

and add a border using "Insert > Textbox".