Skip to content
preloader-matrix

Inspiring Web Design And UX Showcases — TechRuum

Design inspiration! Where do you find interesting websites? Here’s a list of showcases that we frequently visit for inspiration.

No matter if you’re looking for effective, unpretentious designs, websites that have that extra bit of fun built-in, examples of good e-commerce UX, interaction scenarios, or if you want to leave your own comfort zone and dive deeper into designs that go beyond the Latin writing system, you’ll surely find something in this post to tickle your ideas. Happy browsing!

Table Of Contents

You can jump directly to the topic you’re interested in to find relevant showcases or browse the complete list. Enjoy!

Japanese Design

The web spans the entire globe, however, when we talk about web design, the examples usually revolve around the 26 characters of the Latin alphabet. Other writing systems are often not part of the discussion — with the effect that a lot of brilliant websites stay unnoticed for a lot of us. Time to change that. If you’re up for a journey through Japanese web design, Responsive Web Design JP is for you. The examples in the collection shine with a unique lightness and concentration on the essential, and, even if you don’t master Japanese, you can browse the showcase by technique.

Responsive JP
Responsive JP presents Japanese web design at its best. (Image credit: Responsive JP)

Cyrillic Design

Another site that grants us a look at web design beyond the Latin writing system is Cyrillic Design, dedicated to sites that use Cyrillic typefaces. Lots of beautiful designs can be discovered in there and it’s particularly interesting to see how type is used to make bold statements. A great reminder to look for inspiration outside our own comfort zones.

Cyrillic Design
Cyrillic Design offers design inspiration beyond the Latin alphabet. (Image credit: Cyrillic Design)

Design Made In Germany

Design Made In Germany compiles the best design work from German agencies and designers. Apart from covering website design, there are also collections featuring stellar pieces of brand design, print design, packaging, logos, posters, movies, typefaces, and illustrations.

Design Made In Germany
Design Made In Germany shines a spotlight on the work of German agencies and designers. (Image credit: Design Made In Germany)

Dark Mode Design

Dark Mode Design showcases beautifully designed websites that are either exclusively in dark mode or have the ability to switch. Wonderful examples that dark mode is not an add-on to a “regular” light design but a style with lots of creative possibilities.

Dark Mode Design
Dark Mode is more than what’s hiding behind the toggle, as Dark Mode Design shows. (Image credit: Dark Mode Design)

Minimal Design

Dominic Whittle and Tom Fitzgerald, curators of Httpster, love good typography and effective, unpretentious design. More than ten years ago, they started emailing links of nice sites to each other but quickly realized that they needed a better system for sharing and tagging the things they get inspired by. That’s when Httpster was born.

Httpster
Good typography and effective designs are at the heart of the Httpster showcase. (Image credit: Httpster)

Low-Carbon Websites

With big JavaScript libraries, large unoptimized images, and auto-playing videos, many incredible websites are heavier than they could be, creating a large, hidden carbon footprint. And then there are websites that prove that good design can also be achieved while keeping the carbon impact on the planet low. Lowwwcarbon features examples of sustainably built, low-impact websites. And if that’s not enough inspiration yet, Lowww is also dedicated to sustainable web design.

Lowwwcarbon
Lowwwcarbon explores what sustainable web design can look like. (Image credit: Lowwwcarbon)

One Page Love

One Page Love showcases websites that get by with just one single page. The beauty of “one-pagers” lies in promoting one thing, straight to the point, without any clutter. Rob Hope founded One Page Love back in 2008 and continues to add one-page websites and resources daily. If you need some landing page inspiration or are looking for templates, this place has got you covered.

One Page Love
One Page Love celebrates the beauty of one-pagers. (Image credit: One Page Love)

Fine Web And Interaction Design

Almost 8,000 sites that run the spectrum from fun and novel to clean and simple are waiting to be discovered on Siteinspire. Curated by Howells—Studio, you can browse them by style, type, or subject, or just see the very best.

Siteinspire
Siteinspire showcases some of the finest web and interactive design. (Image credit: Siteinspire)

Alternative Design

