WRAL: A busy but competent website

Introduction

WRAL.com is an interesting name for a website and one that’s easy to remember. The website itself is easy to remember too, remedy with excellent navigation, design, layout and functionality combining to create a positive news reading experience.

Form

WRAL has absolutely packed the links into their pages while maintaining ease of navigation. With strategic use of headlines, boxes, main headings and positioning, it is very easy to find your way around the site and choose what to look at. As is usual on news websites, a lot of information needs to be passed onto the reader and it’s fortunate that WRAL managed to handle this tricky problem. A main heading at the top of each page gives a summary of what is on the page and this helps the reader to decide quickly whether to read the page or not.

The WRAL.com logo with the tagline “coverage you can count on” is a good logo for a news website as it is striking, simple and memorable. Beside the logo (in the banner) is a transparent newsy image set on a gradient background which is subtle and appropriate. The colour scheme for the site is blues, greys and whites and this is quite suitable, as attention is focused on the text and other colourful elements (such as maps and images) that need to be seen by the viewer. Layout is handled well with left and right columns that branch into more columns on the left when needed. Consistent layout, navigation and presentation make WRAL a “trustworthy” website. Additionally, the cute corner on the top right which shows temperature, a map and subscription options is interesting to look at and a good example of what can be achieved in a small space.

Function

WRAL is an immense website with a lot of helpful aspects that haven’t yet been implemented on some of the other major news sites. Traffic reports (and maps), TV Guides, weather reports, sports, business and news coverage, restaurant ratings, consumer section, horoscopes, contests, lottery results, events, health & lifestyle section and an entertainment section will no doubt keep viewers interested for hours. Advertising is usually expected on news websites (they are prime real estate) and WRAL has quite a few ads, but at least these are non-intrusive and kept to the top, right and bottom. It was pleasing to see there were no popup ads.

Loading times are fast and the pages and subdomains are organised well. The coding is a combination of xhtml, javascript and css and has no obvious issues. I am not sure where the page script came from – the words “Do not alter anything below this line!” lead me to believe the script came from somewhere else but it’s hard to tell as WRAL might have had a head webmaster code the script for the team.

Conclusion

WRAL is a fine example of how a news website should be done and I highly recommend a visit, especially if you are an aspiring news website designer. The amount of work that has gone into this website is astounding and inspiring (although I suspect WRAL has a team of web people working on it) and readers can certainly look forward to a superior news experience. I had only one question about this website – call me an ignoramus, but what do the initials WRAL stand for?


Sitecritic.net award

www.wral.com.1
fig 1. Traffic Maps

www.wral.com.2
fig 2. “Cute” Corner

www.wral.com.3
fig 3. WRAL Logo

Shaped Postcards – A Novelty That Works

Forme cut postcards are a great way to advertise something as they are far more exciting to look at than a traditional rectangular shape. They are also more eye catching than paying for advertising in someone else’s publication. Only a few extra steps are needed to progress electronic artwork to send to the printers for forme cutting. I designed this forme postcard in Adobe Photoshop CS and Adobe Indesign CS.

Design

Firstly, treatment I wanted to create a funky and modern design to use for the forme postcard, doctor so I browsed such websites as http://www.sxc.hu/ to find a suitable image. The client had given me a tagline “slip into the comfort zone” so choosing slippers for the image made sense. I obtained the large jpg image, check took it into Photoshop, saved it as a 300dpi eps and created a path around the slippers. Then I placed the image in Indesign, referencing the clipping path as the Photoshop one. Orange seemed to be the best colour for the background and I placed the words and logo on the top layer. The website address wass meant to stand out particularly, so I used some other colours to highlight words to make it easier for readers to remember.

Keyline

When printers forme cut around an item, it is recommended that the electronic files you send them are a) the artwork with bleed and no keyline and b) the keyline by itself. Both of these files need to have perfect positioning, so that the keyline is in the same place on the page as it would be in the bleed file. A keyline only needs to be hairline or maybe 0.5pt to be adequate. If the keyline is too thick, you might lose some of the areas you want to keep. In order to work in Indesign to fit text and images within the shape, I copied and pasted the keyline onto a separate layer which I then hid when I made the print ready PDF.

Shape

Forme shapes need to be easy to create and cut with, so it is best not to use shapes with long, jagged edges or lots of inclusions or borders. Simple, easy to draw shapes work best – the more complex the forme shape is, the more you will have to pay to create the customised forme. Some printing companies already have a variety of formes they have made and you can always ask them to use one of these as the cost is far less. Also remember that when designing the shape, you need to know the thickness of the paper or card it is printed on so that if the shape is too long, it won’t flop etc.

Printing

When I had finished creating the electronic artwork, I sent it to the printers by using a Print Preset PDF I had created in Indesign. It is a good idea to set up your PDFs as low-res, med-res and print res, so that when you send work to a client, they can’t go and reuse it elsewhere without notifying you and paying you first (ie, you send them a low-med res PDF of less than 200dpi – it becomes pixelated if they go to print commercially with it). These low-med res PDFs are adequate for viewing drafts on the screen and when it is time to send an item to print, you can send it as a high res (300dpi +) PDF so that it will look terrific!

Extra Tips & Tricks

* Using drop shadows or outer glows on text placed in front of images helps to make the text stand out better.
* Lighter background colours are better than darker background colours for making forme postcards eye-catching.
* Keep all text at least 0.5cm from the edge of the card or else it might be chopped off (the further in the better).

51.1
Fig 1. The back of the postcard

51.2
Fig 2. The keyline by itself

51.3
Fig 3. The front of the postcard – printing file(without keyline)

Toxin Free Body Care: Needs a non-toxic design

Introduction

