As web developers we are always growing, not only in our skills but also in keeping with trends and styles that the current market finds attractive. After all, web developers are designers first. Whether you're full-stack or just focus on front-end, user experience should be one, if not the, top priority when it comes to your web application.


Every now and then I like to humble myself by looking at some Awwward winning web designs, no that's not a typo Awwards.com is an expert panel formed by some of the most important designers, bloggers, and agencies in the world takes on the difficult task of assessing the talent, effort, and dedication. At the end of every year Awwwards holds a conference and prize-giving ceremony to the websites with the top designs.

How it works

Websites first need to be submitted (You can't expect them to know about every single website out there). After that the community votes based on four main categories: Design, Usability, Creativity and Content. Each category is awarded a score, valuing from 0.0 to 10.0. Those scores are then averaged, giving an overall average score.



The takeaway

The main focus of this post is to stretch your imagination and get you thinking outside of the box. I would also encourage you to try and duplicate some of the animations, scroll effects and stylings that you see on some of these sites. This is a great exercise to expand your repertoire when it comes to, not only design, but coding in general.


1. waaark.com

SCORE CARD


Design

8.19

Usability

7.39

Creativity

8.20

Content

7.69

Average

7.90





Not surprisingly Waaark is a French web designing firm that, on their website, list that they currently service such clients as Melville Design, Alix B d’Anthenay, Bonne Marque among many others. I can tell you that each one of their websites is visually stunning. The firm is headed by a Art Director Jimmy Raheriarisoa who boast an impressive 6 CSS design awards, 5 of the fore-mentioned Awwwards as well as 3 FWA's. The second half of this duo is none-other than Senior Developer Antoine Wodniack who is no slouch in the awards department either, claiming a total of 9 CSS design awards, 8 Awwwards and 3 FWA's. All said Jimmy and Antoine have 8 years of working with each other and it definitely shows in their work.





1. GET LOST. GET NATURAL

SCORE CARD


Design

7.84

Usability

7.27

Creativity

7.60

Content

7.45

Average

7.58





GET LOST. GET NATURAL is a website built for the sole purpose to inform about the Grand Tour route and to show that Switzerland is not just about cheese, chocolate and watches....There are a bunch of other adjectives that Hungry Boys (the Russian based web design firm behind GET LOST. GET NATURAL) uses to describe the site, but to me, it just is a bunch of fluff words strung together to make it sound like they have art degree, which I'm sure they do, but my audience isn't a bunch of high brow do-gooders that require to be pandered and ostracized from the art community. So...you're welcome for saving you from reading their description.

Hungry Boys has two more entries in this years Awwwards that you can check out below, they pretty much all hover around the same score so I thought they were worth at least mentioning in passing.





3. Ths Was Louises Phone

SCORE CARD


Design

7.49

Usability

7.54

Creativity

8.50

Content

7.85

Average

7.74





This was Louises Phone, is a full immersive and interactive website that plays more like a video game. The message conveyed is narrated by Louises father, detailing the "hells of cyber-bullying" by reading, then 16 year old, Louises attackers text messages. You may have guessed that Louise ended up ending her own life. Although the over-arching message is to end bullying, through the No Hate Network, Louises story is the main vehicle to spread that message. Originally in French, the website has been translated to English to help spread the awareness.

A few note worthy points are that the site is entirely transitioned on Javascript, essentially making it one huge web-based application. There are a few oddities within how the app performs which is why I am putting this one a little lower on the list. Don't get me wrong this is a beautiful site but there are a few mistakes like a huge white space on the page while scrolling down the page.





4. Pocket Penguins

SCORE CARD


Design

7.48

Usability

7.25

Creativity

7.32

Content

7.31

Average

7.34





Pocket Penguins is nothing special, yet at the same time, that is exactly what makes it so special. It isn't trying too hard, it isn't full of purposeless gimmick eye candy per sake of eye candy. Yes, Pocket Penguins is quiet unique indeed.

The secret sauce to this masterpiece is in the fine details. For starters, this is a true SPA (single page application). You wont find any menu's or links taking you off the single page. The scroll effects are coded perfectly, the Javascript; on spot! It's not a fancy site done well, rather a simple site done to perfection. That's it's charm, it's simplicity, like the Penguin itself it is a truly perfect simplicity.





4. Swiss Army Man

SCORE CARD


Design

8.22

Usability

7.99

Creativity

8.58

Content

8.08

Average

8.22




The Swiss Army Man is a marketing page for a Sundance festival winner by the same name. Starring Daniel Radcliffe as "Manny", a washed ashore body that sheds some hope and a questionable friendship to Paul Dano's "Hank", serving as a catalyst for the questionable sanity of the main character himself as he struggles internally of whether he is witnessing a miracle or simply succumbing to the isolation of finding himself alone on a deserted island. I've got to say, I love this idea. A refreshing story in a sea of reboots and sequels ten-poles. However this is about website design, and although the premise of this movie is a great inspiration, does the webpage convey that tone equally as well?

Well would you look at that score; a bit of runaway; wouldn't you say? Well, while I do believe this is very deserving of it's attention as a website, I do believe this score to be a tad bit presumptuous. While the coding behind the realistic physics that go into ...ah....throwing a graphical dead body around and make it convincing to the website visitor is a feat of engineering prowess, you have to ask yourself does it add to the overall design of the medium? I believe it does, however to an extent. Take away the gimmick that is him being tossed around the screen and what are you left with? A bunch of share buttons for your social network peralus and a play button for the trailer.

That being said, I believe this fits nicely into a comfortable second place. Although it delivers a feeling of curiosity and edginess, that I believe to be modeled off of the movies tonality, I just can't see putting this ahead of Waaark.





5 Web Designs and Websites that will blow your %$#?ing mind! As web developers we are always growing, not only in our skills but also in keeping with trends and styles that the current market finds attractive. After all, web developers are designers first. Whether you're full-stack or just focus on front-end, user experience should be one, if not the, top priority when it comes to your web application. subtitle: Testing the limits of UX/UI Design

Share this post: