Rotating Image/Static Featured Image

We’ll start out with perhaps the most popular forms of portfolio design. This is the jQuery rotating image. The great thing about this kind of portfolio is that you can show a lot of work, with minimal space, saving room for other information.

Also falling into this group is the static featured image. While similar to the rotating image, it may not be quite as effective as the rotating image because of the lack of animation and interaction. On the plus side, a static featured image could also be used as a teaser to get people to look at the rest of your work.

antonpeck.com

bressane.com

intuitivedesigns.net

jayhollywood.com.au

jilion.com

neutroncreations.com

oysterdesign.co.uk

projectkoreck.com

rocknsites.com

Tagline/Bio

With this kind of portfolio, the viewer goes to the website and sees exactly what the website is about or who the designer is. If what you are offering or your tagline peaks their interest, they will look around your website. It usually helps and makes it more effective if the tagline is paired with another one of these styles of portfolio website, unless the typography can stand on its own as a visual element.

alt-design.net

bythepond.co.uk

chanellehenry.com

wedesignwise.com

joshhemsley.com

justincline.com

liftux.com

markjmaloney.com

moxiesozo.comindex.php

phynk.net

radiiate.com

rareview.com

studio7designs.com

tonychester.com

visualgroove.net

Text/Feature Image

What makes this kind of portfolio website effective is that the viewer gets a little information about the website, as well as a sampling of what the portfolio has to offer.

ba21.us

harryjh.com

nosleepforsheep.com

sawyerhollenshead.com

slovaczech.com

thingsthatarebrown.com

Portfolio Grid

This type of website gets to the point like the tagline/bio and text/image, except the viewer gets bombarded (in a good way) with the designer’s work. This keeps the interest of the viewer, because they don’t have to look around the actual portfolio pieces.

design-dps.com

jannek.fi

jonahl.com

onvo.co.uk

phantomcandy.com

phunkn.com

thehousemedia.com

Non-Portfolio Image Large Header

This website basically shows the viewer what the designer can do without actually showing specific examples. A stand-out photo manipulation/illustration/photo catches the eye and gets the point across.

arsum.com

bogdanteodorescu.com

loscoloresolvidados.com

ronniewright.co.uk

subhaus.org

weightshift.com

Blog Style

This is a great way to provide viewers a more personal feel, which gives the website a lot more personality. It also gives the website a more current feel (if it is updated regularly), giving the viewer a reason to come back.

billytamplin.com

dougneiner.com

demainjarrete.stpo.fr

ismaelburciaga.com

Other

These websites don’t have the traditional layout that we saw above. Lets look at these one at a time to see why they are so different.

badabingdesign.nl

The portfolio part of this website has a slide show much like rotated image designs, but this one is flipped so they scroll vertically, with the project description to the left. This website gives a new look to a common layout.

constantinpotorac.com

Although the two-column layout isn’t uncommon, it’s not usually used like this in portfolio designs. A bio on the left and portfolio on the right takes a combination of the grid and tagline/bio portfolio, and gives it a new twist.

duplos.org

I almost put this website in the tagline/bio category, however, since the tagline looks like a part of the illustration, and doesn’t really say too much, I decided to put it here instead. There isn’t really much on the home part of the website, so you have to explore to learn more.

gomedia.us

This website, too, almost went into the tagline/bio section, but I felt that the portfolio image on the right had just as much importance. The idea of putting information in columns rather than rows gives equal importance to each section, rather than having a common website where there is a row-based hierarchy of the most important to the least.

Want to dive in and check out the developer preview? That’s available too, starting today!

Take IE9 for a Test Drive.

Finally, we announced the availability of the first IE Platform Preview for developers, and our commitment to update it approximately every eight weeks. We want the developer community to have an earlier hands-on experience with the progress we’re making on the IE platform. The Platform Preview, and the feedback loop it is part of, marks a major change from previous IE releases.
IE Blog

Demos

Check out some of the demos below in each browser to learn the unique code required for each.

• Border-Radius
• Pulsating Bubbles
• SVG: Falling Balls
• CSS3 Selectors

New JavaScript Engine: Chakra

“You’ll notice that IE9 is faster at this benchmark than IE8 and several other browsers. It’s interesting to note that the difference between today’s IE9 preview and the browsers to its right in this graph. It takes about 70 seconds to identify a 300ms difference between browsers.”
IE Blog

Miscellaneous Tweets about IE9 from MIX 2010

“Video tag and SVG support in IE 9 as well – and it’s crazy fast. Very impressed.”
John Resig

“Microsoft to Expand its Collaboration with the jQuery Community”: http://bit.ly/cxybri
@jQuery

“Today makes me very happy to have come to work at Microsoft. Very excited right now to see the reactions of the community.”
Rey Bango

“They’re asking for help in getting ppl to move IE6 to IE8. They want users on modern browsers.”
Rey Bango

