Introduction to interactive SVG’s with SnapSVG

Posted by & filed under Motion Graphic, Web Design, Work.

snap1

This project was a tutorial for Web Designer magazine to show how to make simple interactions with SnapSVG library, the successor to the popular but outdated RaphaelJS. This project has simple rollover animation that is created with a number of different methods from using JavaScript to CSS3 keyframe animation.

More »


Folding, sliding, rotating menu’s and images with Oridomi

Posted by & filed under Web Design, Work.

fold-up

Recently I’ve been playing with the very easy to use ‘Oridomi’ library. After seeing the excellent Humblebee site, I wanted to explore a similar style of unfolding menu. I obviously didn’t want to copy it right off the bat but draw inspiration from it and create something in the same vein. I was struggling to […]

More »


Photoshop to Edge Reflow

Posted by & filed under Web Design.

ps_to_reflow

Adobe have been working on a slew of ‘Edge’ branded products of late and the latest tool in development (and it is still in preview stage at the moment,) is Edge Reflow. What makes Reflow remarkable is that it is the only software that allows visual designers the ability to demonstrate their designs responsively. In […]

More »


3D Tweet Archive

Posted by & filed under Web Design.

3D tweetArchive CSS3

The idea behind this tutorial is if you’ve ever been to a conference, event or training day and there are a whole bunch of interesting tweets floating around that afterwards you wished you’d favorited but didn’t. Maybe you’ve then left it too long to find them again and cursed yourself for not having the foresight […]

More »


CSS3 Angled Website Design

Posted by & filed under Web Design.

angled-css3-layout

In this tutorial for Web Designer magazine I was commissioned to create a website using CSS3, so I opted for an angled background by rotating the div elements with CSS3. This provided some issues with getting background images to stretch across and fill the background. I usually use the CSS cover method but this didn’t […]

More »


Adobe TopCoat UI

Posted by & filed under Web Design.

topcoat

Adobe are working on a set of UI components called TopCoat. This is not a framework but merely a CSS file that contains many useful UI elements for creating projects. The project came into existence because of PhoneGap, some designers did not require a full framework such as jQuery Mobile in order to create the […]

More »


Foundation 4 Tutorial

Posted by & filed under Web Design.

found4

There are so many good responsive frameworks around for Web Designer’s today that it seems almost pointless to create your own responsive design. Foundation 4 has recently been released and it claims to be “the most advanced, responsive framework in the world”. In this tutorial created for Web Designer magazine I take a look at […]

More »


Edge Reflow First Look

Posted by & filed under Web Design.

reflow

Edge Reflow is a new tool from Adobe to help Designers create multiple screen sized designs. Think of this more like a design tool than a code tool, the idea being that you offload the design to a coder. Yes the tool will produce output for you but at the present time this only works […]

More »