Design Work · Helpful Things

Client Work: Elizabeth Lois Photography, Swashed and Folded

Sometimes designs for a site can be hard to get right. Sometimes you can find yourself going in circles trying to pick the right fonts, the right colours and the right tone…

… Sometimes however a client comes along, drops a gorgeous watercolour logo in your inbox, says “can you do anything with this?” and everything else falls neatly into place, which is exactly what happened with Lizzy and Rhoddy from Essex-based wedding and portrait photography business Elizabeth Lois Photography.

Lizzy had been trying to get a brand that matched the direction she wanted to take the company and enlisted the help of the immensely talented Chelsea Petaja from Oh My Deer Handmades, who produced a stunning watercolour logo with delicate floral details. With a logo as strong and striking as this, it didn’t seem right to try to detract with too many other dominant details on the page. Instead the design had to be complementary to the hand-painted watercolour aesthetic, which meant hand-made paper textures, paintbrush strokes, sketched details and discrete trimmings.

Azalea Rough and Voluta Script Pro were used for the menu and page headings respectively, both hand-drawn fonts that matched well with Chelsea’s logo brushwork.

Additional headings used Jessica Hische’s Brioche which provided a more structured contrast to the other text. Scanned torn-paper edging was used to give a little depth and texture to image frames and key areas, and to keep the general paint-and-paper vibe going.

Finally, for the blog we decided to go for a photo-grid approach. The guys are prolific bloggers, so it felt right to keep text to a minimum on the listing page, maximise the number of posts displayed at a time, and to let Lizzy’s wedding, portrait and boudoir photography do the talking!

Thanks to Lizzie and Rhoddy for being great clients with lots of ideas. If you’d like to see more of their work, take a look at their site at www.elizabethloisphotography.co.uk.

Details

Website: WordPress custom theme development
Fonts: Futura PT, Brioche Roman, Azalea Rough, Voluta Script Pro
Logo Design: Oh My Deer

Design Work · Helpful Things

Client Work: Veronica Varos, Swashed and Folded

Redesigning the website and branding of Pittsburgh-based Wedding and Portrait Photographer Veronica Varos

Veronica first got in touch last year, and it was clear from the first couple of emails how much enthusiasm and creativity she was going to bring to the process. We started off with the usual Pinterest pinning spree which soon gave rise to a very distinct design direction, tending towards watercolour washes, strong typographic flourishes and a fondness for ‘found’ textures. This was balanced by a preference for clean and uncluttered layouts, which gave a clear initial design direction. Veronica also put together a highly detailed and very helpful wish-list, both of features and design preferences. As a result the first draft design needed very few tweaks before taking final shape…

The homepage features a slideshow pulled automatically from the ‘featured image’ of each featured blog post, held in place by some ageing sticky tape. A similar effect is used on the gallery pages, with the slideshow’s navigation scribbled on a couple of bits of paper tape to add to the vintage detailing.

To stop things slipping too far into scrapbooking territory the static site-links at the bottom of each page were given a contemporary ‘circles-and-typography’ overhaul, with each link effectively getting its own logo.

Finally, the blog posts themselves got an unconventional treatment, avoiding the more obvious layout options in favour of a magazine-inspired two-column shape. The essential information stays put on the left as you scroll down the page, meaning visitors always know exactly what they’re looking at.

This was then capped off at the bottom with a trio of calls to action, scribbled on paper tape to keep a visual link back to other parts of the site.

Thanks to Veronica for being great fun to work with on this commission. If you’d like to see more of her work head on over to her site at www.veronicavaros.com.

Details

Website: WordPress custom theme development

Fonts: Carolyna Pro Black, Mensch Thin, Brandon Grotesque, Sorts Mill Goudy

Design Work · Helpful Things

Good enough to eat? Honeywell Bakes website and store

Following on from designing the logo, the Honeywell Bakes website made its debut at the end of last year, complete with gingerbready festive goodness!

Having already worked with Rosie and Rebecca from Honeywell Bakes on their logo, I had a pretty good idea of the sort of thing they were after with their website… Friendly, a little bit quirky, a distinctive personality and lots of great big photos (courtesy of Rebecca) showing the sisters’ baking skills off to the max. Add to that a hand-drawn street scene from the pen of Lydia of Hand Drawn Maps and the site almost designed itself!

A mix-and-match selection of hand-drawn fonts were chosen to give a friendly and welcoming face to the site, along with a few choice doodles.

The full-width gallery gave Rebecca’s fantastic photos plenty of room to shine, with editable captions styled to complement the rest of the site.

One of the main requirements was that people could order online through the site, so WordPress Ecommerce was set up, styled to fit with the rest of the site, and filled up with a range of cookies, cakes and personalised baked gifts.

Of course no WordPress-based website would be complete without a blog, and Honeywell Bakes is no exception with recipes, hints and tips from the girls, along with Facebook and Pinterest feeds, social sharing links and picture-by-picture pinning if you spot something you like!

Has that got your mouth watering? Then head over to the Honeywell Bakes website for more biscuity treats!

Details

Website: WordPress custom theme with WordPress Ecommerce plugin

Design: Swash and Fold

Illustration: Lydia Bevan at Hand Drawn Maps

Fonts: Taluhla, Travel Diary, Carrotflower

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 · 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