How to Accurately and Effectively Research a Web Design Style

Posted on by
  • 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 the 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 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 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 its 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 (the 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 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 an experienced web designer knows, 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 its 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.

It may also help to do interface tutorials in the desired style, to help go through the process a few times. This a great way to pick up new techniques and notice new specifics.

Wrapping Up

By the time we’ve well researched the style, we can now have our first go at it. This the stage where one can collect resources (fonts, textures, color palettes), create a PSD, and ask for a review on forums or from other designers in another outlet. It is essential to ask for review when venturing into a new style, because no matter how long we’ve been in the web design world, we are bound to make major mistakes our first time at anything.

Researching a style is the first milestone to venturing into new grounds as a web designer, and it is a great career choice for advancement. No matter what motivates you to do so, a new client requesting a new look or your own pure interest, hopefully this guide has helped. Please share any other tips or practices anyone of you may go through themselves when learning something new as a web designer, whether it be a new design style or something completely different!