Websites We Like: Whimsical

Whimsical: A dazzling flowchart, wireframe and mind map creation application. Recently, I found that its website design, especially the product page, is excellent. For example, a page introducing the mind map function can experience the product directly on a marketing website.

Isn't it very clever? All this is thanks to<canvas></canvas> The power of elements. Of course, you can also use SVG to achieve similar effects, but when choosing SVG and<canvas></canvas> There is always a blurred boundary between them.

However, in terms of design, I like this idea of ​​"advertising is product". I also like to abandon the common registration process and directly show the value of the application to users. Most products require users to register and complete a newbie guide to experience its value, but Whimsical is not the case; the ad itself is the product!

Also, I really like the design of this website. Each product feature has its own unique theme, making the product demonstration more eye-catching when browsing. It's a small detail, but it makes me want to explore the rest of the site and see what fine UI elements there are.

I also like the actual examples where you can jump directly to wireframes. There is no marketing here about how the application revolutionizes or how it can change the art of mind maps. It's all about showing you the product itself first.

but! Let's go back to the navigation: Not tagging those icons is an interesting decision. It's beautiful, but what does each icon mean? Chris discussed this question in an article before: Are icons content? That is, the debate over whether to mark icons has been going on in the software design field for decades. Jef Raskin (one of the designers of the original Macintosh of the 1980s) notes in his excellent book Human-Computer Interface that we should never leave unmarked icons. Maybe that's a bit too much, but in this case I don't think it's bad to mark these icons because they are product-specific and mind map icons aren't something we can see every day.

Whimsical's typography is also very interesting! They use DIN Next fonts, which, at least to me, is slightly off-the-top with the visual design. DIN Next is a font that is easily overlooked. It is designed to take the lead and let the content take center stage:

But I think the success of the font is its bold visual design—wavy lines, floating circles and crescent shapes everywhere, all appearing in the UI. That being said, maybe when your UI visuals are so strong, you don't want the font to be too prominent, I mean strong in a positive sense.

However, designing such an interface requires consideration of the accessibility of colors. Stacie Arellano wrote a previous article about why color contrast is so important:

You can use mathematical methods to know if there is enough contrast between the two colors.

W3C has a document called Web Content Accessibility Guide (WCAG) 2.1, which contains successful contrast guides. Before we start doing math, we need to know the contrast ratio scores we want to reach or exceed. To obtain a passing score (AA), the contrast ratio for most texts is 4.5:1 and the larger text is 3:1.

I won't check Whimsical's numbers here, but it's worth paying attention... especially when the UI has a lot of white text on a bright and colorful background. I've made this mistake many times and it's a very easy place to go. But if the user can't read the text in the UI, that's a big problem.

In short, Whimsical's product website is refreshing. It has a strong visual impact and shows that the value and function of the product can be conveyed through "demonstration" rather than "explanation".

This reminds me of a question: Which website you visited recently attracted your attention?

The above is the detailed content of Websites We Like: Whimsical. For more information, please follow other related articles on the PHP Chinese website!