Webdesign-Tricks.Com » Showcase

Design Trends (Predictions) in 2010

admin — Mon, 25 Jan 2010 17:50:46 +0000

As we are stepping in a new decade, I can foresee that web design in 2010 is going to be fun and filled with experimental works. With the new CSS3 and HTML5, designers and developers are trying to utilize the new features to create impressive designs. Sketchy and large background styles are fading out. Serif fonts and texturized background will be popular. Thanks to CSS3, we are going to see a lot of rounded corners, RGBA transparency, and drop shadows. With the rise of smart phones, mobile web design is going to pick up this year.

Serif Fonts

In the last decade, most web sites were designed in either Verdana or Arial (sans-serif fonts), but that is going to change in this new decade. Serif fonts will get more attention.

Big Headings

Big headings in header (as part of design interface) will gain more popularity in 2010.

Custom Font Embedding

As Typekit is expanding their font list and more free quality fonts are available (e.g. FontSquirrel, OpenType, and The League of MoveableType), I think more people will use custom font embedding in the coming year.

Texturized Background

The big background trend is going to be gradually out-of-date and be replaced with subtle and texturized (particularly the light noise) background.

Minimalist & Grid

Minimalist and grid designs are not today’s new. They have been popular for the past couple years and I think it will continue to grow in 2010. Check out my previous post for more minimalist sites.

CSS3 New Features

Although CSS3 is not fully supported by all browsers yet, but a lot of designers are experimenting with the new features such as: rounded corners, multi background images, multi-column, border images, and animation. The following sites show good implementation of CSS3’s new features with fallbacks. So, we will see more and more CSS experimental works.

CSS3 Animation

Neutron Creations’s blog uses webkit-transform to spin the circle graphics (view it with Mac Chrome or Safari). If your browser doesn’t support webkit-transform, it will just show the static circles.

Rounded Borders and Box Shadows

Border-radius and box-shadow are the most commonly used CSS3 properties.

Text Shadow

A lot of designers are using text shadow to add more depth to text.

RBGA & Opacity

RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect.

Mobile Design

Since the release of iPhonein 2007, everybody is talking about mobile design. Now with more smart phones that support full CSS and Javascript, mobile design is definitely going to be the future of web design. A lot of sites(ranging from design agencies to editorial sites to web apps) are offering a mobile version. Below are some great examples (screenshots are captured with iPhone).

Top 10 Tweets of the Week [ Jan 10-Jan 16 ]

admin — Sat, 23 Jan 2010 01:57:15 +0000

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

10 Keys to Growth as a Designer: http://bit.ly/85TvVc

How to create funny swirls in Illustrator: http://bit.ly/6RQ6Rf

Printers from hell? http://bit.ly/5gSM2y

To Serif or Sans-Serif, That is The Question: http://bit.ly/7laIpZ

Stunning Bokeh Textures: http://bit.ly/4Q9efG

12 Killer Tips for Designing in the Browser: http://bit.ly/55RE9g

The Case Against Vertical Navigation: http://bit.ly/5F8clt

Let Your Audience Guide Your Design! http://bit.ly/5v3q3y

The six fundamental ways of adding depth to your designs: http://bit.ly/5AsYjA

What happens when you mix living room furniture and the male form? http://bit.ly/8rrDsO

Woven Fabric Social Media Icon Set

admin — Thu, 21 Jan 2010 13:09:07 +0000

We absolutely love icons and today we have another exclusive great set available for you.

This woven fabric set of social media icons was created by Jan Cavan from Dawghouse.

Although not suitable for every type of site, these icons will look wonderful on websites that use texture and have an organic approach to their design.

There are a total of 26 icons available as transparent PNGs and they are completely free for personal and commercial use, however, if you’d like to share them with your friends, please refer them to this page so that they can download them from here.

The download link and a full preview is available after the jump… Enjoy…

10 Amazing High Quality Themes Free

admin — Sun, 10 Jan 2010 17:17:47 +0000

High quality free Wordpress Themes have become harder and harder to find in the past year, with the influx of premium themes, more and more designers and developers are selling themes (and rightly so, they do amazing work). However, the quality of freely available themes has improved as well; in fact, some themes are very advanced and professional and can serve as a solid foundation for your next designs.

There are a lot of choices out there for someone wanting to choose a Wordpress theme for their blog. But, that aside, the quality is certainly there, and we are sure you will be impressed with this Wordpress theme compilation.

AppCloud Theme

A nice e-commerce WordPress theme with a clean and professional look. Built upon 960.gs, with an integrated slideshow, two layouts (horizontal and vertical) for app/gadget images. The theme also includes sections “Featured products” and “Top Selling” and a categorized products view.

Berita (via ThemeCloset)

Berita is a minimalist corporate theme created for companies to prominently display their logo, but the theme could be used for any type of website. It’s a feature-rich theme with a preview slider on the front page and a robust theme administration page.

Magazeen

Magazeen is a two-column theme released specifically for Smashing Magazine readers. The theme has some subtle enhancements that encourage looking at related and new posts, like a related posts drop-down effect for the category link.

Mainstream Theme (via Wootheme)

You have the option of choosing from five different theme colors with Mainstream. Thumbnails are automatically resided and the sidebar is widgetized.

Obscure WordPress Theme

A dark magazine WordPress theme suitable for any site niche; also a good fit for a community-based site.

Paper Wall

Smashing Magazine released the illustrated theme Paper Wall last month. The inspiration behind the Paper Wall theme was a designer’s desk, as designers typically put things on paper. It’s a two-column theme with many elements of paper: paper boards, peeling paper and paper “menus”.

Gallery WordPress Theme

a beautiful, free, gallery-style Thematic child theme for WordPress, designed by Christopher Wallace especially for Smashing Magazine and its readers. It is extremely flexible and can be used as a starting point for design galleries and portfolios.

Cool Retro

A nice, clean illustrated WordPress theme with a retro-look and nice typography.

Monkeypr Theme (via Queness)

Monkeypr is a nicely designed and fun WordPress theme.

Folio Elements Theme(via Press 75)

With its black background, Folio Elements theme will surely make your images and photographs noticed. There is no sidebar, no widgets, no list of categories, no place to comment and nowhere to search. However, if you are looking for a basic carousel-type theme with absolutely no basics, bells or whistles, then Folio Elements might be the one for you.

Web Design Trend Showcase: Letterpress Text Effect

admin — Tue, 22 Dec 2009 15:56:30 +0000

The trend that has become commonly known as ‘the letterpress effect’ has managed to make its way into a range of website designs. The effect itself is often added to text headers and buttons, giving an inset or debossed appearance. Take a look at this roundup of great examples of this trend, and follow on to a mini tutorial outlining how to create this effect in your own designs.

Deaxon.com

SarahLongnecker.com

365DaysOfAstronomy.com

AlexBuga.com

LennartBasler.com

LeeMunroe.com

BohemianCoding.com

MJarosz.com

Tutorial9.net

BrightKite.com