“I liked it before it was cool.”
You can often hear the same sayings from all devotees of hipster culture that has emerged about several years ago and has spread all over the world. You can recognize a hipster by large glasses, beard, cool top-hat, stylish vest, vintage leather shoulder bag. This movement wearing Oxford shoes is now omnipresent, and web is not an exception.
What’s a Hipster Design?
It’s a smart, progressive, non-mainstream, easy to use design that can be named a trend of these days. Being spread across the globe, hipster style couldn’t skip the web and a lot of designs turned hipster. All designers who keep abreast of the latest trends choose it to give a new breath to their works. That’s the reason for emerging a number of websites with extremely trendy layouts.
Hipster Markers
The anatomy of hipster web design is also called “hipsterology”. When it goes about web, most hipsteresque designs distinguish from the crowd with simplicity, washed out colors, vintage elements (patterns, textures, fonts), styled ribbons, arrow/bear/glass vectors. You can also find in the repertoire of hipster websites “dream-like” images, created with Instagram filters or using Photoshop actions. Fans of hipster way of life love and use social media, and Instagram is one of the most favorite tools of speaking about their lives. It’s also easy to detect a hipster site due to its background music. The music hipsters listen to is a distinctive feature of this movement. When you enter a site and hear something from independent rap, classic rock, nu-rave, minimalist techno playing on background, you can be sure that you’ve hit the hipster site. The cutting edge layouts of hipster websites with all the mentioned above elements don’t complement on the usability of these websites, thus being pleasant for visiting.
How to Create Hipster Site?
It’s interesting to browse all that recently created website designs that look extremely modern and original due to their hipster nature. If you want to deep into the essence of hipster design trend, you have to see how it looks, check out live examples that inspire and show how to perform it in the best way. Here is a bunch of sites that are created in the best hipster traditions. This compilation will show you the most common elements that are implemented in design for making it look hipster, so you can make use of them for dressing up your own designs.
Hipster Websites Tips & Tricks
Dream-Like Photos
Describing hipster culture is impossible without demonstrating wonderful dream-like photos that you can find in any social account of a true hipster. Analog cameras are the most favorite among this community. For example, Lomo LC-A (the true cult of analog photography) shots are in fave of all hipsters, because of their amazing originality. The same look can be achieved with Instagram filters, and it makes this social network a good source of inspiration for hipster culture fans.
In the examples below you can see stunning photos that remind Instagram or the ones taken with analog camera. Most often, they are a part of the site background, giving hipster look to the design and driving more interested viewers in. If you’re going to create true hipster design, don’t forget about dream-like photos.
***
The House of Eyewear
***
The Q Camera
***
Lois Jeans
***
Locals Apparel
***
***
Vintage Look
A respect for some of the past is a part of hipsters’ view of today’s world. They enjoy shopping at vintage stores and wearing clothes from the granny’s closet. Retro style is definitely a good source of inspiration for every hipster who takes care of his appearance. This vintage vibe is a part of hipster culture, so it’s not surprising that most hipster website designs are dressed in retro style. Remember, true hipster websites love retro.
***
***
(Ma+Chr) Creative Design Studio
***
L’attrape Reve
***
Freedom, Soul and Style
Beards, Glasses, Arrows, Bicycles
Beards, glasses, casual hair, mustaches are iconic marks of hipsters who love ironic eyewear, beard humor and bicycles. When it goes about their appearance, mustaches and glasses are mandatory, but there is also a wide range of accessories that are in fave. The same goes about hipster websites.
Notice tiny graphic elements that are used here and there in such designs. They are placed in logos, in featured blocks, used as icons or just decorative elements. Arrows, anchors, beards, mustaches, bicycles, horns, pointers, and much more you’ll find in the designs below. Feel free to use such catchy images to turn your site into a hipster one.
***
***
***
Textures, Stitches, Ribbons
Grunge textures, stitches and ribbons are mostly used as markers of vintage style that is so popular among hipsters. Besides adding visual appeal to the layout, these elements are good for separating parts of the site. Underlining certain parts of the content, they bring information in the focus of attention. Ribbons, background textures are wisely implemented in the designs below and make the latter look very hipster. Using such elements in the layout is one more tip for those who want to create a hipster site.
***
***
Ruthless Spartans vs Cuddly Hipsters
***
***
Crop The Block
***
***
Holify It
Clean Minimalism
Brand new clothes are aside of true hipsters who prefer appealing look that is quite simple. They deny cult of consumption, preferring everything that is outside of the social mainstream. Keeping pulse on today’s life, mocking themselves, enjoying life as it is, and taking it as simple as possible – this is the lifestyle of a hipster.
Hipster designs also strive for simplicity. You can find a number of them that enchant with uncluttered look. Black & white layouts, large logos, emphasis on typography are highly popular in such designs. This approach doesn’t contradict with everything mentioned above. Among a wide range of hipster designs there are extremely clean layouts and the ones featuring textures, large background images and adorned with nice graphics.
***
Sergeant Pepper
***
***
***
Neopolitan Clothing
***
***
That was the list (with live examples) of mostly-used techniques of turning your website design into hipster one. Of course, being hipster is not just trying, it’s a lifestyle and philosophy. Hipster design is not just several hipster elements wisely arranged in layout, it’s a special tone of the website, cutting-edge and easy on the eye look. Anyway, I hope that this compilation will inspire you for stunning designs and useful tips will help you bring them into life.
Author’s BIO:
Katarina Klementi is an author of this post. Visit her Google + account to find inspirational collective posts with freebies, design goodies and a lot of creative and useful stuff.
