Sep 162013
 

CSS3_logo

In 2013, it’s time to sit back and relax. Modern browsers have several dedicated animation technologies built in, which run at 60 fps. Now is the time to forget about the past and start building UI experiences with tasteful animations that help the user feel at home. I would like to take you on a guided tour of the four animation technologies the modern web has to offer to help you decide which one is right for your project.

Let’s start with the easiest to use declarative technology: CSS3. No need for JavaScript here, just plain old CSS, with a few modern tricks.

CSS can be used to declare animations using two basic properties: transition and animation. The transition property tells the browser to compute intermediate frames between two states, each defined by its own CSS. The animation is triggered when the CSS of the element changes. For example, because you programmatically changed its class or because a :hover CSS has kicked in.

MORE:  Create slick HTML5 animations | Tutorial | .net magazine.

 

 


 

Jun 032013
 

 HTML5_Logo_512

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.

 

 


 

May 292013
 

 random-numbers

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.

 

 


 

May 282013
 

 CSS3_logo

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.

 

 


 

May 202013
 

Having to manually apply the same features to near-identical elements can get tiresome. Fortunately, Dmitry Tsozik has a great trick for generating variants of an object or icon

This article first appeared in issue 234 of .net magazine – the world’s best-selling magazine for web designers and developers.

Have you ever thought how awesome it would be to remove all repetitive routines from your daily design work? Or how to get build some kind of graphic assets library in Photoshop – similar to Flash, Illustrator, After Effects and other Adobe apps? And wouldn’t it be great to have a couple more hours a day to add final touches to your designs?

In this tutorial, we’ll attempt to address all three questions, exploring a cool trick that enables you to work on any number of variations of an image at once. This workflow is extremely useful for games assets, and for GUI designers creating icons. It enables you to work on one object, save it, and let Photoshop distribute all the changes you’ve made to any number of variant copies.

If you’re familiar with Smart Objects, you already know that you can have multiple instances of one element. This tutorial will show you how to use Smart Objects in an even smarter way. I developed the technique trying to mimic an awesome workflow in After Effects, and it turns out that it works pretty well in Photoshop, too.

MORE:   Design 100 objects at once in Photoshop | Tutorial | .net magazine.

 

 


 

May 142013
 

 HTML5_Logo_512

Sam Hampton-Smith shows how to use CSS3 transitions and animations to create a kinetic typography motion graphic piece, timed to match an HTML5 audio clip

Kinetic typography is a popular way to add impact to a song or audio clip by accentuating the lyrics or script to emphasize phrases, build suspense or help tell a story. The usual method is to set type in Photoshop or Illustrator and use After Effects or Apple Motion to animate words, revealing them in time to the music.

In this tutorial, we’ll use kinetic typography to create a simple conceptual art piece, timed to a song provided by power pop band, Be Like Pablo. Rather than using After Effects, we’ll take advantage of CSS3 animations and transitions to create the piece with standard web tools: HTML5 and CSS3 for the animation and audio and a smattering of JavaScript (we’re using jQuery but you could use straight JS if you prefer) to add classes to various elements at appropriate times.

MORE: Make a kinetic typography video with CSS | Tutorial | .net magazine.

 

 


 

Mar 142013
 

 

Webpages are constantly getting bigger.

Massive JavaScript libraries and endless sharing buttons aren’t helping, but the main culprit behind most of the bloat is the good old image. According to the HTTPArchive, images account for roughly 60 percent of total page size. That means the single biggest thing most sites can do to slim down is to shrink their images.

One way to do that is with alternate image formats like Google’s WebP, which can yield images between 25 and 34 percent smaller than more popular image formats. Despite the astounding space-saving potential of WebP it, like JPEG 2000 and other efforts before it, has not completely caught on with browsers.

So far only Google Chrome and Opera support WebP (both also automatically convert all images to WebP for their respective proxy browsing mobile services). Mozilla objected to WebP when it was first launched, but all of the issues raised in that post have been addressed as WebP has evolved. Firefox still does not support WebP. Nor does Internet Explorer.

However, as Opera’s Bruce Lawson recently pointed out, using some cutting-edge CSS wizardry you can serve WebP images to Chrome and Opera, while still offering JPGs to the rest.

READ MORE:  Put Your Site on a Diet With Google’s Image-Shrinking ‘WebP’ Format

 

 


 

Mar 062013
 

We asked designers to change the future by designing an app for Windows Phone that would help us create, connect or simply impress our future selves. You answered the call with hundreds of amazing and inspiring submissions from scrapbooks and font managers, trip trackers or convoy road managers, to diaries that don’t broadcast your every thought or will even seal them up for the future. After hours of review and deliberation by our fantastic jurors Chris Caldwell (GSkinner.com), Jennifer Bove (Kicker Studio), Corrina Black (Microsoft), Pratik Kothari (Techark Solutions), and Eric Ludlum (Core77), we are proud to announce our 50 finalists and five winners!

READ MORE:  App to the Future: Design Challenge Winners – Core77.

 

 


 

Feb 192013
 

android-ios

Justin Ferrell, mobile strategist and developer at Digital Relativity, explains the fundamental differences between the user expectations of today’s most popular mobile platforms, and illustrates how developers can build cross-platform applications without neglecting the user experience

The words “cross-platform development” have a somewhat negative connotation within the mobile development community. When we think cross-platform, we immediately think of compromising designs and user experiences, with poor performance that caters to the lowest common denominator of device. There are so many people doing cross-platform development badly that we’ve started to assume that all cross-platform development is bad.

Like all things, there are bad examples of cross-platform development and design. But there are also some very good examples of applications that use cross-platform technologies and techniques.

Companies like Xamarin offer great cross-platform development products

Before we can understand going across platforms, it’s important that we understand the platforms themselves, the fundamental differences and what sort of experience they create for the end user.

READ MORE >> Dos and don’ts of cross-platform mobile design

 

 


 

Feb 192013
 

mailonline

WITH ITS FOUR-FOOT-LONG HOME PAGES AND HUNDREDS OF SIDEBAR IMAGES, THE MAIL ONLINE BREAKS EVERY RULE OF WEB DESIGN. IT’S ALSO WINNING THE WEB AND DESIGN AWARDS.

During the average workday, I allow myself to take a couple “Internet breaks,” little bursts of Tumblr and Gawker and other forms of web candy that tug at my attention span like a needy kid. There’s one web threshold I never step over on a weekday, though: the Mail Online. The online outlet of the British tabloid is a one-way ticket to an hours-long surfing spree of celebrity gossip and moral outrage. It’s not web candy–this is web crack.

And it’s not just me. The Mail Online now outperforms The New York Times, The Guardian, and pretty much every other online news property in terms of unique visitors. It generated almost $40 million last year, an increase of 500% since 2008. I’ve always wondered at the remarkable magnetic pull of the website, which isn’t particularly beautiful and isn’t known for its in-depth reportage. “Mail Online breaks just about every web design rule in the book,” Jakob Nielsen yes, that Nielsen has said of the site. Yet, as Nielsen adds, “the traffic figures speak for themselves.” What keeps so many of us coming back for more heaping servings of non-stories, even when we know that’s what we’re getting?

MORE:  4 Lessons From The Web’s Most Ruthlessly Addictive Site