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.

Spotify Playlists To Fuel Your Coding And Design Sessions

Some like it loud, others need some steady beats to stay focused, others calm tunes. A while ago we asked on Twitter and Facebook what music the web community is listening to when coding and designing.

Spotify Playlists To Fuel Your Coding And Design Sessions

The answers were as diverse as the community itself and certainly too good to live an existence only in a Twitter discussion. That’s why we’ve compiled those hand-crafted playlists, favorite artists, and loved soundtracks in this article to see which tunes fuel the web, and, well, first and foremost, to provide you with some new ear candy to get you through lengthy coding and design sessions, of course. Get your headphones ready!

Read more...

Freebie: Thanksgiving Icon Set (15 Icons, PNG, PSD, AI, SVG)

With Thanksgiving coming up next week, have you already thought about ways how to spend your days before the holiday? Well, you could send simple "Thank You" emails to your past clients, perhaps design something free for somebody, or take some time to improve your website. To those of you who celebrate Thanksgiving, we've got a nice icon set for you today — all available in PNG, PSD, AI and SVG formats.

Freebie: Thanksgiving Icon Set (15 Icons, PNG, PSD, AI, SVG)

This set of 15 free icons was created by the design team at ucraft. Please note that this icon set is licensed under a Creative Commons Attribution 3.0 Unported. You may modify the size, color or shape of the icons. No attribution is required, however, reselling of bundles or individual pictograms is not cool. Please provide credits to the creators and link to the article in which this freebie was released if you would like to spread the word in blog posts or anywhere else.

Read more...

Advertise with us!

SmashingConf San Francisco 2017: Somethin’ Is Cookin’ In The Kitchen!

Imagine a cloudy, rainy November evening. After a long day, you walk home along the streets, following the dimmed street lamps. Everybody seems to be busy, rushing somewhere, crossing paths with strangers and lonely stores. It's dark and cold outside, and it's difficult to see things through, so you decide to take a shortcut route to shorten the path.

SmashingConf San Francisco 2017: Somethin' Is Cookin' In The Kitchen!

Suddenly you see a bright light and music streaming from one of the remote corners of the street. Out of curiosity, you slowly walk towards the light, and hold your breath for a second. You discover a little cozy place with a fireplace, packed with people, jazzy tunes, and the smell of pizza, pasta and red wine. You see people smiling. Talking. Laughing. Sharing. Inviting you to join them.

Read more...

Not An Imposter: Fighting Front-End Fatigue

I recently spoke with a back-end developer friend about how many hours I spend coding or learning about code outside of work. He showed me a passage from an Uncle Bob book, "Clean Code", which compares the hours musicians spend with their instruments in preparation for a concert to developers rehearsing code to perform at work.

Not An Imposter: Fighting Front-End Fatigue

I like the analogy but I'm not sure I fully subscribe to it; it's that type of thinking that can cause burnout in the first place. I think it's great if you want to further your craft and broaden your skill set, but to be doing it every hour of the day isn't sustainable.

Read more...

Sponsored Article Exploring Repeat Grid In Adobe XD

If you’re a visual designer, you probably spend a majority of your time making small adjustments to multiple visual elements. Maybe your client has decided they need a few more pixels of padding between each of your elements, or perhaps they’ve decided that all of their avatars needed to have rounded corners. Any which way, you might find yourself making the same adjustment in your design over and over… and over again.

Exploring Repeat Grid In Adobe XD

In Adobe Experience Design CC (Beta), we’ve introduced the Repeat Grid feature to address this tedious aspect of a designer’s workflow. In this article, we’ll dig deep to uncover the true power of this time-saving feature. We’ll create and adjust a Repeat Grid, add content to it, and wire it up in Adobe XD’s simple and powerful Prototype Mode. If you’d like to follow along, you can download and test Adobe XD for free.

Read more...

True Lies Of Optimistic User Interfaces

Three user interfaces (UIs) go to a pub. The first one orders a drink, then several more. A couple of hours later, it asks for the bill and leaves the pub drunk. The second UI orders a drink, pays for it up front, orders another drink, pays for it and so on, and in a couple of hours leaves the pub drunk.

True Lies Of Optimistic User Interfaces

The third UI exits the pub already drunk immediately after going in — it knows how the pubs work and is efficient enough not to lose time. Have you heard of this third one? It is called an "optimistic UI."

Read more...

Everything You Need To Know About Emoji 🍭

We all recognize emoji. They’ve become the global pop stars of digital communication. But what are they, technically speaking? And what might we learn by taking a closer look at these images, characters, pictographs… whatever they are 🤔 (Thinking Face). We will dig deep to learn about how these thingamajigs work.

You, Me And The Emoji: Character Sets, Encoding And Emoji

Please note: Depending on your browser, you may not be able to see all emoji featured in this article (especially the Tifinagh characters). Also, different platforms vary in how they display emoji as well. That's why the article always provides textual alternatives. Don't let it discourage you from reading though!

Now, let’s start with a seemingly simple question. What are emoji?

Read more...

Where Are The World’s Best Open Device Labs?

Every developer knows that just because a website looks like and does what it’s meant to on the latest iPhone, doesn’t mean it will work across every mobile device. In this article, we’ll highlight some of the many open device labs out there — fantastic and helpful initiatives by the community that deserve support and attention.

Open device labs (ODLs) are a response to the myriad of operating systems, browsers and devices that litter our technical landscape. They offer developers a (usually) free space to go to test their web systems, websites and apps on a range of software and hardware. This premise forms the core of the OpenDeviceLab.com initiative, which is a community movement to help people locate the right ODL for the job and to drum up further support for these testing centers.

Read more...

How To Create Dramatic Vector Illustrations

I have been drawing desktop wallpapers for Smashing Magazine's monthly collections for over a year now, and every time it's a very fun and challenging mission. In this article, I would like to share how I approach all stages of the process and provide general techniques for creating vector illustrations in Adobe Illustrator. Hopefully, you will find these techniques useful.

How To Create A Dramatic Vector Illustration

While referring to a particular drawing — the illustration for the "Understand Yourself" desktop wallpaper, which was featured in May's wallpaper collection this year — I'll also highlight key takeaways from my experience as an illustrator and designer.

Read more...

How To Design Better Buttons

Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create.

A Quick Guide For Designing Better Buttons

In today's article, we'll be covering the essential items you need to know in order to create effective controls that improve user experience. If you'd like to take a go at prototyping and wireframing your own designs a bit more differently, you can download and test Adobe XD for free.

Read more...

The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment

Editor’s note: Please note that this article is quite lengthy, and contains dozens of CodePen embeds for an interactive view. The page might take a little while to load, so please be patient.

Layout on the web is hard. The reason it is so hard is that the layout methods we've relied on ever since using CSS for layout became possible were not really designed for complex layout. While we were able to achieve quite a lot in a fixed-width world with hacks such as faux columns, these methods fell apart with responsive design. Thankfully, we have hope, in the form of flexbox — which many readers will already be using — CSS grid layout and the box alignment module.

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

In this article, I'm going to explain how these fit together, and you'll discover that by understanding flexbox you are very close to understanding much of grid layout.

Read more...

What You Should Know About The App Design Process

I realized something the other day: I've been designing apps for nine years now! So much has changed since the early days and, it feels like developers and designers have been through a rollercoaster of evolutions and trends.

What Everyone Should Know About The Process Behind App Design

However, while the actual look and functionality of our apps have changed, along with the tools we use to make them, there are some things that have very much stayed the same, such as the process of designing an app and how we go through the many phases that constitute the creation of an app.

Read more...

↑ Back to top