{"id":60798,"date":"2019-03-01T04:18:51","date_gmt":"2019-03-01T11:18:51","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/03\/10-unique-innovative-website-layout-ideas\/"},"modified":"2019-03-01T04:18:51","modified_gmt":"2019-03-01T11:18:51","slug":"10-unique-innovative-website-layout-ideas","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/03\/10-unique-innovative-website-layout-ideas\/","title":{"rendered":"10 Unique + Innovative Website Layout Ideas"},"content":{"rendered":"

The idea has been floating around for a while \u2013 web design has a sameness<\/em> that\u2019s just kind of boring. Let\u2019s dive into some unique and innovative website layouts that can break the mold!<\/p>\n

Blame user patterns, too many projects for too few designers, or just the desire of clients to have their site looks like something they\u2019ve already seen and understand. But all is not lost. Even though some people are snoozing at what\u2019s out there, designers are still experimenting and having fun with website design.<\/p>\n

Today, we\u2019ll break the routine and dive into ten website designs that feature unique or innovative ideas. If nothing else, it should break you out of any creative rut you might be having.<\/p>\n

<\/span><\/p>\n

Quick Note: Be sure to visit each of the websites to get a full picture of what they are doing. Interactive elements are tough to describe without truly experiencing them!<\/em><\/p>\n

Divided Homepage<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n

An overwhelming number of homepage designs feature a giant hero image or video and a couple of big words to draw users into the design. <\/p>\n

When those still images are \u201copened\u201d they convert to video elements.<\/div>\n

But what if you have more than one story to tell?<\/p>\n

Molecular flips that concept with a six-panel homepage. What makes it work is the innovative use of hover actions to open each panel to display more information, while shrinking the others. The design is engaging as well. When those still images are \u201copened\u201d they convert to video elements. (That made me move through each one just to see what video was present.)<\/p>\n

This design solution is a unique way to break up a lot of complicated information. It\u2019s highly visual, leads the user to just what the need and isn\u2019t overwhelming in the process. <\/p>\n

Massive Card Deck<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n
The interactive canvas shows that a lot is happening with Bitcoin.<\/div>\n

Card-style design patterns gained a lot of popularity for a while, faded somewhat and have been reinvented again. This history less of Bitcoin is a massive display of cards on a game-board style canvas.<\/p>\n

There\u2019s no navigation, no sound or looping video, just dozens of cards with headlines (some with photos) hoping that you\u2019ll click. <\/p>\n

For some, this treatment might seem a bit overwhelming. But what if that is the whole idea? The interactive canvas shows that a lot is happening with Bitcoin. <\/p>\n

Then take note of all the tiny headlines. They feel a lot like social media clickbait with titles like \u201c7 Best Bitcoin Explainer Videos\u201d and \u201cHistory of Bitcoin (As Told By Its 7 Most Iconic Memes).\u201d<\/p>\n

Even if you never click a single card, my guess is that you\u2019ll find yourself investigating how this movement works, what the logic is behind the zoom and center toggles and if this nontraditional user pattern has a place in your projects. <\/p>\n

Uber Minimalism<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n

It\u2019s just a big logo. There\u2019s no color. Nothing to see.<\/p>\n

But I\u2019m intrigued anyway.<\/p>\n

This website design takes minimalism to the extreme and still provides an interesting user experience. It might be the soft color palette or the globe-style animation, but the simplicity of the design makes me want to see the featured projects on this portfolio website. <\/p>\n

Sometimes a lack of information can be the thing that piques our curiosity. <\/p>\n

Break the Rules<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n

This website breaks more design rules that I can count. But I keep looking at it.<\/p>\n

There are altered fonts, odd abbreviations of words, text overlapping odd areas, a lack of contrast in the background, over-the-top gradients, multiple animations moving at once and some tiny lettering. <\/p>\n

But I keep looking at it. <\/p>\n

My guess is that if you click through, you will too. <\/p>\n

Common guidance says that if you want to break design rules to just break one; yet, here they all seem to be broken beautifully. This style of website design is a definite risk that\u2019s most appropriate for a portfolio site or something that gives you more creative freedom. <\/p>\n

Mix Old and New School<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n
It\u2019s nostalgic and can tug at the fond memories of users.<\/div>\n

Yes, that\u2019s Britney Spears circa 1999.<\/p>\n

This website is a Spotify project that combines an old-school aesthetic but uses artificial learning and bots to help you find the right playlist. <\/p>\n

While we can all agree that this design style is not what you would really focus on today \u2013 it\u2019s so plain and boxy, right \u2013 its stands out because of that old-school feel. Why would new technology power games in this style?<\/p>\n

That yin and yang effect is interesting and bold. It\u2019s nostalgic and can tug at the fond memories of users. (The flip side is that anyone born after this era just won\u2019t get it.)<\/p>\n

Tile the Background<\/h2>\n

<\/a><\/p>\n

\"websitelayout<\/div>\n<\/p>\n

The design is bold and in-your-face. Pin-Up Magazine tiles it\u2019s cover on the homepage. Scroll just a little and one bigger one pops up, just begging to be clicked.<\/p>\n

The style of the website is quite brutalist but easy to read. <\/p>\n

It\u2019s hideous and I love it anyway. <\/p>\n

This is one of those places when weighing the audience and goals of the design can lead you down an unexpected path. Think about these magazine covers; they aren\u2019t that enticing on their own. But the overwhelming design brings focus. The lack of elements on the homepage almost forces the user to scroll (and navigation does pop in). <\/p>\n

This design can be scaled back to backgrounds that are tiled and less \u201cout there.\u201d But it\u2019s a good example of how not everything has to have that sameness. This one makes you look because it\u2019s loud and daring. <\/p>\n

Space and Asymmetry<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n
What\u2019s enticing about the simplicity of this design is that it doesn\u2019t seem to ask much of the user.<\/div>\n

Break the grid or plan an asymmetrical grid. <\/p>\n

The beautiful nothingness of Lasse Pedersen\u2019s website is phenomenal. <\/p>\n

Websites are always trying to sell with plenty of entry points into different bits of content. None of those exist here. Look at the screen or scroll. That\u2019s it. Two choices. Plain and simple.<\/p>\n

The risk here is that the thing users choose is to leave the design, but the flow across the screen with the simple instruction to scroll should be enough to draw at least one flick of the mouse. <\/p>\n

What\u2019s enticing about the simplicity of this design is that it doesn\u2019t seem to ask much of the user. You can really look at the images and if you make it past the homepage there\u2019s a small contact button if you want to know more. <\/p>\n

Display a Full-Screen Photo<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n

Most full-page hero images and videos are trapped between a light or dark header bar at the top of the screen with navigation elements and some type of separation to the next content element below.<\/p>\n

Gourmand & Gourmet uses a full screen image without all the containerized elements surrounding it. <\/p>\n

While the design feels big without the header in particular, it is a tricky configuration. Just think of how hard it can be to place text on different parts of an image, and now you have to do it with the display text as well as smaller navigation elements. <\/p>\n

This type of website design takes the perfect set of images, but can provide a lot of visual value. <\/p>\n

Flip the Photo Placements<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n

One of the common themes among all of the unique and innovative website designs in this collection is that they present a new take on a common idea. Hopefully they are concepts and elements that you can use. <\/p>\n

Photonico uses a simple design to showcase photos. The twist is that smaller images are on top as a form of navigation and big photos are below. <\/p>\n

This creates a nice flow from top to bottom of the page. (Although I might like it even better if they got rid of the text navigation above the photo navigation.) <\/p>\n

It goes to show that you don\u2019t have to do the same thing to get the same result. Every element on the homepage is designed to take users deeper into the site. <\/p>\n

The best part of this design might actually be the interaction that happens when you engage. Type in a search term and the screen shifts. It feels like a one page design thanks to nifty, quick animations, the simple dark background and static search bar. <\/p>\n

Be Silly and Have Fun<\/h2>\n

<\/a><\/p>\n

\"website<\/div>\n<\/p>\n

Design something happy and engaging. Beyond Theory does it with words, images and calls to action that are a bit unexpected \u2013 contact us on AOL <\/em>(LOL). <\/p>\n

Combine that with bright color and plenty of open space and the design is a pure delight. <\/p>\n

It also uses an asymmetrical pattern and layered elements to create depth and interest. <\/p>\n

Conclusion<\/h2>\n

Ready to get to work on something new and different? While there are pros and cons to all of the different website design ideas featured here, there\u2019s something you can take away from each one. <\/p>\n

The big idea is to just try. Not every design will yield great results every time, but there is value in daring to do something different. <\/p>\n

Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

The idea has been floating around for a while \u2013 web design has a sameness that\u2019s just kind of boring. Let\u2019s dive into some unique and innovative website layouts that can break the mold! Blame user patterns, too many projects for too few designers, or just the desire of clients to have their site looks… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":60799,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-60798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t