Design Work · Helpful Things

Client Work: Website & WordPress Redesign

David Gordon Photography, Swashed and Folded

It’s never easy to get your website right first time. Often your initial online presence is a means to an end – a way of getting your business on the web quickly, rather than being a true representation of your brand or outlook. David got in touch with exactly this issue… His blog did a perfectly adequate job of acting as a shop window for his photos, but it lacked a personal touch.

The site suffered from the limitations of the template, and David didn’t have the web skills necessary to pull things into shape himself. What David needed was someone to help him bring the site up to date with a more contemporary look-and-feel, and also to give everything a more welcoming, friendly approach. Oh, and if we could make it a bit easier to keep on top of updating the blog along the way, then that would be a bonus!

After a few lengthy emails where we explored exactly what David wanted from the site, it was to time once again to turn to Pinterest. David put an inspiration board together, which contained some lovely examples of the sort of thing he was drawn to, and we began to iterate some designs. After a couple of revisions we ended up with a design that seemed to tick all the boxes, with a mixture of contemporary textures, vintage styling and a classic layout. The central area on the homepage is a fully customisable slideshow, with typography-rich headings. Below this we opted for a feed of four featured blog posts, and a detailed footer area giving ready access to David’s contact details, Facebook and Google business page.

The blog pages were given a similar treatment, setting up some simple and effective styles for headings, comment boxes, form elements and other items. This means David can create new blog posts and pages in future, confident that they will all share a consistent style.

The “About Me” page is always a difficult one to get right. It’s your chance to tell the world not only how you work professionally, but to give them an insight into the person behind the name… And if that means sharing with the world your fifteen minutes of fame at the hand of the Countdown clock, then all the better!

Finally we had a look at David’s pricing page. Like many photographers he offers a range of pricing options for prospective clients, which meant the old page had ended up quite complex, and confusing for readers. To tackle this we went for a column-based layout, echoing the look-and-feel of the other page elements. With this new layout, couples can see at a glance the full range of options available, and make a more informed decision when choosing the package they wish to go for. All of which means better communication with prospective clients, which can only be a good thing!

The site is live right now at davidgordonphotography.co.uk/, so why not take a look for yourself and see what you think!

Details

Platform: WordPress self-hosted blog with custom theme
Fonts: Oswald (Google Webfonts), Six Caps (Google Webfonts), Proxima Nova, Prenton Ultra Condensed

Design Work

Client Work: Chic + Unique Orders of Service

I’ve been dying to blog this one ever since I got the first proofs back from the printers…

When Lisa and John got in touch about designing an Order of Service their brief was fairly open-ended. They wanted something that felt summery and laid back. They liked things to look clean, and contemporary. They liked light grey. They liked pink. And they didn’t want anything too stuffy or overly formal. In many ways the ideal brief!

I had in mind a kind of handmade-but-not style, combining a nice tactile card-stock with typefaces inspired by the hand-drawn lettering of the 60s Avant Garde designers, and finally a bit of hand-finishing to round things off. Happily, this was exactly the sort of thing Lisa and John had in mind, so after sending them off to pick their preferred shade of grey (the trusty Fired Earth paint books proving most useful in this case), I got the design underway. The guys had a couple of quotes they wanted to include which gave me the opportunity to play around with the type, using a minimal splash of pink to add emphasis and highlights.

The inside of the Order of Service was kept simple for ease of reading, although the lettering style was carried across to keep things consistent with the cover. Additionally, the inner section was trimmed from the edge of the outer pages, allowing it to be framed by the border of the cover.

Once printed, the booklets were hand-tied with a pink-twist bakers’ twine as the finishing touch. You can see the results below…

  

Details

Paper: A5, 4 printed page full colour, 300gsm Mowhawk Via Felt with hand-tied trimming
Design: Swash and Fold
Fonts: Thinaire, Taluhla, Paris, Cheap Pine, Populaire, Vineta, Kenotaph

Design Work · Helpful Things

Client Work: Website & Logo Design

Marie Lloyd Photography, Swashed and Folded

Marie and husband Jason got in touch shortly after Swash and Fold opened its doors to the world, looking for a helping hand with the online side of their Wedding Photography business. Additionally, Marie wanted to build a stronger brand identity, with an updated logo and look-and-feel that better reflected their target market.

As the business grew, the guys found themselves with two websites – one acting as a ‘brochure’ site, and the other home to the blog. This presented them with several potential niggles…

  • Two sites are way more time-consuming to keep up-to-date than one.
  • Two different URLs meant visitors were forever hopping between sites.
  • Any SEO efforts were getting diluted across two domains, rather than targeting one site with guns blazing

Fortunately Jason is pretty clued up on the tech side and had already got the ball rolling on sorting the domain issues out, meaning I could dive right in and get started. First things first though – we had a logo to design…

