The Wix Guide To Hipster Web Design

October 4th 2010 | Web Design
Photo by Katekillet


How to Spot a Hipster?
Large glasses with think rims; A heavy vintage leather bag – preferably brown – hanging on one shoulder; An adrogynous haircut, overgrown and shaggy on top; Artistic aspirations – these are only a few of the features that can be found in what society nowadays terms “Hipster”.

The Hipster Revolution

The subculture that emerged several years ago from Williamsburg, New York, and spread across the globe wearing Oxford shoes is now omnipresent. Even the anti-hipster front is hipster. This hype did not skip the web design field and we can definitely point out a trend of hipster web design as well. Wix users have the right to keep up with trends, so it is our contribution to the science of Hipsterology to present the Wix guide on creating a hipster website.
Tips for Creating a Hipster Web Design
1. Vintage Looks
A lot of the visual elements embraced by hipsters are based on vintage. When designing a vintage website, you need to stick to one style – don’t mix the 20’s with the 50’s. You can use the following elements to create a vintagy atmosphere on your site:
  • Old-fashioned looking fonts, such as Cloister Black, Qlassik or Underwood, available on the Wix editor.
  • Vintage visuals family-album style as logos and icons.
  • Texture backgrounds, especially with wallpaper patterns.
  • Ready made Wix templates with a good vintage infrastructure like
2. Clean Minimalism
Suan Lin’s Ceramic Sculpture
Although some of them may look messy, hipsters have a known attraction to simple, clean designs. A minimalist hipster will make a website with the following characteristics:
  • White, black or grey tones. Light shades of cold colors like blue or green can also work.
  • Straight lines (page structure, fonts and icons).
  • Minimal use of text. Simple, non-personal expression.
  • Each page should have a clear hierarchy that helps the visitor gather information more easily. Avoid cramping pages with too much stuff. The item you choose as the focal point of the page should be very big. Minimalism doesn’t mean small, so don’t be afraid of using large images or fonts.
  • These great minimalist Wix templates will give you a good start:
3. A Low-Tech Touch
Weenaut
Hipsters have a yearning for technological innocence. They appreciate old electrical appliances and would prefer a bicycle to a BMW. You can transmit this in your web design by using:
  • Sketches and drawings instead of animations and visual effects.
  • Polaroid or Holga pics (or pics that were edited to look like them).
  • No fancy gadgets and tricks


4. Hipster Background Music
If you have something like Hot Chip or Vampire Weekend playing in the back of your website, you already did half the work in creating a decent hipster site. The only danger is that the hipsters visiting your site are already listening to something on their computer and will be annoyed by your music interfering with theirs. You must use a visible player that can be easily turned on and off, and place it on a clear spot on the page to avoid conflicts. We recommend the Classic or the Speaker players, available on the Wix editor.strong>5. Themes
Not every website can be a hipster website. Real estate, for instance, is anyway off-limits, since hipsters don’t own real estate. Medical professionals are also advised to stay out of the hipster-business, because no one wants a hipster doctor. Well, most people don’t.
But it is wrong to presume that only fashion-related sites can boast a hipster flare. Pet shops, hotels, kitchen accessories, books – these are all themes that can easily be made hip(ster). It all comes down to the hipster spirit, which is hard to define but easy to detect.The Wix users who created the following websites may not even think of their sites as hipster, but they have what it takes. Take a look and you’ll probably figure it out:

Peacocks Paper Couture



4 comments

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>