Binary Loves You Too - Personal Blog and Portfolio

» Mediaid Training Services LTD

Another rework of the Mediaid site here. We wanted to work on getting the site higher in the Google rankings, which meant doing some serious SEO work. I'd improved a great deal over the past year so I wasn't too comfortable starting an SEO campaign on a site which I now viewed as outdated. Completely rewritten in PHP this new site is sleek, simple and smart, with automatically updating database driven content and menus.

Skills used: Graphic design, XHTML, CSS, PHP, MySQL, Javascript, SEO, copy writing.

» World Parts Template 1

World Parts, a company that deals with auto recyclers worldwide, commissioned me to design some templates for their premium listing service. Clients could opt to use an individual template for their listing to distinguish themselves better from the other World Parts entries. This is the first template I designed which will appear on the site soon. The idea was to make the template look more like a seperate site rather than an extension of World Parts.

» Mediaid Training Services LTD

This is the second redesign I've done for the guys at Mediaid Training Services. The company was interested in moving the site toward a more pastel theme, as well as adding some extra functionality to the site to help educate and interest visitors. Some ongoing Search Engine Optimisation was also required.

Skills used: Interface design, graphic design, XHTML, CSS, Flash, SEO, copy writing.

» BaseTwo Designs

This is a design idea I came up with for a prospective web design company. It is currently just a basic template with some of the pages populated with some text to give a general idea of how it would look. I wanted the site to be clean and professional but at the same time show my skill at graphic and layout design.

Skills used: Interface design, graphic design, XHTML, CSS, copy writing.

» The Football League Supporters Association

This is a community site I made for a group of friends who all play an online football management game called Hattrick. This design is the second version of the site, and moves away from Flash to a much sleeker design and professional look.

Skills used: Interface design, graphic design, HTML, CSS, copy writing.

» Mediaid Training Services LTD

This is the first redesign of the Mediaid site that I did. The old site was very dated and broken in many places, so I had to build this site from scratch, including redesigning the company logo for the web.

One of the features of this version of the site that I am most impressed by is the scalability of it. As the browser is narrowed down the content shrinks to fit the space.

Skills used: Interface design, graphic design, HTML, CSS, Flash, copy writing.

» Vision21

Vision21 was another idea I had for a possible web design company back when I first started teaching myself the various aspects of the industry. I was very much into Flash at this point, evident in the way the whole site is built in Flash.

The name came from the idea that web design requires vision, as well as creating a vision into a company. The 21 was a reference to the 21st century. Combined with Vision the idea was conveyed that this web design company could provide a vision into the 21st century, or the future. The dark colours and clean lines convey an image of elegance and professionalism.

Skills used: Interface design, graphic design, HTML, Flash.

» The Football League Supporters Association (screenshot only)

Here is the FLSA again, this time the first version of the site that we used. Like Vision21 above, this was made when I had just learnt Flash. The whole site is in Flash, although the navigation bar along the bottom is a separate .swf to the main content.

You can see the Coca Cola theme in the background, which came about due to the recent announcement that Coca Cola was to sponsor the football leagues. The whole site is very basic in design as I had just started out, but the people who used it were very impressed

Skills used: Interface design, graphic design, HTML, Flash, copy writing.

» Justice League Forum

Another game I spent some time on was World of Warcraft, a Massively Multiplayer Online Role Playing Game (MMORPG). One of my guilds within the game was called Justice League, named after the comic book group of superheroes of the same name.

As a guild we had an online phpBB forum to discuss various aspects of the game while we were not playing. I thought it would be a good idea to give the forum a real Justice League superhero theme, so I created this profile.

Skills used: Graphic design, HTML, CSS.

» Skins for Sokker Manager

Sokker is a browser based football management game which I play in my spare time. Players compete against other players to rise through the leagues. The default design of the site is quite ugly so the game's developers implemented the option for users to use their own CSS files to change the graphics used.

As the majority of users don't know how to make their own CSS files for the game I have developed a number of my own based on users' requests. The majority have been based on individual football club colours.

Skills used: Graphic design & CSS.

» Actionscript Game

This is a Flash game I made to test out my Actionscript skills. The aim of the game is to move the ball into the indicated transporter, using the directional arrows on the keyboard. The ball can only move left, right, up or down, and continues to move in one direction until it stops. The player must move the ball around the screen with help of the walls.

The game looks simple enough to the user, but inside there is a lot of Actionscript controlling everthing that happens on screen. Adding new levels is extremely easy. One symbol containing the walls and the finish marker needs to edited, and a few lines of code to control the position of the ball needs adding, and that is basically it.

» Mediaid Quizzes

These are the interactive quizzes I made for the newest Mediaid site. Their construction makes it very easy to create new quizzes as and when needed. The questions for each quiz are stored in an XML file which is then imported into the Flash file when it is loaded. To create a new quiz all that needs changing is one line of Actionscript to reference a different XML file.

Each quiz consists of 10 First Aid/Health & Safety related questions, with 4 multiple choice answers for the user to choose from for each question. When they answer they are told whether they were right or wrong, and then move onto the next question. At the end they are presented with a summary of how they did.

» Mediaid Intro Movie

The first Mediaid design I completed had this short Flash movie in the centre of the index page. Various parts of the logo are motion tweened together to build the complete logo, with a small amount of text below. It is made completely from vector art and motion tweens.

» FLSA Intro Movie

My Flash based FLSA site had this opening movie as the intro to the site. It was one of my first real Flash movies, and although quite basic a lot of the people using the site liked it. The movie introduces a welcome message word by word, and then the users are prompted to press a button to enter the site.

» Water Distortion Movie

I found a tutorial on how Flash can be used to create a watery distortion effect so thought that I would give it a shot, and this is what I ended up with. As the water drops move across the text you can see a slight distortion in the positioning of the text.

Each drop of water is its own symbol, and within each symbol is another layer of text, slightly off centre from the main text, then masked out by a mask the same size as the drop of water. When the water moves over the text we are seeing through it to the second layer of off centre text underneath.

» Bouncing Balls Movie

One day I decided to see if I could animate a selection of balls bouncing around in a box. I wanted to see changes in the balls' velocity as well as seeing some compression when each ball came into contact with another solid surface.

It took a lot of tweaking and careful positioning to get it finished, but in the end I was happy with the result. Most of the animation looks very smooth and realistic until things slow down toward the end. It proved very tricky to get the balls to look good at slow speeds.

» Basic Button

This is an example of a very simple Flash button. It doesn't do anything, but it does have a hover and onclick colour change. I thought I should include it just to demonstrate that I can make a simple button with state changes.

» Clickable Region Map

World Parts, a company I designed some web templates for, have a clickable map of the United States of America and Canada on one of their sites. They asked me to make a better map to replace their older, black and white version. This is the end product which is now in use on their site.

» Vector Face

This is a face from a comic strip that I drew in Flash. The aim of this drawing was to see how accurately I could recreate proper drawing with Flash. It was quite interesting trying to get the shading and frown lines right.

» View the jpeg
» View the swf