Archive for the ‘Final hand-in’ Category

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 »