Showcase
- Website Design and Development
- Games Development
- Software Development
- Shockwave/Flash Development
- Artwork/Graphic Development
- Logo Design
- Consultancy
- Multimedia Design
- Website Makeovers
- Photography
- Music/Audio
- Hosting/Email/Domain Setup
- eCommerce Solutions
Website Design and Development
I started designing and developing websites at University in 1999. We were taught how to develop for the end-user using technologies and theories such as HCI (Human-Computer Interaction) and usability engineering. I remember getting into all sorts of problems when developing solely for Microsoft Internet Explorer. I wanted to use the newer technologies that they had incorporated in their browsers but found that many other browsers did not support those technologies. So the trick was to develop a website that would be cross-browser friendly. Not an easy task to begin with but something that one can master with a bit of time and experience (and patience).
It is of course every web developers dream to be able to build a site for one browser and it to work in the rest but unfortunately this is not the case and never really has been. Each browser manufacturer understandably wants to bring out new technologies to attract new users. However, in recent years, browser manufacturers are adhering more to the universal W3C (World Wide Web Consortium) Recommendations:
In order for the Web to reach its full potential, the most fundamental Web technologies must be compatible with one another and allow any hardware and software used to access the Web to work together. W3C refers to this goal as "Web interoperability". By publishing open (non-proprietary) standards for Web languages and protocols, W3C seeks to avoid market fragmentation and thus Web fragmentation.
There are a school of developers that choose to develop solely in Flash thus (misleadingly) avoiding cross-browser problems. In my opinion, badly designed HTML sites can be really annoying but badly designed Flash sites are simply no go areas. Flash is a great technology and I have used it a lot in the last 7 years to enhance the user experience, but essentially a website should give the user relative information smoothly and efficiently without massive loading times, conflicting sound files and redundant animations. Well designed Flash sites are great but there is still the question of accessibility (which Adobe are constantly improving). Again, thoughtful design is the key, the user should be given a choice of which technologies to use.
My Mission
I like to develop websites for clients who care about their websites, not just as a monetary revenue, but as something they can feel proud of and that can perhaps become a labour of love. Attention to colour schemes, fonts, general layout, presentation, functionality and upgradeability are all important factors when developing a site.
My goal isn't to develop as many sites for as many high profile clients as possible, my goal is simply to enjoy and take a little time over a site and give the client a professional product that hasn't been pulled out of a common template hat. If I can innovate then I will.
Graphics should have a good resolution yet be small in file size and they should look good to the human eye. Graphical text should be used sparingly (if at all) and if it is used then it should be clear and visible for the reader. Heading should be ordered correctly for screen readers and text should be able to be enlarged without breaking the page. Tables should be used to display data only and advertisements should integrate seamlessly into the graphical interface.
When the site is complete, it should be a pleasure for the user to use. The user should be able to get to the content they require quickly and efficiently without long delays or redirecting.
In short, a website should look and feel as though it has been tailored for the end user and not necessarily the developers.
Jack of all trades, master of none?
When I was at University studying Multimedia Technology, the above term was sometimes pointed my way because we studyied so many technologies but not to the depth of a Computer Science student, for example. In my defence, I have listed below some of the advantages of being a "jack of all trades", I hope they don't make me out to be too self indulgent, I have also had plenty of experience as a team player :)
- By learning many programming languages/technologies, you obtain experience that helps you learn new ones very quickly.
- Experience is gained of how to rapidly research and write/configure code to suit your own needs.
- You are able to work as a one man team (as I do) without having to rely on anybody else to get the job done.
- Less time is wasted through communications with colleagues/management.
- There are always friends who ARE gurus of their chosen subject that you can tap for information (and vice versa)
- There are forums and knowledge bases these days to retrieve relevant information when problems arise.
- You can develop from your own designs and so feel more comfortable with the final product.
- You can liaise directly with the client.
- You can set time scales and budgets with more accuracy.
The Methods Used To Build A Website
I employ the following project cycle when developing any website:
Requirements
- Needs analysis
- Brainstorming
- Budget Analysis
- Timeline
- User analysis/profiling
Design
- Story boards/flow charts
- Functionality research
- Visual research
- Mock-up/prototype
Development
- Domain/email etc. configuration
- Photography
- Graphics generation
- Functionality implementation
- Cross-browser/platform testing
Testing
- Usability testing
- Problem solving
- Cross-browser/Platform testing
Maintenance
- Documentation
- Back ups
Technologies Used
The following technologies/theories are used in the design and development processes:
- HTML/XHTML
- CSS
- JavaScript
- Microsoft SQL Server
- ASP/VB
- Macromedia Dreamweaver Templates
- XML/XSLT
- W3 Accessibility Standards
- Macromedia Flash/Shockwave
- Microsoft IIS
- AJAX
- RSS
- Image Optimisation/Generation using Adobe Photoshop or Macromedia Fireworks
- Music/Audio generation using Steinberg Cubase
Games Development
While studying at University between 1999 and 2002, I produced many games using Macromedia/Adobe Director. Many companies deliver demonstrations or use it as a user interface (UI) for content on CDs and DVDs. It can incorporate many different file formats (e.g. AVI, BMP, QuickTime, PNG, JPEG, RealVideo), making it possible to integrate without re-encoding files. It also supports vector graphics and 3D interactivity, which can be used for producing games.
The games that I have produced all make use of Macromedia Flash. Basically, it is possible to embed Flash movies within a Director movie. When the Director movie is complete, it can be published to a Shockwave format which can be embedded into a web page. Like the Flash Player, a browser also needs the Shockwave Player which can be downloaded for free using the link above.
Adobe Director uses a scripting language called Lingo which is quite different from ActionScript, the Flash scripting language. Recent versions of Director are shipped with a second language, the familiar JavaScript which is very similar to ActionScript.
There are some examples of the games that I produced below. As yet, I have not developed an application commercially, though I would like to think that an oppurtunity will arise in the near future.
Simpsons Game
This was one of my earliest attempts at producing a game. It is a simple jigsaw game. Simply drag the pieces of jigsaw onto the board and complete the jigsaw before the time runs out - oh and watch out for Mr Burns who will terminate the game if he hits a piece of jigsaw that is placed on the board.
Galaxima
This is a classic shoot-em-up game. Shoot down as many alien ships as you can before they crash into you. You can score a bonus by blowing up the Starship Enterprise.
Hali T
This game is a classic platform type. It's a case of collecting all the objects before you can complete the level. The game's animation is smooth and the file size is small thanks to Shockwave compression. Object-oriented techniques have been used in programming the game which also makes for cleaner and smoother animation.
Meteor Rain
I think this game tests how good you are at clicking the mouse. Meteors are raining down on earth and you need to blow them up before they can penetrate the surface. Move the mouse over a meteor and click like mad until the rock explodes.
Software Development
In 2001, I worked through the summer on a Shell Technology Enterprise
Programme. I worked at an engineering company where I developed a
Microsoft Visual Basic application. The application gained me The
Most Enterprising Student of the Year award.
I designed the program with the end-users in mind (I had been studying HCI and usability engineering at University). The application was remote in the sense that the users wore headsets and were guided along by the program.
I managed to connect the PC to the hardware measuring instrument that they used (digital calipers), and then used VB to read in the data, which was subsequently manipulated.
There were over 300 plus audio files used in the program, statistical displays (graphical) and a host of many other features too numerous to list.
Productivity doubled from the use of the software and it is still used today after 5 years.
To read about other software applications please click this link which will take you to the Multimedia section of this page.
Shockwave/Flash Development
As mentioned
already on this site, I use Flash only to enhance the user experience.
I have as yet not built a site entirely out of Flash because of problems
with accessibilty etc. There would be no problem, however, in giving
the user an option of a Flash site or a HTML site (which some developers
actually do). Obviously, there would need to be a lot more time added
to the development process if this were to be the case.
I have used Flash mainly in the building of Shockwave movies (also mentioned above) and animations. The animations can be anything from banners to logos. The Flash movie above scrolls and fades in text that is read from a text file. The idea here is that news headlines can be updated in real time and fed through the Flash movie.
Artwork/Graphic Development
I think that attention to detail
is the key to creating pro-standard graphics. It's amazing how many
sites have badly optimised graphics or graphics that simply don't
fit in with the overall feel of the site. I find that graphic generation
on the web is a balance between crisp, clear quality and low file
size. Look at the graphics on this site - clear and quick loading?
Pet hates regarding graphics on the Web
- Poor quality graphics (bleed out and smearing)
- Badly thought out user interfaces (poor navigation/functionality)
- White space surrounding graphics that should have a transparent background (halo effect)
- Clunky animated gifs (or Flash)
- Graphics that take an age to load
- Ill chosen text graphics (font usage)
- Colour usage (too many colours/mis-matched colours/garish colours)
- No anti-aliasing
- Over-complicated graphics
- Over-use of certain techniques
You can check out some of my graphical designs and styles at the top of this page.
Some examples of digital art
Logo Design
So how would I go about designing a logo for a client? Well, I would
first get a good idea as to the nature of the business. I would then
offer up a few different designs after a period of research. Essentially,
I believe that a logo should be memorable and not over complicated
- it really depends on how and where it is going to be used. If a
school kid can quickly scribble it on a desk then that's good sign
(or not as the case may be). Again, choosing the correct colours and
fonts are very important.
Designing a site around a logo assists a designer in choosing certain
colours, fonts etc. Building a logo around a site can often give a
company a welcome breath of fresh air. Obviously, a logo is very
important to most businesses. Virgin's logo is an example of simplicity
and is therefore very memorable, as are the logos of Orange and Apple.
Consultancy
In between working on my own projects, I act as a consultant/contractor. If you are interested in hiring me then I'll let you know if I'm available for the type of work that you require. Remember, that because I am a one man team I can give you a more specialised service. There are many web design agencies out there that will not care about the details that you find so important and will not deliver a unique product for your time and money.
Please use the contact page to get in touch.
Multimedia Design
I specialised in multimedia design and communication at University and that's what I set out into the paid world to do. Building an application that incorporates audio, video, graphics, interaction etc. is very exciting to me. I have built several before and you could say that many modern websites now incorporate "multimedia" or "rich media" as envisaged around the turn of the millennium. The Fantom Era (Phantom Era) Project that I am currently working on will incorporate many aspects of multimedia.
I have build multimedia applications in HTML, Flash, Director, Visual Basic and Powerpoint.
Sonic Adventure
This is the prototype of a project that incorporates audio in order to guide the user. It is an adventure type of game with only a small number of locations. You find objects and kill baddies by moving around the location. The sound effects and voice responses are meant to give the game a dark, almost sinister feel. The game can be won by collecting the objects and entering the Old Inn, where a surprise awaits you.
Website Makeovers
With Web technologies advancing so rapidly, sites often fall out of fashion and favour. The trick here is to ensure that a site is easy to update without the necessity for a complete redesign. This is why adhering to Web standards is so important. By building reusable parts, the pattern or layout can easily be rearranged and given that fresh breath of air. Good structuring means less toil for the future.
An interesting project is the CSS Zen Garden. Here, the structural code of each site remains the same and only the styling (CSS) changes.
If you are looking to bring your site up to date then please contact me, but remember that a complete redesign may be required if the site is a little too jurassic.
Photography
Stock Photography
It's true, many websites benefit from stock photography and these days there are thousands of companies offering pro-standard snaps at affordable prices. Photography can give a website a human face ensuring that the user will feel more connected (and more comfortable). But there are so many companies that don't have a clue about what sort of imagery to project, and hence the results can be corny and gaudy.
I do like to take my own photographs where appropriate, especially for the purposes of artwork. Sometimes, there may be scope to digitally enhance the image to complement the look and feel of the site. I may want to incorporate a picture into a banner or create a background image or promotion. Whatever the reason for using photography, the end result must be high in quality and meaningful to the end user.
Optimisation
All of my photographs are optimised in Adobe Photoshop or Fireworks. There is always a trade off between file size and quality but it amazes me, even today, as to how many sites can get it completely wrong.
My pictures (optimised)
Music/Audio
I am the singer for a band called In Like Flynn. I have been writing music since the age of 16 and have amassed over 150 songs to date. By the age of 23, I had developed my own style of writing songs and I have been developing the style ever since. At the moment I am working on the Fantom Era (Phantom Era) project which will hopefully be a massive success (fingers crossed). The Fantom Era project is a work in progress - you can check out Fantom Era but it will probably not be ready before April 2007.
I have the good fortune of working with some top class musicians and engineers so if you require audio or music writing for you then please contact me.
Hosting/Email/Domain Setup
If you do require a new website or makeover, this will be all done for you, including database backups, ongoing consultation and optimisation.
Depending on the type of site you want building, I will choose one of the world's top providers to ensure stability, security and scalability.
eCommerce Solutions
Lately, I have been contracted to develop a large scale ecommerce
solution. Music
Bros wanted a scalable online music store to complement their
existing bricks & mortar store which is based in Shropshire. They
wanted to be able to update the store on the move, so control needed
to be online. A comprehensive back end system allows them to update
and edit many special features (listed below). Music Bros were given
full support and tutoring in order to really get to grips with the
system. The project's time scale was three months from the original
brainstorming to opening the store online (expected to be March 2007).
The store has a refined back end with useful cross-data search to make finding things easy. The product set up and management is equally efficient, using a well-trusted interface style. Virtually all site content, including most general text, can be edited from the back end. The back end has been tested for cross-platform compatibility, ensuring the store can be administered for users with any common browser on any operating system.
I wanted the store to look cleaner than existing music stores (which were extensively researched). My aim was to make this particular store the Google of music stores for ease of use and clean interface. The site is written in ASP which is the language I am familiar with. I bought a professional third party ecommerce core (ASP) and then configured and tailored to suit the client. By developing in this way, not only did it bring the costs down for the client but it also meant that the site was robust and trustworthy, as the core engine (code) is used throughout the world in many successful online stores.
Features
- Promotions and discounts
- Saved Baskets, Wishlists and Speedorder
- Configurable Tax and Shipping
- Quantity/bulk discounts
- Customer reviews and cross-selling
- Multiple currencies
- Multiple language capability
- Microsoft SQL Server or Access databases
- Regular database dumps/backup
- Search engine optimisation
- Static page generation
- Built to latest W3C Standards
- Sophisticated sit search
- Customer groups
- Support for multiple payment gateways

Click to download
Click to play
Click to play
Click to download
Click to download

