Altadis didn't just want me to design a new app. They wanted a fresh coat of paint for their fancy new ordering system in the form of a new logo and branding guidelines.
For this design, there pretty much wasn't anything to go off of: the existing retail framework had zero branding and Altadis didn't want a copy of their existing logo. They wanted something snappy that gave their new app a feeling of professionalism and authenticity.
GT America is a pretty ubiquitous font by now (it had just come out when I was beginning the designs). I definitely had some internal corniness alarms go off using a font called “America” for a client named “Altadis USA,” but I think it’s perfect.
Gotta keep it simple. Since GT America doesn’t do anything too fancy with its chunky, symmetrical capital “A,” it was the perfect framework for the logo background. I just removed the ink trap and lowered the inner apex.
USA! USA! The American flag's 13 red and white bars turned out to be a perfect framework for the logo. It preserved the “A” shape , lined up eerily closely with the apex and crossbar (makes me wonder if Grilli Type used it as a guide), and provides a handy-dandy 13-line guide for the accompanying text.
It’s really important to me that my logos work in two colors. I wanted to evoke old American industrial logomarks, the kind you see on freight trains and shipping containers. Early designs elongated the lines, but that looked too much like a failed sneaker brand from the 80s. Better to keep it simple and in the background.
And these hands just… took forever. Sometimes you have to put away your guides and grids and just do it by hand. More than just moving product, Altadis Connect is about connecting business owners, territory managers, and suppliers together by making it intuitive and reliable to manage hundreds of thousands of dollars worth of product from your beat-up iPhone 5. No successful business is built without trust, and I wanted to reinforce Connect’s human-to-human element.
GT America is such a workhorse of a font, emphasizing the humanist texture and crunchiness of grotesques while injecting a stupid amount of readibility, even at tiny sizes. It’s probably the most legible UI-friendly font I’ve ever seen.
The logo went though a huge amount of iterations and experimentations before arriving on the final design. In the end, I tried to go with the simplest, most visually efficient approach with no bells and whistles.
I know I already said it, but the handshake was easily the most difficult part of the design. I spent a lot of time trying to create a stylized pair of hands using an isometric grid, but those ended up being too jagged and abstract. I eventually just blocked out the space I wanted the hands to occupy, then softened and rounded the forms until I got a design I felt was reasonably recognisable at a small size.
Here the 13-bar flag guide has been applied to the Connect 360 fulfillment feature. This design was ultimately turned down in favor for a less abstract approach, but I think it does a good job illustrating the modular system I was trying to use for the logo. I liked the advantage of using a rigid vertical guide while allowing the horizontal space to expand or contract depending on the mark.
I made two versions of the logo for light and dark backgrounds so little details like the fingers and cufflinks would still show up with the colors inverted.
When I made this site, I decided it was the perfect time to learn CSS Grid. At the time of me writing this, 0ctober 2nd, 2018, CSS Grid only has partial support in IE 11.
Since I intend for this site to be an example of what I can do, and not a comprehensive commercial product, I’m ok with that sacrifice in usability, especially since signs point to IE11 eventually adopting full CSS Grid support.
So with that said, I’d recommend using a different browser, such as Microsoft Edge. If you got cursed by a witch or something and have to use IE, you can contact me at firstname.lastname@example.org or you can check out my
Linkedin, Dribbble, or Instagram.