If you’re looking for extraordinary designs that experiment with interactivity and content in new and interesting ways, Hoverstat.es never ceases to inspire. The site describes itself as “the home of alternative design, code and content on the world wide web” and features everything from a portfolio with layered 3D preview to delightful little details like a slick looping scroller or menus that think outside the box.

Hoverstat.es
Hoverstat.es is a treasure chest of designs that think outside the box. (Image credit: Hoverstat.es)

Whimsical Design

“The web needs to take itself less seriously” is the message of The Whimsical Web. The site showcases websites that have that extra bit of fun that we often miss on the web these days. So if you’re up for some little surprises and weird details, Whimsical Design will leave you with a smile on your face and some new ideas.

The Whimsical Web
The Whimsical Web showcases websites that have that extra bit of fun built-in. (Image credit: The Whimsical Web)

Personal Sites

Your personal site needs an update? Personalsit.es has some new ideas in store for you. Built to share and revel in each others’ personal sites, the collection is jam-packed with inspiration — from simple and minimalistic to bold.

Personalsit.es
If you’re looking for ideas to redesign your personal website, Personalsit.es has got you covered. (Image credit: Personalsit.es)

Site Of The Day

Every day, Awwwards awards the title “Site of the Day” to an outstanding website, rating its design, usability, creativity, and content and highlighting some of the details that make it outstanding, among them typography and color palette.

Awwwards
Awwwards’ Site of the Day honors outstanding web design. (Image credit: Awwwards)

Website Roundups

In her Inspirational Website Roundups, Manoela Ilic presents websites with exceptional designs and interactions. Each edition is a surprise bag of the most beautifully designed and thoughtfully crafted websites.

Inspirational Website Roundups
In her roundups, Manoela Ilic showcases exceptional websites. (Image credit: Manoela Ilic)

UX In The Wild

Waveguide documents UX examples on different platforms and in different contexts, shining a light on remarkable interaction scenarios. From load-more pagination to QR code login, JJ. Ramirez, curator of Waveguide, explores every example in detail.

Waveguide
Waveguide examines remarkable interaction scenarios. (Image credit: Waveguide)

UI Patterns

From launch screens to error messages, from settings to radio buttons — no matter what kind of UI pattern you’re looking for, UI Garage features more than 6,700 patterns for web, mobile, and tablet, categorized and handpicked. Another great stop for some UI inspiration is Design Vault. The ever-growing collection features designs and patterns from products like Netflix, Pinterest, Medium, GitHub, and many more.

UI Garage
UI Garage explores UI patterns for web, mobile, and tablet. (Image credit: UI Garage)

E-Commerce UX

The Baymard Institute maintains a database of 12,000+ full-page design examples, documenting e-commerce designs from 2012 to today. The examples are organized across 57 page types ranging from homepage and category to accounts and self-service and include desktop, mobile web, and mobile apps. Each example highlights what the page design does well from a UX perspective and what could be improved.

Baymard Institute E-Commerce UX
Baymard Institute examines what e-commerce pages do well and what could be improved. (Image credit: Baymard Institute)

E-Commerce Inspiration

Ecomm.design unites design and tech inspiration in one place. The site showcases more than 3,800 e-commerce websites, along with their tech stack. You can browse the examples by e-commerce platform, category, technologies, and traffic.

Ecomm.design
Ecomm.design shows you the tech stack behind e-commerce websites. (Image credit: Ecomm.design)

Landing Pages

Landbook showcases different types of websites, browsable by color, typography, style, and industry. Among the examples are landing pages, portfolios, blogs, product pages, and more. For more landing page inspiration, also be sure to browse by Landings. The site collects hundreds of landing pages created by leading companies. You can browse them by color, light, and dark mode.

Landbook
Landbook is updated daily to keep the steady stream of inspiration flowing. (Image credit: Landbook)

Mobile Inspiration

Mobbin is a library of more than 100,000 fully searchable mobile and web screenshots. The screenshots are organized by app categories, screen patterns, and user flows. Login is required; the free plan includes the latest app designs of the week.

