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
A fancy Apple.com-style search suggestion
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
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
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.”
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
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.”
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.”
Installing a Accessible News Slider
39 Comments
Interesting thoughts on the latest web design trends. I’ve been using Letterpress and Rich User Interfaces on most of my designs lately. Thanks for sharing, Danny.
very interesting,
What’s the websites in the thumb for “Mag Style” & “Slide Show”
I Impress your site latest design trends.
Hi Danny, thanks for including my Letterpress tutorial in your post.
(Laughing Lion Design)
Good stuff! I am always eager to design a site featuring a new trend, however I will only do so if it meets the site’s goal and does not limit accessibility for the intended audience.
This blog is awesome enough, I got more information by going through this blog. Thank you very for valuable posts, it has inspired me a lot.
Cheers,
Vivek
Awesome information re: letterpress. Since the digital world is taking stationery on a joy ride, a letterpress “look” really makes a difference!
GOOD share…im in the midst of rebranding my site..this gives lots of fresh brain juice…cheers and thanks
Nice round up, thanks! I just wish a proper solution to font replacement would hurry up. The current dominant techniques are making baby jesus cry…
Those websites above looks great. I wonder what would be the website looks like in 2012.
Thanks for useful information
*blush* guilty. I am using magazine look. Now when I read this I want to get out of it quickly.
Could we have another article with the future trends for 2010, like Pantone does with colors?
Hi Friends,
I Find Absolutely FREE PlayBoy & Penthous
http://www.girlsupdates.com
If I find something else I’ll inform you.
Best Regards,
Maria
I haven’t come across this website before today and I must say I am glad that I did. Love the awesome design and the great content! A rare combination.
Nice work, I’m really interested how long the Magazine type layout for blogs will stay. Are these still classed as blogs when they leave the traditional post only format?
When does a blog become an online magazine?
I ask because we are re-designing our blog and we would rather not have to do it again in 6 months time.
Hey Danny,
HUGE thanks for including one of my tutorials in the letterpress section.
As always your site ROCKS the house and this post is no different.
once again thanks… keep up the good shiz
Cheers
Che
I would really list the same. Thanks for your interesting articles - in general!
its been really nice of you ppl to run the blog in such a nice way ill pry for your seccess as its helping us
Great!
Amy
Awesome!
What about this link http://www.site2you.com/?
Looks like pretty cool designs …. But how they make websites?
You need to make sure you have very decent and quite user friendly navigation in your website. It should be uncluttered and concise so that visitors can easily understand the navigation around your dental website without any discombobulating feeling. Many web designer companies focusing on designing medical websites are increasingly becoming popular. The richness of the content, facilities and functionalities provided to the patients drives them to pick your clinic. Web designing companies like http://www.medicalwebexperts.com have increasingly become popular in recent years. Many other web designing companies have been thriving in these times of recession. And their designs and marketing strategies have benefited their customers by attracting patients to their clinic.
I’ve just started using PNG transparency but I’ve been into letterpress for a while. It’s funny, I used it on a few sites and it immediately made the design look dated. All it takes are a few brave designers to do it and all of a sudden it’s a trend.
I m impress by your thoughts
ok
Thanks…another 2009 trend that I see quite a bit is the Website Video Spokesperson and Video Banner Headers
[...] creare una tenda animata con jQuery, 6 strumenti per testare il design sui dispositivi mobili, i trend del web design in questo 2009 e come seguirli, una lista di libri sull’user experience e l’usabilità, 10 funzioni di [...]
hi this is really nice
this is a great post! I’m loving this letterpress trend and hope to use it in my new design of thewebblend.com. thanks for the great post!
Some of the ideas here are great, I’m sure I will be able to find some use for them for the future.
Adam [from] http://www.weloveweb.net
Good post , design should be clean and navigtion should be simple i.e unfriendly.
Design trends do not make a good site design. Trends catch on for various reasons, but not necessarily because they are of quality. This is a good list of what you should NOT be doing. There are always better solutions than just doing what is popular.
Always creating graphics in the mold of something that already exists only devalues your design. Be creative and be unique with every design you create. Learn a new technique every day and apply it.
Doesn’t seem like anything new here. Most of these have been around since last year.
Especially with the pick-up of WordPress
[...] 2009 Web Design Trends and How-This Takes the current design trends and also it has many tutorials to current trends of web designing………………..A very Nice Post………….
nice info buddy keep it up ill be visiting again
I haven’t come across this website before today and I must say I am glad that I did.
Thanks u r information
nice work guys!
This collection is great although i am so excited about all the new up and coming trends. Just wondering where web design would be in 10 years time hmmm interesting…..
26 Trackbacks
[...] 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 Read more here: 2009 Web Design Trends and How-To’s [...]
[...] Continued here: Outlaw Design Blog » 2009 Web Design Trends and How-To's [...]
[...] Read the rest here: Outlaw Design Blog » 2009 Web Design Trends and How-To's [...]
[...] original post here: Outlaw Design Blog » 2009 Web Design Trends and How-To's VN:F [1.4.4_707]please wait…Rating: 0.0/10 (0 votes [...]
[...] Read the original: 2009 Web Design Trends and How-To’s [...]
[...] Read the original here: 2009 Web Design Trends and How-To’s [...]
[...] In: Design inspiration 8 Jul 2009 Go to Source [...]
[...] In: Design inspiration 8 Jul 2009 Go to Source [...]
[...] Outlaw Design Blog » 2009 Web Design Trends and How-To’soutlawdesignblog.com [...]
[...] the original here: Outlaw Design Blog » 2009 Web Design Trends and How-To’s Tags: Comments0 Leave a Reply Click here to cancel [...]
[...] 2009 Web Design Trends and How-To’s Submitted by Webmasterish [...]
[...] 2009 Web Design Trends and How-To’s [...]
[...] [...]
[...] Outlaw Design Blog » 2009 Web Design Trends and How-To’s [...]
[...] dejamos una magnífica recopilación de las tendencias más actuales en diseño web, recopiladas por Outlaw Design, en el cual se recogen aspectos como experiencias de usuario ricas, [...]
[...] 2009 Web Design Trends and How-To’s [...]
[...] 月 10th, 2009 2009 Web Design Trends and How-To’s Outlaw Design Blogにあった「 2009 Web Design Trends and How-To’s」です。 Smashing [...]
[...] creare una tenda animata con jQuery, 6 strumenti per testare il design sui dispositivi mobili, i trend del web design in questo 2009 e come seguirli, una lista di libri sull’user experience e l’usabilità, 10 funzioni di [...]
[...] 2009 Web Design Trends And How-To’s (outlawdesignblog.com) [...]
[...] View post: Outlaw Design Blog » 2009 Web Design Trends and How-To's [...]
[...] 2009 Web Design Trends and How-To’s Share and Enjoy: [...]
[...] Webdesign trendek 2009 [...]
[...] 2009 Web Design Trends and How-To’s A superb post which takes the current design trends and adds a list of tutorials within each to show you how to recreate these popular trends. [...]
[...] 2009 Web Design Trends and How-To’s [...]
[...] 2009 Web Design Trends and How-To’s [...]
[...] Media Box, Magazine Look……. Das Ganze wird mit dazugehörigen Tutorials auf outlawdesignblog [...]