30 Jun 2017

Mobile Navigation Strategies

If you build it they will come…that is unless they can not find it. The navigation on your website or mobile application is the map your users have to guide them to all of the features and pages you have built. If you have poor navigation your users may not be able to find what they are looking for and it might as well not exist. In this post, we will go over a few good mobile navigation strategies, how to use them and common mistakes developers make when implementing their mobile menus.

The Side Bar Menu

Let’s start with the sidebar menu. The sidebar menu is a simple solution for navigation on a responsive website. The sidebar menu starts off as a top bar navigation, once the browser size reaches a specified width the navigation transforms into an icon that can be clicked to toggle a sliding menu. This menu is easy to install and customize.

Below is an example of the sidebar menu.
Sidebar Menu



  • The sidebar menu allows the user to view a portion of the content on the page they have navigated to without closing the menu. This happens because part of the page is exposed when the menu is opened.
  • AngularJS Material SidebarIf the menu you are using has sub-menu items the sidebar menu is probably the best fit for your project. The sidebar menu allows for drop downs to be embedded in the menu. This is why the sidebar is the menu of choice for many UI framework websites like Angular Material that  have a large selection of menu and sub-menu items.
  • The sidebar menu is an easy transition from a full web menu, once the screen is too small for all of the menu items to fit the breakpoint can be set to transition the UI to just a menu icon.

Common Mistakes

  • Setting the breakpoint too late can ruin a users experience on your site. If you are using the sidebar for responsive web design make sure that your media queries are set to trigger the menu before your menu options run out of room and collapse to the next row. In the example below, the break point is set to small and the menu overflows out of the menu bar. To avoid this make sure you test at different screen sizes. If you add additional items to your menu be sure to go back and test again.

Sidebar with incorrect breakpoint

Sidebar with correct breakpoint

  • Camouflaging the menu icon is a common mistake designers make when using the sidebar. If your menu icon does not stand out or if it not in a common location the user may not see it. In the example below the menu icon is one of the last things your eye sees. Your eye is pulled to the left corner where the menu button normally is. The extra icons and dull color also contribute to the lack of visibility. Incorrect positioning and sidebar menu focusCorrect positioning and sidebar menu focus
    To avoid this, remember that in the hierarchy of your design the add button and the menu both need to be seen. You should move the menu to its traditional position where users will expect it. You can also make it a bit larger and brighter so it can be seen clearly within the rest of the design.

UI Frameworks with Sidebar Menus


Drop Down Menu

Next we will look at the dropdown menu. The dropdown menu is a very common solution for mobile menus. The transition to this design is similar to the sidebar. When the menu items no longer fit in the menu bar an icon replaces the text.This is one of the most commonly used mobile navigation choices because it is easy to create and mobile users have become accustom to this type of menu. You can see an example of the dropdown menu below.

Dropdown Menu

  • The dropdown takes up less space than the sidebar menu so users can see more content while navigating. This is why the dropdown is good for smaller amounts of menu options.
  • The dropdown menu has more options for placement. It can come from the center of the page, or pop up from the bottom. The sidebar is limited to the left or the right.

Common Mistakes

  • Dropdown MenuCutting off the menu is a big mistake that can be made with a dropdown menu. Be sure to give your menu enough room to show all of the navigation options. Just like any other element in your design the dropdown needs proper spacing, if all of your other graphical elements are in a grid made sure your dropdown follows the same rules.

UI Frameworks with Dropdown Menus

Tabs Menu

Last, let’s take a look at the tabs menu. The tabs menu shows a few menu options with the currently selected option highlighted or underlined with an accent color. This menu option is good for small menus or for sub-menu options on a main menu page. It is not recommended to use this menu on mobile for your main menu if you have more than four options. This menu requires a minimum amount of space to view the menu options. This style of menu has become popular on applications where multiple sub-pages can be scrolled through on a main page in the application.

