Building Clickthrough Prototypes To Support Participatory Design

As UX professionals, we often lead design exercises with our stakeholders, including immediate team members and external clients. In these brainstorming sessions, participants identify opportunities to improve the design, thereby aligning everyone’s vision and expectations of the project.

Building Clickthrough Prototypes To Support Participatory Design

During such activities, teams will generate concepts as paper or whiteboard sketches. While these artifacts give a ten thousand-foot view of the emerging design, I would argue that they fall short of presenting the pieces as a whole, because they limit participants from visualizing interactivity and the system’s flow. This is where clickthrough prototypes enter the picture.

Read more...

Rethinking Responsive SVG

If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I was when I first discovered it. In this article, I’d like to explore what we can do with SVG beyond “traditional” scalable vector graphics that are used to replace bitmap PNGs.

Rethinking Responsive SVG

In fact, we can see SVG as an independent module that encapsulates CSS for the customization of views as well as the responsive behavior that also encapsulates JavaScript for the interaction logic. Now, let’s dig a bit deeper into this technique.

Read more...
Advertisement Advertise with us!

A Detailed Introduction To Custom Elements

You’ve probably heard all the noise about Web Components and how they’re going to change Web development forever. If you haven’t, you’ve either been living under a rock, are reading this article by accident, or have a full, busy life which doesn’t leave you time to read about unstable and speculative Web technologies. Well, not me.

A Detailed Introduction To Custom Elements

Web Components are a suite of connected technologies aimed at making elements reusable across the Web. The lion’s share of the conversation has been around Shadow DOM, but probably the most transformative technology of the suite is Custom Elements, a method of defining your own elements, with their own behavior and properties.

Read more...

How To Use Analytics To Build A Smarter Mobile Website

Mobile first! Responsive design! You’ve heard all of the buzzwords and catchphrases. Countless helpful and not-so-helpful articles proclaim the rise of mobile, but what practical steps can you take to make your brand more approachable for mobile users?

How To Use Analytics To Build A Smarter Mobile Website

When arguing a case to make a website mobile-friendly, abundant evidence exists to present to the business owner, such as the Pew Research study that shows that 56% of US adults carry around a smartphone. However, while general statistics are useful for demonstrating the value of designing with mobile in mind, they don’t provide the guidance necessary to understand precisely how users will interact with a particular brand on their phone.

Read more...

Desktop Wallpaper Calendars: March 2014

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. As designers, we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one: desktop wallpapers that are a little more distinctive than the usual crowd.

Desktop Wallpaper Calendars: March 2014

This creativity mission has been going on for six years now, and we're very thankful to all the designers who have contributed and are still diligently contributing each month. This post features free desktop wallpapers created by artists across the globe for March 2013. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your desktop wallpaper!

Read more...

Making Embedded Content Work In Responsive Design

A few HTML elements don’t play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube. In this article, we’ll show you how to make embedded content responsive using CSS, so that content such as video and calendars resize with the browser’s viewport.

Making Embedded Content Work In Responsive Design

For those occasions when non-coders will be embedding video on your website and you don’t want to rely on them adding extra markup, we’ll also look at a solution that uses JavaScript instead of CSS.

Read more...

Creating Responsive Prototypes With Adaptive Views In Axure RP 7

Responsive Web design has vexed people who build prototypes since the techniques came into use several years ago. While responsive design is an extremely elegant way to handle coding for multiple device types when executed with HTML and CSS, the prototyping tools available to UX professionals have not delivered testable or demonstrable experiences of the same quality. That changed recently with the adaptive views feature that is part of the new Axure RP 7.

Creating Responsive Prototypes With Adaptive Views In Axure RP 7

Creating responsive prototypes without writing code is now possible with Axure RP 7’s new adaptive views feature. The feature enables you to create one page in Axure RP with several “views.” The view displayed on a given device is determined by the width of the device’s screen.

Read more...

↑ Back to top