Do It Like Google. Angular Material Design Layout Examples

When you are thinking of building a new website, choosing the right tools is crucial. As a design agency, we do our best to find the most suitable solution for each client, from layout to button corners. The tools we use vary depending on the specifics of each project. Here we have picked a few examples of websites built with Angular Material, each one using a different layout style.

So, What Is Angular Material?

Angular Material is a UI component library for Angular JavaScript developers. The library consists of all sorts of components – buttons, icons, grid lists, etc. By using these you can ensure you build a modern and functional website or app that looks put-together. All the components of Angular Material are coherent with Material design system. If you are new to the concept of design system, read this article.

Angular Material was introduced by Google in 2018 and has been steadily rising since then. Don't be confused by a decline at the end of 2020, this is a typical end-of-the-year graph plunge, it is the same for other UI components and web frameworks as well (see this graph).

Angular Material supports different styles of layouts. According to the guidelines of Material Design, the principles of the layout are the following:

• Predictable. Go for proven styles and avoid experimenting with layouts that were not tested with users.
• Consistent. The style of basic components of the layout should be the same throughout the website. Using a components library helps a lot here.
• Responsive. Products have to be adapted to different devices. Angular Material is not responsive by default, but its elements can be used to build modern designs with responsiveness in mind.

Nowadays Google promotes Angular Material to be used by developers in all sorts of products. For the developers, it means that they can rely on the tested system and save time they could otherwise spend re-inventing buttons and icons.

It does not mean that using Angular Material would inevitably turn your website into a Google-style page, with those colorful icons and Google font. The library allows for a high level of customization. You can change parameters of elements to fit the needs and style of different products, use one of the existing Angular Material themes or create your own. 

We have chosen some great examples of websites with different styles and content, all developed with Angular Material and using different layouts.

Grid-based Layouts. Image Lists

Grids consisting of images or cards (image and text grouped together) are very common in Material design. Let’s take a look at some examples:

Standard

This grid is made of items that have no hierarchy. All of the equal size, arranged in a symmetrical pattern. This is how Metalshub, a metals trading platform, displays the goods that they work with. Standard image grid is the most common layout for a large number of pictures.

Woven

The woven image list sets a regular grid without cutting the images to the same format, like when the lists are created by users and therefore have to be flexible with different formats. It works great in the case of Keen, a Google's experimental product that allows users to create their own curated sets of materials.

Keen is a great example of how Material Design adjusts to fit modern trends and get an instant “cool” look. How do they do it? Use only black minimalistic typography, no theme colors. Set the focus on the content: use a modular grid of bright images. Add a strip of running text. Done. The style reminds of a trendy online media website for the younger generation.

Masonry

Masonry is also a grid of images with different formats, but unlike woven image list, the distance between the images is the same, and only the width or height is pre-set. The elements are set like bricks. Take a look at how Keep, Google service of notes, arranges separate notes into a scrollable grid.

Image lists can have a vertical or horizontal scroll. Horizontal scroll is typically used for devices with touch screens. All the ones above are vertical, as the most common option. The following example is interesting: a vertical grid that can scroll horizontally.

Quilted

Here on Google Arts & Culture, the images are scrolled in direction from left to the right. The website is not made particularly for gadgets with touch screens, but the horizontal orientation makes perfect sense when the images are arranged in chronological order.

Some of the cats are shown bigger, so they draw more attention to the images that are harder to appreciate when there are lots of small objects. This way of arranging images creates a clear hierarchy among the objects. It is mostly used for pre-edited content (woven and masonry are the best for peer content).

Google Arts & Culture shows many ways of presenting a number of visual materials: they use all sorts of grids. Here, for example, the group articles and projects in a series of swipeable cards:

Zig-Zag Layout

Smartbnb, a service for rental property management, uses this layout to describe the benefits of their product. Images and text blocks arranged in a zig-zag pattern follow the natural line of a human eye. Just like when reading, we start with the top left corner, move to the right, then right and down, and then left again. This layout is very common on the main pages.

Magazine Layout

Magazine layout is used for pages with lots of information that needs to be placed with high density. The website of Boardroom.Media was built with Angular Material and follows a classical magazine layout with bright color accents.

Complex Lists with Filters

Here is another example of how large amounts of information are represented. Babcock is a dashboard designed to keep track of the vehicles. It contains a list, menu, search and filter tools.

JetRadar is a flight booking service. The search page contains even more information, filters, and variables. The layout has a standard fixed top bar with search parameters and scrollable part divided into two parts: filters and search results.

Here you can also see what a typical Angular Material buttons look like.

Main pages of the product often mix all sorts of layouts to build a dynamic design that tells a story and displays different kinds of information: slogans, product value proposition, list of benefits, reviews, FAQ, partners, etc. Let’s see some examples.

Landing Pages Built with Angular Material 

T-Mobile

The landing page of the website of the mobile network provider combines the “Hero” image (big train in this case), products displayed on swipeable cards, and split screens. Blocks of information are united in the modular grid. Mobile phones are displayed on classic Angular Material cards.

Wix

Wix may not be a synonym of great design when it comes to the websites built on their platform, but their own landing page is worth taking a look at. The text is put in a grid made of large color blocks. Wix is doing its best in sticking to minimalist style while the menu and the list of the products have grown so much.

Firebase

Firebase is a product by Google aimed at app developers. The design is built according to the main commandments of Material Design: intense colors (accent blue and shades of yellow for logo and icons), bright modern illustrations, etc. Note that each block of information is placed on a separate card – feature element of Material Design.

Claris

Claris, the business app builder, is another example of a classic main page: benefits, previews, schemes, clients reviews, blog articles. For more inspiration, see out list of best landing pages. and some more examples of usable, responsive and high-converting websites.

To Sum Up

If you are building a relatively simple website, Angular Material is a foolproof way to create a bold and clear UI, while speeding up the process as well. It is used for a variety of products in different fields.

However, if you need to build something rather complex, you may need another tool. We had few clients coming to our design agency with the idea of building a product with Angular Material, and we winded up using Ant Design, another UI library. For instance, it happened when we worked on Gamaya, a complex data analysis platform for farm management. In this case study, we explained how we made a custom UI kit for developers that helped to save lots of time.

Click here for more website design examples:

Web Design Examples of Usable, Responsive and High-Converting Websites