Mobbin Mobile Inspiration
The Mobbin library of mobile and web screenshots saves you hours of UI and UX research. (Image credit: Mobbin)

Page Flows

Page Flows was created to help you design better user flows by learning from proven products. The library features more than 3,300 recordings and emails of tried and tested products to give you inspiration for anything from onboarding to upgrading and inviting friends. A membership is required to access all user flows.

Page Flows
Page Flows explores the user flows of proven products. (Image credit: Page Flows)

User Journeys

UI Sources has got your back when it comes to designing common flows. The site features recordings of end-to-end user journeys to help you gain insights and identify trends. A subscription is required to access some of the features.

UI Sources
UI Sources features recordings of end-to-end user journeys. (Image credit: UI Sources)

SaaS Interfaces

Do you need some inspiration for SaaS interfaces? SaaS App Design Inspiration collects UI and UX design examples from some of the best SaaS products. A subscription is required to access the complete gallery. Lookin’ for more? Saas Landing Page Examples features UI examples created by SaaS companies. Plenty of inspiration for anything from landing pages and pricing to “About Us” pages, features, testimonials, and more.

SaaS App Design Inspiration
SaaS App Design Inspiration features inspiration for SaaS app pages and components. (Image credit: SaaS App Design Inspiration)

Weekly Showcase

Do you want to get design inspiration delivered directly to your inbox? The UIJar newsletter brings you design updates, articles, and design resources every week. The accompanying online showcase features handpicked websites, branding, and curated collections, among them brutalist websites, websites with big typography, or websites with lots of whitespace.

UIJar
With a weekly newsletter and an online showcase, UIJar never ceases to inspire. (Image credit: UIJar)

Fonts In Use

There are so many fantastic typefaces out there that decisions can be hard. Fonts In Use is here to help. The independent archive indexes typography by typeface, format, industry, and period. Perfect for discovering new fonts and font pairings.

Fonts In Use
Fonts In Use helps you discover new fonts and font pairings. (Image credit: Fonts In Use)

Wrapping Up

Do you have a favorite showcase that you keep visiting for web design inspiration? Or maybe you’ve been curating one yourself? Let us know in the comments below! We’d love to help spread the word.

