Posts Categorized: Web Design

Multitouch gestures in HTML5 for Tablets

Posted by & filed under Web Design.

multi-touch

In this tutorial commissioned by Web Designer magazine, I explored using Multitouch in HTML for touch based computers. It was a simple job to get the whole thing working on iPad, however iOS has a non standards based way of accessing scale and rotate, so this didn’t work on other devices. A little help from […]


Edge Animate – 1.0 Responsive Animation

Posted by & filed under Web Design.

responsive-anim

After an extensive open beta testing and 8 previews, Edge Animate has finally hit it’s first official release of 1.0 and to reward the open testers that contributed to the tool, Edge Animate is completely free. To get it, just grab a free Creative Cloud Account. To mark the first release I created this tutorial […]


Make pixel based sites responsive

Posted by & filed under Web Design.

toresponsive

This tutorial, written for Web Designer magazine was created to show just how easy it is to take an existing web site and convert it from being a pixel based layout into a percentage based layout. This is a common issue for a great many people and most believe they have to start again from […]


Swipe gesture interface

Posted by & filed under Web Design.

swipe

This tutorial was created to show how a whole interface can be constructed around gestures, particularly aimed at tablet devices. The user swipes left and right to cycle through content, with the content being specifically formatted for tablet sized screens. The tutorial is featured in Web Designer magazine.


WebGL Interactive Landscape Tutorial

Posted by & filed under Web Design.

WebGL-scene

This tutorial was commissioned by Web Designer magazine and was created to show how 3D interfaces can be used on the web. Here a 3D scene has been modelled in Cinema4D and has been exported into the Collada model format (.DAE). ThreeJS has been used as the WebGL Library to load and display the model […]


EaselJS Vs Flash Platform Game

Posted by & filed under Games, Web Design.

eplatform

I was commissioned with creating a HTML5 Canvas game using EaselJS. I came up with a simple platform game demo, which had the player jumping over to the other side of the screen to collect a key while avoiding falling boxes. Once the key is collected the player has to get back to the door […]


HTML5 Geolocation directions

Posted by & filed under Web Design.

geoloc

This tutorial for Web Designer magazine shows how to access the HTML5 Geolocation api through Javascript. Once the current location is found, Google Maps API is queried and directions to a business are automatically brought back for the user. The point behind this is, if we can find out the location of the user, we […]


Edge Animate Interactive Features

Posted by & filed under Motion Graphic, Web Design.

edge2

This project was created as a tutorial for Web Designer magazine to show the recent interactive features that have been added to Adobe Edge Animate. As this tool is still in beta there is a slight bug in the output shown here, however this is making excellent progress. This tool will become an essential design […]