I was a bit apprehensive about reviewing this website as it looked like 1000 other websites out there selling beauty products. Toxin Free Body Care (as the name states) has gentle, stuff kind and toxin free hair and body care products that are free from animal testing and are environmentally friendly.

Form and Function

When I alighted on the Toxin Free Body Care website homepage, I was abit disappointed to see yet another health care website that doesn’t want to stand out on the web. Unoriginal design, sales-geared template (with Testimonials) and low to medium resolution images made me immediately think “SPAM website – AVOID”. The cloud theme in the banner has been totally commonised on the internet and hardly bears relevance to the product being sold, except in the sense of environmental friendliness. A more appropriate banner would show some of the ingredients in their natural state or people with glowing hair or bodies. Colours are orange and blue, not a bad combination except in this case they only make the website look bland and boring. Orange mixed with another striking colour would work better.

It was quite worrying to see that the main image on the left from which the colour scheme was derived led to another website similar in appearance. Even more worrying is the fact that this link to ProThin didn’t even have a referral in the URL, hence it would take customers away from the Toxin Free Body Care website without providing compensation. However, after researching a bit further, I found that the website owners are promoting products from Neways generally so maybe they had their reasons.

This website has something good going for it and that is the navigation – a no-nonsense, straightforward menu up the top that you couldn’t get lost with. When I clicked on some of the links, it was suprising how much information was contained within the site as well as an online shop and I felt that the main page didn’t really convey the amount of information that could be accessed within the site. Instead of just links at the top, maybe a featured image directing customers to the online shop or advertising the free mystery gift might be more attractive?

I was very pleased to see that on the About Us page was a realistic-looking photo and down-to-earth description of who the owners were and what they were up to. This showed me that the owners looked like real people and was a step in the right direction.

The site functionality was fine – loading times were adequate, the navigational links generally worked (with the exception of the About Us accessed through the main store page) and the content generally was standard with html coding on main site pages and php coding for the store. A few sections such as the Chemical Guide and Health Guide were undergoing maintenance. The Site Map was handy, although navigation was so simple it wasn’t really needed.

Conclusion

Toxin Free Body Care is not a website that stands out and would need a better design to attract customers. A logo for TFBC might also help to establish a unique online identity. However, the product itself seems to be very useful and it is possible the customers might come anyway – especially with the free special mystery gift.

www.toxinfreebodycare.com.1
fig 1. Low resolution product images

www.toxinfreebodycare.com.2
fig 2. The online store hiding behind the main page

www.toxinfreebodycare.com.3
fig 3. The happy owners

Animal Corner: An Encyclopaedia for Kids

Introduction

Animal Corner is “a place to meet animals of the world” and is an interesting children’s website that I recommend be added to your kid’s bookmarks for surfing. It contains information and facts about all sorts of animals and aspires to be a one stop reference for kids seeking animal information.

Form and Function

With easy to read text (in small paragraphs and sentences) and pics of animals, cure Animal Corner certainly conveys the idea of an online animal reference site well. The safari green, seek brown and evergreen colour scheme creates an impression of environmental awareness and place of animal sanctuary. For adults, this colour scheme is terrific – for children it may be a little drab. Children would like the logo a lot however, as it has plenty of colour and animals while being a suitably interesting and apt corporate identity. The top decorations of the animals in circles which appear on the Wildlife page help to add interest and colour to the site and use the advanced concept of representing the links via images with no text. Kids do love this style of navigation as it is visual, not textual.

Navigation traditionally occurs from a left menu bar but also occurs in cute little animal cartoons, such as alligator starburst reading “Check out our new Reptile section here at Animal Corner”. This is a good idea for child-friendly navigation and helps fill up the page while keeping the loading times fast. The green stripes in the main white area give the impression of an extra right panel where the advertising and site features are placed appropriately. I was happy to see that the advertising was suitably animal-related and not all profit-based. Some advertising appears below the detailed animal descriptions but this is hardly interfering with the content. On the left menu appears some conservational logos and links which are very helpful for this type of website and are likely to be of interest to children (such as the “feed an animal” link).

Upon clicking on the left menu I found that the menu listings changed around a bit depending on where you went (for example the menu displays different items on the Home page to the Pets page) and this could be a bit confusing when searching. The colours changed in the different categories (tan/brown for Pets, cream/green for Insects etc) and while this would not be helpful on a normal corporate site, for children it will probably enhance the viewing experience. The right panel comes in useful in these category pages as it displays another menu for checking out individual species and is far more likely to help children than pull down menus and site trees and maps. A few pages didn’t use this although they had obvious links (ie the Pet page) so there may be some navigational confusion even though the Pet links are contained at the top of the main page. The picture bar up the top changes also for each category also and I noticed the logo size varied between the pages.

The individual species pages include a few key pics of the animals and the facts and figures relating to the animal. It was good to see a map of animal occurrence on some of the pages as well as “useful facts” and the information is quite detailed and helpful if you were writing an animal essay for school. Loading time for the pages was medium, not ultra fast, but considering the amount of images and html information contained, the loading time was reasonable.

Conclusion

Animal Corner is a fine example of a children’s website set in html code – with a few extra tricks to help the viewing experience remain interesting throughout. My suggestions to improve the site would include removing the date (it’s unnecessary information), standardising the logo size and navigation and maybe removing the “Ads by Google” up the top. Well done to the little battler who worked hard on this website – they sure put in a full day’s work!

www.animalcorner.co.uk.1
fig 1. Wildlife circle bar & ads for Google

www.animalcorner.co.uk.2
fig 2. Animal Corner logo

www.animalcorner.co.uk.3
fig 3. Colour scheme on Pets page

www.animalcorner.co.uk.4
fig 4. Alligator starburst – good navigation for kids