Design & UX
Maria Antonietta Perna, Jun 09

20 Inspirational, Free Tools For Better Typeface Pairing

We have access to a wider set of web fonts than ever before, but choice can be a tyranny. Luckily Antonietta has 20 tools to help you better pair type.
Design & UX
Alex Walker, Jun 08

Conversational UIs, R2-D2 and Avoiding the Uncanny Valley

What was the first 'killer phone app'? I'm talking about first non-voice offering that had droves of people buying mobile phones for the first time just to use it?

Was it Google Maps? Maybe the YouTube app? Bejewelled? Facebook?

No - as important as they were, I think the original killer app has to be SMS (or texting). Sending little notes to each other doesn't sound very innovative or exciting, but from the early 90's onwards, SMS drove the adoption of cellphones and provided an obscenely lucrative revenue stream to phone network providers.

People seemed to like SMS for three reasons.

  1. It was private
  2. It was simple
  3. It felt familiar

We all probably passed notes in class and stuck them on the refrigerator door. SMS just let us pass them across the world.

Many of the first big online services for desktop computers used the same chatty approach - ICQ, Yahoo IM, AIM, and MSN Messenger.

Even today Facebook Messenger, Whatsapp Twitter, and Slack have billions of users every day tapping out short text messages to each other.

What can we say? Humans really like this format.

Birth of the Conversational User Interface

The last two years have seen the rise of a new kind of user interface. Slack were one of the first companies to realize that this 'human-to-human' chat format might work just as well for human-to-app interactions.

Instead of using a standard account creation sign-up form, Slack used their 'Slackbot' like a welcoming hotel concierge.

Slackbot sign-up

And it made so much sense. They want you to chat - why not start chatting from the first moments you use the app? The idea has been reproduced many times since.

Quartz: Chatty News App

Quartz is a new news app (currently iOS only) that takes the idea of conversational UIs to a new level.

While Slack was a chat client just expanding where it chatted, Quartz jams news events into an SMS-like format. It's a bit like having a friend SMSing you newspaper snippets to read on the train. You can ask your friend for more detail on the story or tell them to move on.

Quartz in action

While I'm not totally convinced yet that Quartz is a winner, it is a brilliantly original way to think about presenting news. It's loose and informal and easily the most clutter-free news UI you've ever seen. Each time you read a new message and make a yes/no decision - Quartz handles the rest. Interesting.

One interesting little UI touch is the 'typing' indicator that appears just before Quartz posts a new message to screen – three drumming dots inside a speech bubble (see the animation below).

We're all familiar with this idea. In real world conversations, we can signal with body language that we're about to speak. In chat apps from ICQ in 1996 to Slack today, we get a visual indicator that the other person is in the act of replying. It's a useful protocol.

But this is an app speaking to us - not a friend or colleague.

Quartz Conversational UI

Now let's be frank: We all implicitly understand that this is all 'UX theater' for our benefit. Even my 10-yo daughter immediately picked it. There's nobody banging away at a real keyboard.

So, how do we feel about that?

I'm not sure about you, but I've been surprised by my own gut reaction. My designer brain tells me I should be dismissive and snarky. "Bah! How dare you slow down my experience with such feeble parlor tricks!" (yes, my designer brain sounds like Professor Moriarty)

But my UX-self started grudgingly liking it - and I couldn't understand why at first.

Design & UX
Alex Walker, Jun 07

Why SVG Image Hosting is Hard (... and How to Do It)

SVG is powerful, but finding a place to put your image is harder than it should be. Here's a scalable, reliable, free SVG image hosting method.
Design & UX
Gabrielle Gosha, Jun 06

9 Free iPhone Apps for Productive Designers

Design isn't something you only do at your desk. Gabrielle has 9 apps to help designers get things done on their iPhone.
Design & UX
Aja Frost, May 31

Multi-Device Onboarding: What We Can Learn from Mint & Expensify?

Some users come to us via the web – others via an app. How does the onboarding UX differ? Aja looks at how Mint and Expensify answer that question.
Design & UX
Wes McDowell, May 30

4 Steps to Boosting Conversions with Prioritized Navigation

Design is a series of decisions on what is most important – and what isn't. Wes looks at how to focus your users by using with prioritized navigation. 
Design & UX
Sarah Landrum, May 28