Tabs Menu


  • The main advantage to using the tabs menu is its simplicity. Applications with just a few options do not need to waste space with large dropdown or sidebar menus when you use this option.
  • The tabs menu does not cover any of the content when you are navigating, so the user can see all of the pages content as soon as they arrive.
  • The most common use case for the tabs menu is to navigate through sub-pages or different types of content in a section of the application. This is used alongside with another menu option like the dropdown or sidebar. You can see examples of this when you look at popular applications like Yelp or Venmo.

Venmo and Yelp Tabs Menu Examples

Common Mistakes 

  • The most common mistake people make with this menu is putting in too many options. If you have too many options on mobile you risk having your menu get cut off.

UI Frameworks with Tabs Menus


There are a number of options to choose from when you are creating the navigation for your project. You need to keep in mind how many options your user will be choosing from, how important it is to keep the page content visible when navigating, and the screen sizes your users will likely be using. These considerations will allow you to choose the most effective navigation for your mobile application.

Share this
16 Jun 2017

Using PhoneGap Plugins to Create a Splash Screen Part Two: Using PhoneGap Plugins

PhoneGap Plugins Logo
Part one of this blog series, Using PhoneGap Plugins to Create a Splash Screen Part One: Creating a Splash Screen discusses how to design splash screens for mobile applications. In this part of the series you will learn how to use PhoneGap plugins to apply the screen you created. PhoneGap provides a series of core plugins that help developers take advantage of a mobile device’s native features such as the camera or ability to vibrate. There are three places you can look for pre built plugins. You can search npm, git repositories or PhoneGap’s plugin repository. In this post you will be using a plugin from PhoneGap’s base repository, the splash screen plugin.

Plugins need to be implemented differently for each platform so you need to be sure to read into how to how apply the one you have selected correctly for the device you are working on. In this example you will be installing the splash screen plugin on an android device.

Step 1) Importing your Plugin

You will import the plugin that you have chosen into your config.xml file. You need to include the plugin name, spec, and source. The spec is your plugin version, your plugin will work without this, but it is highly recommended that you include the version. The source for plugins from the PhoneGap core where the splash screen is located will be “pgb”. The import script for the splash screen will look like this once all of the parameters are added:

<plugin name="cordova-plugin-splashscreen" spec="~4.0.2" source=”pgb” />

Some plugins require you to add in a reference to the javascript files. This is not the case with most PhoneGap core plugins like the splash screen plugin. If you are required to reference the files you will not be adding them into your project when you upload it on PhoneGap Build. The files will be automatically injected by PhoneGap and adding them in advance will cause problems with your build. Read the documentation for your plugin if you are using a different plugin, as mentioned before each one is different.

Step 2) Adding Your Platforms

Once you have loaded in your splash screen plugin you will need to specify the platforms you are targeting. In this example you are using Android. To do this you will add the following code to your config.xml file.

 <platform name="android"></platform>

If you would like to add in other platforms the format is the same. There is no limit on the number of platforms you can use.

Step 3) Add Your Screens

The step is to add in your splash screen files. If you read part one of this post you will be using the png files you created. Nest them into your platform tags. You will have one default screen and a landscape and portrait screen for each pixel density.

    <platform name="android">
        <splash src="splash.png" />
        <splash src="res/screen/android/splash-port-ldpi.png" platform="android" density="port-ldpi" />
        <splash src="res/screen/android/splash-port-mdpi.png" platform="android" density="port-mdpi" />
        <splash src="res/screen/android/splash-port-hdpi.png" platform="android" density="port-hdpi" />
        <splash src="res/screen/android/splash-port-xhdpi.png" platform="android" density="port-xhdpi" />

        <splash src="res/screen/android/splash-land-ldpi.png" platform="android" density="land-ldpi" />
        <splash src="res/screen/android/splash-land-mdpi.png" platform="android" density="land-mdpi" />
        <splash src="res/screen/android/splash-land-hdpi.png" platform="android" density="land-hdpi"  />
        <splash src="res/screen/android/splash-land-xhdpi.png" platform="android" density="land-xhdpi"  />
Step 4) Customize Your Splash Screen with Preferences

Now it is time to customize your splash screen. The splash screen plugin gives you a few different preferences to work with. The following are a few examples that you can use.

