Google isn’t just a search engine; it has its thumbs in a number of different pies around the globe. One of those pies is a suite of tools aimed at helping web designers make better websites. These tools are also all completely free to use. If you are interested in web development then these resources are worth checking out.
ReSizer is a web based tool where you can enter a web address and it will show you how the web page looks on a computer, tablet and smart phone screen.
There are options for viewing the website at various screen widths from 1280 to 360 pixels wide. You can see how the website looks in portrait or landscape mode on portable devices.
The view in resizer is a live view so that all links and pages can be tested. Resizer is a great tool for seeing if your website is truly responsive.
As you may know, more than 50% of searches are now made on portable devices and your website being mobile friendly isn’t just essential, it’s a ranking factor on mobile search.
Google Web Designer
Google’s Web Designer is a tool for designing interactive HTML5 designs and animations. It is a fully responsive tool that creates designs that adapt to any screen size, mobile or desktop.
Google Web Designer is not a full web development environment.
“Using Google Web Designer’s design view you can create content using drawing tools, text, and 3D objects, and you can animate objects and events on a timeline”
The HTML code that it creates is easily accessible so that it can be edited then cut and pasted into web design projects. It comes with ready-made templates that feature slide shows, video galleries, product showcases and moving ad banners. You can also start from scratch with your own designs.
Google Web designer is a desktop application available on the Mac, Windows and Linux operating systems. It is in beta development and can be downloaded here.
Device Metrics lists lots of devices, including smart swatches, smartphones, tablets and computers. Click on a device and there is a list of detailed device metrics. These include material metrics, touch size range, and physical measurements such as screen size.
Device Metrics is a large resource of resolution and sizing across many devices. If you are developing a web or mobile application for a specific device, Device Metrics is the place to start.
It will give those print designers turned web designers a headache though as they’ll never get an answer to the question they so often ask “what size should this web design be?” – seriously, I used to hear that a lot.
Google has developed a design framework called Material Design that uses grid based layouts, animations, padding, lighting and shadow effects. Google’s material design guidelines can be found here.
Google has a number of resources available to support material design projects. These resources are also useful for non-material based designs.
Google has published a number of material design icons that are open source so that they can be freely used on web projects. There are hundreds of icons available in the png image format, as well as an icon web font.
Excuse the American spelling of colour, that’s what it’s called.
Google’s Material Design Framework features bold colours. You can download a zip file containing Photoshop and Illustrator Material Design colour swatches from here.
Even if you are not designing a website on strict Material Design principles, these colour swatches can be useful for colour design ideas for any design project.
Layout templates are device specific material design templates in Adobe Illustrator format. These can be used for material Design websites or as inspiration for other web designs.
The Google Design website is a collection of tools, resources and articles that encourage good web design.
Google also publishes a design newsletter. You can sign up for it at the Google design website.
Whether you are a web developer or a business that wants a beautiful looking website, Google Design is a great place to go for ideas and inspiration.