We're hiring!

We're actively seeking developers for our new Detroit location. Learn more

Visual Design

From Photoshop to CSS

Capturing the visual design intention during the implementation process is often a balancing act. We make trades between literal translation and performance or feasibility. Visually complex elements coming from Photoshop don’t always hold together once they make it to markup. The latest version of Photoshop has a nice tool to help elevate some of that…

Read More »

Also posted in Design & Development, Web | Leave a comment

Sprites, Semantics & Scalability: A Demo with Playing Cards

My first project as an AO apprentice was to create a visual interface for a web-based Blackjack game. One of the first things I needed, then, was HTML/CSS markup for a deck of cards. There are several good bundles available out on the web, but I decided to roll my own, and the result was…

Read More »

Also posted in Tools | Tagged , , , , , | 1 Comment

A Strategic Approach to Wireframing

There are as many wireframing methods as there are designers out there. We all have our preferred set of tools and techniques as well as our own visual languages. Some designers use wireframing or prototyping tools, some create them by hand, and some use a combined approach. As a designer, I find (regardless what method…

Read More »

Also posted in User Experience | Tagged | Leave a comment

5 Design Trends to Watch for 2013

The visual language of design is constantly changing, taking its influence from art, fashion, architecture and a host of other factors. Here are my 5 predictions for where visual design (specifically Web design) is headed in 2013. As bandwidth has increased, so have photo sizes. I think we’ll see an increased use of scaled-up photography…

Read More »

Posted in Visual Design | Leave a comment

Why I Use Keynote as a Design Tool

A couple of months ago, I created a product presentation in Keynote for a new brand and web app I designed. At one point, I decided to build portions of the software interface in Keynote to maximize presentation quality. By the end, I was using Keynote to execute fully refined visual designs and page layouts….

Read More »

Posted in Visual Design | Tagged | Leave a comment

Digital Design Ideas from Artist Llisa Demetrios

I recently had the pleasure of catching a lecture by Llisa Demetrios, the granddaughter of legendary designers Charles and Ray Eames, titled “The Impact of Technology on Three Generations of Eameses.” The first half of the lecture focused on Charles and Ray and their use of technology to design, communicate, and innovate. In the second…

Read More »

Also posted in Web | Tagged , | Comments closed

UX is Simple

I really like this post by Alex Morris: UX is Simple I ran across it a couple of months ago, printed it out, and stuck it to my computer display. It makes a good checklist, something to review every now and again while I’m working on the interaction design for my current projects. What I…

Read More »

Also posted in User Experience | Comments closed

Storyboarding with Inkscape and OmniGraffle

daves-document-normal

I don’t always draw storyboards, but when I do, I prefer sketching with pen and paper. But recently I wanted to produce a clean, shareable artifact that would look nice in PDF and printed form. My usual trick of sketching on paper and uploading photos to Dropbox wasn’t going to cut it this time. I…

Read More »

Also posted in Prototyping | Tagged , , , , | Comments closed

Recap: The Difference Between Art and Design

art-design

The evening of September 6th, Design West Michigan event was a panel discussion on “What is the difference between art and design?” The panel was moderated by Susan Szenasy, Editor-in-Chief of Metropolis, and consisted of Andrew Blauvelt, Design Director and Curator of the Walker Art Center in Minneapolis; and Joseph Rosa, Director of the University…

Read More »

Also posted in Community | Tagged , | Comments closed

CSS3 Border Without the Border

Photoshop Drop Shadow

I recently needed a border around a navigation element that indicated an active state. Each navigation element was equally spaced from the other, and adding a border would adversely affect the spacing between elements (after all, I was adding 6 pixels to the width and hight of the element I needed to style.). So instead…

Read More »

Also posted in Languages, Web | Tagged , | Comments closed