The Saga of the Color Channel Customizer


11 years, this is how long I’ve been designing for textiles as a side-gig. I guess you can say that I’m pretty familiar with the different techniques that are used in this world. You can probably imagine my surprise when, during a lunch meeting with a client in Puebla, just outside of Mexico City, he mentioned that his designers use Photoshop Channels to color-customize their designs.

Continue reading

Bike MD Web App Style Guide


Simplicity everywhere! Since Bike MD starts off as a questionnaire to narrow down the bike and the problem type, the grid system is very simple as the screen changes as the user makes selections.





Because we selected some grunge – vintage looking images for backgrounds, I decided that the color palette should stay simple, with 3-4 colors at most. I knew we would need font colors, and highlighting colors.



I tried a few things {as sampled here}, but eventually we narrowed down to this design because it not only feet the theme and brand, but the vertical design also served itself as a perfect mobile-ready image. Where you see charcoal is transparent, so the image goes over the background photos for a truly unique and cool look.



Early on during the brainstorming aspect of this project, I started searching for images that would inspire me, {as I always do}, and an image collection appeared on my search that was the beginning of this entire style guide. The images captured exactly what the team discussed, so we purchased them and they became the background images of our pages.



Primary Navigation links = $white text over image;

Screen Shot 2017-09-02 at 9.58.08 PM

Primary Navigation links: hover = $seafoam solid top border;

Screen Shot 2017-09-02 at 9.58.01 PM

Secondary Navigation links = $white text; header two size;

Screen Shot 2017-09-02 at 10.26.05 PM

Secondary Navigation links:hover = $seafoam text; header two size;

Screen Shot 2017-09-02 at 9.59.17 PM

CTA Buttons = $charcoal background; $white text;

Screen Shot 2017-09-02 at 10.27.37 PM

CTA Buttons:hover = $white background; $charcoal text;

Screen Shot 2017-09-02 at 10.27.47 PM

Selection Buttons = $white background; $charcoal text; Header 2;

Screen Shot 2017-09-02 at 10.27.57 PM.png

Selection Buttons:hover = $charcoal background; $white text; Header 2;

Screen Shot 2017-09-02 at 10.28.08 PM.png

Fun element: I know, I know, this may not be super kosher, but, my team and I thought it would be fun to add an unexpected element to this process, once the client makes the different bike style selections, they are prompted to select the type of problem they are having, we decided to change things up a bit, the circles are white, once you make a selection they turn seafoam, they also spin, also, as you see on the top of the bar, the user can now see what brand, year, and model bike they are researching.

Screen Shot 2017-09-02 at 10.28.25 PM.png