Fall Sale Promo

divicell

FallSoocial1

screencapture-mc-exacttarget-cloud-1501530227809

Technologies used:

  • Adobe Illustrator: to create decorative accents.
  • Adobe Photoshop: to enhance and correct photos.
  • Adobe After Effects: to create landing page video {animated pineapple}
  • Html/CSS: to create the landing page.
  • JQuery: to create special hover states in menu.
  • MarketingCloud to design the email.

Bike MD Web App Style Guide

GRID SYSTEM

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.

BikeMDGrid

TYPE SYSTEM

BikeMDFont

COLOR PALETTE

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.

BikeMDColors-01

LOGO

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.

BikeMDLogo-01

IMAGES

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.

BikeMDBackgroundImages-01.png

ELEMENTS

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

 

Salesforce App Building Day!

 

I love developing, I love designing, but most of all I love product design. Ever since I attended The Iron Yard, I always knew that my next step would be app-design. I mean, even on my everyday life {you can probably relate} I use my phone for pretty much everything.

My current job wants me to build them a customer-facing app, I’m a long way from being able to do that code-wise,  but when I read that Girl Develop It RDU was offering an intro class for app development with Salesforce, I knew I had to jump in. We use Salesforce at work for email marketing, so, I’m pretty well-versed in email design with the product, however, I also know that there are so many more services we could be taking advantage of!

Screen Shot 2017-06-25 at 2.38.11 PM

The class was held at Pendo’s location, which is a beautiful office in Downtown Raleigh, I was totally yelly when I saw their comfy desks, and awesome cranberry-modern pink accent colors. But most of all, I fell IN LOVE with their Dino!

What I walked away from this class was that, creating a customer-facing app is a little bit closer to me than I anticipated with this system so long I’m ok with not coding it {but, if you knew me, you would know that I would do it for a project I’m in a crunch to finish, but I would not be ok with it, and I would make it a point to hack the heck out of it}. If you are unfamiliar with Salesforce, you should check it out, I’m very interested in learning some more, this was an excellent class!