4 killer web design styles and the tools you need to achieve them
To get the most out of a website, you need to style it. It can be difficult to choose the right way to go, with aspects like industry, brand identity, client preference, and target demographic all coming in to play an important part. Choosing a style just based on one of these factors would be the wrong way to do it — it’s in the combination of all of these factors that your true style lies.
In this article we’ll go through a couple of our favorite web design styles of the moment, and the elements that you can combine to achieve them (and pretty much every other style around). Feel free to get inspired!
Sample a style
There are hundreds — let’s be real, probably thousands — of web design styles floating around right now, and none of them are really very new. So web design becomes all about what new you do with an existing style, making something unique and interesting in a way that fits the brand you’re working on. Here are a couple of our favorite styles of the moment.
1. Go rugged
This rugged design is all about texture, color, and type!
Scales often tip in the favor of a clean and sleek look, but picking a more specific style can more effectively target your viewers. For example, the rugged and grungy look is pretty much always ‘in’. The chaotic and messy aesthetic appeals to a lot of demographics, and is congruous with many a brand. So even if you opt for the jagged look, you will find favor with many.
2. Explore your natural resources
Combining natural elements with the right color scheme and typographic elements makes Geo Fun’s website a success.
Having a beautiful picture of a mountain, waterfall or even a bird will pretty much always make a viewer linger on the page, just to admire its beauty. Use this for your own benefit. Natural elements impart a very specific message and emotion to viewers, so enamor your audience to reduce your bounce rate.
3. Embrace the freedom of abstract expression
Though the interactive imagery on Data v Eyes may be abstract, it definitely illustrates the relationship between human and data.
Design doesn’t always have to use explicitly meaningful imagery to impart the right feeling. A designer, you can use the ambiguity of abstraction to achieve you design goals.
With abstract art you can indulge in the unlimited freedom of expression, allowing the visitor to interpret a design it their own way, conjuring up a subjective meaning. But that’s pure power, so make sure you use it with intent. Don’t forget the meaning behind the imagery and leave the art visually appealing but nothing more. The visitor may be aesthetically pleased by it, but you’ve got to make sure you achieve your ultimate commercial goals as well.
4. Give them a blast from the past
Undoubtedly retro, undeniably intriguing.
A trip down the memory lane can make anyone happy. Use the retro style, ranging from the 1920s to the 1990s, to capture nostalgia and make a close emotional bond with a visitor — by playing on their memories. Juxtaposing classic styles and contemporary products side by side can also create an interesting mood.
The right elements
Whether one of the top four or something completely different, you have a style in mind now. So what do you need to achieve that effect? Here are six of the most important elements.
Play to the right-brained by using illustration
Intrigued? So are we. The Wizard of Oz designers know how to play on curiosity to get users to explore their content.
Illustrated images are eye-catching and quickly grab any user’s attention, irrespective of age, gender, location, or profession. Since drawing is a creative activity, this kind of imagery easily appeals to people, touching a different part of our brains than we typically use in dissecting websites.
As a designer, you have a ton of options to explore, based on the general style of the site — bold vs. subtle images, vivid vs. subtle colors, cartoons vs. charts and graphs, maybe even infographics. They’ll all give visual appeal to your site, so the sky is the limit when it comes to going creative with illustrations and images.
Make it real with photographs
Photography dominates, but in a positive way. We definitely want to check out this event!
It is easy to relate to a photograph — it is real, there is no abstract ambiguity that drawing or art can often have. You can use it in relation to other design elements and create an immediate connection concerning common experiences in people’s minds.
But there’s a catch here; just like every other web design idea, a photograph when used thoughtlessly can also distract the target audience from where you would like to take them. To avoid that, you must select imagery that has the right meaning, explore our recent guide to doing so here.
It’s also important to balance the imagery with all of the other design features on each and every page. You cannot have a bright and colorful photograph but have boring or mismatched text to complement it. Have a keen eye when it comes to understanding what your visitors first look at on a webpage, and tailor your content to that.
Minimal colors = maximum effect.
A very powerful concept is that there is beauty in simplicity. For instance, a simple black and white picture is often more appealing because it does not have a riot of colors to distract you, and you will have eyes only for the subject rather than the paraphernalia around it.
Do not underestimate the power of just two tones to create a bold and dramatic look that will grab attention instantly. This will allow you to concentrate focus on the most important design elements, like typography and layout. But when you do shift this focus, don’t loose the simplicity effect by adding too many elements. Two tone will only go so far to simplify a design, you have to help it by strategically selecting the other design elements as well.
Adjust the opacity
You see the photo, yet you don’t see the photo. Hype! is able to use a very light text to great effect by pairing it with an image and an opaque color fill.
Another thing that’s pretty hot right now is layering text over a photo and using transparency to make it more legible. What’s more, transparency will also let you be the decider of how the text and image can play off of one another, allowing you to build a stronger relationship than if you separated the two.
Get creative with the font style
Font doesn’t have to come in only the most predictable places. Big Omaha 2014 uses fonts together as both imagery and supporting text to create a clean but still sporty effect.
The correct font style or typography lends easy readability to your website. But that doesn’t mean you have to stay boring. It’s not like the old days where you could only choose from a set of 10 fonts or so online. You can get creative and choose a well-designed and innovative set of typefaces that will be a valuable design element for your site. Make use of the art form of a unique typography to attract attention to your web design.
This delicious soda brand has a website that uses texture in an unexpected way that just totally fits the brand. Bravo.
A nice theme or texture can not only give depth to the background of your web design but it can also hold a special meaning for your visitor, immediately winning their approval. There are zillions of textures, patterns and themes available, and you can set whatever mood you want with them. Give them warm fuzzy feeling with a pattern of clouds, set them in a chill out beach mood with a sand texture, or send them exploring the cultural unknown with the texture of a brightly painted cement wall.
About the author: Ramya Raju is a freelance web designer and writer from India. He writes on a variety of topics like travel, photography, English Courses, SEO, web design, mobile, marketing, etc. He’s generally an extrovert who likes photography, anthropology and traveling to different countries.
What other styles are you using right now?
Top 10 web design trends for 2014
Crash course in typography: the evolution of style
Web design trends for 2013
6 web design trends that are here to stay
Trend spotting: the best and worst of ‘Snowfall’ design