With his advice I bought a pre-loved Canon 350D and started snapping. We’d go out shooting around the coast and I would bug him about writing all his tips down for me to memorise!

This was just the beginning of my journey…

After a few years I had outgrown my little 350D and bought a Canon 600D in January this year. I’ve since been progressing through a Project 52, taking (at least) one image a week for a year. The aim is to challenge myself and improve my knowledge and skills, and I’ve loved every minute of it. In case your wondering I’m still in touch with my ‘Photography Guru’ as I call him, though his health doesn’t allow him to go out and shoot as often as he’d like. We still meet regularly to catchup and it usually ends up with him smiling at my latest lens purchase!

Photography has gone from a simple pastime to a real passion and having a passion outside of design is important to me, I don’t want to become all engrossed in one artform and photography has further enhanced my grasp of colour, balance and composition…as well as much more. I still have much to learn (studio lighting) but I’m thoroughly enjoying every second I pick up my camera.

Portfolio

A photographer has to have a portfolio….right? I’m still an amateur so I don’t need an all inclusive site, a simple, elegant portfolio showcasing my work is sufficient. After just a few days I had the theme setup and I’m now pleased to announce that gracefulcaptur.es is now live!

The name came after much brainstorming between myself and my friend Michael (@tw2113), I didn’t want the usual boring domain name. You can also visit gracefulcaptures.com if you’re so inclined!

Insight

As it’s updated each week, WordPress was of course the first choice for a CMS, there is also room to incorporate a blog in the future. The logo was an idea I had for a while, to take one of my favorite typefaces, rework it and use it as a brand. The curves can also form the letters G and S (my initials).

My good friend and long time collaborator Michael Beckwith was brought on board to give it some striking finishing touches, such as the animated logo and the super useful archive structure.

Future

I’m a designer at heart, I love the web, I love what I do each and every day, however I adore the freedom that comes with Photography and being purely selfish in how and what I capture. I’d love to connect with other photographers, so please feel free to leave a comment below or add me on Flickr.

Happy shooting….

Dissecting the responsive design workflow, though, can be difficult — it’s highly individual and iterative. However, you can apply general tips and techniques to almost every responsive project.

From content structure to scalable images, we’ll cover seven techniques to consider in your next responsive design.

1. Mobile First

Starting with a mobile first approach and designing with progressive enhancement covers all bases, helps you focus and prioritize the constraints of mobile design, while you build new innovative experiences and capabilities.

It means the default presentation and base content is mobile, optimized for the simplest devices first. Devices with small screens and media query support is then served an advanced layout. Finally, the content and layout are then enhanced for the “desktop.” It’s an approach even Google has adopted, as the number of people perusing the web on mobile devices continues to grow at an incredible rate.

Designing for the mobile experience should now be our starting point, not the end. It forces us to focus on the essential content, to build optimized, fast-loading mobile experiences that are progressively enhanced, with the user at the forefront.

As ZURB, the team behind the popular responsive CSS framework, Foundation, noted, “A mobile first approach doesn’t just concentrate on developing for mobile phones; it is also used to develop better usability of sites, develop better use of web real estate and better reduce the amount of unnecessary elements from web pages.”

While the mobile first responsive design technique is still in its infancy, and presents a variety of technical challenges, embracing it means you are building on an adaptive, focused, lean, uncluttered future-friendly foundation.

This is an excerpt of my Mashable article, to read about the 7 Responsive Design Tips to Revamp Your Workflow, head over to Mashable, and let me know what you think!

We’ve compiled a list of 10 exceptional free or open source apps for developers to help keep costs minimal, improve productivity and simplify workflow. You will find some old favorites listed; however, you might discover some new tools for your arsenal.

1. Evernote

Working on the web means being organized and productive. Evernote’s tagline, “Remember Everything,” means it should become your most relied upon tool. With its cross-platform support (desktop, web and mobile), you can capture, upload and sync from anywhere to keep your “online brain” efficiently catalogued.

Just a few examples of uses include task lists, scheduling, bookmarks, brainstorming, inspiration, writing and much more. As a developer, you could even use Evernote to archive snippets of code for future reference, using the web clipper. With the intuitive tag system, it’s simple to search and find any stored data.

2. Dropbox

