tutorial

Apply Flash principles to HTML | Tutorial

Jun 032013

Old habits can die hard. But don’t worry, Paul Wyatt and Joseph Luck are here to guide you through launching a site in HTML – with traditional Flash sensibilities.

For years Flash has been a great creative tool for websites, animation and even broadcast work, but it’s becoming increasingly necessary to look at new ways to build websites and display content.

A key personal motivation behind this tutorial was a folio website, originally designed seven years ago as a showcase of the ‘campaign website’ flavour – with a filing cabinet dropping from the sky and displaying content with animations and transitions in between seemingly everything. Over seven years this website had been updated but failed to keep up with career and work changes, and the demands on it to display different types of content. Something that was easy to update, would work on everything and also serve as a ‘shop window’ for work was required.

But Flash and the showman go hand in hand, and those sensibilities endure. The new site was to have a resizable image-based homepage showcasing full browser width and height images to their best. The aim was for this to rotate and transition from one image to the next and on the sub-homepages have a cut-down version. Clean, bold typography and clear labelling were also key.

MORE: Apply Flash principles to HTML | Tutorial | .net magazine.

Designers: Learn To Code! Here’s How To Start

Design, Web Design 446 Responses »

May 292013

I’ve been hearing for years that designers need to learn to code. At first I thought I’d just end up doing two jobs instead of one. But the better I get at coding, the more I understand how connected they are. As a designer in the digital spectrum, you realize that your very work–your material, which exists in the world–is code. How can you design something if you don’t know how it works? So, designers, step into the ring.

THE FIRST PUNCH

I want you to download Processing. It’s a language built on Java and it focuses on images and animation. It’s good for designers because it gives you solid visual feedback about what your code is doing. After you download Processing, I want you to watch the video below. It’s a Processing sketch (a sketch is what the programs are called in Processing), and this is your first gentle punch. The video is about ten minutes long and shows a few simple examples of how to use numbers in different ways in order to make simple shapes on the canvas. Try to follow along with me and type everything out as I do, because I think it’ll help you learn.

MORE: Designers: Learn To Code! Here’s How To Start | Co.Design: business + innovation + design.

Create modern CSS3 hover effects | Tutorial

Web Design 783 Responses »

May 282013

Knowledge needed: Basic HTML, Basic CSS/CSS3

Requires: Code Editor

Project time: About an hourDOWNLOAD SOURCE FILESVIEW DEMO

Create a modern CSS3 hover effect by using CSS transitions, transforms and delays

A CSS transition gives us the ability to animate changes to a CSS property value. This can be used to smoothly change a value, and by using transition delays we can cue the transition of elements. A CSS transform allows us to transform elements in two or three dimensional space. In this tutorial, we will be using 2D transformations.

MORE: Create modern CSS3 hover effects | Tutorial | .net magazine.