Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Follow publication

Web Design Inspiration for December 2021

--

You’re a web designer, web developer, or a little bit of both. You do what you love and you’re even pretty good at it. Still, there are times when the creative juices are running low and a spark of inspiration is just the thing you need. Cue to the below list of selected website examples and the technologies used that might bring something new to your ideas.

Summary

Ecommerce, studio and personal websites. Some minimalistic, some straight to your face with bold elements, and some are just doing their own thing. No matter the style, you can find some interesting ideas in this month’s pick of web design examples that are worth analysing.

ETQ Amsterdam

Javascript libraries: Backbone.js, Boomerang
UI frameworks: Bootstrap
Ecommerce: Shopify
CDN: Cloudflare

In the spirit of their about section:

“…ETQ derived under the mindset of eliminating over-accessorized branding and focusing primarily on letting the quality of the product speak for itself.”

their website cuts on the unnecessary visual elements and provides a minimalist shopping experience, remaining pleasant to the eye. Each product page puts emphasis on the product’s photos and video, the B&W color scheme making the black “Add to bag” button POP!

Perturbator

Javascript libraries: Vue.js (Nuxt.js), MobX, GSAP
PaaS:
Netlify

Synthwave and darksynth might not be everyone’s cup of tea, but Perturbator’s website lures the viewer with its contrast between large typography and thin border lines. The interactive merch map is an entertaining element that makes the user surf the websites for longer and brings attention to the shopping section of the website.

Azzerad Studios

Javascript libraries: React (NextJS), GSAP, styled-components
PaaS: Vercel

Azzerad Studios make use of a beautiful combination of serif and sans serif fonts, as well as big photographs that communicate the emotions lived by the ones in front of the camera lens. Both elements can be seen at the same time when hovering over their projects list, an effect which I haven’t seen in other websites before.

Marvin Schwaibold

Javascript libraries: Vue.js (Nuxt.js)
CMS: Prismic
PaaS: Netlify

The plethora of projects in Marvin Schwaibold’s portfolio speak for themselves. All of the listed projects have catchy thumbnails which intrigue the user, wanting him/her to see more. All of the scrolling and hovering effects are barely noticeable (although the hovering effect on the rows in the “Live” section is really catchy), which in this case is a good thing, as the whole idea is to put Marvin’s experience and knowledge in the spotlight.

Orbita

Javascript libraries: jQuery, scrollreveal
CMS: WordPress

Ecommerce done..differently. The choice of colors brought an image in my head of cherry blossoms over green pastures, so it was strange to see that Orbita is actually selling coffee. Nevertheless, all of this caught my eye, especially the enormous Orbita logo on the homepage. At one point I even thought that it is some kind of “align the dots” game, as hovering over some of the letters stops all the circles except one from rotating. My only complaint is that it’s not always clear if some text is a button or just a paragraph.

Lama Lama

Javascript libraries: GSAP
CMS: WordPress
CDN: Cloudflare

Oh man, this website is a playground. No seriously, they even have a drawing canvas. They managed to find their own “thing” with these rounded blue squares. The way they morph into different objects while scrolling is an awesome display of GSAP’s features. I’ll be right back, let me just write my name on their drawing board.

Litkovskaya

Javascript libraries: GSAP, Boomerang, Modernizr
CDN: cdnjs, Cloudflare
Ecommerce: Shopify

Litkovskaya puts its products right in your face with a simple but effective grid. I have a love/hate relationship with that kitsch oval menu, reminding me of how I was drawing in Paint when I was in primary school, but then again, those serif links are just begging to be pressed. An interesting experience was having a horizontal and vertical scroll on a product page, one scrolling experience through the product images leading to another, a vertical one through items that might “Complete the look”.

Finding inspiration in a sea of information might feel daunting at first, but we hope we made this task a little easier. If you used any of the ideas mentioned above in your designs, please share in the comment section below, I would love to see your creations!

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Volosciuc Eugen
Volosciuc Eugen

Written by Volosciuc Eugen

Solving corner-case dev issues and sharing their fixes with the world.

Responses (1)

Write a response