Archive for April, 2011

The project consists of 5 pages – 3 completed ones.

Designing the website

The pages were designed in Photoshop – divided into separate elements and saved in the appropriate file formats.

I decided to go for a fontbased logo and tried to create a punched out effect to give it a web 2.0 feel. I used a downloaded a free font called Tuffy which was recommended for contemporary web design. To created the punched out effect I applied a clipping mask which contained a copy of the background gradient. The font has an inner shadow applied.

To the overall background image (gradient and main container for the website) I applied a noise filter just to add a slight texture to keep the whole thing from appearing too flat.

I repeated the punched out text effect for the navigation bar. The shapes for the nave bar where created by using the rectangle tool from the toolbar with rounded corner options added. I then applied a drop shadow to these.

The header and navigation bar were saved as a single image. I added hotspots in Dreamweaver to make the navigation links work.

I made a narrow gradient for the background image.

The pages in Dreamweaver were made from scratch using AP Divs – the home page consists of a main content div – with header, footer and the join/search box at the top of the page.

Other AP DIvs on this page is the box containing the introductory text and the coda slida plus four boxes with brief descriptions of other pages and links.

The other pages consist of header, footer, main content, side bar and the join/search box.

CSS3 styling

I have used CSS3 styling throughout the site to produce rounded corners and drop shadows. I used a couple of  online tutorials – which I managed to get to grips with after some trial and error as they consisted of examples plus code but no step by step explanation as to where to place the code! – Anyhow it gave me more insight into how the css styles, code and pages work and fit together.


I used font squirrel to generate a font kit for the Tuffy font (which was permissible) and for the main body text I used Trebuchet

Groups and Forums

I joined and created Better by Design pages for Facebook and Twitter (I got 3 hits for this on the first day – even though there were only two trial posts) and a Better by Design e-mail address – these can all be linked to via the icons in the header and footer (these were readily available from the internet). On the resources page I added in a Twitter feed specific to designers – I did this through Twitter which generated a piece of code which was cut and paste into the appropriate place. I also joined vanilla and set up a free forum using one of their templates – I chose one which fitted best with my existing design. They are minimal adaptable without going down the route of paying for one. I tried to embed the forum into my site using the cut and paste coded generated but it would not display correctly so I have added a screen shot which has a hotspot that links to the actual forum.

Coda Slider

On the home page I used Coda Slider to display images pertinent to the website. It is a piece of J-query software that creates a slideshow. I pasted the code in the appropriate place (the head area of the html code) and added it to a new AP Div. I added the images required (sized to specific size – the same for the thumbnails) – adding links to websites on some of them. I tweaked the styling to slow down the change of the images and remove unwanted elements


On the resources page – I used Dreamweaver’s spry accordion which I tweaked to remove unwanted elements. I could then divide and collapse all the different sections of information (list of links) without have to create a long page which the visitor would have to scroll down to find relevant information.

Additional information

I have tried to keep the amounts of written information on each page minimal – In keeping with Web 2.0 principals, visitors to websites want bite sized chunks of digestible information – to be able to find links fast and to be able to navigate easily and appropriately around the site. This site is conduit to more in-depth information, as on the resource page or the forum page where members can discuss topics with each other in more depth. The gallery would be a showcase of members work with links to their e-mails/ contact /work details. The news page would act in the same way – probably using the accordion system  with headlines and links to the sources of news. This page might need some kind of archiving system built in. I hope that if this site was real that it would help to raise the profile of designers who work in and for the NHS by:

presenting work through a professional looking website,

extending links with other NHS designers,

building links with community based sites such as Facebook, Twitter,

building links throughout the community forum,

creating links with other websites and therefore increasing traffic to this site.


Read Full Post »


simple flash animation

Simple Flash animation

This was a class exercise in which we had to create a simple animated banner on the subject of music festivals using Flash.

The banner had to be 800 x800 pixels and contain sound.

It was a basic introduction to the program – we were introduced to the ‘stage’ onto which we dragged images into different layers which we had imported into the ‘library’.

The images are converted into ‘symbols’ in order to animate them

Animation was added by using the program’s motion presets.

The order of the layers and the length of time the  motion presets last are controlled in the time line  situated at the bottom of the program underneath the ‘stage’ You can also control when images will appear or disappear by dragging them along the timeline.

Text can be added by using the text tool and can also be animated by using the motion presets

Coloured boxes can be added as animated overlays to your animation

Sound can be added – sound loops can be downloaded from special websites such as http://www.flashkit.com. They are normally downloaded as mp3 files
and imported into the flash library in the same way as images and again dragged to the stage. To move the sound in the timeline click the first frame, hold down shift and click the last frame and move along the timeline.

Read Full Post »

Vimeo is a cleanly designed website that allows people to upload their videos to share and view with others.

It was founded in November 2004 by Zach Klein and Jake Lodwick and is owned by the media conglomerate IAC/InterActiveCorp and operated by Connected Ventures.

The name Vimeo (coined by Jake Lodwick) is a play on the words video and me – it is also an anagram of the word movie.

It does not allow commercial or gaming videos, pornography or anything not created by the user to be hosted on the site.

It is a leading video hosting platform and has supported high-definition video since Oct 2007.

Vimeo is currently up for three Webby Awards – the leading International award honoring excellence in interactive design, creativity, usability and functionality on the Internet. The Webby Awards are presented annually by The International Academy of Digital Arts and Sciences which was founded in 1998 in New York to help drive the progress of the Internet and evolving forms of new media.

The three award categories Vimeo are up for are Best Visual Design – Function, Best Events Website (For their  first annual Vimeo Festival Awards  October 8-9, 2010. Judges included David Lynch, Morgan Spurlock and M.I.A. – they had over 6,500 entries) and Best Social Media Website.

The actual website is simple, friendly, uncluttered and easy to navigate.

It has a simple but distinctive logo using ‘Black Rose’ a free downloadable font available on Dafont. The body text is a simple, clean sans serif font.

The site uses a distinctive and clean strong palette of blue, green and grey colours and a simple vector image on it’s home page of a sun in the top right hand corner with a ‘cheery’, pastoral  landscape at the bottom. The imagery changes from page to page, but is contained with in a recognisable format. It allows individual forums, groups or communities to create some kind of unique identity.

The format of the site is simple – header, content section and side bar. The home page has three main navigation elements:

  • Videos we like – showing current favorite videos
  • Explore – which is split into categories of videos (which are then divided into further sub-categories i. e.  animation – 2D, 3D, animated typography etc…)
  • Right now – recently uploaded and ‘liked’ videos

The side bar is divided into sections

  • Advert
  • Link to staff blog
  • Explore Vimeo which is divided into sections and is where you can access groups, forums  and communities within Vimeo. It is also where you can link to  tutorials, advanced Vimeo features and High Definition video.

The main content is easy to navigate and consists of a main video to view which constantly changes, underneath which are listed other videos to link to. These are presented as a small image and some text, each of which is divided by a thin line – this design feature carries through the site – varying slightly throughout.

There is sparing use of simple vector based illustrations in the side bar to to distinguish the different sections. There is no flash or animation as part of the site design.

The site is host to many easily accessible and active communities, forums and groups that have been set up to accommodate the many permutations of video it terms of technique, styles, content, genres, interests etc.. Members are able to set up their own channels to which they can showcase videos they have made or videos they like. The White House has set up it’s own channel that presents the weekly address from the president of the United States.

It is a great site to view amazing and interesting work from around the world and to be able to comment on the work that people present.

Read Full Post »