Dropbox is ubiquitous as a cloud storage service; gaining access to files both online and offline has become highly important. Starting at 2GB for a free account, it should provide adequate space to get started. It can essentially become your “project manager,” helping you organize, modify and change files and share them with collaborators in a secure environment.

You likely work across multiple platforms, but it can take time to copy your system files from one platform to another. Dropbox can sync these (such as your XAMPP or MAMP root directories), meaning you will always have easy, fast access to your development files, freeing you up to work on more important tasks.

This is an excerpt of my Mashable article, to read about the 10 Essential Tools for the Lean Web Developer, head over to Mashable, and let me know what you think!

However with several large client projects in the works for Postscript5, I no longer had the time to dedicate to writing, and so my contributions dwindled.

Revitalised

However, at the start of the year, I decided to free up some time to write again. I’m fortunate that I can pick and choose what projects I work on as a Freelancer, so I scheduled my design work to enable me to dedicate a chunk of time each week to research and write.

I’ve been asked in the past by several publications to contribute articles, however I always loved the team at Mashable, so I contacted Matt and within a few hours I had an article outline ready to start. The old adage “if you don’t ask, you don’t get” really does apply! Go after what you want and you just might get it.

My editor, the lovely, Stephanie, makes the process a breeze, and since January I’ve covered everything from Wireframing, to Color Schemes and Browser Extensions. I’ll be posting excerpts of some of my favourite articles here on the blog, just in case you don’t catch them on Mashable.

The process of researching, collating, editing and writing is different for every article, it’s a process I love. I hope you will keep up with me as I chase this new adventure! Please feel free to ping me with design or tech news tips, criticism, advice, tools or recommendations.

When I was asked and tapped to help implement the final touches and functionality details for Postscript5, I knew that I’d have a good time working with Grace. However, before I touched a single line of code, I didn’t realize that I would also end up helping her have such a good time as well.

When a site hides Lemons, you can’t make Lemon-ade

Not only did I bring about the idea for the Socialise page that proved to be highly popular, but I also brought about the idea of some hidden easter eggs. Most are only small touches and barely visible outside of those who utilize the view-source capabilities of browsers.

However there is at least one that stares at people without them realizing it, and one that is only available part time. The running joke involves one Liz Lemon, fictional character from the hit NBC sitcom 30 Rock. I’m pretty sure each one relates to her in some way.

This brings me to the purpose of this post. With Grace’s permission, I am going to point out each one that I put in. So without further adieu, I present the list of easter eggs.

• On the front page there are the three gray images. Located in the code one on the right, right in the middle, is a screenshot of the function that I wrote that randomly echos a quote by Liz Lemon. This function is used in the footer right under the copyright line on the left. I feel people should get a free point on this one because you can’t technically read that spot
• Related to that random quote function, is the fact that one of the quotes actually links to a YouTube video that opens in a lightbox. The specific quote is this one: “I’m a star, I’m on top, somebody bring me some ham.”. If you ever looked at the source code and saw the fancybox code but could not find the ID it targeted, the random echoing is why.
• The most obvious and needing least explanation is the 404 page, with a huge illustration of Liz Lemon, circa Season 2, if I recall what little I’ve seen of the show. Included is an html comment to the original artist from DeviantArt.
• On the Socialise page, the class used on the twitter div, is “fake_lemon_quotes”.
• Also located on the Socialise page, in the Dribbble section, there’s some brief “smack talk” similar to what you get in sports, claiming that the Lemon would be dunking on you: <!–The Lemon would be dunking on you–>

Looking back on things, I’ll admit that there aren’t as many “hidden” lemon references as I thought, but I also hadn’t really thought of the topic much in the past four months either. There are also only so many brief html comments you can make before that version gets old. All in all though, I had fun with the better ones like the hidden video link. Maybe in the future, Grace and I could spend some time hiding new ones…nah, they’re fine as they are.

Thanks to Michael for a lovely follow-up post on how we made the site come alive with some fun hidden items. We continue to work together on other projects and long may this continue!

Introduction

Our portfolio can break or break us, which is often why creating a unique, well crafted site that showcases our work is one of the toughest tasks we undertake as designers.

Before you even create that first pixel though, it’s important to determine if a redesign is even needed. ‘Incessant redesigning’ has been the trend for some years; you get bored of your site, you redesign and three months later the process begins again. These redesigns are often only concerned with the superficial and do little to address the overall user experience and most importantly, how well your portfolio converts visitors to clients.

