Outlaw Design Blog

A while back, Smashing Magazine did an awesome round up of 2009 Web Design Trends. The post was a great round up of trends for 2009 and websites that showcased these trends. I would like to take that post a step further and add a list of tutorials to show you how to recreate these popular trends.

Letterpress

“One of the most unexpected trends we’ve observed over the last months was the emergence of letterpress (actually pressed letters) in Web design. Probably the most important reason for this trend is the simple fact that this technique has been rarely used until now. Letterpress is used in various styles and on various websites and for various topics; in particular, it is often used in product designs and on websites for online services.”

Photoshop Tutorial: The Letterpress Effect

Easily achieve the trendy LetterPress effect with Photoshop

Ps Letterpress emboss text effect

Create Your Own Letterpress, Inset, Debossed Text

Photoshop CS3+ Letterpress Tutorial

Create a Sleek Pressed Letter Design

Rich User Interfaces

“Happily, user interfaces in modern websites and Web applications are becoming more beautiful and more usable. Over the last year, the user experience for these applications has dramatically improved, resulting in rich and responsive user interface that have tremendous similarities with classic desktop applications. AJAX and Flash are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.”

jQuery Plugin: Tokenizing Autocomplete Text Entry

Ajax Tooltip with JQuery

A fancy Apple.com-style search suggestion

Interactive Map with jQuery

jQuery checkbox and Radio button

PNG transparency

“PNG transparency, although unsupported by Internet Explorer 6, seems to have gained popularity on the scene over the last year. Apparently, designers are trying to better integrate background images into the actual content and are aiming for a style that is often seen in printed media, magazines for instance.”

Transparent Glass Lettering in Photoshop

Add Transparent Type To An Image

Transparent Desktop

How to make a Diamond in photoshop.

How to Use Depth of Field to Create Portraits with Blown-Out Backgrounds

HUGE Typography

“We presented some outstanding examples of BIG typography in previous posts. In 2009, big typography should remain popular. In particular, design agencies, portfolios, product websites and online services will use big typography to communicate the most important messages of their websites.”

Create a Trendy Typographic Poster Design

How to Create High Quality Metal 3D Text in Photoshop

Logo Design Project Step by Step Walkthrough

Creating a Typographic Wallpaper

Typography Wallpaper in Photoshop

Font Replacement

“As designers pay more attention to typography, they also pay more attention to the fonts that are used for the copy in the body of websites. Although classics such as Helvetica, Arial, Georgia and Verdana undoubtedly dominate, we observed a slight trend towards font replacement (for instance, with sIFR).”

How To Use Any Font You Wish With FLIR

Fixing Fancy Font Frustrations

Embedding Fonts

Use a custom font on your website

Use Any Font on Your WordPress Blog with AnyFont WordPress Plugin

Modal Boxes (Lightboxes)

“Modal boxes (dialog windows) are, essentially, the second generation of pop-ups. They serve as a user-friendly alternative to classic JavaScript windows and support users by focusing their attention on the most important area of the website.”

Lightbox Tutorial

Lightbox Gone Wild

Building a Lightbox with jQuery

Create a Photo Admin Site Using PHP and jQuery

Media Blocks

“Users just lean back and enjoy the show; they get everything explained to them step by step, without having to click, search for descriptions or learn the navigation. The movies are usually pretty short and get directly to the point; they are mostly formal but can be entertaining, too.”

Adding Movies to Your Web Page

Playing Videos on a Web Site

Embedding Windows Media and QuickTime Video on a Web Page

Putting Video on Your Web Site: The Basics

How to put video on your web site

The Magazine Look

“An interesting development in the design of blogs is the adaptation of various techniques usually found in traditional (print) media. The arrangement of posts on the page, the use of typography, illustrations and even text alignment often resemble traditional techniques from print. Grid-based designs are gaining popularity as well but are used mostly in portfolios, product pages and big blogs; they almost never appear on corporate websites or in online shops.”

Magazine-style layouts

Creating A Professional Magazine Web Layout

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

Grid-Based Design: Six Creative Column Techniques

Carousels (Slideshows)

“Carousels are essentially slideshow navigations, in which the content rotates vertically or horizontally (hence the name “carousel”). To rotate the navigation, users need to click on one of two toggle elements (usually a left/right or up/down arrow). Depending on the toggle element selected, the content is rotated in the desired direction.”

How to Use noobSlide

Installing a Accessible News Slider

Getting Started with SmoothGallery

Installing jCarousel

Creating a Carousel Slideshow