“Open source, open standards, open Microsoft. Today I woke up to a different world than I thought I was living in.”
Molly E. Holzschlag

“So what we have here is HTML5, CSS3, SVG 1.1 in IE9. If I weren’t seeing it with my own eyes, I wouldn’t freakin’ believe it.”
Molly E. Holzschlag

Check back for more details as they become available!

1. Choose your Username and Password

You’ll encounter new features as soon as you start! Currently, when you first install WordPress, you are assigned a default username of admin, and a randomly generated password. No more – now WordPress lets you choose a username and password when installing.

What does this mean for us?

This means that security within WordPress has been enhanced. Previously, a hacker could probably depend on the fact that there was a username called ‘admin’. This will no longer be the case in version three. Read any tutorial on securing WordPress – you will always be told to remove the admin username. You no longer need to!

2. New Default Theme!

WordPress 3.0 comes with a new default theme, called TwentyTen (2010, like the current year – go figure). Apparently, the WP team has an aim to release a new default theme every year! TwentyTen is a nice theme. The main typeface used is Georgia; it has two columns, with a widgetized sidebar and footer – and it even has some nice dropdown menus built in! Needless to say, custom header and background (new feature) functions are also available.

What does this mean for us?

We start off with a nice new theme, and bloggers have more options to try out before they start looking for themes. More options are always helpful, right?

3. Custom Background Support

WordPress 3.0 adds custom background support. Add the code below to your functions.php to make your theme support it:

add_custom_background();

Once that’s done, you’ll see an option called Background added under Appearance in the WordPress admin. This will allows you to upload a header image and customize it.

What does this mean for us?

This doesn’t really mean much to advanced theme developers, since they often provide an option like this themselves. Nevertheless, I have no doubt that the WordPress community will come up with some creative uses for this.

4. Multi-site Capabilities and WPMU Codebase Merge

WordPress and WPMU (WordPress MultiUser) are merging their codebases. This makes it much easier to handle large WordPress networks. See the Multi-Site settings under Settings>Network.

What does this mean for us?

A lot! A network of WordPress sites is much easier to maintain – either with a subdomain.domain.com structure, or a domain.com/subdirectory structure. This network capability is optional, and WordPress and WPMU users shouldn’t face any difficulties while upgrading. Also, this makes it easier for WPMU users to utilize plugins – no more plugins that go bust or stop working.

5. Custom Post Types

A great new feature! Before, all you could add from the WordPress admin section was new posts and pages. Now, you can create new post types to show up. Add the following code to create a new post type called ‘Portfolio’:

function post_type_portfolio() {
	register_post_type( 'Portfolio',
                array( 'label' => __('Portfolio'), 'public' => true, 'show_ui' => true ) );
	register_taxonomy_for_object_type('post_tag', 'Portfolio');
}

add_action('init', 'post_type_portfolio');

What does this mean for us?

Quite simply, it means WordPress has become much more of a CMS. This holds unlimited possibilities for theme developers, and reduces the need to fiddle around with custom fields.

6. Custom Taxonomies

Custom taxonomies have been made easier to use, as well as hierarchical – which means you could have a taxonomy called ‘Rating’, with sub-taxonomies like PG-13, R , U etc.

What does this mean for us?

It means that WordPress is moving more and more from a blog-type CMS, with effort required for better capabilities, to a much more flexible and usable Content Management System.

7. Easy Menu Management

This is my favorite new feature in WordPress 3.0 – a menu manager. It’s developed by WooThemes’ WooNav, and I absolutely love it. You can create multiple menus, categories, and even custom external or internal links! The menu feature even comes with a default widget to add to any widget ready area – awesome, isn’t it?

What does this mean for us?

On the surface, this provides us a great UI (user interface) for adding new menus, it simplifies the job of WordPress theme developers and makes things as simple as possible for users. Benearth the surface, there is a lot more – this marks a point where commercial WordPress theme developers join hands with WordPress and contribute to it. A win-win situation for both, and an incentive to continue working.

8. A Bunch of Other Smaller Features

• Welcome guide: WordPress 3.0 will be including a guide with it which helps users to know the system better and teach them basic usage.
• Specific author templates: We already have hierarchy for categories and tags like category-{slug}.php followed by category-{id}.php in the Template Hierarchy, but now you can do the same for authors. So, if the author name was ‘Rohan’ with id 1, WordPress would first look for author-rohan.php, then author-1.php before author.php in the template files for display.
• Media UI redeign: Started, but not implemented in WordPress 2.9, the Media tab in the admin panel may get a UI redesign

Conclusion

The screenshots and features that I’ve written about here are taken from the most recent nightly build. You may want to try it out yourself, though keep in mind that it’s still unstable. Nevertheless, WordPress is evolving at a rate no one could have predicted, and is fully morphing into a powerful and flexible CMS.

The winners are Khaled, Kay and Achikochi.