It’s worth reading Cameron Moll’s brilliant ‘redesign versus realign’ article on A List Apart if you’re thinking of redesigning.

If however a major overhaul is essential, then it’s imperative you plan thoroughly for each stage of the project, in order to make the process seamless.

To read about the 10 vital steps you need to take to pave the way for a successful redesign, head over to .netmag and let me know what you think!

Sketching isn’t optional for me as a designer, it’s essential. I can’t go straight to digital at the start of a project, I always start off with some browser templates or Moleskine (and a few Derwent pencils!)

Sketching kick-starts my creativity and allows me to get ideas out on paper and is the fastest way to brainstorm and convey as many ideas as possible with the least amount of effort.

Process

Staring at a blank Photoshop canvas is not a great way to start a project. Although it may sound exciting to just jump straight in, it can also be quite overwhelming. Sketching gets you over this hurdle and allows you to quickly explore concepts and ideas. I see it as the frame upon which I craft my projects.

Whether it’s a website design, logo design or iPhone app design, it all begins with a pencil and paper. Sketching enables me to break down ideas and fully explore design and layout options and I find putting it down on paper tends to raise questions and ideas, and leads to changes.

To read the full article head over to the Love Pencils blog and let me know what you think!

I’ve redesigned and even coded several others designs, however I’ve never been completely satisfied with the end result. I decided to set myself a deadline of one month to launch the new design and treat it like a client project to ensure this was met.

This a small overview of how the project came together.

Basics

Due to so many stalled attempts to design and relaunch this site, I decided that I would use a base WordPress Theme, which I would then customise to suit my requirements. This was done to enable me to launch quickly and meet my deadline.

This isn’t my ideal approach, however the benefits of it are, it:

• Allowed for a quick and efficient design, build and launch
• Takes the pressure off and allows me to focus on creating a design over the next few months, that is perfectly crafted to my requirements
• Gave me the opportunity to work in collaboration with a friend and fellow freelancer

Details

I felt my previous Portfolio site (the old homepage is shown above) was stale and dated, with dull copy. Overall it really missed that spark of fun which came with being ‘neglected’ for so long. The current site aims to address those issues, with:

• Fun, quirky bio with a more relaxed tone throughout the copy
• Improved Portfolio navigation
• A Notebook (blog) to allow me to update on studio news, tips and advice
• Clearer homepage with more focus on the portfolio
• Radically redesigned contact form
• Social stream with the latest updates from my networks
• Dynamic elements such as the animated icons and logo

There is also a redesigned Twitter Landing Page, and perhaps the best 30 Rock inspired 404 page on the internet!

Behind the scenes, there were a number of tools and technologies used, including:

• Parallax – For the icon movement, seen on the Approach and Services page
• Leaflet – Used for the map on the contact page
• API’s – Used to pull in data to the Socialise page
• jQuery – Used to create the colour to grayscale image hover effect on the Portfolio images

Re-brand

Along with a complete redesign it was high time for a re-brand. While I’ve always favored strong, angular typefaces such as FF Din, I wanted something softer that tied in more fundamentally with the studio name – Postscript. It seemed natural then to run with the idea of a ‘script’ typeface, and after much searching (and late nights), I finally found Raceway.

Raceway is inspired by the wonderful hand-lettering of the late Mike Stevens. It’s an organic, energetic script font that mimics hand painted sign lettering.

It always looked like the number 5 was an afterthought, even though it is an integral part of the studio name. So the number 5 is now incorporated into the word Postscript by taking the place of the letter S.

Collaboration

For the past few years both Emma Taylor and Andy Sowards have been close friends (and collaborators) and it would be remiss of me not to mention them here.

I’d like to thank my collaborator on this project – Michael Beckwith. We’ve talked about working together for months now, and I knew when I was redesigning this site I wanted him on board. Michael brought his crazy cool developer skills to the project, along with his ability to think outside the box. We also shared a love of freshly brewed beverages, WordPress and 30 Rock!

I feel very fortunate to have so many wonderful friends and colleagues in the industry!

The Future

The next few weeks will be spent on making the site completely responsive using Media Queries. I’ll also be working on improving the speed of the site by joining Max CDN.

I’m also working on an updated set of Business Cards which reflect the new design and branding. As soon as these are designed and delivered I will post up some pictures, here on the Notebook.

30 Rock

