More Cool Websites – Burst Labs

Here is this weeks selection of interesting websites, just the one this week its about quality not quantity!

Burst Labs

This is a site containing music that can be used for audio/visual production. The thing that interests me the most is the navigation system, the categories float around and you can click them and listen to the samples in real times, sort of like an interactive/animated tag cloud. Makes a change from the standard list format, check it out at http://www.burstlabs.com/

1851 Gallery – John Burgerman

When given a task recently to travel to a local gallery and find an inspiring piece of art to reference i was pleasantly surprised to find that one of those galleries was situated in the Waverly Building (the building my course takes place in). I always thought it was just the reception area but on a recent trip to the vending machine i saw the sign on the door saying ‘1851 Gallery’. How convenient!

Upon entering i was immediately struck by the large illustrations on the wall, i recognised the artist as John Burgerman. A fine arts graduate from my very own university (Nottingham Trent) and a successful illustrator/digital artist. I have seen his work many times in magazines such as computer arts and his unique style of character drawing is instantly recognisable.

Seeing as he is a graduate from my university his work is of particular relevance to me, examples of successful graduates are always inspiring and show just what can be achieved with providing you make the most of the opportunity university presents you with.

The work on display in the 1851 gallery is below…..

When thinking of his work and how i could relate it to mine i think its the cross media approach that resonates with me most. Since embarking on the Multimedia course i have become increasingly interested in graphic design and art in general, although i’m primarily a web designer i would very much like to experiment with a variety of disciplines in future projects. I have been developing the more graphic/art based side of my skills recently and seeing work such as this that begins life on a sketch pad before taking a journey through a scanner and a computer and back out onto paper or in this case fabric is an inspiration as to what i could achieve in the future.

A selection of websites that i admire….

Here are some examples of websites that i think are cool, read on to find out more….

Ive recently been looking at plenty of portfolio style sites as i am approaching the time when i need to create my own. When looking at these sites it is sometimes easy to be impressed by the content of the site rather than the site itself, seeing as i’m giving examples of websites i like ive tried to steer clear of that trap in this post.

Web Designer Wall – www.webdesignerwall.com

This is web designer wall, a site that features articles and tutorials on web design. It’s a great resource for inspiration and knowledge. The design is well layed out and visually appealing, the elaborate illustration used for the background image works very well and the rest of the content is expertly structured using css and xhtml. It strikes the perfect balance between simplicity and detail.

Emes Style – Portfolio Website – http://www.emesstyle.com/index.php

This is the portfolio site of Matthew Soriano, i love the way he has used photography of denim and integrated it with the rest of the graphical elements. It gives the site a feel of something different from your usual plain backgrounds and provides a great frame for the content. This site is a great example of a good portfolio, the content does not overshadow the site, they complement each other perfectly.

Stuff and Nonsense – http://www.stuffandnonsense.co.uk/

This is the website of leading web designer Andy Clarke. I was alerted to it after reading his book ‘Transcending CSS design‘, as you’d expect from such an accomplished designer his site is top notch. Styled using CSS and structured using XHTML, this site is a perfect example of how using web standards creatively can lead to stunning designs. I particularly like the way he has an image in the centre of the page with the text sitting around it. This is not something i’m used to seeing, usually the trend is for text to be centred and images to be either side of the text or beneath it. This approach is a refreshing change and shows that breaking away from the norm isnt a bad thing, its a very good thing in fact!

So those are just a few sites that i like, they are very much at the level i’d like to be at one day and they are a great source of inspiration for a young (kind of) inexperienced web designer such as myself.

Introducing Phidgets…….

This term as part of the interaction design element of my pathway we’ve been in introduced to something called ‘Phidgets’, they are a basically a system that allows you to connect computers to everyday objects and make user experiences a more physical activity. For example you can use them as games controllers instead of a mouse or keyboard, or you can use them to scan barcodes for identification purposes along with many other uses. The task we were set was to look at a few interactive based websites and take an element from those sites and think how we could use phidgets to improve or change the experience.

The website i looked at was www.comcastic.com, which is a site that contains various games designed to test your use of the mouse. Time challenges and click accuracy tests etc

The game i enjoyed the most was the endurance test, in which you had to move the mouse from left to right until the progress bar was full up, once the bar was full you clicked a button and ‘banked’ your points. When you do this 4 times the game is complete. My idea was to combine this with a running machine using phidget sensors, this would make the task of keeping fit more enjoyable and enhance the experience of the game, the faster you run the quicker the bar would fill up

Below i have composed a very basic mock up of what this may look like were it to become a reality.

Mixing Pixels and Vectors……

I came across this tutorial recently……………

It details the technique for creating an image using both pixels and vectors. I decided to try my hand at it and below you can see my results, not quite as impressive as the original but i think my version is ok for a first attempt.

Click on the thumbnail to see a larger version of the image

Many thanks to Spoon Graphics for the tutorial.

Transcending CSS – The fine art of web design

This is a book that Ive been reading recently, its about using CSS to separate structure from the visual design and to create rich visual experiences in web design.

Written by Andy Clarke this is a very helpful book, previously i’ve read books which take the form of more traditional text books and they can get a bit heavy at times. The approach taken here is to explain the theory but to also give plenty of working examples in the form of pictures and support files provided on the authors blog.

It has really enabled me to get a better grasp of how cutting edge websites are constructed today, the chapters on the design process are particularly helpful as it is this where I have struggled most in the past.

I would recommend this book to anyone embarking on a course/career in web design and i am sure over the coming months as i create a website for my next piece of coursework that this book will be an invaluable resource.

Website planning….

Recently i had a discussion with a friend of mine who’s a budding Architect and he needed a portfolio style website. I offered to have a go at making him one. I need the experience and he cant afford a newspaper let alone a professionally made website so it works out well for both of us.Ive been in the planning phase recently and here are some of the designs ive been thinking about in response to his ‘brief’

This term we will be learning more about xhtml and CSS, so hopefully that combined with my own learning will lead to the site being finished by Easter

Ive created a rough photoshop mock up,to give Ian an idea of what it may turn out like and to get his feedback. Obviously at this stage this is just an first draft so to speak, the final design will be a much more refined version.

Photoshop Mock Up