Apple Canyon Designs Rebrand: Design

An Article Posted byJim in Web Design

Apple Canyon Designs just received a facelift. We started the business in early 2012 with a very basic landing page with our contact info on. By the end of the year, we had a fully-fledged site up and running. Since then, the site has largely remained untouched apart from adding to the portfolio. We’re always meant to start a blog, but pesky distractions such as paid work kept getting in the way of actually doing it. We recently launched a sister business to Apple Canyon Designs — The Quail & The Dove Wedding Films — replete with a shiny new blog. It then felt like Apple Canyon Designs had become the poor neglected older sibling.

So it was time for Apple Canyon Designs to get some love. It’s too easy to neglect one’s own site as someone that builds websites for a living. This shoemaker’s children were going to get shoes!

Old ACD logo

We started with the logo. The old logo was just ACD written out in The League of Moveable Type’s ChunkFive font. It felt kinda tired. We were using Mark Simonson’s Proxima Nova elsewhere on the site, so we decided to go all out and use this for the logo too. Proxima Nova is a commonly used font, but that’s for good reason. The typeface comes in a variety of weights, all of which are available through Adobe’s Typekit for web use. It’s such a well-crafted and versatile font, so even though it scores few points for originality, it was an easy choice to stick with it.

New ACD logo!

We kept the “Apple Canyon Designs” part of the logo simple, just changing up the color and weight for “Designs”. There is an increasing need for a simple circular logo to use in social media and other third-party services. We like to use Instagram and we also host all our videos on Vimeo. Both of these services require round logos. If you don’t provide one, they round off your square artwork for you. Very thoughtful of them. So we came up with a simple amalgamation of A, C and D. It may not be that clear that it is the letters combined, but more importantly, it makes a recognizable logo in itself. We don’t usually dabble with logo design for clients, but it was fun launching Adobe Illustrator and getting my hands dirty with this one.

For the redesign, I used Adobe XD (Experience Design). I realize this post is becoming a bit of a love letter to Adobe, but it’s just testament to how great their Creative Cloud suite is. We use it for everything we do: design, photography and video editing and compositing. Anyway — XD is one of their latest offerings and it provides a way to quickly mockup websites using vector based tools. It’s very simple to use. Their tagline for it is “Design at the speed of thought” and I felt that to be true. I could import photos, use Typekit to manage typography and then create vector shapes which I could then easily export as SVG to use on the web. I only designed the homepage, replete with header and footer in XD, and then all the other changes on the site I designed in the browser by coding as I went along, using BrowserSync via grunt.js to inject any changes I made in the code. 

For my next client project, I plan on trying some more of the interactive features of XD to develop prototypes for the client to approve before moving into code. I’ve tried Photoshop and Illustrator in the past for doing website comps and never really like either of them. I never got on the Sketch train, so I’m excited to use XD again in the future as it seems to bridge the gap between wireframe sketches and coding perfectly for me.

The first pass of design and development for the site is done. We have a number of other tweaks we plan to make over the next few months, but it felt good to get at least this much up for now. And now we can finally write all those articles we have been meaning to get to…

Care to Share?