Today we’ve got three copies of the new eBook from Rockable and FreelanceSwitch, How to Write Great Copy for the Web, to give away. Entering takes seconds, just leave a comment below and three lucky people will be selected.

Win How to Write Great Copy for the Web

• About the Book

  How to Write Great Copy for the Web is the latest book from Rockable Press. You may not know this, but Rockable is Envato’s book publishing house! This book takes a concise and practical approach to writing fantastic copy for any website.

  Ever been asked to write the copy for a website you’re working and had to say no because you aren’t a copywriter? Or maybe you did it for your client and weren’t happy with the final product? How to Write Great Copy for the Web will teach you how to add web copy writing to your skill set, maximizing your billable hours.

  This book will also help you write great copy for your portfolio or blog, to impress potential clients.

From the blurb: “In How to Write Great Copy for the Web, author Donna Spencer will help you start writing content for the web that works! Learn about how writing web copy differs from other forms of writing, and how writing useful, functional and concise copy can both help persuade your readers, and also help with search engine optimization!

Whether it’s for your own site, or for somebody else, How to Write Great Copy for the Web will quickly bring you up to speed with some clever strategies that will make you popular with your site’s visitors, or with your clients!”

How to Enter

For your chance to win one of the three books all you need to do is leave a comment below. Be sure to include your correct email address so that we can get in touch. The competition is open to anyone but you need to have entered by 12am March 18th AEST.

Want a Free Book? Join the Rockin’ List

Afraid you might not win? Sign up to the Rockin’ List to get the discount code for $5 off this great book and stay up to date with the latest Rockable news. You also get a free copy of Rockstar Personal Branding when you subscribe!

But there are some gems out there, and we’ve collected some of the best. If you know of any other fantastic book-related websites, whether they’re for authors, individual books, publishing companies, or blogs, let us know in the comments.

Authors & Individual Book Sites

Author websites are some of the more challenging sites to design. If an author has a large backlist, it can be difficult to figure out how to showcase all of their work effectively. And if the author has only published one or two books, it can be hard to have an effective site that doesn’t feel empty.

And in reality, there are a lot of things an author’s site needs to accomplish. It needs to provide readers and potential readers with information about the books and why they might be interested in reading them. It needs to give booksellers information about the books, and why they should stock them. And it needs to act as a constant promotional tool that will help the author sell more books and gain more fans.

Dear Author has a great post on what many author websites are lacking. The list includes things like a printable book list, a link on the home page to contact the author, and a highly visible “coming soon” section. Check out the full list for more points to keep in mind if you’re designing an author’s website.

Here are a few great author and book websites you should be sure to check out for inspiration and ideas.

No One Belongs Here More Than You

This is one of the most creative books websites I’ve ever seen. While it’s not the most user-friendly of sites, it suits its purpose and does well to hold reader interest.

Justine Larbalestier

An excellent, clean-looking design that still has plenty of character. Her books are prominently displayed on the home page, along with links to her blog, about information, and other important parts. She also includes information about events, interviews, and specific book info on the home page, a big plus for readers and book sellers.

Stephen King

Stephen King’s presents its own challenges to a designer, mainly the sheer volume of information it needs to contain. King has written well over sixty books, has had a number of his books adapted for the screen, and has written numerous short stories. But his site manages to include all the pertinent information a visitor might be looking for while also showcasing his best and most recent works, all while maintaining a very streamlined and professional design.

Cherry Adair

Cherry Adair’s website fits well with the types of books she writes. The only downside to the site is that it’s entirely Flash-based, though the interface itself is slick and very responsive. She includes all of the information one would expect on an author site, including a printable, PDF booklist.

Jim Collins

Jim Collins’ site takes a much more minimalist design approach than many of the others on this list. The color scheme is limited and sophisticated, there’s plenty of white space, and only necessary content is included.

Jean Chatzky

Jean Chatzky’s website is well-suited to the types of books she writes and the brand she’s built for herself (you may recognize her from her regular appearances on the Today Show). It’s professional but unintimidating and has a friendly feel to it. It also provides all the necessary information you’d expect and is easy to navigate.

Hank Phillippi Ryan

Hank Phillippi Ryan’s website is bright and colorful, which matches the covers and style of her books. The layout is reminiscent of a grid layout and makes good use of negative space.

Caroline Tiger

Caroline Tiger’s site has some of the best use of color of any author site I’ve seen. Navigation is simple and straightforward, the emphasis is placed squarely on her books, and the overall impression is professional but relaxed.

Nicholas Sparks

Nicholas Sparks’ website makes great use of large background images and transparency. It’s easy to find the information you might be looking for, with prominent links to his books and movies, as well as appearances and biography information.

Publishers

