We're hiring!

We're actively seeking developers and designers for our Detroit & Ann Arbor locations.

UX & Design

4 Reasons Designers Should Be Coding

HTML web codeI chose to use this stock photo in an effort to visually represent this concept at a high-level. It does not represent actual project code or structure I would go about in my own work.

Designing a whole product experience requires fully understanding your constraints and being able to validate the final outcome of your choices. When you’re creating software, both constraints and validation can be wrapped up in technology and code. Can software designers really make the best possible decisions if they don’t fully understand the technical ramifications of what they’re doing? I don’t think they can.

I was recently considering this idea after participating in an AIGA West Michigan roundtable on the topic of designers & coding. Specifically, the question was around how much coding designers should be doing.

Over the past few years, I’ve been doing more and more coding, and it’s been a very positive experience. Here are the top 4 things I took away from it. Read more on 4 Reasons Designers Should Be Coding…

Also posted in UX/Design Practices | Leave a comment

Painless Prototyping with InVision App

Processed with VSCOcam with x1 preset
Disclaimer: I swear this is not a promotional blog post. I genuinely really like using this tool for prototyping. 

There are many tools and approaches out there for prototyping, and choosing the appropriate tool for a project depends on your skill set, the project’s needs, and what is most appropriate for the client.

Many times, a prototype that utilizes actual code is superior, especially if more complex interactions need to be demonstrated to the client and to other developers. On the other end of the spectrum, crude paper prototypes are a good option for getting ideas out quickly and validating initial concepts. And in other situations, rough clickable prototypes are more than suitable, and can help to move a project along way faster than anticipated. Read more on Painless Prototyping with InVision App…

Also posted in UX/Design Tools | Leave a comment

Decomposing a Large-scale Design Project

My current project is very large, and we’ve been working on a process for decomposing features so that everything we design delivers value. This method also integrates tightly into Atomic’s agile software development practices, allowing both designers and developers to work on the same set of features simultaneously within continuous delivery cycles.

Project Background

During the project kick-off, we agreed to start by redesigning an existing website into a responsive mobile web app. We also needed to create a visual design system, incorporating a new brand direction that the client was introducing.

Our audience for this app was very large, and the demographic didn’t require a super modern aesthetic. Still, we did some brand exploration work to identify how the brand image and identity revealed itself in the existing and new visual design assets.

You want to learn as much as possible if there is an existing product and user base (analytics or research must be studied). With our UCD practices at Atomic, we want to base decisions on things we know (i.e. what the users/market are telling us, what the business needs are). Below I’ve outlined some basic steps to get you started. Read more on Decomposing a Large-scale Design Project…

Also posted in UX/Design Practices | Tagged , | Leave a comment

Giving & Receiving Productive Design Critiques

critique1

Art school tends to get a bad rap — something about living in a cardboard box and having the worst projected salary after graduation. Thankfully that’s not all true, and many of the skills I learned while getting my B.F.A. now apply daily to my role designing software.

The basic design skills I learned (grid structures, color theory, typography, concept development) were valuable, but the most important thing I learned was critique. Read more on Giving & Receiving Productive Design Critiques…

Also posted in UX/Design Techniques | Tagged | 1 Comment

Getting Started with a Horizontal Grid

grid

Establishing a solid type system for you application goes beyond picking the right typeface and weight. You can’t establish a solid type system without setting the rules for a horizontal grid.

Some designers are afraid to try their hand at a horizontal grid, while others aren’t sure where to start. By the end of this post, I think you’ll realize that it’s not all that difficult and you’ll have what you need to get started crafting your own horizontal grid in no time.

Read more on Getting Started with a Horizontal Grid…

Also posted in UX/Design Tools | Leave a comment

A Great Lightweight User Testing Setup

One of my core beliefs as a software designer is that regular user testing is extraordinarily valuable to almost any project. Getting feedback and validating the usefulness and usability of features as they are being developed helps ensure that your time, budget, and effort are being spent wisely as you work to create a product.

For many, the phrase “user testing” conjures up images of a test session conducted with scientific precision on a large scale in an elaborate, expensive usability test lab. However, in many cases, testing at this scale is unnecessary. What you really need is some concrete feedback from a few real users. The good news is that you can easily get this feedback with a small budget and a bit of effort. Over the past few years as I’ve incorporated usability testing more fully into my own practice and our process here at Atomic, I’ve had the opportunity to iterate on my technique. In this post, I’ll tell you about how I use cheap, readily available software to conduct and record a usability test.

Computer/Software Setup

In a nutshell, I use two computers: one for me (the test facilitator), and one for the test participant. I also use two pieces of software: GoToMeeting and QuickTime Player. Here’s a quick diagram of how it all looks:

Read more on A Great Lightweight User Testing Setup…

Also posted in UX/Design Tools | Tagged | Leave a comment

3 Ways a Whiteboard Can Improve Communication & Participation

at-the-board

Everyone has their preferred method of communicating, and mine happens to be with pictures. I find myself grabbing a pen or marker when I need to communicate even the simplest of ideas.

Read more on 3 Ways a Whiteboard Can Improve Communication & Participation…

Also posted in UX/Design Techniques | Tagged | Leave a comment

My CSS Toolbox

css-toolbox-badgeAfter working on the front-end dev of a project for a couple of weeks, I’ve put together a collection of CSS snippets that I find essential in almost any project. I would have loved to have all of these in one place when starting out my current project. Instead, I had to find bits and pieces of solutions as problems arose. Most of these aren’t incredibly easy to find and usually require a bit of investigation.

font-size/line-height

The font-size mixin is fairly common and very useful. It gives you font-sizes in rem and even includes the px fallback for IE. I decided to take it a step further and included a couple of lines for the mixin to calculate line-height based on the font-size. With the help of Patrick Bacon, I used this LESS mixin for any body copy: Read more on My CSS Toolbox…

Also posted in UX/Design Tools | Tagged | Leave a comment

4 Tips for Designing Wireframes from Desktop Down to Mobile

mobile devices

“Mobile first” seems to have turned into a buzzword lately. How dare anyone design a web experience any other way? It’s certainly a good framework to follow, one that can be applied to most designs these days. But on a recent project, the client wasn’t so concerned about the site’s mobile presence. The desktop was priority, so we had to do things the “old” way and design from the desktop down to mobile. Read more on 4 Tips for Designing Wireframes from Desktop Down to Mobile…

Also posted in UX/Design Tools | Tagged , | Comments closed

Prepping Illustrator’s Settings for App Design

Much of digital design has drifted away from raster and towards the math-based vector. Traditional tools like Photoshop introduce hurdles when designing with vectors, making the design process less efficient. This isn’t a criticism of Photoshop, but rather the realization that medium constraints effect what type of tool that’s needed to design efficiently.

As a designer I’m always exploring new ways to make my workflow more efficient when it comes to expressing my ideas visually and on through to implementation. So over the past several months, I’ve been starting the design process in Illustrator, then continuing to use Illustrator to finalize my high-fidelity visual assets.

Here are a few lessons I’ve learned trying to use a native vector tool to design application UI. Read more on Prepping Illustrator’s Settings for App Design…

Also posted in UX/Design Tools | Comments closed