Portfolio Websites

Recently we’ve been encouraged to start thinking about developing a portfolio, and rightly so as a portfolio be it on or offline is a crucial step in securing work in our chosen industries.

I was asked to look at the following sites

……and then think about my own portfolio and how i would take things forward from here.

Currently this blog is about as much as i have in the form of a portfolio and clearly that is inadequate, the problem i currently have is lack of work to put in a portfolio and also my skills at being able to build a portfolio are not currently what i’d like them to be.

But never fear, i plan to build one over Easter after i have completed my coursework. Once that is done i believe i will be in a far better position to build an online portfolio as i am learning a lot from this coursework and my ability is improving all the time.

I have been doing some research of my own and found some examples of online portfolios, these are in the style that i would like to have for my portfolio when i finally get round to building one!

Food for thought indeed, just need to get cracking on ideas for my site and ideas for work to put on the site ha! All in good time my friends…..

Website Research – Visual Inspiration

Earlier this week i was starting to panic, time was running out, i didn’t have much of an idea what i wanted the site to look like and it was all getting a bit stressful. So i decided to slow down, stop trying to force things and do some good old research.

I created this mood board of sorts, its a mixture of all the current web 2.0 styles that i am intentionally going to mimic in this project. I think this emphasises my point that its all got a bit too much? and there’s plenty more where this came from!

I have a clearer idea of what i would like my site to look like and shall begin implementing that shortly, well after the php is done, and the XHTML is validated, and the logo is designed, and the ERD diagram is done and the…. ARRRGGHHHHHH!

Social Network Site Research – Virb

The coursework project for this term is to create a small social networking site. There is a vast quantity of these sites already in existence, we all know about the facebooks and myspaces of this world but i’ve come across one recently that has caught my eye and is particularly relevant to what i’m learning at the moment.

The site in question is Virb, its fairly similar to myspace, and facebook, its got all of the standard features but a key difference is that it allows greater control over the editing of your page. If you are a dab hand at css then you can completely re design your page to your own specification, its gives you pretty much limitless control over the look of your page.

The pictures below show you the dramatic change that can be implemented with a bit of css jiggery pokery, something that is of great interest to me at the moment as i am taking my first steps in css design.

Here is a standard page without any customisation, it still looks a damn site better than myspace, but scroll down to see a far prettier example of what can be done.

Here is the same page, but with custom css implemented. As you can see the results are a dramatic difference.

For anyone that has seen some of the monstrosity’s that are custom myspace pages then this site should come as a welcome relief to your eyeballs. Its a nicely designed site, and gives the user the power to make it brilliant, if they know how of course…………

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.

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.

Coursework – More Thoughts…..

I’ve moved on from my initial research and have decided on two ideas to go with. It is now time for the design process, something that’s never as easy as i’d like it to be!

More Planning less Flashing

Both my banners will be created using Flash and interactivity will be added by using Actionscript 3.0, in projects past i have jumped into the software stage to quickly and as a consequence wasted lots of time messing around without really knowing what i was trying to achieve.

This time i have deliberately delayed using Flash too quickly and will only start once i am good and ready, with a fully completed plan of what i am aiming for.

Final Ideas

Seasonal Product – Hay-fever

My seasonal product will be a hay-fever remedy, in the form of a nasal spray (reasons for that particular form of remedy will become clear!) The size of this banner will be 300 x 250, so its more of a box than a banner but its listed by the Internet advertising bureau as an official ad size, so there!

The ad will show some evil pollen creatures rising out of the grass and plants and they will buzz around a head causing it to sneeze, the user will then be presented with the nasal spray and proceed to spray away the pollen and cure the sufferer!

Country – England (London)

I’ll be advertising tourism to England, with the emphasis on London. This will be a skyscraper banner, 160 x 600, a more traditional form of banner advertising.

The idea is to show one of the royal guards outside Buckingham Palace, the ones with the big tall furry hats, who are famously still and focused on their job.

The users task will be to distract the guard and make him smile or blink by waving and making noises at him. I plan to do this by making the mouse cursor a pair of hands and providing a button for the user to click on that will make noises. Once that is achieved some text will slide in saying something along the lines of ‘ Find out if it’s that easy in real life, visit london’ or something like that, still got to decide on the details of that part.

Sketches

My hay-fever banner will centre around ‘evil pollen’ characters that the user will have to spray away, here are some sketches Ive been doing as to what they may look like. Next step is to scan them in and tidy them up in illustrator and prepare them for importing into Flash.

 

 

 

Actionscript!!Ah!!

I’m trying to separate the functionality from the design for as long as possible, i believe this approach will allow me to focus properly on each task rather than muddling the two together. The interaction is obviously introduced through the use of Actionscript 3.0 and i have to admit i am struggling big time, trawling through the help guides and tutorials is proving to be very tedious and confusing me a great deal. Looks like i shall be having plenty of ’surgery’ in the week ahead.

With precisely 2 weeks to go till hand in its full steam ahead, just off to the shops for some pro plus and red bull!

Coursework Banners – Research

For our first piece of coursework this year we’ve been set the task of creating two banner adverts. One must advertise a seasonal product and the other must advertise a country.

A few brainstorming sessions and plenty of internet research have lead me to my choices. My seasonal product is going to be for a Hayfever remedy and my country will be good old england, more specifically focusing on London

A key part of my research in these early stages has been bannerblog, a blog full of various banners from internet advertising campaigns past and present. It really is amazing what some people have done with such a limited space and here are a few that inspire me….

http://www.bannerblog.com.au/2006/12/virgin_blue_photocop.php

http://www.bannerblog.com.au/2005/09/octopus_travel_find.php

http://www.bannerblog.com.au/2006/08/bahamas_signs.php

The above are all tourism themed so they have given me some great food for thought with relation to my country banner, i particularly love the simplicity of the Bahamas banner ad, so if you havent already clicked the link do it now!!

Right, it’s back to the drawing board for me, lots to be getting on with. I shall return soon with some early prototype designs!