Your friends at Viget present Inspire, a Design & Interaction Blog

Easy Textures with CSS Masks

We recently worked with The Nature Conservancy on a microsite and campaign strategy to promote a new PBS series, “EARTH A New Wild.” One small detail of the overall design language was a gritty, earthy texture, which was reserved for use on headlines, buttons and icons, and the brand’s identity marks.

There are a few different ways to achieve this effect in today’s browsers, from CSS background-clip and mask-image, to SVG <clippath>, <pattern> and <mask>, and even canvas. Each have their own varying levels of support and implementation peculiarities; however, one of these rises above the rest in terms of its ease of implementation and flexibility of use.


Designing for Microphones

We recently launched Shure Design Studio, a tool that lets anyone create custom microphone handle designs. Designing a fun, usable UI for this project was a blast. Possibly even more fun: the project included creating a library of built-in custom designs. To give users a range of styles to choose from, three designers here at Viget came up with custom illustrations, patterns, and textures, all designed to look badass on a microphone.


Now and Later User Experience Design

As a child, I was baffled by my parents' reluctance to feed me candy at mealtime. Candy made me happy. Didn't they value my happiness?

Of course they did, but like most parents, they knew that to make their children truly happy in the long-term, they must forego the occasional, sugary, short-term happiness.

Like parenting, modern user experience design requires a delicate balance of careful short- and long-term considerations.


Interactive WCAG

The Web Content Accessibility Guidelines (WCAG) is an invaluable resource for developing accessible websites, and necessary if those sites need to conform to a specific accessibility level. But for those who are unfamiliar with or only partially familiar with WCAG, it can be an overwhelming and confusing document. Recently I've needed to share parts of the document with several other people and groups, and I didn't have a good way of customizing the content for each audience.


Refreshing Search: Testing Search Box Variations

One of the most interesting research studies I’ve had the chance to work on during my time at Viget was an experiment to optimize the design of a keyword search box. Our team ran this experiment to help inform Viget’s redesign of WRAL.com, a trusted regional news source that pulls in a staggering 100 million pageviews a month.

One of the most heavily used features of the website is its keyword search, so we wanted to make absolutely certain that our redesigned search box didn’t make search harder for users to find and use.

We were also eager to test our design because it was somewhat unconventional: instead of showing a search input field by default, the field had to be revealed with a click. We considered this a clean, stylish solution, but we were curious about what effect it might have on users, many of whom are older folks who might be less receptive to a novel approach.

The hidden-input search element we originally proposed for WRAL.com

Our original proposed redesign of search, with the input box hidden by default.

The experiment was one of several tests we ran for the project, but I find these results particularly interesting for UI designers, both in the way we were able to quantify the costs of a novel UI element and in what we learned about the iconography of keyword search.