Quick Tip: 4 Really Useful, Re-Useable Code Snippets from Codepen

Codepen has become a vast repository of some of the best in front-end UI thinking. Sarah has put together a short list of handy snippets from
Yaphi Berhanu, May 26

Make a Simple JavaScript Slideshow without jQuery

Yaphi walks you step-by-step through creating a slideshow with JavaScript and CSS, with practical tips on ensuring accessibility for all.
Design & UX
Alex Walker, May 26

Make Your Own Responsive SVG Graphs & Infographics

It doesn't matter how crisp your SVG text is if it's too small to be read. Responsive SVG lets you prioritize the important parts of you graphic.
Design & UX
Theo Miller, May 23

The 5 Best Slack Apps to Accelerate Your Design Process

Designers are part of an ever-growing team in 2016 and collaboration is key. Theo looks at the best Slack apps for designers.
Design & UX
Daniel Schwarz, May 19

Crash Course: Learn the Sketch UI in Roughly 4 Minutes 20 Seconds

Sketch has become the key tool for so many Front-end designers that it's hard to ignore. Daniel gets you up-to-speed with the UI basic in under 5 minutes.
Design & UX
Alex Walker, May 18

Uncovering the Secret Coded Language of Postage Stamps

While today we LOL, smile :) and wink ;), a hundred years ago people were encoding their thoughts and feelings into the position of their postage stamps. 
Design & UX
Gabrielle Gosha, May 17

5 Hot Logo Design Trends of 2016

You gotta know the current trends before you can swim the other way. Gabrielle has five logo trends that are making waves in 2016.
Design & UX
Daniel Schwarz, May 16

How to Create Responsive Layouts in Sketch (with a Drop of Fluid)

Sketch app is primarily an Interface Design tool so it makes sense for it to be responsive. Daniel show
Design & UX
Alex Walker, May 11

Mastering SVG Patterns Without Breaking Your Brain (or Budget)

SVG patterns are a great low-bandwidth tool for designers but setting them up can be hard. Alex shows how Boxy SVG makes things much easier.
Design & UX
Ada Ivanoff, May 11

The 7 Cross-Browser Testing Tools You Need in 2016

Though browsers are arguably more reliable than they've ever been, we still can't forget about cross-browser testing tools. Ada has 7 top options for you.
Design & UX
Daniel Schwarz, May 10

How Sketch's New Symbols Will Improve Your Workflow

'Don't Repeat Yourself' (DRY) is a coding concept but it makes perfect sense for graphic design too. Daniel shows us how Sketch Symbols help us stay DRY.
Design & UX
Daniel Schwarz, May 04

How to Design a Daring but Effective Split-Screen Layout

Split-screen layouts are a bold stylistic choice but not suited to all designs. Today, Daniel balances some design inspiration with a few words of caution.
Design & UX
Charles Costa, May 02

The Trick to Building Habit-Forming Products

Facebook, Angry Birds, 2048. What is it that makes a product addictive? Charles talks about the thinking behind habit forming products.
Design & UX
Elio Qoshi, Apr 28

Sourcehunt Design April: How About Adding Fedora to Your CV?

April's Sourcehunt brings two Open Source goliaths. How would you like to add Fedora and/or Mozilla to your design portfolio?
Design & UX
Alex Walker, Apr 27

Why JPEGs are like McDonalds Apple Pies (and SVGs are not)

Sometimes it helps to think of SVG, not as an 'image format', but as a 'recipe'. And once you *really* know a recipe, you can start to change it. 
Design & UX
Ivaylo Gerchev, Apr 25

How to Design Rich Card-Based Layouts with Semantic UI

Card-based layouts are a great option for many design problems. Ivaylo shows us how to use Semantic UI to create great, mobile-friendly UIs.
Design & UX
Simon Cocking & the Digital Skills Academy Team, Apr 22

Epic UX Fails (and the Lessons We Can Learn)

Often there are more lessons to be learned from a failure than a success. Simon Cocking walks us through some UX fails and the lessons we can take.
Design & UX
Alex Walker, Apr 21

Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editor

SVG is hot but easily corrupted. Boxy SVG is a free editor that helps you make the most of what the SVG format is good at.