Content by Ben Gremillion

I’m a writer with a design and development background. See where I’ve written, check out my résumé, or read samples of my work below.

Weekly app pro tips

teaser image

Starting in April 2016, I began a weekly series of “pro tip” posts in the company’s open forum. Each tip explores a technique, shortcut, or did-you-know point in UXPin. I researched, wrote, illustrated, and, in some cases, animated a new post every Monday.

Get the latest in this article I wrote for UXPin

The Hands-On Guide to Wireframing

teaser image

The most useful wireframes you can create are interactive. They are essential low-fidelity prototypes you can test early on — giving design teams a head start on rapid prototyping. At the very least, they actually let stakeholders experience how the design works. In this guide, we walk you through the whole wireframing process, from static wireframes to a finished interactive wireframe.

Get down to the wire in this article I wrote for UXPin

Sound Advice for Distraction-free Work Environments

teaser image

Open offices were once billed as a revolutionary step in facilitating teamwork and collaboration in work environments. Over time, however, people began to notice a lag in productivity. So when our team moved into a new office, we addressed noise issues. This week we talked to architect Ela Mrozek about the steps she took when designing the new UXPin office.

Listen to comments in this article I wrote for UXPin

Unleashing Your Design Superpower

teaser image

The idea of a designer as a hero isn’t meant to make grandiose claims of their importance to society. In fact the best designs go unnoticed, keeping their identities secret. How does it work? This checklist will help you find your inner hero.

Find your origin story in this article I wrote for UXPin

Comic-first Website Design

More than making a site that looks good, artists designing a webcomic site must solve problems in communication. They have to quickly tell readers where they are, set the comic’s tone, show readers how to get around the site — and make sure it works well in a variety of browsers and screen sizes.

Put first things first in this article I wrote for Grawlix Comix

Building an Animated Weather App

teaser image

Multistate elements are a great way to switch between “sets” of elements in prototypes. But they don’t have to just appear and disappear. How boring is that? Watch an animated weather app come together in this time-lapse video.

Go for a spin in this video I produced UXPin

Best Responsive Practices

This actionable guide reviews 35 responsive design examples to analyze proven responsive design techniques and shortcuts. We cover responsive workflow, mobile-first design, navigation, layout, images, technical execution, typography, and more.

Act now in this e-book I wrote for UXPin

Design Workbook

Learn how to choose the best UI pattern, and how to prototype, customize, and create your own pattern library in this easy-to-digest e-book on everyday design.

Notice a trend in this e-book I contributed to at UXPin

UI Patterns

Learn how to categorize and classify all UI patterns for smarter UX decisions, and get a quick approach to pattern-finding, in this free e-book to which I contributed.

Get the angle in this e-book I contributed to at UXPin

Flexbox Future

teaser image

CSS floats and clears define web layout today. Based on principles derived from centuries of print design, they’ve worked well enough — even if, strictly speaking, floats weren’t meant for that purpose. But the future of web layout is bright, thanks to Flexbox.

Get the angle in this article I wrote for Smashing Magazine

Command Line

teaser image

Complex products rely on more than HTML and CSS. They need strange technologies with exotic names like Git, Grunt, and Bower. Here we unlock mysteries of the Terminal — and get what commands like “foundation new dirname” actually do.

Take command in this article I wrote for ZURB

Web Colors

teaser image

When computers name a color, they use a so-called hexadecimal code that most humans gloss over: 16,777,216 unique combinations of exactly six characters. Designers who understand how hex colors work can treat them as tools rather than mysteries.

Unravel the code in this article I wrote for Smashing Magazine

Responsive Grids

teaser image

Foundation for Site’s grid is based on tried-and-true CSS — specifically, floats and clears. We developed the grid’s syntax to make layout easier. These instructions spell out how the layout should change depending on the size of the screen on which it’s viewed. Here’s how it works …

Get the lowdown on layouts in this article I wrote for ZURB

Pixel Weight

teaser image

When we started making Grawlix, we asked ourselves “how can we make it load faster?” Then we turned it around: “what makes it load slower?” Turns out that the biggest bandwidth hogs are giant, detailed graphics. One of your goals as an artist in a digital medium is to balance file size with image quality.

Learn to slim down the dots in this article I wrote for Grawlix Comix

Responsive Roundtable

Web designers use CSS frameworks to focus more on the former and worry less about the latter, just as grids — a staple of design — provide guidelines for layout. But when a medium changes, what happens to its tools? We talked to three experts about the issues and challenges facing grids for web design.

Glean insiders’ opinions in this article I wrote for Team Treehouse

Semantic Grids

teaser image

Semantic HTML uses markup to describe content, making information cleaner and HTML more meaningful. Elements like <article> and <aside> indicate to browsers, screen readers and search engines what content about. Here’s how to create your own semantic grid based on Foundation.

Learn to turn mess into meaning in this article I wrote for ZURB

Hard Drive Crash

teaser image

During an emergency is a bad time to plan for one. It’s the feeling one might get jumping from a plane before checking one’s parachute. That’s one experience I’d rather avoid, but it happened. Not the skydiving part. My OS was dying, and I wasn’t prepared.

Read the horror story in this article I wrote for Smashing Magazine

How Flexbox Works

teaser image

In CSS, float and clear serve for layout much the same way as the tables they replaced: As stand-ins that work well enough. But they’re still limited. One proposed solution is called the CSS Flexible Box Layout Module, commonly called the Flexbox.

Get visions of the future in this article I wrote for Team Treehouse

CSS Frameworks

Pre-built frameworks get designers up to speed with a limited methodology rather than spending time building an intimate knowledge of CSS positioning. I reviewed 15 responsive CSS frameworks to see how each approached the problem of adapting to mobile.

Peruse the many options in this article I wrote for Team Treehouse

Progressive Enhancement

teaser image

Responsive web design typically takes a top-down approach: Design for desktop, then pare back for mobile devices. Unfortunately the result carries a whiff of “if you were on a real browser … ”

But there’s a smarter approach. A smaller approach.

Start from the inside in this article I wrote for ZURB


teaser image

It’s hard to remember how much trouble computers once caused people. People needed help learning to integrate computers into their work, and later at home. Interface designers used visual analogies to help people relate to abstract computer functions. Then realism got old.

Mix the best of two styles in this article I wrote for ZURB

Source Order

In a perfect world, designers could arrange the elements of any HTML document without changing what it means.

We’re not in that perfect world yet. But we can control, to an extent, the order in which elements appear in a Foundation row.

Shuffle responsive layouts in this article I wrote for ZURB

Layout Code

teaser image

I remember the frustration of having to program layout when I used to just move some text where I want it. Fortunately, how web layout works is not hard to grasp.

Decipher layout code in this article I wrote for Webdesigner Depot


UXPin: My day job involves writing and illustrating tutorials, creating instructive videos and copy editing articles as needed.

Grawlix Comix: The official blog for my “second job” called for a more tongue-in-cheek voice than my usual work. (See more at the old blog too.)

Smashing Magazine: I write on a variety of topics for this popular online publication.

Team Treehouse: I wrote freelance articles that focused on responsive web design — particularly layout.

Webdesigner Depot: For this online publication I wrote freelance articles.

ZURB: Full-time job at which I wrote weekly tutorials and other articles, moderated webinars twice a week, researched industry statistics and copy edited the company blog as needed.


Copyright 2016 Ben Gremillion unless otherwise noted.
Find me on Twitter & LinkedIn