As we grow and learn as web designers, we all tend to lean to one style in particular, and it helps define us, and our work, as individuals. However, to grow, we need to learn new things.

Sometimes a client wants something else, so we need to abide — though we can (and should) learn to design in new styles for our own personal benefit as well. With that, we can discover and perfect our understanding of alternative design principles, learn how to work with new design elements, and overall broaden our skill set.

When venturing into a new style we’re not familiar with, we can’t just open up Photoshop, expecting our design to come out as spectacularly as the style we’re more familiar with. Just as we grew to know our niche design style, we must, in a sense, re-teach ourselves design for each particular style.

Here is how to define, what to look for, and what to research when venturing into a new style of web design. Many of these features are better defined in our previous article, 5 Ways to Become a Better Designer, Right Now. Be sure to check that out in addition to this.

1. Define the Style

Whether this new style your researching is grunge, sleek, web 2.0, hand-drawn, typography, or whatever else, we can follow the same steps to research it. That first step to take is to actually define the style. Be sure to define the style in detail based from examples, sources, and any historical implications.

Below are a few great examples in blog posts, but the same technique can be used for this stage of discovering a new style.

Grunge Style

“as Web 2.0 style is all about glossy and shiny look, another option would be something rather crude, radical and provoking. Such as the grunge style — dirty look with irregular, nasty, sometimes even ugly and crooked visual elements. Will it establish itself as a trend? Probably not. However, it may be used once some creative and unconventional design approach is needed.” — Smashing Magazine, on grunge web design

Web 2.0 Style

“If I had to sum up “Web 2.0″ design in one word, it would have to be “simplicity”, so that’s where we’ll start.

I’m a great believer in simplicity. I think it’s the way forward for web design.

Today’s simple, bold, elegant page designs deliver more with less:

• They enable designers to shoot straight for the site’s goals, by guiding the site visitor’s eye through the use of fewer, well-chosen visual elements.
• They use fewer words but say more, and carefully selected imagery to create the desired feel.
• They reject the idea that we can’t guess what people want from our sites”

— Web Design from Scratch, on Web 2.0 style web design

Hand-Drawn Style

“The most valuable and innovative ideas had all been handwritten first. That’s no big news, since designers tend to produce first sketches as paper prototypes anyway; still it’s important, because web design is different from “usual” design. Of course, it also has a personal note and it is hand-made, however users can’t see that. As CSS is “boxy but good”, designs tend to have a rather limited appearance — they are too boxy and too right-angled.

…The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere.

…Since hand-drawing is a typical feature of graphic artists, designers and illustrators and is often associated with creativity and inspiration, it is often used in portfolios and showcases.” — Smashing Magazine, on hand-drawn web design

Get out a piece of paper, and actually define the style on paper. This is an essential step in brainstorming, and knowing what and what not to include. Write down when this style is appropriate, what elements should be there, what should not, and notes on colors, typography, texture, and more.

2. Find Examples

After defining the style on paper, the next step is to actually find some inspiration. Doing a quick Google search on “Hand-drawn web design” or “Web 2.0 web design” is a great way to start. Many showcases will pop up and you can choose any to get started.

Going through showcases, pick out your favorite designs in each. You may want to pick up a similar design strategy when venturing into this new style. Despite sharing a design style, different websites can still have a lot of variety. As an example, the two web designs below are both grunge style, but they are also very different.

Further define examples of the style you prefer, again looking at texture, color, shapes, layout, etc.

3. Define Colors

We should have already defined color in a basic sense when defining our style in step #1, and when writing an extended definition in #2. However, let’s get even more specific. To get more inspiration, a Google search on “Grunge style colors”,  or “Web 2.0 colors”. Also check out a website like ColourLovers and do a search with similar keywords.

Of course, some web design styles will be color independent, such as the hand-drawn design style, or a typography-based design style. This is where viewing your favorites when looking for examples comes in. What colors did you like on these examples? Did you like the colorful hand-drawn websites, or the black and white typography designs? There can be a lot of variation in color for these types of designs, and it can leave a lot of room for creativity.

Bookmark some palettes on ColourLovers that match the style your looking into, and that match your personal style.

4. Analyze Textures

