LifeinTECH

When developing custom applications, user experience is critical. I’ve seen some technically great applications fail to achieve their user adoption goals due to a perceived poor user experience.

Unfortunately, achieving a great user experience is notoriously difficult and time consuming, with many variables to consider. Although there is no silver bullet, I do believe there are ways to ensure that you build from a solid foundation as well as accelerate development.

That’s where selecting the right visual language and frameworks / libraries can help!

Material Design

Material Design is a visual language from Google, which includes standards, principles, patterns and best practices. If you’ve ever used a modern Android device, you are probably already familiar with Material Design.

The video below shows Material Design in action.

If you build an application following the principles of Material Design, you can take some comfort in the fact that it is already in use by over one billion people around the world and backed by a passionate community (as well as Google).

As a result, I would certainly recommend that you make a visual language such as Material Design your minimum starting position.

However, Material Design doesn’t help you actually develop your applications. This is where frameworks and libraries can act as an accelerator for development teams, reducing the amount of custom code, whilst improving consistency and quality.

Google have made available Material Design Lite, which is the official implementation of Material Design components in simple CSS, JS, and HTML. Unfortunately, Material Design Lite is a tiny part of the Google product and service portfolio, therefore it has not matured as quickly as some open community offerings.

Materialize Framework

Materialize is an open community responsive framework based on Material Design (covered by the MIT License). It’s arguably one of the most impressive Material Design frameworks, which includes both CSS and Sass files, JavaScript (jQuery), Material Design Icons and the Roboto font.

The Materialize documentation is also simple to consume, with lots of code examples, as well as being backed by an active GitHub community.

Visualforce Materialize Starter Kit

Materialize does offer a couple of HTML templates, however they are very basic and only really useful for developing simple microsites.

I wanted to provide a more comprehensive starter kit, as well as make it available as a reusable package for Force.com.

The video below shows the Visualforce Materialize Starter Kit in action:

I’ve also included a few screenshots, highlighting the responsive design.

Home Screen:

Cards:

Content Components:

Input Components:

You can find the Visualforce Materialize Starter Kit on GitHub (pull requests welcome).

To get started, simply login to your org and click the “Deploy to Salesforce” button. Once complete, assign the MATE_User Permission Set and launch the “Materialize Starter Kit” from the app menu bar.