…Building a Portfolio (Part Two)

Recap

You can find Part One here.

My plan was to follow up with some key design decisions, namely regarding font and colour.

Method in the Madness

I’m going to take a small tangent here to discuss organisation. As I covered in part one, most of my work begins on scraps of paper. Those scraps of paper are raw, nothing more than my thought process transferred to hard copy. Part of that thought process is to pose questions for “future me” to answer. I write down thoughts with questions marks, prompting future me to investigate. As I digitise the thoughts, I begin to filter and organise them. I also begin to answer those questions.

Why is this relevant?

Well, if I may attempt to provide some wisdom, decisions shouldn’t be made on the spot. You may hold an opinion before you research a subject and that opinion may change as you do the research. While making my preliminary plans, I know a decision has to be made — I may even have an opinion at the time of planning — but I know that I need to look into it further before making the decision. I think it’s a healthy way to work.

Workflow

With the above in mind, I set about digitising my plans and organising my workload. This always starts with two apps: Wunderlist and Freedcamp.

Wunderlist is fairly well-known to-do app. I created one task for “Portfolio” in my “Web Dev” list (which sits in the “Work” folder) and added sub-tasks for each of the elements I’ve identified.

Screenshot of Wunderlist Portfolio Task

One Task to Rule Them All

Freedcamp is a project management app, similar to the more commonly known Asana. At this stage I use the “Discussions” section as a dumping ground for relevant resources and to track decisions.

Screenshot of Freedcamp Discussions section

“Discussions” in the Loosest Possible Sense of the Word

Finding Resources for Design

“Font Combinations” doesn’t just mean finding a font stack to me. It’s about everything within the design related to font. This includes the size of the text, the scale between headers & paragraph text, the space between text and, of course, the fonts themselves.

To select the typeface, I simply go to fontjoy and violate the “Generate” button. It’s an amazing app with some serious science behind it. As I create combinations I like, I record them in a discussion on freedcamp.

Modular Scale was a game-changer but doesn’t allow the user to use a typeface of their choice. For that reason, I recommend type-scale. One of the fonts I had in mind was Muli, so I plugged that into fontjoy and chose Augmented Fourth as my preferred scale.

Next on my task list was a colour palette.

Usually, I will randomly choose between coolors or palettable when building a colour palette, before finishing off with paletton for shadows and highlights. However, I opted to try material design for my portfolio, which has its own palette. A quick search on Google found material palette, which was very simple to use.

I had some reservations when using material palette. I decided to try green as the primary colour because it’s unique but, sometimes, unique simply means uncommon. Uncommon, in turn, means “deliberately avoided”. Nonetheless, colours can be changed relatively easily so I progressed with green and light grey.

Wireframe Design

My final task was to produce a digital wireframe design. I enjoy wireframing, it’s like playing a very easy game of digital lego. Take a block, put it here, take another block, put it there. Tinker a bit more and eventually you have the basis of something nice. If it doesn’t look nice, nuke it and start again. Wireframing is super-quick anyway. My usual tool for wireframing is Mockingbird, which is easy to use and has a nicer aesthetic than other tools.

However, in keeping with my experimental outlook on this project, I decided to try something new. As a result, I came across MockFlow, which has Material elements within its resource panel. As its name suggests, MockFlow is a mock-up tool, with capabilities far beyond wireframing. On that basis, I decided to go beyond a mere digital wireframe and produced a first draft of the entire design.

Version 1

First Draft of my Portfolio Design

Portfolio Design – First Draft

Once I got used to MockFlow as a platform, I whipped together a design in good time. The design blends the typefaces, font sizes, colour palette and elements from previous work alongside content freshly created for this draft.

As with every iteration of a design, feedback is crucial. I am currently collecting feedback, which will almost certainly form Part Three of this process.

Next Steps

Collect feedback from as many different people as I can. Once received, parse the feedback to find common themes/requests and make amendments where necessary.