The SplashScreenDelay lets you add a delay to the amount of time before the splash screen is hidden. This is set in milliseconds. It is useful when you want to expose users to your branding but your application has little or no loading time. This can also be set to 0 to force your screen to automatically hide.

 <preference name="SplashScreenDelay" value="3000" />

FadeSplashScreen and FadeSplashScreenDuration
FadeSplashScreen can be set to true to give your screen a fading effect as it transitions to the application. You can set how long this transition takes with fadeSplashScreenDuration, also set in milliseconds.

   <preference name="FadeSplashScreen" value="true"/>
   <preference name="FadeSplashScreenDuration" value="750"/>

ShowSplashScreenSpinner and SplashScreenSpinnerColor
Lastly you should add your spinner. You learned about the parts of a splash screen in the first part of this series. Now is when we add in our spinner. This is set with ShowSplashScreenSpinner. You can also change the color of your spinner to go along with your application by using SplashScreenSpinnerColor.

   <preference name="ShowSplashScreenSpinner" value="true"/>
   <preference name="SplashScreenSpinnerColor" value="#ffffff"/>

Step 5) Add the Splash Screen to your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project. Once you have done this click on Rebuild all. Download the new version of the project to your android device. Open up the application on your phone. You will notice you are now being greeted by your new splash screen!

Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate-splashScreen.apk

Share this
20 Apr 2017

Using Phonegap Plugins to Create a Splash Screen: Part One

A splash screen is a graphical element that appears when an app launches or is loading. The basic splash screen usually contains a logo, the application or brand name and a loading bar. Splash screens are more of a necessity for larger applications that take time to load. Having a user look at a blank screen while waiting for the app to load increases their perceived wait time. If you have a smaller application with less loading time, splash screens are a good opportunity to expose users to your logo and improve brand recognition .


The following is part one of a two part series on creating a splash screen for your mobile application. In this section you will learn about the elements included in a splash screen, how to design a splash screen, and the design files you will need to implement your design on an active mobile application.


If you have been following the RealEyes blog series on building mobile applications using Google Material and Cordova PhoneGap this post will continue to add to the real estate rating application you have been building. If you have not been following along, and would like to learn to build a mobile application using Cordova PhoneGap and Google Material the following are links to the previous posts:

If you have not been following the RealEyes blog series on building mobile applications using Google Material and Cordova PhoneGap this is still a great reference for improving your mobile application with a well designed splash screen.


Step 1) Knowing the Design Elements

The splash screen has two main objectives. The first objective of the splash screen is to let the user know that the application they are trying to launch is loading. The second objective is to give the user extra exposure to your brand. You are going to accomplish these goals with the two key elements of the splash screen, the loading bar and the brand logo. Google also suggests that you expose placeholder UI. Placeholder UI  includes core structural elements such as a status bar to give a smooth transition into the application. Extra elements that can be added into the splash screen is the brand or application name, brand slogan, the application version number and any other graphical elements that increase brand recognition. When choosing what to add to your splash screen remember to keep it simple, less is better.

Design Elements :


  • Logo
  • Loading bar
  • Placeholder UI


  • Application name
  • Slogan
  • Version number


Below are some examples of splash screens:



Step 2) The Design Specs

When designing splash screens you need to account for different screen sizes as well as different orientations. Therefore every screen size qualifier should have two different images, one for landscape and a second for portrait. In the demo you are looking to create an app for an Android device. If you are building for other devices you can find the design specs here. All files should be in a png format.



Name DPI Portrait Landscape
XHDPI 320dpi 720px X 1280px 1280px X 720px
HDPI 240dpi 480px X 800px 800px X 480px
MDPI 160dpi 320px X 480px 480px X 320px
LDPI 120dpi 200px X 320px 320px X 200px


Step 3) Designing your Splash Screen

Now it is time to put it all together! You are going to build a simple splash screen for the real estate application you have been building over the last few posts. You will use the application logo (the design you are using for your icon), the app name (Real Estate Rater), and the color scheme from the app with a light texture. The placeholder UI and the load bar will be added and configured when the design is implemented in PhoneGap with your plugin. When you create your design you need to remember to use a vector image so you can easily recreate the image in multiple size files.