Publisher websites have to be many things to many people; not always an easy task to do well. They have to showcase their books to potential readers. They have to appeal to booksellers and convince them to stock more of their books. They have to give information to prospective authors, either in the form of submission guidelines or guidelines that tell them they don’t accept unagented submissions. They have to provide information to the media and book reviewers. And sometimes, in the case of the larger publishing conglomerates, they also have to present a united front across multipe imprints.

The best publisher sites showcase recent books as well as best sellers. They make it easy for readers and booksellers to make decisions regarding book purchases. And they provide all the necessary information about the company, the books, and the authors for anyone looking.

Here are some of the best book publisher websites out there. They run the gamut from small publishers with only a handful of books to large publishing houses that publish hundreds of titles each year. What they all have in common is good information architecture, a clean style, and excellent user experience.

Dragon International Independent Arts

The DIIArts site packs a lot of information into a small space while maintaining an uncluttered and clean-looking layout. Their main nav includes nine tabs while still leaving some breathing room. The use of icons throughout the site helps to unify everything, as does the light color scheme.

Arcadia Publishing

Arcadia Publishing’s site fits its business perfectly. It has a vintage feel to it, which fits them since they’re publishers of historical nonfiction. The site is easy to navigate and effectively showcases important information (like the fact that they offer free shipping).

Melville House Publishing

The Melville House Publishing website has a simple blue and white theme throughout. It has a minimalist, grid-based layout nad a lot of white space. Information is easy to find and their books are displayed prominently.

Princeton Architectural Press

Princeton Architectural Press’s website is great because it’s design is a bit unexpected. The bright yellow background and grid-based layout are visually striking, which is entirely appropriate for a publishign company that focuses so heavily on design, but also a bit unexpected for a site in such a conservative industry.

Penguin Group USA

Among all of the big-name publishers out there, Penguin has one of the most attractive websites. Their layout is well-ordered, the color palette is refined, and they place emphasis where appropriate. There’s a ton of information on the site, and yet it feels uncluttered.

Timber Press

The Timber Press website makes great use of color and has a fantastic layout. The design is eye-catching and easy to navigate, with a well-implemented slideshow showcasing some of their books on the home page.

Llewellyn

Llewellyn’s website uses a muted color palette and three column layout that creates a sophisticated and professional feel to their site. They make it easy to browse their books, as well as to find other information about the company and their authors.

Storey Publishing

Storey Publishing is another company that opted for a muted color palette and simple layout. The green accents on the site fit well with the country-living and outdoor-themed books they publish, as do the graphics throughout the site.

Gibbs Smith

Gibbs Smith makes great use of Flash to showcase books on their home page, but otherwise keeps their layout fairly simple. They emphasize their best-sellers but make it easy to browse their entire catalog or find information about their authors. The red, burgundy and gray color scheme is sophisticated and feels very neutral.

Other Sites

Publisher and author websites aren’t the only sites out there that target book lovers. There are communities for readers (and writers), blogs and book review sites, and service sites for readers and writers alike.

The sites below target many different demographics, but each focuses on great user experience and simple architecture. Each has its own distinct style that adds to the user’s overall impression of the site and the company or people behind it. And each one has a clear purpose and mission that they accomplish well.

IndieBound

IndieBound is a community for independent bookstores and their customers. Their site is well-laid-out, has a great color scheme, and a unique design. They have a lot of information on the site, but it remains easy to navigate and find the information you need. They even manage to make the wide variety of graphics used on the site appear cohesive.

The Fiction Project

The Fiction Project at Art House Co-Op has a really awesome site design. The overall look represents the artistic sensibility of the project, but all information about the project is easily found and legible.

Lulu

Self-publishing company Lulu has a well-designed website that focuses on user experience. They keep graphics simple and use them specifically to highlight their services. The color scheme is consistent (white, blue and orange), and there’s plenty of negative space in the design. What sets Lulu’s site apart from many other self-publishing sites is that they’ve made it just as easy for book buyers to use the site as they have for authors.

Readerville

Readerville uses a simple two-column design with brownish-orange, burgundy, and muted blue accent colors. Readability is given the utmost importance in this design, with usability a very close second. While the site is no longer updated, it is still a great example of a book-related site design.

DailyLit

DailyLit, a service that delivers daily reading to your email inbox, has a fantastic website that uses a muted, cool color palette and grid-based layout. The site is easily navigated and showcases their services and the books available.

Blurb

Blurb is another self-publishing service that puts more emphasis on style than many other self-publishing sites. They offer good user experience for both authors and book buyers, and showcase “staff picks” on the home page (something many self-publishing companies don’t bother with).

The Millions

The Millions is a book review and culture site that uses a grid layout and mostly-black and white color scheme with bright orange accents. The layout of the site is fantastic, and the entire thing feels very modern and refreshing.

Guys Read

Guys Read is a literacy site for boys that places a heavy emphasis on typography. The site uses a red-white-and-blue color scheme and plenty of white space. It uses a mostly two-column layout and has a very masculine feel to it without feeling stuffy or staid.

