1.5 Portfolio, Final Project

Mikkel Julian Petersen.

Time period:
Nov. 27th 2016 - Jan 9th. 2017

Software used:


The objective of this assignment was to create a new portfolio from scartch using the tools and techniques we had learned during the program. In addition to this, we were to update parts of our previous projects to show that we had improved, since the makings of those projects, and the give a better picture of our knowledge within the fields of design.

Material given:

User Test

To determine what I had to do in order to make my portfolio I first had to determine how my original portfolio was recieved, so I penciled out a user test addressing the 3 most important functions of my portfolio page.
  • Information about me
  • Overview of my projects
  • Ways of getting into contact
The results of my user test indicated that I had an issue with giving people access to my content, as it was either too complicated to get there or because of the lack of updates on the page. Other than that the test indicated that my page functions properly, however two of the test candidates did mention that they would've liked to see my social media presence better exemplified, when it came to contacting me.

User test executed:


For the layout, I had many different ideas. Eventually I took a bit of inspiration from Material Design, by google, attempting to get a sort of layered, paper cut-out feel to the design. After having made some wireframes, I decided to focus a lot on rounded corners, to give a softer feel to the content on the page.


For the colors I decided to rely heavily on white and blue, with white working a sort slate for content, blue working as a the background a the highlight for the white slate. I also found a comfortable redish color to functions as a contrast to the blue color. Lastly I decided to use black for the footer and the navigation to insure that they didn't take away from the content.
Having more or less decided on both color I went on to make some mock-ups.

Coding and setup

I started out with fleshing out the mobile version so I had a collection of all the different classes and ID's that I need to make the page, after which I adapated it to larger screen widths. I wanted to make sure that the page would scale well so things like image boxes would resize and flex depending on screen width.

When it came to the navigation bar, I decided to remove two things, in order to remove clutter.
The first was "Learning", which was supposed to show my progress on the program chronologically, instead I introduced a simple numbering system on the page called "Portfolio" that made time periods appear more clear. To solve this I also introduced Icons on each project page to clearly illustrate where I had made progress as I had gone through them along with detailed explainantions of where I felt that I had progressed.
The second was "Contact" or rather, I moved it to the footer in the shape of social icons as I had discussed with the test-subjects. This was due to the reason that I had yet to learn how to setup a proper, working contact form and that I wouldn't want to mislead my visistors and that I found that a contact form like what I had at the previous one didn't fit in with the design at the current point.


I feel like I've learn a lot about my own capabilities, but also my limits within both, graphic design and coding. I would for instance like to involve scripting on this page but due to my very limited knowledge I've chosen to leave it out for now. The process of making this page has also taught me that I need to improve my optimisational skills, as I've had to admit that this page is suffering a bit of loading issues at its current state.
Developing on this page has also given me hope for future projects as I've not only become better at figuring out how to approach large project like this, but my process has also become faster and more effecient.
I am all in all happy with the results of the project but I expect to improve the product of it in the future, by quite the margin.