You now have a set of splash screens that are ready to be added to any android application! If you would like to learn how to implement your new design in a PhoneGap project using the splash screen plugin, look out for our next blog post: Using PhoneGap to Create Splash Screens: Part Two

Share this
11 Apr 2017

Creating a Product Icon for Your App with Material Design and PhoneGap

You and your team may have spent months developing a great application. Now it’s time to put it on the market for users to discover. In a large sea of apps you need to make a great first impression to stand out from the crowd. A well designed product icon will help you accomplish this. The product icon is the first and sometimes only part of your app a potential user will see. The icon you design needs to represent your app in a clean, eye catching fashion. It needs to give potential users an idea of what your app does while gaining their trust with a quality design.

In this post we will be showing you some guidelines to follow in order to create a well designed product icon. We will be using Google Material design standards along with PhoneGap to complete our project. If you have been following our blog we will be using the real estate reviewing app that we have been building over the last few posts Creating Cross Platform Mobile Applications with Cordova/PhoneGap and A Comparison of Material Design Frameworks. If you have not been following our blog you can still use this as a guide for creating an icon for your own project. Let’s get started!


Step 1) The Concept

First thing you need is a good concept. Your concept should represent your app simply. It should give the user an idea of what it does before they ever click on it.

This app is about rating and reviewing real estate so putting the shape of a house in the icon will associate the app with real estate. Adding a star will give some indication of the purpose of the app since users have become accustomed to the star rating system. These two shapes will give users a sense of what the app is about without ever opening it.

Step 2) The Design Specs

One you’ve established an exciting concept you may want to jump into creating it. First, however, you should look up the specs for the icon. You’ll need to create the same icon a few different times in multiple sizes in order to account for different screen pixel densities. This means your icon needs to be scalable and for that reason, using a vector graphic is highly recommended. The following is a chart of the naming conventions, dpi, and sizes for the Android icons that you would need to create.

xxxhdpi 640dpi 192px X 192px
xxhdpi 480dpi 144px X 144px
xhdpi 320dpi 96px X 96px
hdpi 240dpi 72px X 72px
mdpi 160dpi 48px X 48px


Step 3 ) Designing the Icon

Now that you know the sizes and naming conventions required, it’s time to start designing. For this, you can use Google Material’s guidelines to create the icon. These design guidelines are already implemented through the app via the Materialize framework. It is good practice to sync the design of the icon with the design of the app. After all, the icon is supposed to be a preview of the rest of the application.


As discussed in our post Initial Thoughts on Google Material Design Material design is based around the concept of digital design inspired by the physical world. The same concept is applied in product icon design. Product icons like most good design is based on a grid system that you can see below. Along with this grid system, a keyline grid to guide for pre-rendered base shapes is provided. You can use these guides when designing the icon.

The Grid and Keylines

Google Material Design - Grid and Keylines


Get Your Base Down

To start, add the base lines to the grid to form the outline of the icon design. Once you have a blueprint of what is being designed, start putting the pieces into place. First, fill in the background. In this example the main color in the application, teal, is being used. Remember to keep your color scheme consistent to what you are using in your app. The background will have two additional parts. The top of the icon will have what is called a ‘tinted edge’ this is the original color mixed with white. The bottom will have what is called a ‘shaded edge’. This is the background mixed with a darker color to give the appearance of depth to the icon. After the background is in place, color in the foreground.

This is the house shape using white for the foreground.
Icon step 1 - Teal Background and White House

Add Some Color
Next, add some spot color to the icon. This is a highlight on your icon using a small amount of a secondary color. We are going to use yellow on the star as the spot color.

Icon Step 2 - Spot Color - Yellow Star

Give the Icon Depth
Lastly, give the icon elements depth by adding shadows. Imagine a light source coming from the top left corner of the icon at a 45 degree angle. Add a soft shadow from the foreground onto the background to separate them.

Here is the final result.

Icon Step 3 - Adding Depth