Grunge style isn’t the only style known for textures. Each style has it’s own set of textures — whether it be earthy, man-made, glossy, gradients, subtle, or whatever else.

For example, many hand-drawn styles have a paper or watercolor texture to them. The popular blog, Web Designer Wall is a great example of this:

For even something like a website that features simple gradients for texture, check out how heavy the gradient is (difference between the lightest and darkest part of the gradient), and where it is used most. The apple website is a great example of a Web 2.0 and minimalistic web design style mix. Note that the heaviest gradient is on the navigation, where they would like the user’s eye first. This is a very user-centric web design, as defined for the Web 2.0 style above, in point #1.

5. Don’t Forget to Look at the Wireframe

We’ve researched general design elements that make up a web design, but let’s also not forget about the wireframe. Of course, we should always strive for alternative layouts that are still user-friendly, but some design styles work with interesting layouts more than others.

As a general rule, the simpler the design style, the more complex and original a wireframe can be. This can add interest to the design, as long as the designer pays attention to other elements that will help guide the user’s eye around a layout they’re not used to. In contrast, more complex styles, such as hand-drawn and grunge style should stick to more generalized wireframes that are quickly easy to navigate.

Of course, the rules for this can be variable, and one should look into a number of different options when determining a wireframe to go with their new design style. Check out some examples again while paying closer attention to the wireframe, and see if there is much variety. If you come across an interesting wireframe sharing that design style, how did the designer make it work? Would it be better with a more traditional wireframe?

6. Take a Close Look at the Details

As any experienced web designer knows, a web design is not complete until it has a bit of polish. There are tiny details in each web design style that make it appealing in it’s own sense, and when lurking into a new style, the details also have to be researched.

Minimalistic or Web 2.0 styles tend to have icons that do the trick, while hand-drawn or grungy styles tend to keep the detail in the imagery. It can become much more advanced than this though, so be sure to look back to the examples and see where and what the details of your chosen design style are.

Below is a zoomed in example of the Envato website. Rounded corners aid in the “sleek” look, and there is a huge amount of detail in the placement and construction of icons on the website.

7. Check Out Further Resources

It is very likely you’re not the first to try to define and research this design style. Look through other resources that do the same, and see what they have to say on the subject. You may read something you forgot in your own analysis. Below are a few helpful articles on popular web design styles.

Share on Facebook

Here is a diagram to illustrate what web point is and what it has become:

Image Source: O’reillynet.com

Here are some quick and easy modifications and ad-ons you can make to your website to become “Web 2.0” if it isn’t already.

1. RSS Feeds: Feeds have become great assets to websites. The user now has the option to receive all you’re websites updated information without actually having to visit your website. RSS Feeds have greatly improved repeat visitors and readership/subscriptions across the board.
2. Blogs: Blogs have personalized companies/products with consumers. Users want to feel like they buy (either product or information) from a trusted source and someone they know. Blogs have personalized this relationship between the companies and users. Start a blog on your business (service or product) to better inform the customer and that will also keep them coming back, asking questions, etc.
3. Bookmark Submission Buttons: Any site you have that can provide information to a user should have Bookmark submission buttons. If one person is interested in what you are saying, there is a chance another million are as well. These button will facilitate and better expose your information to the masses on pages such as Digg.com, Stumbleupon.com, Netscape.com, and others. They are not only great traffic drivers but link builders as well.
4. User Interaction: To me, this is the most important tool you can implement on your website today (if possible). User’s want to interact with what they are looking at or reading, its human nature. We have opinions, we like to share. Over 80+ million people share their lives over their profile on Myspace, Over 2 million people are now sharing websites they think others will find interesting on Stumbleupon.com, and Over a million people are sharing stories they think others will enjoy on Digg.com, and in all these together, many more millions of people place comments. Make you’re user be hands-on if possible with your website, and interact with your company.

One great example of a website which redesigned it’s look to become “web 2.0” is USAtoday.com. After it’s makeover, the website had a 380% bump in traffic! Their new design not only engages users in all their stories but also has the look and feel of the new Web 2.0 design. Its very clean and simple.

Redesigning you’re website can be a difficult task if you’ve had something in place for a long time, but it’s a must to move forward and keep up with the ever-developing web. Start by making small changes and implementing whatever you think can work best to better engage your visitor.

Share on Facebook