Development of Professional Portfolio

Branding

As stated previously I had done a lot of experimenting with branding throughout the three years of university leading up to this project. Last semester when designing my portfolio website I had found a brand that I was quite happy with, below I have detailed some key aspects of the branding choices and why I believe them to be a stylistic representation of my craft.

I first began with the name which, was a very easy choice, given that I had recently bought a cool new domain ‘jackbodman.codes’. I had noticed a few creative agencies online that had began to incorporate the domain ‘dot extension’ as a part of their name. Because of this I decided to brand myself under the name ‘Jack Bodman Codes’. Straight to the point, my names Jack Bodman, I write code and it’s also the domain for my portfolio website.

Logo: Throughout the years I have experimented with a few different logos, many of which I tried to find a way to represent computing and code. In year two I began using the logo seen below, which represents a CPU (the part of a computer that processes almost all functions).

Moving into year three I really liked the idea of the circuit board logo. However I decided to simplify it into more of an Icon/Trademark style logo. This resulted in the circle logo shown below with the three circuit pins sticking up from the bottom.

Font: Once again I wanted to use something that was representative of development and computer coding, after trying out a series of over the top digital and tech inspired fonts combined with the logo, I decided to keep it simple, making use of the Courier Monospace typeface. I chose a monospace font as these are often used in the basic text editing programs developers use to write their code. Shown below is the new icon logo with the Courier font demonstrating how it looks when spelling my brand name.

Colour: In order to easily keep a consistent style I chose to work with a simple two colour palette. The first being white (very boring I know) combined with a rich and deep blue shown below. I chose the colour blue as in increasing years I have noticed being used by a lot of the biggest web based technology companies such as Facebook and Twitter. Based on a few different sources I also found that blue is meant to represent things like security (very important aspect of backend development, especially when working with user data), trust (I want to ensure the potential clients/employers that I’m trustworthy and can get the job done) and technology (the medium in which I work). Because of these relationships between blue and the things it is said to represent I decided to stick with this colour.

As I had chosen to only use two colours, I needed a way to jazz up the aesthetics of my brand. Since I had simplified my logo to the point where it may not be as obvious that is representing a circuit board, I decided to re-enforce this design aspect by creating a subtle circuit board pattern that could be used as a background image for mockups and large text sections. Using adobe illustrator I drew some simplified line art versions of components commonly found on a circuit board such as CPU chips, resistors and batteries as shown below.

I then took these line art components into photoshop where they were arranged into a random pattern and given a light blue colour to make them slightly stand out from the background, while also not being so obvious that they make the foreground images and text two hard to read. This resulted in the pattern shown below which I feel gives my brand some additional depth while also re-enforcing the technology/circuit board theme.

Portfolio Design

With a consistent brand in place I started working on my printed portfolio by deciding what sort of a role I wanted it to fill. I had noticed while studying the previous year groups work that many people had used their printed portfolio as a duplication of there online portfolio. With it being 2019, where every potential employer or client more than likely has access to the internet. A full duplication of the web portfolio into a book seemed like a bit of a waste of time and money in my opinion.

Because of this I opted for a shorter brochure style printed portfolio. I wanted this to be a a short throw away type of portfolio that highlighted some of the projects I had worked on, and provided contact information and links to the online portfolio if people wanted further information on a project. The benefits to this style of printed portfolio is that it is much cheaper to produce multiple copies, meaning I can leave them with potential clients or employers.

Sticking with small portable brochure style, I decided to go with a A5 landscape booklet with about 20 - 30 pages. Listed Below are the pages and projects I decided to include. For my bigger and more interesting projects I dedicated 4 pages while smaller projects used 2.

Cover Page: Contains Logo Brand name and what it is I do (Website and Application Developer)

Table of Contents: Lists all the different sections of the book and the page they are located on.

Introduction Section Divider Page: A divider page that introduces the first section of the booklet.

About Me: This section is like a small Cv outlining my education, experience, the core programming languages I use, and a small biography about myself.

What I Do: This page details the code frameworks I use and what I use them for (Laravel for Web Apps and Wordpress for CMS promotional websites for example).

Contact Details: This page contains links to my branded social media platforms, portfolio website, and contact email.

Projects Divider Page: A divider page introduction the second section of my portfolio booklet.

All the sections detailed below are used to share information about my projects.

Transmedia 2018 Website (2 Pages)

Alculator Application (4 Pages)

Project Box Website (4 Pages)

Whitchurch Silk Mill (2 Pages)

LUFC News Templater (4 Pages)

Creanu Website (4 Pages)

To keep a set format throughout the booklet I made a simple plan for how the project pages would be filled.

The first two pages of a 4 page project and only two pages of a two page project, would be dedicated to providing a paragraph about the project in general, the key technologies used in its development, and the URL to live project (if applicable). The second page is used as a visual page, displaying mock-ups of the final project and in some cases a small sentence or two about an interesting aspect of the project.

The last two pages of a large project are dedicated to highlighting some of the impressive code within the project. Offering an opportunity to share some of my code and a paragraph about what it does. Below are some simple wireframes I used as I guide for the projects sections layout.

In terms of layout composition I essentially tried to copy the style of my online website, which uses blue boxes and a very square layout style, while the text (on the project write ups) floats freely around the images. One change I decided to make was using the pattern background on the mockups as well as the title dividers. I felt this added a bit more character to the book and looked more visually appealing than the plain blue backgrounds I use for mockups on the website. Web to professional portfolio layout comparison images below.

With the basic pdf now in place I decided to make full use of the InDesign software by adding interactive elements to the PDF for the online version. This included functioning hyperlinks to my live projects, navigation links applied to the table of contents, and buttons added at the bottom of the page allowing user to click through the different pages, or jump back to the table of contents.

*I unfortunately had to remove the middle button which should link to the table of contents, as I couldn't get it to work*

Professional Portfolio

Professional Portfolio and Self-Branding Project

Introduction and Brief

Development of Professional Portfolio

Branding

Portfolio Design

Conclusion