You can also try experimenting with different background shapes using the same guidelines. Have fun!

Icon Design Experimentation - Round Background


Step 4) Create and Name Your Icon Files

Use the chart in step 2 to create your icon files. Use the name in column 1 the dpi in column 2 and the width X height in column 3. Save your files as pngs. Once you have all of your files created, add them to the config.xml file in your PhoneGap app.


Step 5) Add the Icon to Your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project.

PhoneGap Build - Update Code

Once you have done this click on Rebuild all. You will see your icon replace the default PhoneGap icon in your project space. You now have a brand new product icon to represent your app! Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate.apk

Share this
08 Nov 2016

A Comparison of Material Design Frameworks – Samples

A few weeks ago we looked at a few different UI frameworks (Angular Material, LumX, and Materialize) that use material design elements. We compared the Maturity of the library, technologies they use, their design features and the size of each after minimizing the project. You can see the results of our comparison here . Today we are going to create an app to put them to use. Then, we will demo the results. We will create the same app three times in each of the frameworks to see the visual difference. From there we will see how easily each framework is implemented and the design differences of our final project when the app is complete.

We will be creating a real estate review app. This app will allow you to write a review on a property that you have just visited. We are keeping this application simple so we will only let the user see one property. We are going to to mostly use the prebuilt components that come with each framework and customize their styling as little as possible to give you an idea how each framework looks out of the box. This will result in our applications looking slightly different in order to demonstrate the available components and how the untouched version of each framework’s components fits in with the project as a whole.

The requirements for each app are as follows:

  • It will need to have a title bar with the name of the property
  • An image of the property will need to be displayed
  • There will be inputs to write the user’s name and a review
  • A button will exist to toggle from the property to a list of its previous reviews.

Lets see how each framework did when put to this test!


imgresWe found material to be the quickest of the three to set up. It was done quickly with an npm install and linking the dependencies in the index of an Angular project. Materialize is a very basic framework and most of the prebuilt elements could be copied and pasted right into the application without much work. I was able to put the UI for this demo together much quicker than the LumX and Angular Material demos. Subjectively it also had the cleanest out of the box UI. Materialize did however fall short was on the javascript and Angular side, there were no prebuilt Angular helpers in any of the components so they all needed to be added custom to the project.

View Project on Github

Pre built components used for this project:

  • Card with reveal
  • Card Title
  • Collections items
  • Button with waves effect

Time from setup to completion:

  • 2 hours and 15mins


  • Angular did not come with the framework and needed to be installed


  • Really easy to use
  • There were many UI components ready to use and they all dropped right into my project beautifully.


Angular Material

angularmaterialAngular Material was also very easy to set up. They have very detailed documentation alongside the framework that gives you the step by step process of how to get going. Once my project was set up I had a bit more of a challenge finding the right UI components than with Materialize to quickly get my application built. In Materialize one of the prebuilt components that they offer is a card with a reveal button, that was perfect for toggling from my add review section to my reviews. In Material I had to get creative and use the sideNav component to reveal the reviews.

View Project on Github

Pre built components used for this project:

  • Card with action buttons
  • Input
  • Primary raised button
  • List with icon

Time from setup to completion:

  • 2 hours and 45mins


  • The pre built components come with quite a bit of bloat in the code that you need to chip away at to use them in your own project


  • Great documentation on how to get set up
  • Lots of components to choose from
  • Angular Included on install




lumxLumX was also quite easy to set up. It had clear documentation and multiple ways to go about getting started. LumX like Angular Material came with Angular as a dependency and had Angular helpers built into some of the components in the demos. Having Angular sped up the process of getting the app running. I do however think this framework fell a bit short on the UI side. The list of prebuilt components did not have as many useful variations as Angular Material and Materialize. I also could not find a component to perform the same functionality as the sideNav from Angular Material and the card with a reveal from Materialize, so I used a ng-hide to toggle the views between add review and read reviews. The Components that LumX did provide were easy to integrate and looked great.

View Project on Github

Pre built components used for this project:

  • Card with image on top
  • Raised button
  • Text field
  • List with icon

