Friday, 21 December 2012

Design for Web - Final Web design

When I look back at my 'A history of' products, It's clear to see that I need to adapt my content to suit a more contemporary audience (Using the web), the reason being...the serif typefaces lose their character online and look quite lifeless and dated whereas a modern typeface infers functionality and usability on the web.

Industry standard webpage...

Homepage / Index / A history of



Paralympics host cities

For this website, I was communicating the importance and growth of the Paralympics, through dates, facts, figures and stories which I'd developed and gathered through the research of my 'A History of'

The message that's being communicated and the main focus of the website is the determination and admiration of these athletes, it also touches on how it's ever growing as a sporting event. 

I've kept the website quite minimal and clean, I felt using a white and black colour scheme with an input of small colour made the whole site look quite contemporary and appealing to a larger audience rather than specific genre's of people, Who'd use the website?...Sports enthusiasts/ Teachers/ Children. 

People with a disability - I had to really accommodate for this section of my target market because in could inspire them to do something with their disabilities. All of the information on my website needed to be positive and inspirational a swell as knowledgeable.

In this day of technology, I really had to make my website stand out so decided to include factors such as java and drop down boxes/ selective tabs etc. I felt this made the website a lot more interactive a swell as interesting for the user. When you hover over the Great British flag and other header items, it fades out and can be clicked to return to the homepage. The construction of this website is described and explained in the web development post.

Ultimately  I needed to make the content; inspiring, interesting and most of all drastic. But in order to do this I needed to incorporate other factors such as images and statistics and facts etc.

I'd spent a lot of time editing and developing my scamps, preparing each image so it was the right size. But when it came to the designing of the website I thought it would of been a good idea to see what was already out there and how I could adopt certain factors such as the drop down box - as soon as I'd seen this I realised it would of been perfect to broadcast the locations of all the Paralympic games in order and in a clear manner. The development of my website went even further when I began to balance the access to content online, I was able to effectively deliver all of my information in a visually engaging way that was successful for its content. The reason for my website being... to enlighten sports enthusiasts about the background of the Paralympics and raise awareness about the purpose of the Paralympics...

I thought there was a market for this type of website because it brings together all of the important factors surrounding the history of the Paralympics, and from my research I know that its growing in popularity which means they'll be a rise in people wanting to know more about its background..

Displaying the website in different formats gives me the opportunity to show others how my website would look at different scales, due to the time restrictions I don't have the knowledge to code my website so that it fits other formats and reacts to that format, in order to display its information in an accessible and efficient way... The webpages would act as one page, giving the user the advantage of staying on one page for all of its viewing and intake of information (There's nothing more annoying than waiting for your internet to connect you to another page).

The Ipad

The Iphone

I was quite wary of balancing the access to content online and didn't want to hand in a website that had been proportionally coded by someone else, so I decided to re-visit one of my initial templates and build upon it, I knew it would be ALOT more simpler than what I'd been looking at with jquery but thought it was the best route to go down because it will of been constructed solely by myself.

Developing another website was going to be quite difficult but would again increase my knowledge of coding! 

Contained in this website are 5 different pages, here's an example of how two of them look, the website primarily uses a template with a differentiating background image and 3 columns. When you clock the header/ logo your re-directed to the homepage...I just wanted to make something that was overall efficient and could be located in one place...

Personally developed website...

Homepage / Index


Wednesday, 12 December 2012

Responsive / Live Brief - DE / Direction

Plan of action - Target instant coffee, redesign the packaging and create a promotional campaign to support and rejuvenate interest, especially among the younger generation. Take the basis design of 'Senseo' and permeate its impact through the instant range, while keeping its traditional heritage.

Tuesday, 11 December 2012

ISTD / Design Development

I knew the direction of my restaurants identity, I just needed to begin creating and adapting a logo that had been derived and influenced from type...and what better letters to begin working with than 'M' & 'Q'...Mutton Quad. My main aim for this crit was to have a developed logo that would reflect the Restaurants ethos.

As a starting point I gathered various colour schemes, colour schemes that were reflected in 'meat' and colour schemes that I could see working effectively in a restaurant environment, what really attracted me to this brief was the fact that I'd worked in a restaurant before which really helps me understand how everything works together to create that atmosphere, that identity and that experience. 

As a starting point I wanted to overlap the letters and create one singular, flowing letter. As you can see from the screenshots below, I've tried numerous layouts and tried various structure's that all looked quite solid standing and typographically influenced.


With my identity in mind I knew that the full logo would be too complicated and overpowering to use as a sole identity, it needed to be simplified, something that consumers could look at and remember instantly...

I've thought of subtle ways I can introduce the theme of type without making it too in your face, I think the overuse of type in a restaurant environment would make it feel quite uncomfortable as you'd feel too much is going on around you... After investigation into various type definitions, 

After discovering the true meaning of these terms and the way they sounded together I thought I could incorporate the terms in how to the food is presented on the serving plates. "Flush on both the left and right margins" "The adjustment of horizontal space between pairs of characters to create a perception of uniformity" I also realised I could permeate these factors into how the food is presented on the serving plates, this will create a square body on the plate of food, which relates to the meaning of Mutton Quad. Noun.A Quad with a square body

Progress Crit - Reviewed by two peers.


  • The concept & use of food positioning in the restaurant reflects the brand really well - good incorporation of type into food
  • How can this move forward & be applied in other aspects
  • Logo design is a good starting point, interesting manipulation of type, will work well across a range of products for consistent branding/ identity
  • Logo suits the idea of type anatomy - Structured.
Areas for Improvement

  • Would've liked to see starting point/ design development for logo, how it came about (I've just recently explained this in the above information)
  • Any other visual inspiration?
  • With target audience, even though not aimed at certain gender of age, make sure it is appropriate for children & families - next generation.

  • Consider how typography elements will stretch across different parts of the restaurant
  • Consider what colour works?
  • Menu? Hows it going to look/ work?

Monday, 10 December 2012

Design for Web - Design Direction

Where to buy a domain name.

Try and select one of the cheapest domain names thats based in the UK. (Opening & Closing times will be relevant if anything goes wrong) - 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 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...)


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.


A History Of/ Homepage
Statistics & Figures
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!...

Image folder...

Online options to increase the innovative side of your layouts in html; 

Examples from the coding of my final industry standard website...

Examples from the coding of my personally built website...

About Me

My photo
Leeds College of Art. Graphic Design.

Copyright 2010. All rights reserved.