PRP - first artifact

On completion of my PRP document, I had identified two possible artifacts that I could setup and produce.

The first of these was to make a modern, desktop website, which utilises all the popular CSS design features that are now popular, and then see how this renders on a touch screen mobile device. From this, I should be able to learn through mistakes what does and doesn't translate from desktop design to mobile.

--

To begin then, I decided to look at some of the best sites made in 2009. From this, I could find some of the recurring popular design features.

One site that seemed to sum up 2009 CSS was businesscardninjas.com.

In a word, I love the individual aspects that this site manages to draw together.

Firstly, the logo is a great example of semantic design. It is a business card! It uses a nice custom typeface that reiterates the ninja aspect of the company name. Also, it employs the glossy web 2.0 aesthetic that is popular. The layering of this above and below the main content div works well, adding more detail to the site.

Second, the colours are bright and vibrant. The blue contrasts perfectly with the orange, without being garish at all. Furthermore, it is subtle, but gradient effects are used in the blue to create a more pleasant effect on the eye.

Numerous images are used on the homepage, the leading one being quite large, covering the breadth of the site. Atop this is even larger type, in the background blue colour, which really stands out and you notice the textual content.

The sister sites that this site shares are made available in another popular CSS design - a chunky top navigation bar which operates a sort of tab system - the current site being the open tab.

Again, a very subtle gradient effect is used alongside soft grey type which creates a really contemporary look.

The footer is really large on this site too, yet it seems to have shunned all the internal site links and copyright information you now normally see.

A three column layout is introduced also here, with bright, inviting colours used to draw the eye, with large blue headings, which in a few words sum up the piece very simply.

Lastly, another popular design choice for gallery type items is Lightbox. This plugin puts a darkened canvas on top of the currentwebpage and the image sits atop this.

--

These items I will now try and recreate in my own web design, which will then be analysed on touch screen devices.

@