1 The Plus Project

As you may know we have some pretty big plans for these Tuts+ sites. While today they are humble little tutorial blogs, we’ve thought for some time that it would be cool to build an entire platform for education. We’re going to call that platform Plus. You’ll know Plus content as our premium content, but no longer.
Our premium content is now ‘Premium’ (go figure!) and Plus is the brand for the educational platform we’re building, which, just like Psdtuts+, will be completely free for the most part.

With Tuts+ well established now, we’ve finally begun work on the project! We’ve acquired the domain Plus.org which will be the home of the new platform (yay for our first four letter domain!) We’ve also brought over our resident code genius Ryan Allen (who built our ActiveDen platform all by himself back in 2006) to team up with Tuts+ developer extraordinaire Fred Wu and kick ass front-end guru Derek Herman. And Skellie and I have been busy spec’ing out the plans for the new site, and it’s pretty, damn cool if I do say so myself!

Right now the Tuts+ sites are fairly passive, but we’d like to get the whole community involved in writing, teaching, answering questions and generally learning. The new Plus.org platform promises to incorporate all that plus some nifty ideas we’ve taken from gaming to come together into a social education platform.

It’s going to take a long time and we’re going to roll it all out in pieces over the next 2 years. We’re super excited about it all, and I hope I’ll have more updates in the coming months!

2 Creative Sessions and Mobiletuts+

While Plus.org will take a long time, we do have some new goodies coming much sooner including Creative Sessions which is being built now, and also Mobiletuts+ which will be all about mobile development!

3 Server Update

About a week and a half ago we had some major problems with our servers. I’m happy to say that we’ve now completely resolved these issues by moving hosts and reengineering our hosting setup completely from scratch. The new setup is much quicker and has a much greater capacity for growth, so fingers crossed, that will be the last server outage for a long time to come!

4 The Redesign

The new theme has a few neat features you may want to check out including:

• Basix!
  While Tuts+ has always been known for intermediate to advanced level content, we’ve been thinking it’d be good to separate out tutorials and articles better suited to people just getting started. So we’ve created the Basix tag for quick browsing. You’ll find it in the top menu, and expect to see more Basix content soon as we beef up our library of novice-friendly content.
• Easy access to Videos, Tips and Premium Posts
  We’ve also started tagging videos, tips and Premium membership posts so that along with Basix content you can quickly find what you’re after. We’re generally going to be working to clean up our category/tagging across the network in the coming months to get it more standardized.
• Tutorial Details on Posts
  We’re also going to start standardizing all tutorials to have a "Tutorial Details" section at the top with difficulty and other pertinent details. Eventually we’ll get all the archives updated … but with over 2000 tutorials, that will take a while!
• Bigger, more readable content area
  We’ve expanded the site to be optimized for bigger 1280px wide screens, with a bit of JavaScript to resize for smaller resolutions. This has given us the space to clean up the content area to be a bit bigger and more readable generally.
• Latest Creattica content for inspiration
  We’ve also started porting over the latest Creattica content into our sidebars. There’s actually a redesign of Creattica coming in the next few weeks and we’ll be expanding the gallery to cover even more types of inspiration. The new sidebar widget will give even more exposure to those talented creatives on Creattica!
• General UI Improvements
  Most of the improvements on the new design are small, subtle improvements such as a reduction in the number of clicks needed to browse categories, a clearer search field, faster loading pages and generally cleaner, more optimized code.

One change that we have also made is to remove the community link feed. Over the years this was a great way to get exposure to community links, but unfortunately was also home to a lot of spam. So with this iteration we’ve left it behind.

Also at the moment sites with Flickr groups don’t have it showing, but don’t worry that’ll be back. There’s just a problem with our Flickr plugin at the moment!!

There are still some more tweaks to do to the new design and a lot of post formatting to do to get our archives matching up with the new theme. But for all intents and purposes the new theme is now alive and well! Enjoy!

Viget Inspire

Viget Inspire is one of the most recognized pieces of watercolor-style web design to date; there aren’t many web designers who haven’t seen it! The style is absolutely stunning, and the combination of the watercolored background and digital foreground and typography mixes incredibly well together.

Deborah Cavenaugh

Web Designer Wall

Web Designer Wall is yet another fantastic web design that is well known for its use of watercolor effects. The stunning watercolored patterns and the whole hand-made feel of the site makes it visually appealing, especially for their target audience: the creative industry.

Toby Powell

Boompa Shop

Boompa Shop have merged modern web design, such as the minimalistic footer, with some great watercolored “doodles” to create a beautiful and very unique effect for the web-based shop design.

Agami Creative

Corvus Design Studio

Corvus Design Studio have used a similar layout style to those typically used in portfolio designs, however instead of keeping it simple and plain to draw attention to their work, they’ve made the portfolio itself a piece of art, which is probably more than enough to persuade any customer to choose them for their latest project.

