A couple of days ago we featured RED Interactive Agency as our Design of the Day. However, we didn’t think a screenshot was enough, so it has become the subject our first in the series entitled “In Focus”.
In Focus is where we will feature the nicest designs from around the web that show off what is possible with the best design and latest developments in HTML/CSS.
The homepage on RED is made up of squares which feature multiple content types, these squares showcase images, tweets, videos, facts and portfolio items. The site uses continuous scrolling so as you scroll down the page more squares load in.
Where the homepage excels is in it’s filtering, clicking “View All…” on one of the items fades all of the non relevant squares into the background and brings the relevant content squares to the forefront allowing you to see all photos or tweets or videos in a sleek flash-like effect.
When hovering over an item on the homepage you can choose to view more information, this will launch a lightbox which spins into the foreground to give a larger view of an image, as well as some information and links to view a work item or go to a particular website.
RED is an interactive agency so obviously one of the first places a potential client will look is their portfolio. The Work section on RED uses similar filtering to the homepage either by choosing a category or by choosing to show “award-winning” or “featured” work. Applying a filter will bring the relevant thumbnails to the foreground, fading the non-relevant thumbnails into the background.
Viewing a piece of work slides the thumbnails up under the header and slides the details of the project into view in a smooth motion. Each piece of work has a good quality background image, title and description of the project as well as some meta data. You can use arrows to the right of the page to slide between work items so you don’t have to return back to the main work section to look at another project.
RED Interactive Agency is an example of the subtle power of CSS 3, without overdoing it. Moving between sections and feedback from user actions such as hovering over a link can all be enhanced with CSS 3 and RED’s site is full of these little enhancements, so take a few minutes out of your day to look at how to use CSS 3 effectively to create a better user experience.