Week 12 - Major Project Update

I stumbled upon this very cool jquery feature, it’s called ‘Lateral On-Scroll Sliding’ (can be found here. It would be perfect for a site like mine as I intend to tell a story of each players World Cup experience.

Week 12 - Garvan Traynor Refinement Continued

After refining the website using Chris and Gabe’s advice, I wanted to start work on refining the logo. Chris suggested changing the letters to uppercase, removing the box and reducing the size of the diamond.

Below are my logo variations using Chris’s advice.

Before deciding on one, I wanted to test them on the website to see if they worked on the website.

I do like the grey, but I don’t think it’s as nice as the white on black which I currently have on the website.

Chris suggested removing the black background and making it transparent, but I think the logo seems a bit lost. The site doesn’t seem to have the same grid structure like it did before with the black box. It could work but I believe I’d have to rearrange the navigational links.

Week 12 - Garvan Traynor Refinement

Today I started to refine the Garvan Traynor website using feedback I received from the crit session. Overall Chris seemed to be pretty pleased with what I had designed/created so far but he still saw some room for improvement.

Firstly, he suggsted to implement navigational arrows on the image slideshow so that the user could go through the images manually rather than having to wait for the image to come around again.

I also wanted to refine the grid system that I had going on. Below are the before and after images.

Before:

After:

As you can see, the before image is a grid system, but alot of the elements do not match up correctly, for example the pink box which shows up when the curser is hovering over the last link is not aligned perfectly with the bottom of the logo, whereas with the second image, this is corrected. Other corrections include the page title aligning up with the image on the jquery slideshow and the padding between each element being 20px.

Week 12 - Garvan Traynor Brochure

As we were given an assignment to create a brand identity along with a website for Garvan Traynor, I decided to create a brochure to give the client an idea of how the branding could work for print work such as a brochure.

The image below is a sample from the brochure:

Like the website, grids play a huge role in the brochure. In this image, all columns are the same width and height. The image on page 3 is aligned equally between the page number box and pink content box above it.

To create the brochure I used Adobe InDesign.

Week 10/11 - Garvan Traynor Branding

1. Logo Options

http://scm.ulster.ac.uk/~B00513099/511/liveproject/pdf/logo_options.pdf

2. Logo Recommendations

http://scm.ulster.ac.uk/~B00513099/511/liveproject/pdf/logo_recommendation.pdf

3. Extra Credit

http://scm.ulster.ac.uk/~B00513099/511/liveproject/pdf/extra_credit.pdf

4. Business Card

http://scm.ulster.ac.uk/~B00513099/511/liveproject/pdf/business_card.pdf

5. New Brochure

http://scm.ulster.ac.uk/~B00513099/511/liveproject/pdf/05_brochure.pdf

6. Website

http://scm.ulster.ac.uk/~B00513099/511/liveproject/

Website preview:

Week 9 - Lecture

This week it was Nicklas’s turn to go solo. His lecture was all about the stages involved in a project.

1. Research and Discovery
- identify competition
- establish functional baselines
- clearly define audience

2. Planning
- set up team
- define scope, time, budget
- create a project plan
- establish schedule
- set up to do’s & milestones

3. Contracts, T&C’s

4. Design/Feedback Loop

5. Sell yourself

6. Take feedback seriosuly

7. Version control

8. Build!

Week 8 - Lecture

This weeks lecture was all about words and copy, Chris covered two areas withtin the lecture:

1. Designing with words

2. Microcopy & Macrocopy

He firstly told us to research Oliver Reichenstein and his iA Writer tool.

He started off by giving us a few tips. Make sure you’re spelling is correct and ensure that your copy is functional, well written copy can assist the user.

Next he went on to talk aboit Macrocopy and Microcopy. Macrocopy establishes the tone and personality and microcopy reinforces the tone and satisfies a function i.e. straplines.

Week 9 - Research & Experimentation

In the lab this week I wanted to talk to one of the guys about my project, to get some clarification on what was needed for the project, the level of detail that needs to go into the project etc.

So I sat down with Gabe, told him what I had in mind, he gave me some feedback on my chosen topic which was very beneficial. It really helped me refine my idea into something that could work pretty well.

My major project will be based on ‘World Cup Legends’. The site will look into 10 or so players who have achieved great things at the World Cup Finals. I see each webpage like a story, you scroll down the page of the selected footballer to see their entire World Cup history. Something similar to this idea of a journey: (click on image to go to website)

After deciding on the idea for my project I wanted to do some research to see if there was anything similar that is already out there.

All I found were the following three sites:

http://www.planetworldcup.com/LEGENDS/wcstars.html

http://www.worldcupsoccer2002.com/worldcuplegends.htm

http://www.rajuabju.com/elat/legends.htm

All three sites are very poorly designed and only give some facts and a small bio about each player. This gives me more confidence about my project idea as there appears to be nothing out there that will rival my website in terms of design, presentation or functionality.

Next up I wanted to do some research for design inspiration to help me when it comes to designing my website.

One site that caught my eye was http://www.threenil.com/, a football culture inspired line of clothing. The design of the website and the products are of the highest quality, they’re simple, clean and have that heritage and traditional feel which is something that I want for my own website.

I also found a collection of football artwork images on Behance created by designer Zoran Lucic. Below are a couple of examples of his artwork:

Like I said before I would like my site to have a heritage feel to it, and these images above are heavily heritage based. The renders used are black and white and have a retro grain filter to them. Great design work.

As well as doing some research, I wanted to get some visual concepts designed up. The image below is a possible design for the website:

In the image above I have drawn a dotted line from the photograph of Pele to the 1958 circle, then there will be another line leading to the 1962 World Cup and so on. There will be alot more information in each of the sections, this is just a concept.

Week 8 - Experimentation

Just been doing some work on infographics in Illustrator. Preview:

And image editing in Photoshop:

Week 8 - Research

Today I stumbled upon a infographics designer (Ben Huxley) who has done quite a few football pieces, below are some examples:

http://www.benhuxley.com/images/juve_2.jpg

These couple of pieces are very helpful in the sort of information I could display and the form in which I could display on my football website project.