The Top 3 Australian Bank Websites

24 November 2009 Categories: Design, Websites

With research in the UK revealing consumers believe banks have spent too much time on the back-end of their websites and not enough time on the parts people actually use.  In view of the fact that Australian bank websites, unlike their UK counterparts, have performed well in customer satisfaction surveys, we decided to take a look at the current state of Australian bank websites and see how they stack up.

Setting the Standard

ANZ in our opinion has been leading the field in the online arena for some time. ANZ recently launching their new global brand which set the tone for their website. Their media release clearly spells out their mission:

“ANZ today launched its new brand identity and positioning to support its super regional strategy and set an aspiration to develop ANZ as a people-focused, uncomplicated bank.

We believe the redesigned website does a pretty good job of communicating those values.

anz bank The Top 3 Australian Bank Websites

The placement of the main call to action buttons – Log on / Register – in the prominent top right of the screen and using colours to draw the eye, are in line with “best practice”.

anz logon The Top 3 Australian Bank Websites
Once you click the “Log on” button you are presented with a very clean, functional pop-up. All links and options you may need at this stage of the process are right there where you would expect them to be, including information about current security warnings.
anz logon screen The Top 3 Australian Bank Websites

Leading the Field

The ANZ has been setting the standard for Australian banks, often being the first to adopt new technology. In July, ANZ was the first bank to release a specially designed webpage to coincide with launch of the Apple iPhone mobile device. iPhone customers could view their account balance and recent transaction history using a purpose built version of Internet Banking. They backed this up with a media campaign including a TVC. Watch it below.

For all the reasons above the ANZ website is our choice as the No.1 Australian online bank.


westpac The Top 3 Australian Bank Websites
Coming in at No.2 is the Westpac website. It features a very clean corporate layout with simple tabbed navigation. The content has been divided between five tabs which keeps the navigation from becoming cluttered. The “sign in” (logon) button is placed in a similar position to the ANZ site (top right). The main difference is the functionality. Clicking the “sign in” button displays a dropdown with links to seven different areas of the site.
westpac logon The Top 3 Australian Bank Websites

Clicking through to the ‘Westpac Online Banking’ link brings you to the main sign-in screen. The layout is clean and simple and uses a keyboard style layout to present the log in buttons. Like the ANZ site, the Westpac site has endeavored make the whole process of online banking simple and easy to use.
westpac signin The Top 3 Australian Bank Websites


Our No.3 may have been the Commonwealth bank, however they are about to launch a new site so we will reserve our thoughts on that site until it is launched. Our choice for No.3 is ING Direct. Even though it is still a serious corporate site it endeavors to inject the cheeky personality associated with their brand largely due to their choice of Billy Connolly as the face of ING globally.

ing The Top 3 Australian Bank Websites

The “login” button follows the convention of all the other sites positioning it on the top right of the screen. The secure login screen that follows uses a keypad that employs changing the position of the buttons on each refresh of the page as a security measure.
ing logon The Top 3 Australian Bank Websites

The freshness of the site is largely achieved through the use of colour. Orange evokes warmth, it’s comforting, spontaneous and welcoming. Additional elements – vector style icons and hand drawn icons – add to the fresh, vibrant, fun feel that is so much a part of the brand. The overall effect works very well. “Well done”, to the design team.  They have created a site that manages to combine the security and trust necessary for a banking site, with a warmth, casual appeal, and personality rarely seen in this space.

ing elements The Top 3 Australian Bank Websites


Author

Michael Chanter

Michael is a freelance designer and Creative Director of Red Bilby – a boutique design studio in Melbourne, Australia.

michael chanter The Top 3 Australian Bank Websites

Read the full article 1 Comment

Free Metal Grunge Textures

20 November 2009 Categories: Blog, Design

Grunge artwork has become very popular of late and you can never have enough grungy images in your toolbox.
Here are a series of metal textures in various states of decay for you to use in your projects.

texture1 Free Metal Grunge Textures
texture2 Free Metal Grunge Textures
texture3 Free Metal Grunge Textures
texture4 Free Metal Grunge Textures
Read the full article 1 Comment

How to Create a Vector Character

19 November 2009 Categories: Blog, Design, Tutorial

As part of a series of tutorials that will follow the development of the Red Bilby brand, this tutorial walks you through the creation of a vector character logo using Adobe Illustrator and Photoshop CS4.
post line How to Create a Vector Character


Author: Michael Chanter

Michael is a freelance designer and Creative Director of Red Bilby – a boutique design studio in Melbourne, Australia.

michael chanter How to Create a Vector Character
post line How to Create a Vector Character

Final Character Design
redbilby1 How to Create a Vector Character


tools How to Create a Vector Character

Tools Used:

  • Pencil & paper
  • iMac 20″ Intel
  • Adobe Illustrator CS4
  • Adobe Photoshop CS4

Step 1.

In this example I had decided on the company name (Red Bilby) before I began creating the character so the starting point for the design was a Google image search for ‘bilbies’.  Remember, images found through Google images are mostly copyright protected so they should only be used as a point of reference.