If you follow me on Twitter, then you already know I’m a huge 30 Rock fan. So when it was time to re-launch the site, it was only natural to include some hat-tips to the show.

Within the site there are three 30 Rock ‘easter eggs’, see if you can spot them!

Giveaway

To celebrate the launch of the new site, I have teamed up with Derwent to giveaway a Sketching Set each to three lucky winners, with a set of 3 Ruled Moleskine Notebooks for each of the three runners-up. The giveaway ends on the 18th August, with the winners picked at random.

To enter just leave a comment below, and make sure you’re following Postscript5 on Twitter, as the winners will be announced there.

The giveaway has now ended and the winners have been announced. Thanks to everyone who commented and participated!

I’m now sharing with you a selection of the online services that I’ve come to rely on:

1. Wufoo

I signed up with Wufoo late last year as a more efficient way of collecting data from visitors and clients. I use Wufoo on both my blog (a simple contact form) and as a Web Design and Logo Design Worksheet for prospective clients. The theme customisation is fantastic, meaning as I redesigned this site, I was able to redesign my Wufoo Forms to tie in with the new design and branding.

Use: Beautiful, Customisable Forms

2. Prevue

I’ve tried most Design Collaboration tools and services and always felt they were lacking in some way….and then I found Prevue. It’s simple and efficient and allows for private feedback and re-branding. The interface for annotating projects and adding comments is excellent. I’ve now used this with several clients who have all remarked on how easy it was to use.

Use: Simple Project Feedback

3. Curdbee

Curdbee is the perfect invoicing solution for me and features Time Tracking, Expenses and Dashboard Reports. It doesn’t have thousands of unnecessary features, it’s intuitive and elegant and allows me to spend less time accounting and more time working. I’m such a big fan of the service Curdbee even featured me on their blog!

Use: Invoicing and Estimating

4. Dropbox

Dropbox is a vital of my business as it allows me to sync my calenders, passwords (using 1Password) and backup my project files. It also doubles as a version control system for important files. Working across multiple machines and devices is straightforward as Dropbox keeps everything in sync.

Use: Version Control & Syncing

5. CloudApp

CloudApp is small but perfectly formed, it’s a quick, reliable and secure way to share images, links and files. Some would argue Dropbox and CloudApp are so similar you don’t need to use both, however I prefer to use Dropbox for permanent, shared folders and syncing while CloudApp is used for temporary, screenshots, bookmarks and one-time file sharing.

Use: Storage & File Sharing

6. Google Apps

My email, documents and calendars all run through Google Apps. I’ve found using this approach has streamlined my setup with zero maintenance and as everything is hosted by Google I have access to all the services on the road. The continual improvements in all the services and ease of use make this a no-brainer.

Use: Email & Documents

7. Paypal

Running a business that has international clients means providing a method of online payment is essential. While PayPal isn’t my favorite service, there isn’t a viable alternative that suits all of my clientbase. The fact that CurdBee ties in with my PayPal account by offering clients the chance to pay straight from their invoice is it’s one saving grace.

Use: Online Payments

8. Teux Deux

While TaskPaper is one of my favorite organisation apps, I’ve found TeuxDeux has become an essential part of running my business. It’s simple, beautifully designed and in combination with the iPhone app, it’s unbelievably useful. I start with a weekly overview and check off tasks as they are completed.

Use: Task Organisation

In an upcoming article I’ll share with you the (Mac) applications I use on a daily basis.

In terms of branding however, it lacks the provision of a vanity URL, and the fact the current profile URL is pretty long, for example this is my profile link: https://plus.google.com/u/0/117113113218324562969/. While you can shorten the URL by using external services such as http://gplus.to/, there is a better way to personalise and brand your Google Plus Profile URL.

Use Your Own Domain

It only takes a few minutes to setup and will not only make the URL shorter (and prettier), it helps reinforces your branding and adds a personal touch to an otherwise meaningless set of numbers.

It’s a simple three step approach:

1. Create a subdomain –> plus.yourdomain.com (I used plus.gracesmith.co.uk)
2. Set up a 301 redirect from plus.yourdomain.com to your Google+ URL (the link is in the address bar on your profile)
3. Make a cup of tea and wait for it to propagate

With Google recently purchasing the domain plus.me, it may not be too long before they roll out vanity URL’s. Until then however, you have a short, memorable, personally branded Google Plus URL you can can proudly linkup and showoff.