The dark months of the year are a good chance to hunker down and build your knowledge before spring brings opportunities that will distract you. To that end, this month’s tools focus heavily on learning resources. If you haven’t got into progressive web apps yet, there are two books from great writers that will get you up to date and show you what can be achieved.
There’s also a performance checklist with all the resources you need to learn about speeding up your sites, some design case studies that show how things were done at some big sites, and a huge survey exploring how design has impacted business performance at thousands of organisations.
01. Best of 2018 UX Design Case Studies (opens in new tab)
This round-up from the Case Study Club provides some fantastic learnings from some of the most interesting web design case studies of the last year. Every scenario has its unique challenges and constraints, and these deep-dive articles explore how some of the industry’s top designers handled their particular project. You’ll read about the process of redesigning the New York Times homepage, Chrome’s new look, the Mailchimp dashboard and lots more.
- Web design tools to help you work smarter in 2019 (opens in new tab)
02. Velocity (opens in new tab)
Building your own design system is an intimidating task, so using something like this as a framework to get started makes life a lot easier. Velocity is a UI kit and design system for a fictional self-driving car company that works with InVision Studio, Sketch and Photoshop. It contains 30 screens for common app functions such as sign-in, settings, map, chat and so on, and they come in small, medium and large sizes so you can see how components will work on different devices. There are over 70 components and over 300 UI elements that you can mix and match to build your app.
03. FBT (opens in new tab)
04. Static Site Boilerplate (opens in new tab)
This great boilerplate provides an ordered workflow for creating static sites and has a built-in development server – no need to have one already on your computer – so you can get up and running with minimal fuss. Your code is automatically linted, concatenated and minified, you can use Sass or Less without vendor prefixes, and images are automatically optimised. There are various other useful features that make life easier, and overall it’s a handy tool for doing static sites without reinventing the wheel.
- What is Sass? (opens in new tab)
05. Front-end performance checklist 2019 (opens in new tab)
For the last few years, Smashing Magazine have been keeping this massive resource on web performance and it’s been freshly updated for 2019 with the best advice for making your site as fast as possible. It covers everything from changing the culture of your organisation to prioritise performance to dealing with the technical challenges and trade-offs required to keep the functionality you need while shaving seconds off load times. Today’s web is slower and clunkier than ever because of heavy, poorly optimised pages. Let’s make it better!
Also read: 5 ways to speed up your websites and apps (opens in new tab)
07. The New Design Frontier (opens in new tab)
If you need some hard data to convince leaders at your organisation of the transformative power of design, this industry wide survey from InVision on the impact of design practices on business performance will help. It has data from 2,200 organisations spanning 24 industries from all over the world. There is information from small businesses, large enterprises, non-profits and even governments, and each has reported how design has reshaped their products and practices.
The data explains the extent to which different companies have benefited from greater integration of design in their business (it varies a lot), and there’s analysis that seeks to understand why the efforts of some companies have been more effective than others, so you can learn how to use design in a way that has the most impact on your bottom line.
08. Pixel Mob (opens in new tab)
Pixel Mob is an aggregator that pulls in high-quality royalty free images from multiple sources including Unsplash, Pixabay and Pexels. It serves up a great selection of images and also suggests related search terms that might help you find what you’re looking for. It will definitely save you time if you find yourself opening multiple tabs and comparing results from different services.
09. Progressive Web Apps by Jason Grigsby (opens in new tab)
Progressive Web Apps (PWAs) look and behave like native apps, but you don’t need to deal with app stores because they’re web-based. Your app is available to all devices and you’re free from the restrictions of proprietary platforms, so there’s a strong case for using them – but they come with a different set of challenges. In this book, Jason Grigsby explains how to make the case for PWAs in your organisation, how to grow your audience and how to create the most value for your users.
10. Progressive Web Apps: The Future of the Mobile Web (opens in new tab)
Here’s another great resource on Progressive Web Apps – this time it’s a free ebook that’s the result of a collaboration between Microsoft, Google and Awwwards. You’ll learn why PWAs are important, how to build one and how to assess the results. Usefully, this book explores some interesting case studies from Lancome, Trivago, BMW and Pinterest, so you can see some real-world results and learn from their successes. It’s also useful data you can use to make the case for PWAs in your organisation.