The starting point for character design is always doodling on paper with a pen pencil or anything else that can make a mark. So draw, draw ,draw!

TIP: You never now when you will get an idea so if you carry a small sketch book with you where ever you go you’ll be able to record that flash of inspiration.

redbilby2 How to Create a Vector Character

Step 2.

After you narrow down your roughs to something approaching the design you envisioned, continue to refine the design trying different variations and noting improvements for the next round of roughs.

redbilby3 How to Create a Vector Character

Step 3.

Once you are happy with the pencil sketch it’s time to fire up the Mac. Scan the pencil drawing and save it. Open Adobe Illustrator and setup a new artboard. It’s best to create a logo for print, that way you will have a hi-res vector image that can be resized to suit other formats. I’m in Australia so I always setup a file as A4.

redbilby4 How to Create a Vector Character

Step 4.

Open the Layers palette and rename the default layer “sketch”. Place the scan of the pencil drawing on this layer. This will serve as a guide for the illustration. Set the opacity of the scan to 20% and lock the layer. Create a new layer above this layer and call it “head”.

redbilby5 How to Create a Vector Character

Step 5.

Using the pen tool draw the head shape. Once you have drawn the shape fill it with a colour.
TIP: Set the fill colour to “none” and set the stroke colour to something that will be easy to see over the scanned drawing. Red works well.
If you don’t do this the fill colour will obscure the scan making it difficult to see where to add the next line node.

stroke fill How to Create a Vector Character
redbilby6 How to Create a Vector Character

Step 6.

Create a new layer for the snout and continue drawing with the pen tool.

TIP: Creating separate layers for your character elements means you can easily export them to flash if you need to animate the character in the future.

redbilby7 How to Create a Vector Character
post line How to Create a Vector Character

Step 7.

Continue creating new layers and drawing the elements for each part of the character. You will end up with a layers palette like the one below.

redbilby8 How to Create a Vector Character

Step 8. Create the detailed areas.

To create the eye ball draw a circle using the “Elipse tool”. We will add finished colour as we go, as this helps to get the look right from the beginning. Create a new gradient swatch that fades from a vivid blue to very pale blue and save it to the swatches palette.

redbilby9 How to Create a Vector Character

Step 9.

Select the “Star” tool and set it to create an 18 point star with the radius dimensions shown below. Draw a star and fill it with a medium blue.

redbilby10 How to Create a Vector Character

Step 10.

Draw another circle with the “Elipse” tool and fill it with black. Draw a small white circle and move it to the top left of the black circle. This creates the shine on the eyeball. Now combine all the four eye elements together and group them.

redbilby11 How to Create a Vector Character

Step 11.

Draw another circle with the “Elipse” tool and position it on the head element. Hold down the “shift” key and select the circle and the head. From the “Pathfinder” palette click “Minus Front”. This cuts out a hole in the head of the character. Draw another circle and use the same technique to cut out the eyelid element – seen in black below.

redbilby12 How to Create a Vector Character

Step 12.

Move the eyeball into position behind the cutout in the head you just created. You can move the eyeball around to see what looks best. Again, having separate elements like this is really useful if the character is going to be animated in Flash or Toon Boom Studio.

redbilby13 How to Create a Vector Character

Step 13.

Now it’s time to get the colour right. Setup the colours you will use for the body in the swatch palette.

redbilby14 How to Create a Vector Character

Step 14.

Use the “Gradient Tool” to fill the various body elements of the character. Pay attention to how light would fall on the surfaces and adjust the direction of the fills to give the shapes dimension.

redbilby151 How to Create a Vector Character

Step 15.

Add the finishing touches – spots and shine on the snout, gradient fill to the inside of the ears and a darker coloured piece to the tip of tail. Finally add the pencil between the ears and we’re nearly done.

redbilby16 How to Create a Vector Character

Step 16.

The final touch is to add some shadows under the leg, below the pencil and on the floor under the character. For this I use Photoshop CS4. Open the .ai file in Photoshop. It will open on a transparent background. Hold down the “command” key and create a new layer under the .ai layer and fill it with white. Create another layer above this and call it “shadow”. Draw a flat ellipse with the “Ellipse Selection” tool and fill it with black.

redbilby17 How to Create a Vector Character

Step 17.

Deselect the ellipse and apply a 6 pixel Gaussian Blur to thee black ellipse. Now the part I love. Apply a motion blur to the black ellipse. See the settings below. This gives the shadow a nice subtle fade on both edges and makes for a much more convincing shadow. Reduce the opacity to around 15%. All that’s left to do is select the end on the pencil.

redbilby18 How to Create a Vector Character

Step 18.

Use the pencil tool to select the end of the pencil and part of the body. Use a soft brush tool with the settings below and paint a shadow on a new layer. Adjust the opacity if it looks too dark. Do the same with the front leg and that’s it! We are done!

redbilby19 How to Create a Vector Character

Step 19.

Export the file as a psd or png if you are going to use it for the web and save a hi-res psd for use in print. In the next post we will walk you through creating a Style Guide in Adobe InDesign CS4.

redbilby20 How to Create a Vector Character
Read the full article 6 Comments