Do It Like Google. Angular Material Design Layout Examples

Choosing the right tools is crucial when building a new website. 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 using a different layout style.

So, what is Angular Material?

Angular Material is a UI component library for Angular JavaScript developers. Angular Material UI component 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.

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 the year. 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 the 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 the 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 angular material design 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 them are equal in size and arranged in a symmetrical pattern. This is how Metalshub, a metals trading platform, displays the goods they work with. A standard image grid is the most common layout for many pictures.

Woven

The woven image list sets a regular grid without cutting the images to the same format, like when users create the lists, and therefore has to be flexible with different formats. It works great in the case of Keen, 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 lists, 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, a 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, which is 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 the direction from left to right. The website is not made particularly for gadgets with touch screens, but the horizontal orientation makes perfect sense when the images are arranged chronologically.

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 the human eye. Just like when reading, we start with the top left corner, move to the right, right and down, and 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 a 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 

Now let's take a look at Angular Material design layout examples when it comes to the landing pages.

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 for a great design for the websites built on their platform, but their landing page is worth looking at. The text is put in a grid made of large color blocks. Wix is doing its best to stick to a minimalist style while the menu and the list of 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 – a 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.

Frequently asked questions

What is the use of Material Design?

Material Design is used to create a consistent and user-friendly interface across different platforms and devices. It provides a set of guidelines for designing intuitive and engaging user experiences. With principles like layering, animation, and responsive design, Material Design helps developers and designers create apps that look modern and feel cohesive.

What are the different types of Angular layout?

Angular layouts typically utilize Flexbox and Grid-based approaches provided by Angular's Flex Layout module and Angular Material components. Common types include:

• Row Layout: Elements are arranged horizontally in a row.
• Column Layout: Elements are stacked vertically in a column.
• Responsive Layouts: Layouts that adjust dynamically based on the screen size using breakpoints.
• Grid Layout: Arranges content in rows and columns using a grid system.

Is Material Design and Angular Material the same?

No, Material Design and Angular Material are not the same. Material Design is a design language developed by Google that provides guidelines for visual, motion, and interaction design. On the other hand, Angular Material is a UI component library for Angular applications that follows the principles of Material Design, providing pre-built components and themes that align with the design language.

To sum up

Angular Material design offers a versatile and efficient way to create engaging, modern websites and applications. As illustrated through various examples, this design framework enables developers to craft aesthetically pleasing and functional layouts that resonate with diverse user needs. From grid-based layouts to magazine styles and complex lists with filters, Angular Material design caters to a wide range of design requirements, ensuring a cohesive and user-friendly experience. Whether you are building a landing page, a complex dashboard, or a visually driven platform, Angular Material provides the tools to create designs that are both practical and visually compelling. By adopting this framework, developers can leverage the power of Material Design principles, ensuring their products stand out in the crowded digital landscape. Good design is not just about appearance; it's about creating an intuitive and enjoyable experience for your users, and Angular Material design is an excellent choice to achieve this.

However, if you need to build something rather complex, you may need another tool. We had a few clients coming to us 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 if you want to see what's else out there 20 Dashboard Design Examples That Catch the Eye.

And if you need a helping hand with designing your product, drop us a line!