20+ Creative Websites that make users go WOW!
Welcome into the laboratory where creative ideas are generated, tossed on all sides and intertwined, with the purpose of giving the best of them to creating good-looking websites! Here’s a look into some useful creativity techniques:
How to make a creative website
Below you’ll find the 6 main ingredients for a creative web design. Let them be named theory. And, as well-done things start from theory, let’s speak creativity techniques.
1. Organize the website differently, but still focus on usability
People are used to reasoning in a certain way, by following proven, widely-acknowledged thinking paths. Thus, best practices in web design formed their expectations as to where they can find what in a website. Online, their expectations are met by traditional website elements assembled in traditional manners.
Somehow, this phenomenon numbs their attention and they might ignore important parts of your message.
This is where breaking conventional logic comes in. Surprise people, shock them if needed.
A peek into theory, by way of example:
Rivercliff Ranch – vertical menu leaving room for pictures showcase
Rivercliff Ranch worked its way through the rigours of web design:
- placing the menu vertically
- the menu is set on transparent background
- Visitors just let themselves wander across the photo gallery
- At changing the page, a slight zoom-out/zoom-in effect preserves a registry of elegance for the vertical menu.
2. Use lateral thinking to make unusual associations
Lateral thinking is a creative technique that involves reasoning that is not immediately obvious and makes use of unusual associations. This reasoning does not follow traditional step-by-step logic. And the results may be gorgeous.
Another peek into theory, by way of example:
Bamfieldmsc – connecting marine sciences center with a watered footer
Everybody expects a Marine Sciences Center to speak about… marine ecosystems. But to bring the marine ecosystem into the website, this is unusual:
- website pages are literally flooded
- There is some bottom line information that they drowned into waters
- the website manager makes good use of suggestive, marine-related background images.
3. Pretend you don’t have to code it
How the “Pretend that you don’t have to code it” theory took form (an example):
Perficientdigitallabs – creative web design blowing up code limitations
- All of this site defies the coding laws and strikes the eyes.
- scrolling itself is completely reinvented.
- Portfolio work is presented in balls that are mouse-sensitive.
- the transition from Work to About page describes a fade-out/zoom-in effect.
The website seems to have bent all code to its own design rules.
4. Add contrast, use of black and white, light and dark, etc.
Another creativity technique good to know for web design is to add contrast to a website. Contrast breaks the monotony of color uniformity and helps transmitting a creative message.
A peek into the “Adding contrast” technique powers
TheGreat.Agency – Spot the contrast
- First, it’s a contrast of luminosity and shadow. The spotlight is mouse-sensitive, as the cursor moves, the spotlight moves, too.
- Second, it’s a contrast of white and dark blue; The impression is of “physically” turning the pages of a catalogue.
- the website exhibits the logo almost organically, in the form of liquid ink.
5. Intentionally add imperfections
This technique helps establishing a more authentic connection with the readers. Nobody is perfect, but anybody is sensitive to nice little imperfections. The imperfection in a website makes it more real, more credible, by adding authenticity and truth to it.
A quick look into using imperfection for a creative website
Myeverafterevents – a play on perfection/imperfection
- The primary color is pink, sprinkled into the homepage everywhere
- This coherence in color is pervading perfection, while allowing for attempts at giving the page a more “handcrafted” look
- The imperfection lays in titles typography
- pink is painted on irregular parallels, giving the impression of a vintage events album.
6. Go out of a pre-described layout and try some creative layouts
What if you choose to start a web design adventure and go out of a pre-described layout?
It might sound challenging, but we bet you’ll be more than content with applying this technique to a truly creative website.
A quick look into theory, by way of example:
Thegoodstory – displacement of the conventional layout
- conventional elements give you the illusion of two layered dimensions
- Section images interlock
- If the header is melt in diluted color, another section is delimited from the upper one with pebbles.
- a video looks like being presented from behind the scenes, after the homepage canvas was torn to pieces.
Mingling the ingredients…
Mingling the above-mentioned ingredients will result in a mix of elements ready to form a creative website. However, a disproportionate mix, depending on the percentage of newness or traditionalism it covers. We’ll further look into how this mix gives 2 different types of creative websites: immersive and expressive.
There are websites that seem to have found the perfect blend of ingredients. The perfect techniques that made web designers achieve the perfection rules and go beyond them afterwards.
They are creators of experiences. A visitor simply cannot stay away. Any new visit is a new opportunity to create your own story.
For such websites, designers go unconventional and use coding just to explode imagery into unique website design. Unique designs through the discrepancy from all that has already been on the web, and unique through the experiences that cannot be shared, but only felt individually.
These are called immersive websites. Let’s see how some of them look:
The website takes you on a road to exploring. The transitions from one page to another, from one section to another, are nothing but a surprise. If you let yourself led by the intuitive navigation, you will be mesmerized by how much Nurturedigital has to show.
Lanapapier.fr combines style, elegance and innovation in a highly creative way. The immersive experience begins with the header, and the rest of the pages do not fall behind. The navigation within the website is smooth, ensuring a perfect coherence of the message throughout the pages.
This online magazine does everything differently. It has a form of expression of its own. The unusual strikes the eye from the very menu categories. Images accompany the articles, making them catchy for the curious reader. The transition from one page to another is done with a blinking graphic that stirs impatience into the already impatient reader keen on reading more.
Melville Design has a website that impresses through the images and unique layout of its pages. The decoration objects are exhibited at their ultimate peak of beauty, letting the reader mentally construct an interior of his/her own, those objects included.
This website blows up all the laws of web design, presenting the information in a pretty unusual way.
The attention is retained by a succession of graphics in the middle of the homepage, delimitated from the rest by geometrical yellow lines. Motion is added to this succession of graphics, which deconstructs the images in a funny and interesting way. The website also makes good use of typography styles, that go from the norm towards unconventional writing.
This website is another good example of immersive design. The play on words is very creative, and it announces the beginning of any user’s journey into the website pages. When scrolling, wonderful images unfold, as they stem from several couples of letters.
BearIdeas is creative right from the concept they use. Depending on the mood of the day, the visitor is invited to choose a polar bear or a black bear. Further, visitors will be taken on a journey that is nothing but fascinating.
This website presents a stunning exhibition of decorations and art. It is structured in the form of a book (with chapters), or an art album. The explosion of artefacts please the eye and make the reader want to further explore the website, in order to complete their experience with the Giampiero Bodino’s creations.
In the case of expressive design, there is a similar mix of creative ingredients. However, the mix is disproportionate, as the percentage of traditional elements is greater.
Unlike the immersive design, where the users form their own story from what they see on the website, expressive websites are somehow tributary to collective stories: the website designers do at least one thing different, and visitors adhere to a special community, following a red line. The changing experience happens in real world, being just a promise for more – on the website.
Let’s see some examples of expressive design:
The originality resides in what the homepage displays when people scroll to see more. Different headers replace each other, at a scroll. Every header presents new images of the alpine area. As a result, the reader will be more inclined to drink that Alpine milk and start indulging in an experience that promises to expand itself once the habits settle down.
Mesmerize Theme – Agency Website Template
This is a demo from the Mesmerize theme, and where the header image is a dynamic element that constantly changes the copy of the text from “ranking” to “optimization” and so on. Since it’s an agency website, our designers for a calming blue, for it’s effects on increasing user trust, stylized cartoons of serious stuff such as charts and analytics, remind the user that this is a professional company at ease with complex problems.
This simplistic design lets the reader wanting for more information to discover. Hence, the user will scroll down the page, in search of bits of information filtered through a blue ball that continuously changes its hues, texture or color, in a never-ending story.
This website uses magnificently unusual typography styles and contrasting transitions from one image to another, and from one page to another. It really expresses the power of artwork and invites the readers to discover more. As a result, the website pages invite the visitors to join a community of artists and art influences, for the sake of creative artistry.
Mesmerize Theme – Resume Website Template
This is a demo from our Mesmerize theme. Our designers set out to make a resume website for a prospective employee that was at once professional, to the point, and friendly. In the browser, the header image takes up the whole above-the-fold space, and allows the candidate to warm up the visitor with an image of him before visitors scroll down to their actual skills and professional experience.
The website is creative through the use of suggestive images/videos in the background. Their presence into the homepage gives a user the impression he/she is watching a show. The circus experience is brought to the screen, where the website offers a glimpse into what their shows mean.
The website uses creativity in making navigation start from a sidebar table of contents. Categories in the menu are displayed on the left hand of the screen, whereas a suggestive image is kept on the right hand of the screen.
Mesmerize Theme – Sports Website Template
Going to the gym or doing exercise can be a real pain, that requires one to have a good motivation. “Just do it” as Nike would have it. When creating this demo website for a gym, our designers wanted to instantly give a visitor a mental pump, to go out and improve their fitness levels. For this reason, they opted for a fade-to-white image of an athlete, that then emphasizes the powerful copy that pushes people to action.
To wrap up
Immersive or expressive, the websites should first be judged from the point of view of their value for the visitors. Sometimes, creative websites might be a solution of value to the users, some other times, they might be not. It all depends on their success in terms of traffic, or conversions, time on page, etc.
Considering its value for the readers, what type of website would you choose to develop: one that follows the principles of immersive design or expressive design?
[site_reviews_form id=”jn38jkp8″ hide=”email,name,terms,title”]