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.