SKATEBOARD WORKSHOP – development

Having viewed my recent Skateboard themed site design on my blog entry, I felt that the overall tone when viewed though the browser was too dark.  I also felt that it needed to be viewed with some sample content showing (as it was intended for a single page design, with content loaded using javascript and webkit transition tools).  WIthout this, it looks like a rather muddled homepage with an overemphasis on background imagery.

In this first image, I have lightened the whole site using a white rectangle overlay with a soft light blend.  You can also see the edge of the content poking out of the ‘pocket’ – if this was an actual design brief, I would probably add four separate page edges (in the fashion of stacked files) to indicate each of the menu option.

wImage

And in the image below, one of the menu buttons has been selected because some content is showing (it would have glided from left to right into position):

Image

As this was just a workshop, I have just used a screengrab of my previous design as the content page, but would in reality contain content relating to whichever of the menu options had been selected.

Last week we were introduced to the term Skueomorphism where design elements aim to replicate instantly recognisable real word objects, functionality, textures and processes etc.  With Skueomorphism in mind, I have tried to replicate here a folder container from the real world, so that rather than each section being a reloaded static page, the user feels like they are being presented with a glossy folder with individual content sheets (much like those often produced in the print world for marketing / commercial purposes).

I feel that this is successfully achieved by simply continuing the left hand static background along the bottom, giving the impression that the content sheets are sitting inside a folder-type slip.

However, as the edging for the left hand portion is irregular, this would need to be taken into consideration when designing the content pages, and may require some adjustments to the edging in question.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s