return to homepage
Feb 07, 23

Websites I might need to steel ideas from

This list is a work in progress. It might get updated any time.

Hey

Hey makes very liberal use of linear color gradients with a hue shift. The marketing page presents the product casually, using lots of colors, puns and scribbles. This might not be the perfect style any old business product but works very well for them.

Let's take a look at some elements I liked especially. First is their very accessible sandwich menu on mobile:

Sandwich menu on hey
Sandwich menu on hey

The button features text which is very uncommon for sandwich menus. But let's not forget, not everybody has internalized the idea of a sandwich button. This gets around that limitation nicely.

Opened sandwich menu on hey
Opened sandwich menu on hey

There also is much to like about their product presentation. The first overview is a collection of product screenshots arranged over a colorful background. On mobile, only one screenshot is used, showing the mobile version of hey.

This idea I already stole for tisch.im.

Product presentation at hey
Product presentation at hey

Below they have a nice alternating screenshot-text layout with nice colorful backgrounds and text.

Alternating image and text layout on hey
Alternating image and text layout on hey

Lastly, their footer is pretty lightweight and works well on mobile and desktop.

Footer on hey
Footer on hey

The market lingo is a bit too much for my taste, but the design is top notch.

Stripe

While stripe has a standard SaaS-website layout, they incorporate a lot of bolder design elements. They work well together and create a beautiful brand esthetic.

One bold design choice: Letting a colorful animation overlap the websites headline.

Stripes landing page
Stripes landing page

Stripe also has a great attention to details. E.g. the CTA buttons have this subtle animation effect on hover that transforms a chevron into an arrow.

Buttons on stripes landingpage
Buttons on stripes landingpage

Another example is the menu line in the websites header. When hovering over a menu item a popup displays categories and subcategories. Moving between menu items or subcategories does not open new popups but seamlessly transforms the already open popup into the new menu.

Header band on stripes landing page
Header band on stripes landing page

The website features lot's of small animations. In my opinion the website over all is a bit too heavy and can be laggy on less powerful devices. Also, there are too many non-interactive animations that can steal the visitors attention. So, a lot of good, a bit room for improvement, too.

Magic Bell

Magic bell makes masterful use of a simple, yet effective color scheme. Above the fold (view of the site with out scrolling down), the site is very clean. It uses variations of three colors only. I love their typography for headlines. They use "ITCSouvenir" which works really well.

Magic bell landing page
Magic bell landing page

Below the fold I am less impressed, but the first impression is done really well. Funny enough, there are no elements that I'd like to steal explicitly. It's more of the overall aesthetic.

11ty

I like especially one thing about the 11ty website, the ginormous "Documentation" button.

11ty documentation button
11ty documentation button

It is nearly full width and has a very strong hover effect.

11ty documentation button with hover
effect
11ty documentation button with hover
effect

When I first came accross that button, I wasn't sure if it is a bug or not. Below the button there is a tiny explanation, though: "Todd and Bruce said this button should be bigger and as you can see they were right". The button is attention grabbing and brings you exactly where you most likely want to go. Who doesn't hate tool-websites where you have to search for the documentation link?

subscribe to blog
find me on
2023
30 Aug Can You Customize my Startup's Login Page?
06 Jul Internet Rabbit Holes
19 Apr Access Your Password-Manager from Emacs on Linux
07 Feb Websites I might need to steel ideas from
05 Feb Webdesign Resources
2020
20 May Some Bookmarklets I use
24 Feb "What music do you like?"
2019
06 Jun SAYM
06 May Linsenssuppe
2018
21 Dec Deadd Notification Center
2017
26 Sep Mallorca 2017
12 Aug Made with love
10 Aug Color Theme Generator
2016
31 Jul Burger
30 Jun Philipp Uhl
© Philipp Uhl 2020
Hmmm...