DES Blog

Video: Typography Inspiration

Sun, 26 Feb 2012 00:25:56 +0000

Dusty Signs from Hunter Johnson on Vimeo.

New Semester...

Sat, 18 Feb 2012 00:48:05 +0000

For the past few weeks I’ve been working on my major project but I’ve still found some time to create some more football magic in Photoshop. Henrys turn.

Week 12+ - Experimentation

Mon, 09 Jan 2012 15:22:04 +0000

Today I’ve been working on some possible infographics that I could insert onto the players pages. The infographic below shows the World Cups that Pele featured in. The colours represent the hosts home shirt colour i.e. 1958 is yellow for Sweden, 1966 is white for England

Week 12+ - Wireframes

Mon, 09 Jan 2012 15:09:54 +0000

Homepage

Player Page - Version 1

Player Page - Version 2

Week 12+ - Major Project Preperation

Sun, 08 Jan 2012 18:56:11 +0000

Over the last few days I’ve been getting some images prepared for my Major Project. This involves erasing around photographs, removing the background part of the image, just leaving the ‘render’. This can be a very time consuming task so it’s best to get it out of the way now. Examples are below:

Week 12+ - Grid Systems

Sun, 08 Jan 2012 17:22:57 +0000

I recently got the book by Josef Müller-Brockman on Grid Systems, I’m only 30+ pages into but so far it’s been a great read. The first 5 pages were all about the grid philosophy and the purpose of the grid.

It then went onto discuss things such as the size of the paper, the measuring system etc, these are things that have never crossed my mind before but looking back on to it now, these are really important elements of design. I really can’t wait to get further into the book.

Week 12+ - Research

Sun, 08 Jan 2012 17:11:54 +0000

As I plan to have a bespoke feel to each of the players page, I’ve been doing some research into retro HTML5 websites for the footballers from the early World Cups. I just wanted to get some inspiration, looking at the textures and fonts that are used on other websites. Below is one site that caught my eye!

Neutral Milk Hotel (http://www.walkingwallofwords.com/)

The level of detail that goes into the graphics for this website is really impressive, the textures used for the background, banners and other images just work perfectly alongside the colours, fonts and overall feel of the website.

Week 12+ - Experimentation

Sun, 08 Jan 2012 16:58:22 +0000

Something that I’ve been working on recently is creating my own typeface. It has been something that I’ve always wanted to try and thought it was the right time to try and create one as it could be used in a Major Project.

I started off by just doodling on a bit of paper with a pencil and ruler. Below shows my progress with the letter ‘M’:

As you can see, grid systems are playing a huge role in the font. After drawing some more laters onto paper, I then took them into Illustrator to start turning them into vector form.

See below:

The letters above were created just using the pen tool. I changed the thickness of the stroke to the bold letters. It’s still early days in regards to this typeface but I’m pretty pleased with how it’s going.

Week 12+ - Type Research

Sat, 07 Jan 2012 00:26:31 +0000

Recently I have been looking online for possible fonts to use for my project. The two caught my eyes and I feel they could work very well.

Week 12+ - Prototyping

Fri, 06 Jan 2012 16:16:00 +0000

Recently I’ve just been experimenting with some jquery as I feel my project will require some form of interactivity and jquery could be the best way to go.

Example 1: (Click here for HTML version)

Also, the circle diagram only reacts when the cursor is over the right side of it.

Example 2: (Click here for HTML version)

Week 12 - Major Project Update

Thu, 05 Jan 2012 21:23:11 +0000

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

Thu, 05 Jan 2012 18:16:00 +0000

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

Wed, 04 Jan 2012 21:44:00 +0000

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

Wed, 04 Jan 2012 21:24:00 +0000

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

Wed, 07 Dec 2011 15:21:00 +0000

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

Sun, 27 Nov 2011 15:47:00 +0000

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 9 - Research & Experimentation

Fri, 25 Nov 2011 13:17:00 +0000

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 - Lecture

Fri, 25 Nov 2011 13:17:00 +0000

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 8 - Experimentation

Wed, 16 Nov 2011 18:28:00 +0000

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

And image editing in Photoshop:

Week 8 - Research

Wed, 16 Nov 2011 17:58:10 +0000

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.