Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

What Are Progressive Web AMPs?

If you’ve been following the web development community these last few months, chances are you’ve read about progressive web apps (PWAs). It’s an umbrella term used to describe web experiences advanced that they compete with ever-so-rich and immersive native apps: full offline support, installability, “Retina,” full-bleed imagery, sign-in support for personalization, fast, smooth in-app browsing, push notifications and a great UI.

From Google’s Advanced Mobile Pages (AMP) to progressive web apps

But even though the new Service Worker API allows you to cache away all of your website’s assets for an almost instant subsequent load, like when meeting someone new, the first impression is what counts. If the first load takes more than 3 seconds, the latest DoubleClick study shows that more than 53% of all users will drop off.

Read more...

Best Practices For Animated Progress Indicators

Visibility of system status is one of the most important principles in user interface design. Users want to feel in control of the system they’re using, which means they want to know and understand their current context at any given time, and especially when a system is busy doing work. A wait-animation progress indicator is the most common form of providing a system status for users when something is happening or loading.

An adorable animated kitten on blue background

While an instant response from an app is the best, there are times when your app won’t be able to comply with the guidelines for speed. A slow response could be caused by a bad internet connection, or an operation itself can take a long time (e.g. install an update for OS). For such cases, in order to minimize user tension, you must reassure users that the app is working on their request and that actual progress is being made. Thus, you should provide feedback to the user about what is happening with the app within a reasonable amount of time.

Read more...

Advertise with us!

The Atomic Workflow — People, Process, And Making Design Systems Happen

Editor's Note: We are all trying to figure it out: how do we design flexible and future-proof responsive websites without reinventing the wheel every time a new requirement comes in? You've heard of atomic design, but how do we actually make it applicable in every day situations? Let’s figure it out! We've teamed up with Brad Frost to set up an eBook bundle with the brand-new Atomic Design and our lovely Smashing Book #5 — available in ePUB, Kindle and PDF. Good things come in pairs! Get the bundle, and save 50% off the regular price.

An illustration showing two birds flying away with two eBooks, Atomic Design and Smashing Book 5. Both eBooks are 50% off of their regular price for a limited time

Talk is cheap. And up until now, we’ve been doing a whole lotta talkin’. That’s not to say it hasn’t been productive talk! After all, we’ve discussed the importance of modular thinking, we’ve learned a methodology for crafting deliberate UI design systems, and we’ve showcased tools for creating effective pattern libraries. But here’s where the rubber meets the road. Where we roll up our sleeves and put all of this theory into practice. Where we get stuff done. This chapter will tackle all that goes into selling, creating, and maintaining effective design systems. You ready? Let’s go.

Read more...

How To Build A SpriteKit Game In Swift 3 (Part 2)

Have you ever wondered what it takes to create a SpriteKit game? Does collision detection seem like a daunting task? Do you want to know how to properly handle sound effects and background music? Game-making has never been easier on iOS since the introduction of SpriteKit. In part two of this three-part series, we will explore the basics of SpriteKit.

Hot To Build A SpriteKit Game In Swift 3 (Part 2)

If you missed out on the previous lesson, you can catch up by getting the code on GitHub. Remember that this tutorial requires Xcode 8 and Swift 3.

Read more...

Breaking Out Of The Box: Design Inspiration (December 2016)

Time moves pretty fast. A new year will be upon us soon, and most of us probably haven't even realized it. So while we're almost ready to leave the autumn season (and 2016!) behind, let's refuel our inspiration for another month and start working on our New Year's resolution list. Observe closely at the following techniques used, and how the colors have been applied to add contrast and character. As always, there is a lot to learn.

Breaking Out Of The Box: Design Inspiration (December 2016)

I hope that these illustrations and photographs will inspire you to get creative and get ideas which you can apply in your own projects. Go ahead, don't let anything come in your way, and let your artistic juices flow so you can create something beautiful and unique yourself. Let's begin.

Read more...

Brush Lettering: It Only Gets Better After Practice (Part 2)

In the first part of this article, we discussed the resurgence of lettering, we defined the differences between lettering, calligraphy, and typeface design, and we also discussed pens, papers, and other supplies. In this second part, I will share with you how I got started, my journey, and will also share specific tips on how to start. Let's get started.

