Category: HTML & CSS

Putting the “App” in Progressive Web Apps

The web is better than ever. You can now build fast, rich app-like experiences. As Googler Zach Coch said: The line between what is web and what is app is more blurry than it’s ever been. And this is a great opportunity to get better at creating those incredible experiences. But the web has its […]

A Designer’s Guide to Fast Websites and Perceived Performance

1501540613running

Faster websites do better across a whole variety of metrics. Speeding up websites improves SEO and therefore click-through rates, so faster websites rank better, and it boosts conversions, so it definitely improves user experience as well. As a web designer you’ll want to do everything that you possibly can do to make your website faster, […]

SVG Tip: Create a Bold Vector Halftone Graphic in Under 2 Minutes

1499846775durer

This is a section from a 500 year old woodcut from perhaps the ‘Andy Warhol of woodcut artists’ – Albrecht Dürer. Woodcut is an old printing technique where the image is hand engraved into a wooden block by specialist blockcutters. Prints are then taken from the block. Woodcuts are always bold and stark in nature […]

6 Free Material Design CSS Frameworks for 2017 Compared

1499357425Material-Design-Frameworks

It was 2014 when Google introduced Material Design as their design language. Since then it has been adopted and implemented in a plethora of Google products including Gmail, Docs and Drive, to name just a few. Material Design is seen both in native Android and modern web applications – in fact, nowadays it has become […]

6 Clever SVG Pattern Generators for Your Next Design

1499320543x9IXUgC

Today I want to touch on SVG Patterns. They’re not widely understood, but offer a lot of really interesting design options once you get your head around them. I’m going to start with you a crash course on how they work. Then we’ll spin through 6 tools that take advantage of them. In theory, combining […]

Crash Course: Optimizing and Exporting SVGs in Adobe Illustrator

1498711348layersandstyles

When you start working with SVG, one of the most important things is to learn how to create, export, and optimize your graphic files for the Web correctly. Coding SVG by hand can be slow and tedious process, so it’s much better to create your graphic in a visual manner with program like Illustrator (Inkscape, […]

Inspirational UI Design Ideas for Your Next Website Project

1494773754creative-ui-designs

The web has moved a long way from its traditional roots. Where once it was perfectly fine to provide a basic text-only website, now it’s practically expected that your sites convey not only information, but provide a modern, crisp and exciting user experience. To that end, it’s up to you as the designer or developer […]

The Top 9 Animation Libraries for UI Designers in 2017

1450061535UvuEem9-new

Frontend design has been through a revolution in the last decade. In 2007, most of us were still designing static magazine layouts – in 2017 we’re building ‘digital machines’ with thousands of resizing, coordinated, moving parts. Quite simply, great UI designers need to be great animators with a rock-solid understanding of the underlying tech. This […]

The Meaning and Purpose of Responsive Web Design

Just as developers and designers got used to building websites for phones, along came tablets, watches, TVs, cars, glasses, larger desktop screens, high-resolution screens, and even web browsers built into walls. (Okay, I made that last one up.) Supporting this seemingly endless stream of new devices is becoming ever more challenging. So how do we […]