One of the things that Lo What I have learned in my life is that we don’t need to reinvent the wheel.
You can apply this to website design as well.
Don’t start from scratch, you can get overwhelmed.
Find inspiration. There’s a lot out there.
I did some heavy lifting for you and researched some well-designed websites (and what makes them tick).
Check them out. below.
How to Make a Creative Website
Here are the 6 main ingredients for creative web design. Let them be called theory. And, since things done well start from theory, let’s talk about creativity techniques.
1. Organize the website differently, but still focus on usability
People are used to reasoning a certain way, following proven and widely recognized paths of thought. Therefore, best practices in web design shaped your expectations as to where you can find what on a website. Online, their expectations are met by traditional website elements assembled in the traditional way.
Somehow, this phenomenon dulls their attention and they may miss important parts of your message. This is where breaking conventional logic comes into play. Surprise people, surprise them if necessary.
A look at the theory, as an example:
Rivercliff Ranch: vertical menu that leaves room for showcase images
Rivercliff Ranch carved its way through the rigors of web design:
- positioning the menu vertically
- menu is set to a transparent background
- Visitors are simply allowed to wander through the photo gallery
- When changing pages, a slight zoom in/out effect keeps a register 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 can be magnificent.
Another look at the theory, by way of example:
Bamfieldmsc: marine science center connection with a scattered footer
Everyone expects a Marine Science Center talk about… marine ecosystems. But for bringing the marine ecosystem to the website, this is unusual:
- the website pages are literally flooded
- There is some final information that they drowned in the waters
- The website manager makes good use of suggestive sea-related background images.
3. Pretend you don’t have to code it
Great ideas can seem difficult to implement due to the limitations of HTML, CSS, JavaScript, etc. However, a good creative technique says that you put the code aside and let your mind wander in search of the best website design. Think instead that there is no idea that code cannot be folded. How the “Pretend You Don’t Have to Code It” theory took shape (an example):
Perficientdigitallabs: Creative web design that exploits the limitations of code
- Everyone on this site defies coding laws and calls the attention.
- scrolling itself has been completely reimagined.
- Portfolio work is presented in balls that are mouse-sensitive.
- transition from the Work to About page describes a fade in/zoom in effect.
The website seems to have bent all the code to their own layout rules.
4 . Add contrast, use black and white, light and dark, etc.
Another creativity technique that is good to know for web design is adding contrast to a website. Contrast breaks up the monotony of color uniformity and helps convey a creative message. A look at the power “Add Contrast” technique
TheGreat.Agency – Spot the contrast
- First, it’s a contrast of light and shadow. The focus is mouse sensitive, as the cursor moves, the focus also moves.
- Second, it’s a contrast of white and dark blue; It gives the impression of “physically” turning the pages of a catalogue.
- The website displays the logo almost organically, in the form of liquid ink.
5. Intentionally adding blemishes
This technique helps establish a more authentic connection with readers. Nobody is perfect, but everyone is sensitive to small imperfections. The imperfection in a website makes it more real, more credible, by adding authenticity and truth.A Quick Look at Using Imperfection for a Creative Website
Myeverafterevents: A Game of Perfection/Imperfection
- Primary color is pink, splashed throughout the homepage
- This consistency in color permeates perfection, while allowing you to try to give the page a more “handcrafted” look
- The imperfection lies in the typography of the titles
- the pink is painted in irregular parallels, giving the impression of an album of old events.
6. Get out of a pre-designed layout and try some creative layouts
What if you decide to start a web design adventure and get out of a pre-designed layout? It may sound challenging, but we bet you’ll be more than happy applying this technique to a truly creative website.
A quick look at the theory, by way of example:
Thegoodstory – conventional layout offset
- Conventional elements give the illusion of two-layer dimensions
- Section images are intertwined
- If the header melts into watered down color, other section is bounded from top with pebbles.
- A behind the scenes video appears to be featured after the homepage canvas was torn to pieces.
Mixing the ingredients…
Combining the ingredients mentioned above will result in a mix of elements ready to form a creative website. However, a disproportionate mix, depending on the percentage of novelty or traditionalism that it covers. We’ll take a closer look at how this combination delivers 2 different types of creative websites: immersive and expressive.
Immersive Design
There are websites that seem to have found the perfect combination of ingredients. The perfect techniques that made web designers reach the rules of perfection and then transcend them. 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 only to exploit the images in a unique website design. Unique designs through the discrepancy of everything that has already been on the web, and unique through experiences that cannot be shared, but only felt individually. These are called immersive websites. Let’s see what some of them look like:
Nurturedigital
The website takes you on a path of exploration. The transitions from one page to another, from one section to another, are nothing more than a surprise. If you get carried away by the intuitive navigation, you will be mesmerized by all that Nurturedigital has to show.
Lanapapier
Lanapapier.fr combines style, elegance and innovation in a very creative way. The immersive experience begins with the header, and the rest of the pages are not far behind. Navigation within the website is fluid, ensuring a perfect coherence of the message throughout the pages.
Carbone.Ink
This online magazine does everything differently. It has its own form of expression. The unusual is obvious from the same menu categories. Images accompany the articles, making them attractive to the curious reader. The transition from one page to another is done with a flickering graphic that generates impatience in the already impatient reader eager to read more.
Melville Design
Melville Design has a website that impresses through the images and unique design of its pages. The decorative objects are displayed in their maximum expression of beauty, leaving the reader to mentally build their own interior, including those objects.
Danielspatzek
This website breaks all the laws of web design by presenting information in a rather unusual way.
Attention is held by a succession of graphics in the center of the home page, delimited from the rest by yellow geometric lines. Movement is added to this succession of graphics, which deconstructs the images in a fun and interesting way. The website also makes good use of typographic styles, which range from the norm to the unconventional script.
Bonnemarque
This website is another good example of immersive design. The play on words is very creative and announces the beginning of any user’s journey to the pages of the website.Scrolling displays wonderful images as they spring from various pairs of letters.
BearIdeas
BearIdeas is creative from the concept it uses. Depending on the mood of the day, the visitor is invited to choose a polar bear or a black bear. In addition, visitors will embark on a fascinating journey.
Giampiero Bodino
This website features an impressive display of decorations and art. It is structured as a book (with chapters), or art album. The explosion of artifacts pleases the eye and makes the reader want to explore the website further, to complete their experience with Giampiero Bodino’s creations.
Expressive Design
In In the case of expressive design, there is a similar mix of creative ingredients. However, the mix is disproportionate, since the percentage of traditional elements is higher. Unlike immersive design, where users form their own story from what they see on the website, expressive websites are somewhat dependent on collective stories: website designers do at least one thing differently, and website designers do at least one thing differently. Visitors join a special community, following a red line. line. The changing experience happens in the real world, being just one more promise, on the website.
Let’s look at some examples of expressive design:
Alpskomleko
The originality lies in what the home page shows when the people scroll to see more. Different headers replace each other, in one offset. Each headline features new images from the alpine area. As a result, the reader will be more inclined to drink that alpine milk and start enjoying an experience that promises to expand once habits set in.
Mesmerize Theme – Agency Website Template
strong>
This is a demo of 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 is an agency website, our calming blue designers, for its effects on increasing user confidence, stylized cartoons of serious things like charts and analytics, remind the user that this is a professional company that she is comfortable with complex problems.
Andrevv
This simple design allows the reader who wants more information to discover. Therefore, the user will scroll down the page, looking for bits of information filtered through a blue ball that continually changes shades, textures or colors, in an endless story.
The peau de l’nuestro
This website uses beautifully unusual typographic styles and contrasting transitions from image to image and page to page. It really expresses the power of the artwork and invites readers to discover more. As a result, the website pages invite visitors to join a community of artists and art influences, for the sake of creative art.
Mesmerize Theme – Resume Website Template
This is a demo of our Mesmerize theme. Our designers set out to make a resume website for a prospective employee that was professional, direct, and friendly at the same time. In the browser, the header image takes up the entire space on the top half of the page and allows the candidate to enliven the visitor with a picture of themselves before visitors scroll down to see their real skills and professional experience.
Cirque Gruss
The website is creative by using suggestive background images/videos. Their presence on the home page gives the user the impression that they are watching a program. The circus experience is brought to the screen, where the website offers a glimpse of what their shows mean.
Huys Nyc
The website uses creativity to make navigation start from a sidebar table of contents. Categories in the menu appear on the left side of the screen, while a suggestive image is displayed on the right side of the screen.Mesmerize Theme – Sports Website Template
Going to the gym or working out can be a real pain, requiring one to have good motivation. “Just do it” as Nike would say. In creating this demo website for a gym, our designers they wanted to instantly give a visitor a mental pump, to get out there and improve their fitness levels.For this reason, they opted for an image of an athlete fading to white, which then emphasizes the powerful copy that pushes people to the top. action.
Finally
Immersive or expressive, websites must first be judged from the standpoint of their value to visitors Sometimes creative websites can be a solution of value. for users, other times it may not. It all depends on its success in terms of traffic, or conversions, time on page, etc.
Considering its value to readers, what What kind of website would you choose to develop: one that follows the principles of Immersive design or expressive design?
[sibwp_form id=1].