Brush Lettering: It Only Gets Better After Practice (Part 2)

When I decided to practice lettering daily, I was a tad overwhelmed with the options: Crayola (there is even a term for it, crayligraphy), pointed pen, brushes, illustrative lettering, lettering, calligraphy (Copperplate and Spencerian), modern calligraphy, and so on. I did not know what to do or where to start.

Read more...

25 Free Christmas Advent Icons To Bring Festive Mood To Your Site

Are you ready for the countdown to Christmas? Today, we're merrily releasing a brand new Christmas Advent Icon Set, a set of 25 icons that are all available in AI, EPS, SVG, PNG and PDF formats. These icons were all designed and created by Manuela Langella and are free to be used in private as well as commercial projects.

Freebie: Christmas Advent Icon Set (25 Icons, AI, EPS, SVG, PNG, PDF)

You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms isn't cool. Please note that this icon set is available under a Creative Commons Attribution 3.0 Unported license. We'd kindly like to ask you to provide credits to the creator and link to this article if you would like to spread the word about the freebie.

Read more...

New Smashing Book Getting The Sketch Workflow Right: Meet “The Sketch Handbook”

Do you use Sketch, too? If you're designing for the web today, you probably are. Well, we do, too, so we created The Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient and fast — with Sketch.

A photo of the new Sketch Handbook

Sketch offers a wealth of tools and features to make it the perfect application for today's designers: It lets you design interfaces, websites and icons with ease. To help you get the most out of this mighty tool, The Sketch Handbook will show you every aspect of it. Not in theory, but backed up by practical examples that you can follow along, step-by-step.

Read more...

Desktop Wallpaper Calendars: December 2016 – Festive Christmas Edition

New month, new wallpapers! To get you in the right mood for December, designers and artists from across the globe got their ideas bubbling and created unique and inspiring Christmas wallpaper calendars to deck your desktop. This monthly wallpapers mission has been going on for eight years now, and we are very thankful to everyone who challenges their artistic skills and contributes to it each month anew.

Christmas Wallpaper Calendars: December 2016

This post features desktop artwork for December 2016. Each wallpaper comes in versions with and without a calendar and can be downloaded for free. Now you only need to decide on your favorite!

Read more...

Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator

Almost five years ago, I had the honor of writing a post on Smashing Magazine about my Photoshop panel GuideGuide. Since then it has seen wild success as the most installed third-party Photoshop extension, an achievement I’m quite proud. In that time, I’ve added some powerful features and, most recently, expanded it to Illustrator. This post will give you a taste of how GuideGuide can change the way you use guides in Photoshop and Illustrator.

Enhancing Grid Design with GuideGuide, A Plugin For Photoshop And Illustrator

If you’re one of the many people who already use GuideGuide, please read on. You may discover some unconventional uses that are not immediately apparent. I’ll provide a overview of the major features, and then give some examples of advanced and unusual ways it can be used to make you a more efficient designer.

Read more...

How To Build A SpriteKit Game In Swift 3 (Part 1)

Have you ever wondered what it takes to create a SpriteKit game from beginning to beta? Does developing a physics-based game seem daunting? Game-making has never been easier on iOS since the introduction of SpriteKit.

How To Build A SpriteKit Game In Swift 3 (Part 1)

In this three-part series, we will explore the basics of SpriteKit. We will touch on SKPhysics, collisions, texture management, interactions, sound effects, music, buttons and SKScenes. What might seem difficult is actually pretty easy to grasp. Stick with us while we make RainCat.

Read more...

Brush Lettering: It Only Gets Better After Practice (Part 1)

The resurgence of hand lettering, calligraphy, signage, penmanship, or really anything that is graphic and handmade is increasingly difficult to ignore. Along with letters drawn in any of the categories just mentioned, drawing, sketching, sketchnoting, and any hybrid style (combinations of the above) have also been gaining attention among designers, illustrators, and other professionals.

Brush Lettering: It Only Gets Better After Practice (Part 1)

A quick look around social media or simply googling lettering will quickly show impressive and notable work. Last year I deliberately started practicing brush lettering, meaning I had a dedicated time to practice exercises, write out words and practice letterforms.

Read more...

↑ Back to top