The Black Keys

Erguvan Platin Evleri

Erguvan Platin Evleri is one of the first to combine two popular trends in the web design industry: abstract watercolor effects and three-dimensional models. In this case the styles work very well together and are pleasing to look at; let’s hope we see more like this!

Davide Savelli

Colour of Air

Colour of Air is the first website in this showcase that uses very subtle watercolor in their design. To bring the content area below the header to life, they have used a low-opacity watercolor texture beneath the header and under the different article areas. The use of rendered noise in the design combined with subtle watercolor works great.

Sergio Design Trends

Sunrise Design

You don’t see vivid watercolor effects very often, mainly because it is quite difficult to pull off. Sunrise Design, however, pull off the effect very well, using bright greens and yellows in the background of their site design to create a happy and joyful feel.

Big Cartel

Volkswagen Escape

There are some huge and very well known companies making the most of the watercolor trend, too, such as the ever-popular Volkswagen car brand. They use a subtle, washed-out watercolor landscape in the background of their web design.

The Croquis

Saint Charles Maryland

Saint Charles Maryland, like several others in this showcase, used a light watercolor wash in the background of their design. This time, however, it is being used in the main content section of the design instead of the main background image. It’s an interesting concept that is pulled off well and goes with their corporate image.

Deep Roots and Wide Wings

Toggle

Toggle is another company that is well known in the creative industry for its fantastic use of watercolor in their website design. Unlike others, the watercolor effect seems to be randomly placed in the center of the background, rather than being used to produce a full background pattern or image (such as a landscape) in most of the other designs. It adds a great “oomph” to the site and brings out the lovely blue color scheme that has been used in the design.

Small White Bear

Brad Candullo

Brad Candullo uses watercolor in his portfolio design to add a little extra something to the background of his header, mainly to help draw attention to his website’s logo. The use of watercolor being used with so many other textures such as subtle grunge and wood is pulled off well and looks great!

Five Points Interactive

4PSD

4PSD is one of the most minimalistic designs in this showcase, simply making use of a light watercolor wash to separate the header area from the rest of the design. The colors go well with the site’s overall color scheme, and the use of whitespace only makes the watercolor effect look better!

K4 Laboratory

Binocle

Binocle is another site that uses a vivid watercolor effect in their design, this time using a very hot pink/red that slowly merges off to a deep pink/purple and magically transforms into a million birds. The effect is great and it really helps bring out the true power of the pink color used in the rest of the design.

Happy Cog

Imaginary Moments

The use of watercolor in this website design is superb! It’s very unique compared to the rest of the designs in this showcase, and is one of my personal favorites. I love how it has been merged with various other images and textures, and just the overall feel of the site.

Lebloe

Weberica

Weberica is possibly the grungiest watercolor styled web design in the showcase. It’s dark, olive green colors bring out the lovely gradient effect used in the logo, and those pink flowers help to bring out the small amount of red typography that is used in the rest of the design.

Football Made In Africa

Tylor J. Reimer

Tylor J. Reimer’s portfolio design is so simple yet so beautiful. The bright splashed watercolor effect combined with the hand-sketched dog is wonderful, and the low opacity neutral content background help to separate the illustration from the website’s content.

Helpful Resources

• Create a Watercolor-Themed Website Design with Photoshop
  Use the Art History Brush Tool and custom brushes to create a trendy watercolor web design.
• Create a Nature Inspired Painted Background in Photoshop
  Learn several great tips and techniques whilst producing your very own web design inspired by Viget Inspire.
• Design a Watercolored Design Studio Blog Layout
  Learn how to create a clean and simple watercolor-based blog design in Photoshop.
• Design a Watercolor Effect Menu
  Using simple techniques, learn how to create a stunning watercolored web design navigation menu.
• Watercolor Roundup: 200+ Beautiful Brushes and Textures
  A huge collection of watercolor brushes and textures; everything you need to start creating your own watercolor designs.
• 500+ Watercolor Brushes for Photoshop
  Yet another huge collection of watercolor brushes that you can use in your own designs.

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

For those unfamiliar, Envato recently launched its newest marketplace, focused specifically on selling high-quality scripts and components for PHP, JavaScript, ASP.NET, and Java. As we’ve only recently launched, we’re hoping to build up our repository with a plethora of fantastic scripts and components, across all of the categories.

How Do I Enter?

Quite simply! To enter, prepare an item (PHP, JS, ASP.NET, or Java) of your choice for CodeCanyon, and once it has been submitted and accepted on the site, leave a comment here with a link to your item. That way, we can track it! That’s all! Then, on March 1st, 2010 (CST), my review staff and I will filter through all of the submissions and choose the best three of the bunch!

Grand Prize Winner