.nl-boxform .nl-boxform–button,.nl-boxform .nl-boxform–email{flex-grow:1;flex-shrink:0;box-sizing:border-box;width:auto;margin:0;padding:.75em 1em;border:0;border-radius:11px;background:#fff;font-size:1em}

input.nl-boxform–email:active,input.nl-boxform–email:focus,.nl-boxform–button:active,.nl-boxform–button:focus{box-shadow:0 1px 1px rgba(0,0,0,.3)}

.nl-boxform–button:-ms-input-placeholder,.nl-boxform–email:-ms-input-placeholder{color:#777;font-style:italic}

.nl-boxform–email::placeholder,.nl-boxform–button::placeholder{color:#777;font-style:italic}

.nl-boxform .nl-boxform–button{transition:all .2s ease-in-out;color:#fff;background-color:#0168b8;font-family:Mija,-apple-system,Arial,BlinkMacSystemFont,“roboto Slab”, “droid Serif”, “segoe UI”, Ubuntu, Cantarell, Georgia, serif;font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.3);width:100%;border:0;border-left:1px solid #ddd;flex:2;border-top-left-radius:0;border-bottom-left-radius:0}

.nl-boxform .nl-boxform–email{border-top-right-radius:0;border-bottom-right-radius:0;width:100%;flex:4}

.nl-box__img{height:auto;width:100%}

@media all and (max-width: 650px){.nl-boxform .nl-boxgroup { flex-wrap: wrap; box-shadow: none; } .nl-boxform .nl-boxform–email, .nl-boxform .nl-boxform–button { border-radius: 11px; border-left: none; }

.cardsgrid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .nl-boxform .nl-boxform–email { box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025); min-width: 100%; } .nl-boxform .nl-box__form–button { margin-top: 1em; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }}

.nl-boxform .nl-boxform–button:active,.nl-boxform .nl-boxform–button:focus,.nl-boxform .nl-boxform–button:hover{cursor:pointer;color:#fff;background-color:#0168b8;border-color:#dadada;box-shadow:0 1px 1px rgba(0,0,0,.3)}

.nl-boxform .nl-boxform–button:focus,.nl-boxform .nl-boxform–button:active{outline:none!important;text-shadow:1px 1px 1px rgba(0,0,0,.3);box-shadow:inset 0 3px 3px rgba(0,0,0,.3)}

.nl-box__group{display:flex;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);border-radius:11px}

.nl-box__wrapper{display:flex;flex-direction:column;justify-content:center}

.nl-box__form form{width:100%}

.nl-boxform .nl-boxgroup{margin:0}

.nl-box__caption{font-size:.9em;line-height:1.5em;color:#fff;border-radius:11px;padding:.5em 1em;display:inline-block;background-color:#0067b859;text-shadow:1px 1px 1px rgba(0,0,0,.3)}

.nl-box{margin:1.5em 0;padding:1em 0;box-shadow:none;max-width:750px;justify-self:center}

.nl-box__blue{background-color:#1b71bb;background-image:linear-gradient(#1b71bb 60%,#01a6c1 100%)}

.nl-box__desc{padding:.5rem 2rem 1rem}

.nl-box__image{width:100%;height:auto}

@media screen and (min-width: 48em){.nl-box__desc { padding: 0.5rem calc(2rem + 0.5vw) 1rem calc(2rem + 0.5vw); }}

.nl-box__desc–heading-link{color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.9)}

.nl-box__summary{border-bottom:0;color:#fff;font-style:normal;text-shadow:1px 1px 1px rgba(0,0,0,.4)}

.promo-box–blue{–promo-background:#e7f8ff;–promo-text:#000;–promo-highlight-text:#e7f8ff;–promo-highlight:#006fc6;–promo-highlight–hover:#006fc6}

.promo-box{background:var(–promo-background);color:var(–promo-text);position:relative;padding:125px 1.5em 2em;margin-top:125px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:11px;width:100%}

.promo-box__image-link{position:absolute;display:block;top:0;padding:0;left:50%;transform:translate(-50%,-50%);width:250px;height:250px;text-decoration:none;background:0 0}

.promo-box__image{width:100%;height:100%}

.promo-box__cta{background:#fff;color:#d33a2c;text-decoration:none;padding:.5em .8em;border-radius:11px;box-shadow:0 0 1px 1px rgba(0,0,0,.15);background-image:none;font-weight:700;font-size:1.2em;margin:0;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:background .4s ease-in-out,color .4s ease-in-out}

.promo-boxcta:active,.promo-boxcta:focus{outline:0!important;background:#fff;text-shadow:none;box-shadow:inset 0 3px 3px rgba(0,0,0,.3)}

.promo-box__heading{line-height:1.2;font-size:1.5em;font-weight:700;margin:1.25em 0 0}

.promo-box__button{background:var(–promo-highlight);border-radius:11px;padding:.8em 1em;font-size:1.15em;text-shadow:1px 1px 1px rgba(0,0,0,.3);text-decoration:none;color:#fff;font-weight:700;display:flex;width:100%;justify-content:center;transition:all .2s ease-in-out}

.promo-boxbutton:active,.promo-boxbutton:focus,.promo-box__button:hover{border-bottom:none;cursor:pointer;border-color:#dadada}

.promo-boxbutton:active,.promo-boxbutton:focus{outline:0!important;box-shadow:inset 0 3px 3px rgba(0,0,0,.3)}

#Inspiring #Web #Design #Showcases #Smashing #Magazine

TechRuum Inc is a world class information technology company committed to use the best business practices to help companies develop the capabilities needed to compete in the global market. TechRuum partners with its clients to achieve success in the global markets with its specialized expertise in providing Onsite, Offsite and Offshore IT services and solutions. TechRuum’ core competency lies in enabling its clients to reduce the cost and complexity of deploying information technology while ensuring reliability, scalability, and manageability.

Back To Top