Portfolio design notes and brief commentary about this portfolio

Photoshop

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

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.

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.

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.

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.

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.

Illustrator

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.

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.

Blender

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.

Sketch

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.

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.