1. 1 Dedicated Virtual Box (Rage) from Media Temple ($1200 value)
2. 1 32 gigabyte iPod Touch ($299 value) (Ultimate TechSmith Package)
3. 1 copy of Camtasia Studio for Mac or PC ($299 value) (Ultimate TechSmith Package)
4. 1 copy of Camtasia Studio 6: The Definitive Guide ($39.95 value) (Ultimate TechSmith Package)
5. 1 Logitech QuickCam Communicate Deluxe PC Webcam ($99 value) (Ultimate TechSmith Package)
6. 1 Audio Technica USB Studio Condenser Microphone ($149 value) (Ultimate TechSmith Package)
7. $100 Envato credit (Can be used across all of the marketplaces)
8. $200 cash
9. 1 MediaTemple Gift Card – 1 year of hosting, 1 domain name, Up to 5 websites. ($95 value)
10. $25 Amazon Gift Card
11. 1 year Tuts Plus membership – ($78 value)
12. 1 Wufoo Subscription – 1 year ($288 value)
13. 1 Formspring Pro Subscription – 1 year ($348 value)
14. 1 Surreal CMS Subscription – 1 year ($275 value)
15. 1 Personal TypeKit subscription – 1 year ($300 value)
16. 1 Myows Paid Account – FREE for life
17. 1 Rockable Press Book of your Choice ($29 value)
18. 1 copy of Snippet (mac app) ($13 value)
19. 1 copy of jQuery UI 1.7 from Packt Publishing ($40.49 value)
20. 1 copy of Magento Beginner’s Guide from Packt Publishing ($35.99 value)
21. 1 copy of Object-Oriented JavaScript from Packt Publishing ($35.99 value)
22. 1 copy of jQuery Cookbook from O’Reilly Publishing ($34.99 value)
23. 1 Threadsy Invite
24. You will be featured on the front page of CodeCanyon as both the featured author and the featured item of the week!
25. Your item will be included in a collection of the three winning submissions, and will be promoted on the front page of CodeCanyon
26. As an Envato marketplace author, you’ll earn 40-70% of every sale!

2 Runners-Up

1. 1 year Tuts Plus membership – ($78 value)
2. $50 Envato credit
3. 1 Personal TypeKit subscription – 1 year ($300 value)
4. 1 Surreal CMS Subscription – 1 year ($275 value)
5. 1 Wufoo Subscription – 1 year ($288 value)
6. 1 Myows Paid Account – FREE for life
7. 1 Rockable Press Book of your Choice ($29 value)
8. 1 copy of Snippet (mac app) ($13 value)
9. 1 Threadsy Invite
10. Your item will be included in a collection of the three winning submissions, and will be promoted on the front page of CodeCanyon
11. As an Envato marketplace author, you’ll earn 40-70% of every sale!

What Kind of Item Should I Submit?

We’ll that’s entirely up to you! That’s where you get to be creative. With that said, you’ll want to think of an item that will appeal to a wide variety of buyers. Ask yourself, “what sort of script or component – that’s not widely available around the web for free – have I often found myself in need of? Remember that, at this time, we’re only accepting PHP, JavaScript, ASP.NET, and Java related items.

Refer here to view the best selling items on CodeCanyon.

FAQs

When is the deadline to enter?

The competition will officially end on February 28th, 2010 at 11:59 PM, Central Standard Time. However, we do hope that you’ll submit before that date.

Are all items accepted on CodeCanyon?

No. You’ll first go through a review process, similar to all of our other marketplaces. It’s possible that your item will be rejected, in which case, it won’t be considered.

How Will you Judge?

We’ll consider many factors when determining the winners: overall sales, innovation, how much it appeals to a wide variety of buyers, etc.

Who Will be Judging?

The CodeCanyon review staff will collaborate to determine the winners.

Terms and Conditions

• Envato staff and reviewers are not eligible to compete
• Only items uploaded between 12:01 AM 02/01/2010 and 11:59PM 2/28/2010 CST and subsequently approved for sale on CodeCanyon are eligible to count.
• The same author cannot win more than once. In other words there will be three winners, no less.
• Our decision is final.
• Files that are taken down for any reason are not eligible to be counted.
• Files must stay up on CodeCanyon for at least 6 months.
• Items may not be substituted for their cash equivalent.
• Prizes will be awarded during the first week of March, to give time to ensure no copyright infringement has occurred.

So get coding! There are five-thousand reasons to do so! We can’t wait to see what you come up with.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

It seems to all be resolved now, but I just wanted to make a quick apology for the inconvenience and interruptions. We’re going to be re-examining our hosting setup to make sure we avoid this situation in the future and to generally try to pull up the quality of service across the board.

In the meantime there may be some further minor interruptions as we shore up the setup. Thank you for your patience!

First Things First

