For our group showcase interface we have four team members; myself, Jane Barkway, Sylvia Isteed and Pedro Cardoso. We decide to call our selves 43 .

After an initial meeting we came up with an outline of the sort of project we wanted to create, which I have written up in an initial rough proposal (to be be brushed up once everyone has agreed the details for inclusion in the group project management folder). This is copy and pasted below:

After two meetings we have decided to create a simple single page website.

The single page will operate as a homepage for the group as well as each members ‘portal page’ to their external portfolios, which exist independently from the group site.

This will be achieved (at present) by clicking on a side navigation bar consisting of five links (home plus each group member). When any of the links are clicked the present image will be replaced with a fresh image relevant to the link clicked thus giving the illusion of navigating to a new page.

Links to external individual portfolios will then be made by clicking on the main image of the ‘portal page’ of each team member.

The main impact of the site will be made using CUB3R to showcase work – This is a high impact image slider that is driven by Flash.

The high impact colourful work of each member will be displayed in this slider. This will be offset by a restrained muted background image that will be illustrative in nature.

A style will be agreed among team members and this will be used across the five links. Each member will use their own illustration/images but with design style applied to them to ensure overall consistency.

As a group we have decided against using Brighton or the college as an overall theme – rather we will promote our own individual interests/ideas (?) in the background illustrations – these don’t have to be illustrative/figurative elements – could be abstract if wished.

For the logo I think we are going for a simple design based around numbers/cube/square ideas –

We need to come up with a strapline to support this. (could be as simple as Brighton Web Design)

We need a little bit of  info to introduce ourselves as a group as well – this could be included as one of the  images on the ‘homepage’ CUB3R

We aim to have this part of the project put into an initial working project fairly quickly in order to allow time to develop individual portfolios.

Sylvia is going to work on the technical side – getting the code to work correctly

Pedro is going to have a look at the background templates

Jane is working on the budget

Jessica – proposal and pulling the PPT presentation together.

Below is the rough draft of the website.

project draft

project draft


This is my attempt at logo development for portfolio showcase for our group 4 squared – the bottom left logo is the agreed design – though colours may be changed to fit in with background once these have been agreed.

The creative industries sector employs 16,000 people in Brighton & Hove, which translates into 10.7% of the workforce.

Brighton is a nationally recognised centre for digital media and web technology companies.

Looking online there seems to be several opportunities for networking through different groups and organisations that you can join, which in turn should help in finding work.

Here are the main sites I found:

Wired Sussex:


Wired Sussex not-for-profit business support agency for the digital media industry based in Brighton.

This site has a jobs page as well as offering internship services.

The Farm


The Farm is a networking group for web designers, developers and people with related new media skills who live in Brighton and the surrounding areas. They have weekly meetings in different venues around Brighton.

They have lots of useful advice and resources as well as links to like-minded groups such as Brighton IPhone creators.

They even have a useful cheat sheet for freelance web designers.



Women in Media was launched to the increase the number of women working in the digital media industry in Sussex, and also to support those who already do.

It is managed and run by Wired Sussex.

The site offers resources and a newsletter plus lists events where there are opportunities to network.

Creative Brighton


Creative Brighton is an independent industry-led group representing the creative industries sector in Brighton & Hove. It is recognised locally and regionally as the primary consultative organisation for the city’s creative sector.

The website has been a gateway to the creative sectors services, news and opportunities that will help you in your work.

More traditional job searches such as in Argus, Brighton’s the local paper turned up jobs, but these were based predominately in London.

Online job agencies such as JobisJob, Indeed and Brighton Jobs turned up Brighton based permanent web design jobs, while Gumtree, Brighton turned up one freelance post.

There are also lots of websites for Brighton freelance website designers – so it seems there is a lot of competition out there.

As a precursor to designing the showcase interface and portfolio we have had to research portfolio websites. I looked at a range of sites from designers and firms specialising in websites through to illustrators and photographers. There is a diverse choice of design styles and the amount of information included varies from site to site. However there are things in common across the choice  and the one thing that stands out are the links to external community sites such as  Twitter, Facebook and LinkedIn. There is also a preference on many sites to include blogs as well. All the websites were of a high standard – contemporary, often very beautiful with a good use of fonts and high impact imagery and graphics. They were visually interesting and inviting to look around and investigate. Navigation for the most part was logical and easy.

Website portfolios

I enjoyed the following websites:

Abstraktion – website for humans


This is a dramatic website with a restrained colour palette – white text on a black ground with red acting as an accent colour.

The font is a modern looking sans serif.

The pages have a gridlike feel; they are divided into three columns and information spread across them either in single our double columns and occasionally across the whole width of the page.

The information is broken into bite sized chunks divided by delicate white lines so it is easy to differentiate between sections of information and navigate between them.

The home page has a friendly but firm introduction and has an enticing section that sets out how many people visit the websites they have designed each year and the revenue this has generated.

The portfolio page lays out the different sites the company has developed in a clean efficient way and also outlines the key industries the company has worked for.

This site has a blog page to which visitors can add comments.



This is an attractive, highly colourful site which has a letterpress quality to the type and a printed quality to the graphics.

It states it’s case very clearly with a large quote “go ahead, put your business online, we make it easy…very easy”

Underneath this are three large navigable boxes outlined the three main areas of services – web design, web development and Search engine optimisation.

Underneath this is  featured work which when clicks links to a page containing a portfolio of work which has actual links to the websites the firm has designed.

Important information about the firm is situated in a nav bar in the header and footer.

The site also explains the design process used for the project so the potential client will know what to expect.

