Have you ever built a completely unique website? (here are 3 of mine to get you started)
Tags: showdev, discuss, watercooler
Published: 2021-03-16 22:39:59

I was just tidying up my PC and found some (whacky!) designs I came up with while I was trying to get familiar with front end development.

It got me thinking, there must be other people who have built some whacky designs! Who knows some of them may even made it into production (unlike these designs!)

------

**I would love to see some of your unusual designs, whether it be for a component or for a complete website. Share yours in the comments!**

------

I especially want to see some designs that were too extreme for going into production like the ones in this post!

So here are three designs of mine I found that were interesting. 

They are purely concepts, terrible for user experience and will never see the light of day in production but that isn't the point of this post. This post is all about the uniqueness!

Who knows someone might take one of the concepts and build it (properly!).

I will say the third design has a slider that I believe is completely unique (that I might "steal" from myself!), so it might be worth checking that out if nothing else!

## In a rush? Here are the three sites
Don't want to read the whole thing?

Go on, go have a play and then come back and share some of your unusual designs!

 - [simple site](https://inhu.co/demos/unique-designs/simple/)
 - [angle site](https://inhu.co/demos/unique-designs/angles/)
 - [square site](https://inhu.co/demos/unique-designs/squares/)


## Design one - simplicity
![Simple website with animated gradient background and minimalist design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy3ckl5civcrx2skjl25.jpg)

[Go play with the simple site here](https://inhu.co/demos/unique-designs/simple/)

This design is as simple as they come. 

This one nearly made it into production, which is why there are multiple pages to it, but I eventually settled on [the current design for the site](https://klu.io) which was far better. 

However there are two things I like about this design.

### Split screen
First the "split screen" for the main pages, with a bit of work that could have been an interesting concept where images show on the left depending on which section you are on.

![Image panel to left, article content to right split screen design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmmiazxikwzzirhe5rg6.jpg)

### Line drawing SVG
Secondly I liked the way the SVGs animate in, I ended up using that on several site designs as I obviously liked that concept 😋
![accessibility icon that draws its outline before filling with colour](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j65ylg8aajaeaa2t7vn.gif)

Not much else to say!

## Design two - angles for days
![Angular design with 4 diamond buttons in the centre of the screen for main navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cy1e0gwrvsh44apr2jn9.jpg)
[Go play with the angle site here](https://inhu.co/demos/unique-designs/angles/)

I must have been on something designing this one! 

This design has 45 degree angles, circles and dark colours (I do seem to have a thing for dark colours)....it is completely bonkers!

This is just a one page concept and if you click one of the 4 main links you will have to reload the page. 

I think the idea was going to be that you clicked one of the 4 diamonds, it repositions itself and then the new page loads in around it! Never quite got that far!

Yet again despite the dark colours there are a couple of things I like. 

### Menu, search and settings animation
I quite like the menu, accessibility and search screens popping up from the bottom and the way the angles line up.

![Menu, search and settings menus pop up from bottom of screen and line up with the buttons on an angle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jyb3970k0a76s6y0gpn.gif)

### The way it changes design for different screen sizes
Responsive is pretty boring - just stack everything on top of each other and make it full width!

The way the site transforms for desktop, tablet and mobile is something I still like on the site, rearranging items slightly.

![Desktop, Tablet and mobile view of angular site showing how items shift on the page to keep the 4 diamonds centered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcwf6gegq25dsinkrg2f.jpg)

## Design 3 - the square monster
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu8ska26340343oft55j.jpg)
[Go play with the square site here](https://inhu.co/demos/unique-designs/squares/)

Way too fussy and difficult to comprehend. Still it is unique as promised!

Oh and there is one epic item on this site that I had forgotten about...

### The slider
![multi image slider in 3D where parts of screen "pop out" to highlight them](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/caf8lenbix8t94rfat8p.gif)

The slider on the home page is still quite impressive and unique (to me at least 😋).

I remember building the thing to be performant so there are 7 images in total to reduce the number of requests and it uses `translate` to show the next slide. 

On mobile there are only 5 images requested to reduce this further.

It also automatically requests the exact size images needed at each screen size and uses webP if supported. That whole process will be in another post as it is complex.

## Over to you
So there you go, 3 random site designs that never saw the light of day (until now!).

I can't wait to see what you all come up with!