Before you dig into all of these great tutorials written by very talented designers and developers, remember one thing: nothing is impossible and if they can do it…so can you – just like I did few years ago. I began traversing design-related forums (Envato wasn’t present at the time), dug into every web design related post I could find, tried things myself, experienced trial and error until I finally created my first website (which was pretty bad). Don’t be shy to ask for help, we are a great community filled with love to share our knowledge for free! That said, here is a list of, in my opinion, great beginner-level tutorials, which will help you understand the terms “web” and “design”, teach you how HTML and CSS work, and how you can do it all by yourself. Let’s begin.

Please note: some tutorials listed here are part of the Plus Membership program. More info about Plus Tuts could be found here.

Let’s Start with Color Theory…

“The Importance of Color in Web Design”

All too often, I see a great design concept with a poor choice of colors. Part of what makes a great web design “great” is layout, typography and color. When each of these aspects work to compliment each other, great design is born.

Visual Hierarchy in Web Design

On a daily basis I view all sorts of websites and all kinds of designs. One thing in common with successful templates on ThemeForest or with websites around the web is strong visual hierarchy. Often times I see templates that have a great concept going but has poor visual hierarchy. I’ll cover what visual hierarchy is and some great examples in this article.

Common Mistakes in Web Design

Many rejected templates here on Themeforest suffer from the same few common mistakes: typography (font, line-height, letter-spacing, color), alignment (grid), and spacing (padding). In this tutorial, we are going to take a closer look at how to avoid these common errors.

CSS: The Very First Steps

This one is for those who are hoping to take their first steps into web design. This 70 minute Plus video tutorial will assume that you have zero knowledge of CSS. Over the course of the screencast, you’ll learn about the basic syntax, a plethora of different properties, and how to create the beginnings of your very first website.

Design and Code Your First Website in Easy to Understand Steps

In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites! It’s a brand new week; maybe it’s time to learn a new skill!

30 HTML Best Practices for Beginners – Basix

The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If we post too many advanced tutorials, our beginner audience won’t benefit. The same holds true for the opposite. We do our best, but always feel free to pipe in if you feel you’re being neglected. This site is for you, so speak up! With that said, today’s tutorial is specifically for those who are just diving into web development. If you’ve one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!

Without further ado, let’s review thirty best practices to observe when creating your markup.

Moving on…

Now that we’ve a basic understanding of theory, and have learned how to design and code a very basic web page, we are ready to move on a bit further. The following articles and tutorials are here to teach you more about the web design process and best coding practices.

Elements of Great Web Design: The Polish

When I put together designs, I usually do so in two phases – Layout and Polish. During the layout phase, I place the main objects on the page usually finishing with something that looks relatively complete. In the second stage – the Polish – I go over the design and adjust colors, type treatments, shadows, layers, and generally clean it all up. In this first of a series of tutorials on web design, we’ll be looking at the Polish.

Designing a Family of Websites

The tutorial I’ve added today is called “How to Design a Family of Website Designs” and is a step-by-step follow-along of a set of WordPress blog designs that I recently did. Because the Photoshop skills involved aren’t that advanced, I’ve spent more time talking about why certain things are done.

From PSD to HTML, Building a Set of Website Designs Step by Step

Today I’m going to take you through my entire process of getting from Photoshop to completed HTML. We’re going to build out a set of 4 PSD mockups of a website that eventually will become a WordPress theme. It’s a massive tutorial, so if you’re going to follow through to the end, make sure you have a few hours to spare!

Last, but Equally Important…

Be Inspired, but Don’t Copy

There’s a thin line between inspiration and copying. We are surrounded with objects and art in our every day life. Finding inspiration for a design is an easy task these days. In this article, I will guide you through the design process of a website I recently finished. I will provide images of websites that inspired me to create a new and unique web layout.

A Freebie to get you Started…

30 Photoshop Web Elements, Backgrounds and Icon Sets (via GraphicRiver)

When you’re designing or building a website, chances are you’re going to need various little elements designed. I personally tend to reuse a lot of the same buttons, menus, icons and so on. Since we launched GraphicRiver earlier this year though we’ve seen a lot of cool little web graphics coming in, in the form of web elements, backgrounds and icons. So I’ve compiled 30 of the best to give you a flavour of what is available over there. Of course don’t forget if you just need a complete PSD design template to build off you can grab those at ThemeForest!

We’re not Done Yet…

Take a few minutes and read these great interviews by some of the leading names in web industry. You’ll be amazed by how much you can learn from these guys!

• Elliot Jay Stocks
• Chris Coyier
• Jeffrey Zeldman
• Eric Meyer
• Jeff Croft
• Marko Dugonjić

… and more. Read all of the interviews here.

Final Thoughts…

Every new beginning is tough; the same holds true for web design. I remember myself when I was first learning: hours of HTML/CSS debugging, all while the solution was right there in front of me; but hey, we learn from our mistakes and repetition. I wish I had access to the Tuts+ network when I was first beginning. It could have saved me a lot of time and frustration. Consider this article as the starting point, if you find yourself taking the first steps into this industry. Any questions?

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.