Notes from the Studio

The Evolution Of Postscript5

Postscript5Old

After over three years with the same design, I’ve relaunched my portfolio here at postscript5.co.uk. As many Freelance Designers will tell you, your personal site tends to take a backseat to client projects. Between client work, writing, blogging, side projects and personal time, it’s been a challenge.

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

Old Version of Postscript5

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

 
Postscript5 Logo

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!

127 Comments

Got something to say? Feel free, I want to hear from you! Leave a Comment

  1. Jonathan Andrew says:

    Loving the new site design, especially the background pattern, so subtle but so effective. Please disable the comments after approving this :-)

  2. Great new look Grace, and great use of texture ;)

    Looking forward to see how you make the site responsive, and the winners of the givaway :)

    Great work!!

  3. Scott Riley says:

    Loving the Subtle Patterns Grace :)

    I like your approach of just getting it out there, you chose a lovely minimal theme!

  4. Saad Irfan says:

    Very Lovely and a Creative Design. Simple, but Sophisticated….

  5. David Horn says:

    I’m a big fan of the ‘use a base template and launch fast’ approach … I did the same and it took the pressure off hugely. Nice work.

  6. Dave says:

    The new site looks amazing, nice work! I am really drawn to the background texture… I Love it!

  7. Xavier Watttez says:

    Hello, love your new design. Fine work :)

  8. Fayre says:

    Wonderful job – I love the look of the site – plus it is easy to find your way around. Brilliant!

    I particularly like the textured background, so clean and simple, yet eyecatching.

  9. Jo Klima says:

    Congrats on getting a new site up for your business! It’s completely true that it’s so hard to find the time to work on your own website :P Love reading about some of your process too.

  10. that works :-)

    keith

  11. Rachel says:

    I love pencils and moleskine books, and your website looks cool!

  12. sriganesh says:

    Congrats on your new site. MAx cdn is best for speeding the site. I.m using it and have a good experiences on this.

    Keep rocking.

  13. Congrats! The site looks awesome. I really dig the new logotype.

  14. I would love to win something…

  15. Art Journey says:

    New website looks excellent Grace! Wish you the very best!

  16. Congratulations with your nice fresh site!!
    Best,
    Tes

  17. Elissa says:

    What a wonderful Idea! I’ll deff be following you all(:

  18. Emma Taylor says:

    Ooooh yay, well done on getting the new site up!!

    (…thanks for the mention too, it’s always a joy working together!!) :)

  19. Nice post, it’s given me some ideas for developing my own website. I’m also getting back into drawing so the sketch book and pencils would be a welcome addition to my art materials.

  20. SarahI says:

    Nice website, thanks to Derwent for the recommendation…

  21. Jamie Murphy says:

    I love the new re-design! Very clean and organised!

    The 404 page is genious! :)

  22. Take Hart says:

    Love the new font, elegant!

  23. Maurice says:

    Great connect…I dig the initial impact. I will definitely digthrough!

  24. Chris Nguyen says:

    I like the new launch. Im digging the logo, very nice

  25. Loving the new site design Grace especially the footer!

  26. Angela says:

    I know what you mean about personal taking a backseat to professional. You’ve done s great job of making a WP theme really work for you, and like I said on Twitter, I love the new logo — incorporating the 5 in the name brings it all together.

  27. Congrats on your rebrand and relaunch.

    The new site and brand look great. Best of luck to you.

  28. It looks great! …wasn’t expecting anything less to be fair but sweet job all the same it comes together wonderfully!

  29. Chris Roy says:

    Nice to see that you have managed to take a look at your own site, as often (well, as is the case with me) it always seems to be your own work that waits. Which is good in some respects, as we need to keep our clients happy. I am actually redoing my website at the moment and am hoping to launch this month, so keep your eyes peeled! :) Keep up the great work!

  30. Love the new design. Makes me determined to finish my new design and port my site to WordPress. As soon as the next client design is done. yup. Headed off to Colorado tomorrow for a vacation, and I have my Derwent watercolor pencils in my bag. Love them and Moleskine notebooks. So, yes, I hope I win something, but if I don’t that is OK too!

  31. Anna Richards says:

    Congratulations on your fresh new spanking website.

  32. Andrew says:

    Great re-design. Your so right about freelance web designers own web site being neglected. Good luck with the continuing development of the site.

  33. Charlotte says:

    This design provides the perfect background for information! It’s not crowding the viewer with a load of unnecessary visual information. I also love the fact that I can’t immediately see a repeat in the background. Lovely :D

  34. Cristian says:

    Hi Grace,
    great work, I really like the style, the details, the background pattern and the “moving” icons on Approach page, just listing some examples.
    Keep it up.

  35. Really, really great, Grace. Bravo! :)

  36. Really nice work!

    Love the new typeface, too.

  37. The new site looks great, Grace! Well done!

  38. James Fuller says:

    I’ve always enjoyed the marriage between the subtle browns and blues. I really like your choices for this site redesign. The Raceway font for the logo is a nice touch.

    • James Fuller says:

      Nice reference to 30 Rock in the footers! :-)

      “I’m a star, I’m on top, somebody bring me some ham.”

  39. Borut Perme says:

    Nice font, clean layout, and I like the color scheme..
    Regards from Slovenia.. =)

  40. Grace – The new website looks really great. Very modern. The thing I really like about it is that it does not distract from your work, but rather, offers a very cool, clean platform for your hard work to be viewed on. I’ve followed you on twitter for some time, and always appreciate your insights. My compliments to you. All the best – JB

  41. Nikki says:

    Love the new design, Grace! It looks awesome and really showcases your own design style and development. I love this little fun parts of it – the moving objects and fun easter eggs. The 404 page is awesome! :D Look great!

  42. Nice redesign! Simple and Neat! Congratulations on your new rebrand!

  43. Marius says:

    Hey! Looking great! Designing for yourself is a bitch, but you seem to have managed it well.

    Congrats!

  44. Cinthya Batres says:

    I’d love to win :)

  45. Rob Jones says:

    Love the new design!

  46. Jennifer says:

    Awesome awesome new site. I love the twitter landing page. Looks great!

  47. Martin says:

    Really cool work Grace glad to see things are going well for you.

  48. Catherine Thorp says:

    I like your really classy site and I’m a great fan of Derwent pencils and Moleskine notepads. Quality tells!

  49. dvd says:

    always wanted a moleskine :)

  50. Mark James says:

    Great work Grace! Your socialise page is genius!

  51. Sara says:

    I love the new design, especially the 404 page! ;)

  52. Tracy Nixon says:

    Great new site – very impressed! Thanks for the great giveaway too – I am following you on Twitter and tweeting as @TracyNixon xxx

  53. Devin says:

    I love the new design. This is the first time I have heard of Derwent. They look pretty cool.

  54. Marc says:

    Great redesign, and you do some great work. Best of luck.

  55. Congrats on the Re-Brand. Like the direction of the new website :)

  56. Grant McAllister says:

    Love the new design and the re-brand! Can’t wait to see some more of your work

  57. Been after a Moleskine ;-) Congrats on the re-brand. It’s great to have a refresh every now and then, blows the cobwebs out!

    Good luck!

  58. Love your new website! I’ve always been a fan of your work, this confirms it. Good luck with your website and your work!

  59. Marjorie says:

    Very nice and smooth… Enjoying the css3 effects too! Good job, congrats.

  60. Love it! Excellent work!

  61. Great new site. I always love reading about the life cycle of websites and how they have grown since they first came about.

  62. Linda says:

    Nice work! Plain, simple, stylish.

  63. Simple and effective :)

  64. Gary says:

    Site is looking nice Grace..
    Liking the background and the colours used.

  65. sheena says:

    Clean, minimal and to the point…very nice re-design!
    Great giveaway too!! Count me in :)

  66. Diggin’ the new design Grace. Nice use of subtle pixelated textures in the background, as well as naive touch with the easter eggs!

  67. Very effective redesign. Love the new homepage especially.

  68. John Hughes says:

    love the site, very stylish and modern my favorite pages have to be the 404 and the fantastic contact form, well done

  69. Maya says:

    First time visitor, but the site looks great!

  70. Lily says:

    Looks quite stunning! Nice work!

  71. Andreas Paulsen says:

    Great site! Love the simple color scheme.

  72. Ty Paulhus says:

    The new site looks great! I love the colors & subtle textures. Count me in for the giveaway, thanks!

  73. Julia says:

    ‘Made with love and’ what? I must know!

  74. Oscar says:

    Hey! Gratz with the new design! looks great :)

  75. Enormous says:

    Love the colours – very subtle. The 404 page is the best. Nerd.

  76. The redesign is looking good and gotta love the parallax effect. :)
    Oh, and thanks for organizing the giveaway. :D

  77. Drew Hollings says:

    The site looks amazing, but the best part has to be the 404 Error page! :P

  78. David D says:

    Very nice. Simple and strong. Looove the colour scheme.

  79. Justin Baker says:

    Awesome new site! Congrats. Also awesome give-a-way. Feel free to follow me @bakerdesigns Thanks!

  80. Bobby says:

    hook a brotha up! love the new site.. keep up the great work!

  81. Steve Haigh says:

    Lovely redesign. Crisp, professional, very nicely designed with great balance. I’ll be back to see more.

  82. Ted Kusio says:

    Really nice redesign (not that the original was a stinker)!

    And I liked reading that you started w/ an existing theme and reskinned it. I too do that, for many of the same reasons you outlined. Someday, I’ll build one from ultra scratch.
    :D

  83. Katie says:

    Tweeted and following. Great new design! @ktcoventry

  84. Nancy says:

    Love, love the new design!

  85. Melissa N says:

    What a great redesign. And thank you for the chance to win something too.

  86. Cynthia Taylor says:

    Congrats on the new website and relaunch!! Great giveaway- found via twitter :) love moleskines and derwent pencils, yeah !

  87. ruth says:

    Love the color scheme! Very nice.

  88. Paul James Rea says:

    Clean, elegant, easily navigated. Need I say more.
    @pjrea

  89. Nathan Leduc says:

    This site is rocking out 4 real. The pixelated background totally works. Loving it.

  90. TomF says:

    nice redesign. refreshing.

  91. Clive Walker says:

    Liking the new design. Particularly the page background and the portfolio section detail pages. Nice!

  92. Troy Jensen says:

    I always like winning things…
    Very nice site design, too. Wasn’t familiar with the old site, but still, this one has a nice feel to it.

  93. indra says:

    Nice redesign. You are one of the few designer-persrons on twitter with useful links :)

  94. Caroline Smith says:

    It’s nice to read the “story behind” a redesign. Design should have a reason… not just for the sake of it. You’ve definitely built on the foundations of the original and made the new site kickass! Over.

  95. Mary Beth Kerr says:

    Bravo!!!! Cool site…. glad it was shared on twitter

  96. Jon Phillips says:

    Looks like I’m a little late to the party ;)

    I absolutely love the new logo – in fact the whole redesign is quite a departure from your previous site design (in a very very good way). Love it.

  97. Stephanie W says:

    The site is absolutely gorgeous – I love the simple navigation and clean, modern color scheme. Great work and congrats! You’re right, finding the time to dedicate to your own sites is tough!

  98. nice site, easy to read, easy to manoeuvre round, hope the re-vamp works for you. contact @pooohbear2811

  99. Interesting article, I liked the insight of giving yourself a fixed deadline for a personal project (such a simple idea I may have to nab!) and how you amended a WordPress theme to stay inside that timeframe. A bold move!

  100. Peer Bentzen says:

    Absolutely beautiful background pattern!

  101. Love your new site Grace. I always find designing your own website is so much harder than designing for clients! :-)

  102. Loving the logo and look of everything. Can’t wait to see more from PostScript5.

  103. Mike Jones says:

    Nice new look! Great job!

  104. ray says:

    Great Idea!

  105. Richard Howell says:

    Great site, love the re-design :)

  106. Digging the nice clean layout, Grace. Well done.

  107. Mike Houben says:

    I love the new site. But the most beautiful thing is the smaller one. The Backgroundpattern. I’m loving it. ;)

  108. Sara says:

    Looks really great :)
    Thank you for the chance ^^

  109. Hi There!

    Having not seen the old site design I can not make an informed opinion on the difference but from what I see I really like the makeover.

    Thanks for the giveaway!

    Kathleen

  110. Michael Rose says:

    Good job! WordPress as a CMS is the way to go for quick and easy updating.

  111. komiska says:

    Thanks for this informative post! Especially love the structure of your article!
    Of course, the visuals are just fab! Will you have a nother one telling us about your experience with media queries and MAX CDN ?

    Cheers!

    • Grace says: (Author)

      Hey, thanks for the comment. Yes as soon as the site is responsive there will be a full write-up on how it was achieved. I’m joining Max CDN next week so in a few week’s time I will publish an article on how I think it’s performed.

  112. Thomas Sturge says:

    Great article, love the layout and design

  113. Eric Hoffman says:

    Hi

    I really adore your new site design, especially the pixelated background and the comment form, the drop shadow is very well done :P

    Eric

  114. Mark S says:

    Great design :)
    Great write-up!
    ^_^

  115. I love your new layout and design.

  116. Mark says:

    Love the layout of the footer and the subtle cubes in the background.

  117. Niki Brown says:

    Looks great! Loving the pixel texture!

  118. Mark Lancaster says:

    Love the new site design, the icons on the services page are awesome!

  119. Graham Smith says:

    Thank God you reminded us as nearly forgot to enter. Cheers and all that stuff…

    Graham

  120. Adam says:

    Love the new site!

  121. Stephanie says:

    I love It! :)

  122. Grace says: (Author)

    Thank you to all those who commented and entered into the Giveaway. The response to the new design has been amazing and I hope you stick around for more in-depth articles and some sweet giveaways!

Trackbacks for this post

  1. Hi, I’m Grace Smith » Win Derwent Pencils & Moleskines!

Leave a Comment

Got something to say? Then I want to hear from you!