Time from setup to completion:

  • 3 hours


  • They did not have a component I needed to reveal the previous reviews like the ones I found in Angular Material and in Materialize


  • The UI components they had were easy to use
  • Project setup was quick because of good documentation
Side by Side

Now that we’ve discussed the pros and cons, lets take a look at implementations of the same app with these three different UI frameworks side by side.

Review Form

Previous Reviews List



In conclusion if you want to build a quick app that incorporates Google’s Material design all three of these frameworks are great options with their own pros and cons. I personally enjoyed using Materialize the most for this small app. It was the easiest to implement and the pre built components made it so I had to do very little work to build a great looking app.

Reference Links:
Share this
28 Sep 2016

A Comparison of Material Design Frameworks

Responsive design and material design are hot topics in front-end development and User Interface design. In 2011 Blueprint, the first CSS framework came out and revolutionized the way websites were built. Less than five years since the redesign framework - blueprint logolease of Blueprint there has been an explosion in the number of front end frameworks for developers to choose from. Frameworks now need to be innovative and keep up with the latest design standards. They also have to utilize different stacks of technologies in order to differentiate from their competitors. In this modern world that is full of choices we now need to look closer at our options, sift through the clutter and decide what the right framework is for our situation.

When deciding what framework is best for a particular project we need to first take into account why we are using a framework to start with. In our case we are using a framework to save time, unify our design elements and optimize our project scope by cutting out the task of repeatedly writing large amounts of custom code. In order to find the best framework to effectively achieve these goals we have come up with the following list of criteria to analyze.


  • Maturity of the library
  • Other technologies used by the framework
  • Ease of implementation
  • Design features
  • Size of the framework after minimizing 


We mentioned earlier that there are quite a few frameworks in circulation for us to choose from, talking about all of them in one blog post would be confusing and less effective. As a team of developers that often works with Angular.js we decided that the framework would need to either already implement Angular in its stack of technologies used, or play well with it. Secondly, we considered strength of design, so using Google’s new Material design is a requirement as well. Lastly we looked to see what the most popular frameworks being used by our fellow developers are and took into account their reviews. Our conclusion was to look into Angular Material, LumX,  and Materialize. The following is a breakdown of what our research found.


Maturity of the Library

The maturity of the library refers to the size of the community supporting the framework and how long it has been around. The Internet is a quickly evolving place and over time things become outdated if they aren’t constantly updated. We need to be sure that our framework will have people maintaining it in the future.


Angular Material
Angulardesign framework - angular material logo Material was first released on Github in 2014 under the MIT license . Since then the framework has had 66 updated releases coming from its 176 Github contributors. The documentation includes a website with Demos, API references and version release notes. Although in alpha, there is a version of this UI framework for the newest version of Angular, Angular2. There is still the need to port some more components, but you can keep up on progress here. Angular Material is also supported internally at Google rounding off support making it a mature and well supported.


design framework - lumx logoLumX was first released on Github in 2014 under the MIT license . Since then it has had 162 updated releases coming from its 13 Github contributors. The framework also has additional resources provided by a website that includes help with setting up, code demos and information on how to contribute.


design framework - materialize logoMaterialize was first released on Github in January of 2015 making it the newest of the frameworks that we are reviewing. It was originally developed by four graduates from Carnegie Mellon University. Materialize like LumX and Angular Material is also under the MIT license. Over the last year since release it has had 24 updated releases coming from its 126 Github contributors.  There is also a website for the framework providing additional resources very similar to Angular Material’s. The website features code demos, documentation on getting started and a live chat where you can interact with other developers who are currently using Materialize.


Other technologies used by the framework

This is where we take a look at any CSS preprocessors, fonts, icon libraries, or other frameworks that are used. Using other technologies can strengthen a frameworks effectiveness and design. Additional frameworks can also weigh down a project that does not need them. When choosing a framework this is where you need to spend some time comparing the project needs to what you are getting from the framework. To give you an example you do not want to implement a framework that comes with Angular.js for a static one page HTML site that does not require any sort of JavaScript. Let’s look at what each framework is offering us.


