Design for Web - Design Direction

Where to buy a domain name.

http://orders2.names.co.uk/

http://www.123-reg.co.uk/

Try and select one of the cheapest domain names thats based in the UK. (Opening & Closing times will be relevant if anything goes wrong)

www.cushycms.com - The easiest way to change content

Development of ideas...

I'd decided the initial design I'd chosen was simply based on aesthetics and wasn't really the most suitable design in terms of its Target Audience and usability, If I was going to produce something appropriate I'd have to develop on the designs I'd already produced. I wanted the website to look; clean, traditional, professional, useable & appealing.

Header - Acting as a badge and a signifier to the audience, Using the advice that was given to me by my peers, I knew the badge could be interpreted as having a bigger focus on the Olympics (Mainly because the 'stroke' size is so much more significant on the rings), however, I couldn't get rid of one of the biggest turning points in Paralympic history, therefore I decided to enhance the idea of the Paralympics by including the emblem in numerous places and adding the colours of the Paralympics in the right hand corner of the website.

On assessment I know I shouldn't incorporate something I feel isn't working, as the saying goes, 'you can't polish a turd...' not that the work is turd...it just doesn't sit right on a website, I need something more modern, something more dynamic.

Links - One of the key attributes to this website was its way-finding capabilities, as you hover over a link in the top-right hand corner, the corresponding design will fade-out. The same applies if you hover over the design..the corresponding link will fade out. This almost gives the audience the opportunity to sample what the whole websites about before even entering any pages. Hopefully this makes everything much more efficient and easier to find.

Again on review I think I was being too ambitious and trying to create a website that was purely aesthetically pleasing, I needed to re-think my approach and plan my direction more.

Design Ideas...

Homepage / Proposal / Planning / 1024 x 768

Scamp / Estimated measurements for Homepage / The purpose of this design was to give me a rough idea of where everything will go in terms of their approximate sizes. The lighter grey boxes represent 'Images'.

The idea; when you click on 1 of the 4 navigations, you'll be directed to a reel of 4 images related to the navigation you've selected. The appearance of dialogue under each image, will be determined by the subcategories contained in each navigation. e.g. 'Host cities' will navigate to a page with one length of dialogue whereas 'Statistics & Figures' will have multiple lengths of dialogue that will need to be ordered appropriately.

Between the four images they'll be no gaps and the width of them will be stretched directly to the edges (if possible)

Further examination of elements... effectively demonstrating how everything would sit together in terms of their sizes, planning my website would be crucial, I needed to know what images I was going to use and how big they'd be, what would work best as a favicon, what would work best as a header?...

Refined Scamp/

Colour Scheme.

Minimal - White/ Paralympic colours/ Black. (Possibly include the flags of all the nations that have hosted the Paralympic Games...)

Text

Titles / Headers = SPQR

Body text = Times New Roman

A crucial point in the development of my website, was reviewing my work, taking a step back and thinking should I be doing this? I really feel this has enhanced my action plans. As you can see from my choice of text and imagery, I've really tried to incorporate the design elements from my summer project, including the text HOWEVER I need to break away from this and think about my audience, I want something dynamic, innovative and efficient.

I've decided, Open Sans and Helvetica Neue would probably be my best bet for a web safe font. This means I need to make sure all the components I incorporate from my summer brief match the characteristics of my chosen fonts.

Links

A History Of/ Homepage

Statistics & Figures

Prosthetics

Host cities

Now that I've developed a guide for all my measurements and placements, It should really be a case of trial and error when it comes to coding the design and arranging the height of my images. I can refresh and consistently preview my design, If some of the measurements look too big or too small then I can easily rectify this.

Initial Design Development

I didn't want to take photographs straight from the internet and just simply place them into my designs therefore I've added a design over the images and altered their effects depending on the contrast of the image e.g. multiply, lighten etc.

The heart is made up of medical crosses which strengthens and represents the idea that Sir Dr Ludwig Guttmann developed the Paralympics in order to help people, specifically world war 2 veterans returning from the war.

Development of header...

After buying the HTML & CSS book by Jon Duckett I felt a lot more knowledgeable and confident in my actions, gaining a better understanding of how coding would effect the structure and format of my website.

Altogether my website would have 4 pages and one subpage, leading on from the prosthetics page. Total = 5 fully functional working webpages...

(insert site index for it)

(insert all of research/ mind maps/ introduce the idea of templates)

The building of my initial chosen layout -

After a lot of research I'd gained a good understanding of putting a website together, the only thing was...they weren't very encapsulating or innovative, this is when I began to develop my ideas and began looking at jquery which was basically the modern language for websites to increase the interactivity of a website, I just had to find how I could implement this into a structure similar to my own.

Generating my own personal favicon - In this day and age it seemed pretty unprofessional to not have my own personal favicon, even blogger has one!...