Prices are also stated across the site with a description of what you will get for your money which is helpful.

This was one site that did not have community site feeds or a blog.



This is my favorite website portfolio It is quirky, fresh and interesting. It has a playful quality to it.

Rather than being centred the design is offset to the right of the page.

The background is a plain muted grey, the font a modern soft, rounded sans serif and there is a generous use of white space give the site a light airy feel.

The home page consists of colourful seemingly random phrases, when you scroll over these phrases, the one your mouse is hovering over stays coloured while the rest become grey. When you click on the coloured phrase a relevant blog is revealed underneath.

The navigation bar in the header is subtle but obvious due to the amount of white space employed.

The ‘work’ page has a lovely spread of large images with a small caption by the same explaining the work. These are laid out in a single column and can be navigated to in the same manner as the homepage in that you click on phrases that scroll down to the relevant imagery.

On the ‘about’ page there are links to sites such as flickr, twiiter and linkedin



This is a friendly blog based site with quirky graphics and display fonts with a retro feel in soft colours.

There are links to Twitter, Facebook, Dribbble (a show and tell site for creatives (yuk- I hate that word)), tumblr (a microblogging platform that allows users to post text, images, videos, links, quotes and audio).

The navigation bar links to sections that clearly explain about Dawghouse and the designer behind it.

The ‘work’ page contains lots of images of work – sites designed etc but is let down by the fact there are no links to the websites.

The footer contains more places as to where the designer can be found online.

Kind Company


Another beautifully laid out site – restrained, clean and minimal – white background with grey and red sans serif text.

This company design printed materials and create identities as well as designing websites and this is reflected in the portfolio which forms the home page.

The navigation bar is discreet and there are links to Twitter and a blog. Essential information  is contained in the footer. It is a satisfying and pleasurable site to navigate around and the company designs for a range of interesting and unusual clients.

Photography Portfolio sites

Corey Arnold


Cory Arnold is photographer and Alaskan commercial fisherman. His portfolio site is bold and striking – the images are given plenty of space to tell their stories. There is an animated element to it that is flash driven and the red and off white colour palette works well.

You can select different projects to view from a navigation bar situated on the left of the page. Each project appears as a spread of scattered images that become ‘activated’ as the viewer scrolls over them – when hovered over the image turns red and when you click on it it opens into a large image of the photo. You can then click through the rest of the images in a more standard image display (slider?) format.

The site also contains a link to a blog which has Twitter, Facebook and Flickr links

Brent Stirton


Brent Stirton is a photojournalist with an amazing array of photographs from around the world that are divided into projects

The website lets the images talk for themselves using a simple image slider that can be controlled either by clicking on individual images using a simple numbering system or set up as a slide show.

The images are set against a black background with a discreet header consisting of the photographer’s name and contact details plus a simple navigation bar on the top right of the page. The site does not have lings to blogs or Facebook or Twitter etc.. I don’t think this would be appropriate for this website as in a way it would take away from the gravitas of the images.

his bio page says it all – he is a senior staff photographer for Getty Images the largest photographic agency in the world and there is a separate contact page with essential details.

Hoops Photography


Website for Tom Hoops. These photographs are commercial/fashion in nature (though there is a personal project section) – with a high impact factor. Again the images are enhanced by being shown off against a black background.

Navigation details are on the left which have a java scripted animated element to them.

The images are held in a jquery image slider with horizontal scrolling.

There is a link to a blog

Jill Greenberg


This is an immaculately designed portfolio site presenting the work of American photographer Jill Greenberg who specialises in stylized fashion, celebrity and advertising images.

It is a very clean minimal site set against a white background. The header and navigation bar are unobtrusive – the images are given lots of space and have a high impact factor.

The site is divided into seven pages – showcasing  the range of her work – from fine art projects, through to commissioned work in all areas from advertising , magazine covers, portraiture etc and video commissions. She has a page dedicated to a very impressive client list – with links to images she has taken of them.

The site is has no tricksy gimmicks to display the images – just a simple javascript slideshow. Images are divided into projects on the page in a simple grid format. The viewer clicks the project they want to look at, which opens a page with an expanded choice of images set up in the same grid like fashion. When an image is clicked on – a large version of the image is opened in a slideshow – all the images can be scrolled through by clicking the subtle navigation icons on the left and right of the image. There are no fancy changes between images just a clean replacement.

The overall impression is of quiet confidence and authority.

There are links to Twitter and Facebook.

Illustrator website

Nate Williams


This is a friendly, approachable and appealing website – which for once uses a serif font – which gives it a picture book feel.

The home page has high impact – with a large hero image of one of Nate Williams’s illustrations.

Apart from the illustrators name – there is no traditional header – there is a main navigation bar instead with a secondary navigation bar below the image.

Work is presented in a gridlike fashion. When an image is clicked it opens into a larger image which then allows you to navigate to a more in-depth look at the project. Other projects from the portfolio can be navigated to from this link or you can click to return to the portfolio page if the viewer wants to control what image they want to look at.

The site also has a link to an online shop (etzy) where you can buy the illustrators work

He has a news page – which acts as a blog (the links are the same as the portfolio page)

There are Twitter, Facebook and Flickr links

Other sites I liked by illustrators were picture systems,

This final project is professional practice and consists of a group project – creating a showcase interface and an individual portfolio.

As a team we need to come up with a group name, a theme, a simple logo – the showcase interface must link to individual team members portfolios. We also need to produce a project management file consisting of project proposal, quote, time scale, budget, costings, team members roles and appendices.

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.


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.