Angular Material
Angular Material is the biggest of the three libraries that we are comparing. It uses two main JavaScript frameworks jQuery and Angular. Unlike LumX and Materialize, it also includes some of the subsets of the main Angular library such as Angular-animate and Angular-message by default. The framework’s website also suggests that if they are useful to your project ngMessages , ngSanitize  and ngRoute can easily be applied to your stack. Using all of these frameworks can be a plus when working on a larger multidimensional project, but they can also bog down a small project where they are unnecessary. Angular Material also includes the basic icon and font sets used with Material design, Roboto and the Material Design icon set. With this framework there is a large list of dependencies to go along with the few we mentioned. Click here to see the full list.

LumX is not as robust of a framework as Angular Material, but it still includes both jQuery and Angular. Instead of using Angular-animate for transitions the framework utilizes Velocity. For a date picking element it requires you install Moment.js. This framework uses Sass and Bourbon for CSS preprocessing along with variable mixins for every color in the Material UI Color palette. To view an up to date list of the dependencies required by LumX  Click here.


Materialize in the smallest of the frameworks we are comparing in this post. It is the only one of the three that does not come with Angular as a dependency, although it is easily implemented. This framework uses jQuery, CSS with Sass and HTML. Google Material’s recommended Roboto Font and Material Icon sets are also included. Click here to get the complete up to date set of dependencies from the Materialize Github page.


Ease of implementation

bower-npm-logosIn the beginning of this post we mentioned that saving time is one of the main reasons that we are using a framework in our project. If a framework is time consuming to install or is lacking detailed instructions we could end up spending unnecessary amounts of time figuring out how to get started. To avoid spending that extra time lets take a look at each framework and see what they have to offer for helping us get started.


Angular Material

Angular Material can easily be installed through either npm, JSPM, or Bower. There are also a few tutorials and Codepen examples you can play with if you are new to the framework and need additional resources. If you are using Angular2 then you can install Angular Material2 with npm and the Angular2 cli. There are a few extra steps for Material2 that can be found here on the Material2 website.



LumX can be installed through npm and Bower. If you do not want to use npm and Bower to install the framework the website gives you a step by step guide on how to install it manually.



Materialize offers two different versions that can be downloaded and installed. The first version is the simple version with no CSS preprocessor or the second option that includes Sass. The framework can be downloaded from the Materialize website and easily installed with npm.  Detailed installation instructions are included on the site under the download buttons. If you want to get a quick start there is also two prebuilt templates that can be downloaded that are already set up and ready to customize.


Design features

design framework - materialdesign_introductionWe are looking at three frameworks that all apply Material Design theory,  this gives all of them a similar aesthetic. All three of these frameworks use Google’s Roboto font, the Material icon set, the Material Color palette and Material’s guide to motion. In this section we will look closer at how these design elements are implemented and how easily they can be customized. Responsiveness  is no longer an optional feature in a framework and is one of the most important design features we work with. To dive deeper into responsive design support we will be examining how each framework handles its grid on different size screens.


Angular Material
Angular Material comes with a large selection of prebuilt services and directives that take care of many of the basic components we find ourselves rebuilding in projects. Some examples are lists, dropdown menus, and formatted lists. Click here for a complete list of prebuilt services and directives. This framework makes using the Material color palette easy with custom theming. The developer picks ‘primary’, ‘accent’ and ‘warning’ colors; once configured Material injects the color theme through the project. One of the unique design options in Angular Material is the option to configure multiple sets of color schemes in one project.

Responsive design is handled in Angular Material through the use of layout containers and transition classes. The layout containers hold the grid of the project as device screen sizes adjust. The container classes are used in order to hide and show content depending on the size of the screen it is viewed on.


LumX uses SASS and Bourbon preprocessors this allows developers to easily work with and change CSS styling. To make following Material style guidelines a more fluid process the framework offers variables for the entire Material UI Color Palette library to be mixed in with designs. Like Angular Material this framework uses a color scheme that has a primary, accent and warning color. To customize the default theme you need to go in and override the default settings in the main SCSS file, although a much less desirable way to handle custom theming than what’s offered by Angular Material.

