NY skyline from the Rockefeller

Handcoded with a little help

Three things drove me back to handcoding my portfolio site.

One was the lack of support for animated ad formats and iframes on all portfolio platforms, essential if you want to showcase built display work, even Flash ads.

Second, Wordpress, which I had been using, was too complex to customise in the way I wanted.

Third was the maturity of front end frameworks like Bootstrap which feature a responsive core, starter theme’s, and rapid customisation.

I also enjoy the hands on challenges of building digital, it's a chance to see what's possible and where my skills are.

Yes that is a picture of New York at sunset which I took from the Rockefeller, just because I like it.

Technologies and techniques used to design and build this portfolio

Photoshop icon


How did we work before Photoshops artboards. Mocking designs up at basic device sizes was essential to my process for designing my new portfolio.

The ability to organising sets of work in artboards, compose key images ‘in-situ’ with device mock ups and quickly batch export the results has been invalueable.

Learn more about Photoshop

Bootstrap icon


Predictable, robust and ubiquitous. Front end frameworks are an excellent way for a visual designer to build fast responsive websites.

Interestingly I found whenever the code wasn't working it was frequently because I'd used custom CSS or over complicated the structure.

You can override everything in a standard framework but about half the time the built in elements can do what's needed.

Learn more about Bootstrap.
Dreamweaver CC icon

Dreamweaver CC

After using Brackets for the last few years it’s been refreshing to come back to Dreamweaver and see a modern flexible development environment with the integration of frameworks like Bootstrap.

I still miss brackets rapid contextual code commenting and the temporary server testing.

Learn more about Dreamweaver and Brackets.
Edge Animate icon

Edge Animate

Animated HTMl5 ads were created using Edge Animate.

Edge Animate was the fastest way to create moderately complex flexible HTML5 animation for visual designers. Adobe has since switched back to a revamped Flash called Adobe Animate.

Learn more about Edge Animate and Adobe Animate.
After Effects icon

After Effects

All the video display work and digital out of home work was created using After Effects. A fast and flexible tool with large palette of creative options.

For this portfolio it was also used to edit screen captures and converted SWF files into MP4 files.

Learn more about After Effects.
After Effects icon

Greensock TweenMax

Adding simple lightweight animated flourishes to any of page is fast and easy with Greensock's TweenMax.

The framework can be customised and optomised with a variety of download and CDN options.

For handcoding HTML5 display there's no competition.

Learn more about Greensock.
Illustrator icon


Many of the vector elements and layouts were done in Illustrator before prototyping the work in Sketch or Adobe's Experience Designer.

Creating crisp high quality PNG and SVG files.

Learn more about Illustrator
Adobe XD icon

Adobe Experiece Design (XD)

I used XD to mock up and test out user journey’s for my portfolio.

Adobe has got off to a blistering start with XD that offers many of the features of it competitor Sketch as well as built in prototyping and all the Creative Cloud suite integration you’d expect.

I was also keen to see whether even a relatively small site could benefit from a wireframing and prototyping perspective.

Learn more about Adobe XD.
Blender icon


Blender was a small but enjoyable part of the process of building this portfolio.

It was always going to be difficult for flat artwork to demonstrate a design compared to a 3D rendered mock up.

Blender has many of the features you see in high level 3D apps like Maya and 3D Max with an active community of users and developers.

Learn more about Blender.
Sketch icon


Intially I tested Sketch over Adobe XD to mock up my new portfolio site but the need to add plugin’s for basics like prototyping and associated learning curve made me switch, despite XD still being in it's infancy.

Regardless Sketch is a very capable app and if wireframing and interaction design are your core needs it’s certainly the goto for UX and UI researchers and designers with a wide range of support materials and plugins.

Learn more about Sketch.
Pixeden logo

Pixeden mock-ups

Mockups of devices are a nice way to demonstrate digital design work in and Pixeden are a great place to find a good selection of free and moderately priced ready-to-use Photoshop mockups.

Ideal for time pressured presentation or portfolio work.

Learn more about Pixeden.