How Do You Design Interaction?

If you have to design an interface it's almost obvious to think to begin the process by drawing. But is this the best way? I once casually started by writing an imagined human-computer conversation, and only afterwards I continued by drawing. This changed my way of thinking and I never went back to drawing first. This article will explain the reasons behind my decision.

How Do You Design Interaction?

I have always been a huge admirer of the guys at Basecamp. Some time ago, I was reading a tweet by Jason Zimdars, one of its designers: “UI design starts with words.” He wasn’t joking. The comment got a lot of retweets, a lot of favorites. Everyone understood what he meant — except me.

Read more...

The Mystery Is Resolved: Chirpy Birds, Lost Numbers and Pretty Slow Wheels

Experiments and side projects are wonderful ways to challenge yourself and explore areas that you wouldn't usually consider exploring. That's what Smashing Mystery Riddles are for us: little experiments that challenge us to come up with something new, original and a bit crazy—every single time. The ideas are usually a synthesis of the things we discover, stumble upon or try out ourselves—and oh my, they take quite some time to get right.

Mystery Riddle: Level 2

The most recent riddle took quite a lot of time spent fiddling and getting right (and Guillaume, the designer, wasn't that happy about all the changes that our tests required). The basic idea was simple: as usual, you have a series of animated GIFs containing clues. One animated GIF leads to another, and every animated GIF contains a key (or keys) that have to be discovered. Once you uncover all the keys, you construct a solution and send out a tweet containing that solution. Doesn't sound too difficult, does it?

Read more...
Advertisement Advertise with us!

Useful Adobe Fireworks Resources: Extensions (Part 1)

Fireworks is an excellent UI design tool; however, Adobe decided to feature-freeze it back in 2013 and (at the same time) did not offer any replacement tool to its users. Nevertheless, since Fireworks runs fine today on the latest Mac OS X and Windows OS, and since it still offers a solid UI-design feature set, many designers continue to use it and rely on it daily.

Useful Adobe Fireworks Resources: Extensions (Part 1)

For those of you who are searching for a similar tool, Sketch 3.0 seems to be a pretty good alternative to Fireworks, but it's still not quite there yet; it's Mac-only, and while its vector tools are very good and it now has artboards, pages, symbols and styles, it lacks a few of the basic features available in Fireworks. (I'll talk more about possible alternatives to Fireworks in Part 2 of this series.)

Read more...

Scaling Down The BEM Methodology For Small Projects

Front-end development is no longer about individual frameworks. Tools are available — we merely have to choose. To make the right choices for your project, you need to start with a general approach, or methodology. But most methodologies have been created by big companies? Are they still useful for small companies, or do we need to reinvent them at a small scale?

Scaling Down The BEM Methodology For Small Projects

You probably already know of BEM, one of those methodologies developed by a big company — namely, Yandex. BEM posits that three basic entities (blocks, elements and modifiers) are enough to define how to author HTML and CSS, structure code and components, describe interfaces and scale a project up to an industry-leading service.

Read more...

How To Profit From Selling Digital Products (Part 2)

This is the second and final article on how to sell and profit from digital products. In part 1, we covered many of the benefits of digital products over physical goods as well as the marketing philosophies to help you build an audience for your products. Today, we will be discussing more of the tactics required for a successful digital product business. There's also a dark side to this world, which we'll get into towards the end. Let's jump in.

How To Profit From Selling Digital Products (Part 2)

Remember how one of the best things about digital products is that you don’t have to ship anything? Your profit margins are much higher, and fulfilling orders is so much easier! You still have to deliver the product to the customer, but e-commerce software will do that for you, so you don’t have to be involved at all.

Read more...

The New Smashing Mystery Riddle: Have You Figured It Out Yet?

Ah, these mystery riddles never stop, do they? To celebrate the launch of the SmashingConf Whistler, our very first conference in Canada, we’ve prepared a yet another riddle, and of course this time it's not going to be any easier!

Smashing Book Mystery
Tip: Watch out for a hint in one of the frames in each of the GIFs. Large view.

So, how does it work this time? Well, below you'll find the first of a few hidden animated GIFs that contain a secret Twitter hashtag. Your job is to deconstruct that hashtag as fast as possible. To do that, you have to pay attention to the file name and count objects within the GIF (for example, "3 chairs") and search for them on Twitter (i.e. #3chairs).

Read more...

“Where No Web Designer Has Gone Before!” SmashingConf Whistler, Canada

What happens when you combine a practical front-end conference with a spectacular resort experience? Guess what: that's exactly what we are going to find out with our very first SmashingConf in Canada— taking place on December 9–12th 2014 in a ski resort paradise Whistler, right next to Vancouver! Ah, right — and tickets are now on sale.

SmashingConf Whistler, the first SmashingConf in Canada

At Smashing Conferences, we take good care of the value that the event delivers to attendees. No speaker is selected randomly, no networking activity is an afterthought, and every single talk is thoroughly curated and reviewed. SmashingConf Whistler isn't going to be an exception: with 2 days of heavily practical front-end talks and 7 front-end + RWD workshops, you'll leave the conference with a treasure of useful tips and tricks applicable to your work right away.

Read more...

↑ Back to top