LugonjaDesign.com
Web based portfolio evolution.
Over the years I’ve had several iterations for my personal online presence. In 2010, after I had finished school, I created a website with a fullscreen slideshow that was a replica of my printed portfolio. Each project was displayed as a screenshot with a short text description and a popup modal showing more pictures. After getting more familiar with web design and coding I created a more traditional layout for my 2011 website. In 2013 I started working on a new design that was a much more involved project, that I used as my personal website through 2018. At the end of 2018 I came up with a new design that is a culmination of all my coding knowledge thusfar. That website is the one you are currently using.
2010 - 2019
LugonjaDesign.com 2011
This is what my personal website looked like in 2011. A more traditional layout with a menu bar across the top and a large centralized area to showcase each project. Each displayed images and descriptions with navigational arrows to move between them.
LugonjaDesign.com 2013
In 2013 I began creating mockups of what I wanted my new website to look like. I knew I wanted to use a grid system as the underlying framework, so I started researching what was available at the time. I ended up using a framework called Foundation and stared putting together the site. By the time I was gathering projects for this new site I had a couple years worth of work built up so I had more than just school projects to use. I also wanted the design to be responsive, so no matter the device being used to view it every page looked correct. Foundation was a big help in this regard as it had built in breakpoints for the grid system and the ability to have specific elements viewable based on the screen size. I began coding and adding projects over the next few years, until I decided to create a whole new website for 2018.
LugonjaDesign.com 2019
Shortly after finishing the coding for my 2013 website I was coming up with ideas on how I could improve the design and functionality. In 2018 I had a concept for what I wanted my new site to be and set out on figuring out the coding. I knew I wanted it to be simple, using thumbnails for the main interface and to display images and descriptions on a separate page. I used a newer css element called flexbox to create a series of thumbnails, and I wrote some javascript to make sure the boxes were always the correct size depending on the device used. Every time the site is loaded the order of the thumbnails is different, creating a dynamic feeling. As for the project pages I found a nice jquery plugin for the image sliders called Fotorama. I customized each to fit my style guide and wrote some simple javascript functions to enhance them even more. The current design is very easy to add new projects and because of its simplicity should last for many years to come.
Identity Systems Page
This is an example of a full project page, specifically the Identity Systems page, as it would appear on a mobile phone. Each project page consists of a title card explaining the project and shows useful links and dates. Then, depending on the project, there is a combination of images, slides, videos, and descriptions. Each image, whether it is a single picture or part of a slideshow, can be expanded to full screen. Up top there is a home icon for going back to the home page and a shuffle icon for going to a random project page. Once the bottom of the page is reached there are a few of buttons to take you back to the home page, scroll to the top of the page, or go to a random project.
UI Prototype
Finally, this is a look at the initial mockup for my new portfolio website. Complete with prototyped actions for select buttons in the interface. I made sure to design mobile first to ensure everything would work on smaller devices and seamlessly scale up. Once I had a general idea of how each main page would look, I brought the design into a HTML editor and began filling in the placeholders with final artwork.