DEV Community

Cover image for Have you ever built a completely unique website? (here are 3 of mine to get you started)
GrahamTheDev
GrahamTheDev

Posted on • Edited on

Have you ever built a completely unique website? (here are 3 of mine to get you started)

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!

Design one - simplicity

Simple website with animated gradient background and minimalist design

Go play with the simple site here

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 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

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

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
Go play with the angle site here

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

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

Design 3 - the square monster

Alt Text
Go play with the square site here

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

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!

Top comments (1)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

If you want to see a fourth unique design here is a post about my old website that is about to be retired

kluio website

That one did make it to production (but still never got finished.....)