As you can see above, Marie’s logo was perfectly functional. But it lacked character, and didn’t really reflect the personality of the business. The design of the websites suffered from the same symptoms… they did the job fine, but without a strong logo to hang a design around, the page layout was a little on the flat side.

Marie had some ideas on the sort of logo and style she liked, and the sort of thing she wanted to represent the business. The problem always is being able to communicate those ideas – design and taste are notoriously hard to explain in words alone… what we needed instead was some way of visually exploring those ideas.

Step forward Pinterest!

I got Marie to set up a board on Pinterest to reflect her design taste, and told her to get pinning! Pinterest is perfect for things like this. The more pins Marie added, the more her taste and visual preferences started to become apparent. Looking through the board it was possible to identify common elements across the range of pins, and colours, typography and a general design style gradually revealed themselves.

Pinning done, and time to put pen to tablet. It was obvious from the Pinterest boards that Marie was leaning towards a strong, type-driven style. Oranges, mustards and other bright tones kept cropping up also. Before long we had a strong candidate, and after a few minor adjustments and colour tweaks our finished logo was ready to face the world:

… along with a monochrome version for watermarking photos…

With design approved and Marie happily off re-badging her Facebook page, we turned our attentions to the web side of things. We’d already worked out a new sitemap, putting the important information front and centre for visitors, and tucking supporting pages out of the way until they were needed. The guys were already familiar with WordPress so it made sense to stick with this, especially as the blog would continue to play a key role in the site.

For WordPress, I prefer to start with a blank canvas like Starkers, by Elliot Jay Stocks. Its basically a version of the default WordPress theme, minus any kind of formatting whatsoever. This means we then have a solid starting point, but can still stamp it with its own personality. And personality is the key thing here… there’s an old business adage that says “people buy people”, and its no less true in an industry like Wedding Photography. So it was important to make sure Marie and Jason’s personality came across. As a result, the tone of both the design and content needed to be friendly, fun, upbeat and approachable. Exactly like the guys!

The overall design reflected the logo closely, introducing a second contrasting colour, echoing the folded “ribbon” elements in headings, and discrete use of web-fonts to tie the whole thing together. The font used in the logo (“Kenotaph”) proved a little too elongated for general use in headings, but a medium weight slab from the very similar “Rama” family was happy medium.

Style is all well and good, but counts for little if the content isn’t there, so I wanted things to be as simple as possible for the guys to be able to update, particularly the homepage. To this end, I made a custom script in WordPress that automagically updates the main slide banner and the four featured posts using post categories. I also made sure the code was as easy as possible to work with, making things like two-column layouts a doddle!

Finally, Marie and Jason had commissioned some fab photos of the two of them, which fitted perfectly into the design and provided a nicely personal finishing touch! Good work, you two 🙂

The site is up and live right now at www.marielloydphotography.co.uk, so why not swing by and take a look? And give Marie a shout on the Twitters while you’re at it – I’m sure she’d love to know what you think!

Details

Platform: WordPress self-hosted blog with custom theme
Fonts: Kenotaph NFRama Slab, Rosewood Std, Nimbus Sans Condensed

Design Work · Helpful Things

What’s in a name?

Swash

n. (Typography) – An elegant extension on a letter form, either a decorative elongation of an existing element or an added-on flourish. Typically extends beyond the limits of the individual character. 

Wash and Fold

n. (Service) – A convenient and cost-effective method of sending out your laundry to be done by professionals. Many take advantage of a wash and fold service to save time and reduce effort.

Swash and Fold

n. (Service) – A design company set up by Ian Davenport of Big Bouquet Wedding Photography, offering a professional range of print, type and digital services to brides, photographers, bloggers, and other creatives in the wedding and lifestyle industries.

Take a look at the homepage for more information on the available services…

Design Work

Vintage-inspired Wedding Invitations

There’s something rather exciting about getting invitations back from the printers…

You can spend as long as you like tweaking, kerning and proofing your design in the relative safety of the computer screen, but there still remains a huge sense of trepidation and anticipation when unwrapping a freshly delivered parcel hot off the press.

With the invitations above the printers did themselves proud.  Sara & Mark wanted something type-led and vintage-inspired, with the final design drawing heavily on poster styles of the late 19th-century, complete with wood-cut influenced illustrations. To complete the look we agreed on Colorplan’s Mist stock, with an off-white tone and tactile finish.

The final product is better than we could have hoped for – colours are vibrant and punchy (even on this darker paper), and the details are crisp and precise. Take a look at the photos below and see what you think!

Details

Paper: A5 350gsm Colorplan Mist
Design: Swash and Fold
Fonts: Mailart Rubberstamp, Foglihten No 01, Rosewood Std