What is Clarity UI
Clarity UI is what they call a "Design System". Basically an award winning bunch of intricate CSS and Angular components. Well, while this simplification is not exactly fair, it still boils down to the fact that Clarity sets up on top of Google's Angular framework and creates a holistic user experience. Clarity standardises UI design and has best-practise UX guidelines in place how to structure HTML elements such as textboxes, select menus, buttons and the like. This takes a lot of burden off the developers shoulders.
More important though, you can create a web-based app that guides the user through a wizard for example, and it is a tremendous help when it comes to validating user input and structuring the content that surrounds it.
I have not had the need to adjust the design, but if you just stick with the pre-formatted design Clarity provides, your app ends up looking like a VMware product, because:
VMware Clarity
VMware has built this framework as a basis for most of their products, namely vSphere Client, vCloud Director, Log Insight and more.
Design
As I said before, you may want to adjust font use and colors, but you should stick with what they have figured out in terms of element placement, margins, contrast etc. Clarity UI depends on Bootstrap - but if I recall correctly - in the long run, they want to come up with their own library as a foundation their general structure, their breakpoints for mobile use and so forth.
Build apps, not marketing content
Since Javascript frameworks, such as Angular or React, compile (or build) the content upon the first visit to the page, search engines may have a tough time interpreting this content. There is little you can do in terms of structuring because this is done by Angular. The content runs on the client side. That means, validation of one input versus the another input the user has made a second ago, is only possible because the browser has control.
This is why I would suggest to stick with whatever content management tool you prefer for your marketing content. Here you can optimize SEO to your hearts content, but don't start to create an app - just because you have a simple contact form - and later complain that some search engines don't interpret your content the way you wanted. You can still mix and match the dynamic and server-side stuff, but that's beyond the scope of this blog.
(Although, I'm still curious why the Angular team at Google hasn't managed to make it easier for their own parent's bread-and-butter product to properly index it.)
Read about the server side of Clarity (and Angular, and NPM, and Photon, and...) next week: "My road to Clarity... UI - Part 2"
