Design Delight is now in archive mode as we can no longer update it daily. We may be back one day, so be sure to follow us on twitter or like us on Facebook in case we ever do come back to life :)

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

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.

Clicking “View All Images” brings all the image content boxes to the foreground.

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.

Viewing just tweets on the homepage

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.

A lightbox spins into the foreground with a bigger view of the item

Work Section

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.

Filtering work by category

Nice Touch: View the source and you see a lot of minified code and this of course.

Homepage of RED using continuous scrolling

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.

Work Items have big background images to make good use of space.


Final Thoughts

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.