LumX handles responsive design through the use of Flexboxes and Mixins. Flexboxes work similarly to layout containers in Angular Material to hold the grid of a project as the screen scales. Mixing are used for different media query sizes to show and hide different elements in a project on different screen sizes.


Materialize like Angular and LumX also offers a large list of prebuilt design elements that can be found on their website. One of the key features of Material design is the use of a 3d space, where the pieces of an application or website are no longer flat, but are now layered on one another. The framework includes a unique class that lets designers decide where in that 3d space an element exists. This feature is the shadow, and it is controlled by the z-depth class.

The z-depth class gives the element a new z-index and a more or less defined shadow based on where it exists in relation to the user.  When looking at customizing colors in Materialize you have a few options. If you are using the stripped down version of the framework you can can access the Material color palette variables and apply them to your design. If you are using the version that includes SASS you will also have access to mixins to reuse customized versions of a color from the palette.

design framework - shadow
The framework has a number of tools to help developers with responsive design including columns, rows, offsets, push and pull classes, and a detailed guide on setting up responsive layouts. The columns and rows work similarly to the way Flexbox and layout containers do in the previous frameworks. The offsets are special areas used to hold space in a grid column as the screen adjusts. The push and pull classes are  used to hide and show elements on different screen sizes. Materialize offers an additional resource for mobile devices, a plugin can be used to implement drag and swipe gestures on a user’s phone.


Size of the framework after minimizing

The last thing we are going to take a look at is the size of the framework after minimizing. We got the following information by downloading the frameworks installing their dependencies and then compressing the file.


Angular Material

  • 81.4MB



  • 19.9MB



  • Without Sass 1.2MB
  • With Sass 1.3MB



We now have the information we need to make an informed decision on what framework will work best for our project:

  • Reviewed the maturity of the framework to see which has been around the longest and the level of community support provided.
  • Analyzed the technologies each framework has taken advantage of to offer us additional support if we need it.
  • Tested how easy each framework is to implement so we do not spend too much time trying to get our project started.
  • Assessed the design features each framework was offering us for customizing their prebuilt elements and for assisting with responsiveness as we transition through different screen sizes.
  • Downloaded each library, installed its dependencies and minimized it to see how it stacked up against the others in regards to size.

Based on the above, what we have concluded that if you are working on a project that needs a few interactive web elements and a solid design structure based on Google Material then Materialize is a great choice. It is a lightweight framework that can be installed easily, it even has template pages if you need to create a well designed website quickly.

On the other hand, if you need some extra Angular support, but want to keep your design framework on the lighter side Lumx is a great choice. It has extra features that Materialize does not include, but it is lacking in the strong support system and easy customization options that Angular Material provides.

Finally, there are many benefits to using Angular material if you can incur the size of the framework. When you create a larger project that needs a framework that works alongside your Angular code it is tuned to work with Angular. It is also the only framework of the three that offers a version of the framework for Angular2, the latest version of Angular. There are Codepen demos of all of the elements this framework provides that makes getting familiar with it without installation easy. The option to create multiple configurable themes in one project allows it to be the most easily customized framework of the three as well.

There are a lot of frameworks to choose from. Figure out the specifications and requirements for your project and match it with the framework that fits best!

Share this
16 Dec 2015

A First Look at Project Comet

2016 is just around the corner so we decided to do a bit of research to see what kind of exciting new changes in the world of UI/UX we had to look forward to in the new year. We found a lot of the usual New Years talk about upcoming design trends and predictions, but one thing in 2016 stood out from from the rest: Project Comet

read more
Share this
02 Oct 2015

Material with LESS

In this post we are going to create a dynamic style-sheet that can be altered to fit any web application project while keeping inline with Material standards. This project is a great way to familiarize yourself with Material design while creating a style-sheet that can be recycled over and over again to create unique looking designs by just changing a few lines of code.

read more
Share this
24 Sep 2015
21 Aug 2014

© 2019 RealEyes Media, LLC. All rights reserved.