Ernest Szymula

Personal Portfolio Website

Case Study
Website screen

UI Design | UX Design | Research | Web Design | Coding

The Vision

I decided that the creation of a website is one of the most important tasks a designer should undertake. This would also involve the creation of a personal brand with which I could be recognised by. This was an important move as it would open me up for new opportunities such as recruitment, joining up with other designers in the industry and getting my name out into the wild.

Research and Discovery

To begin the project, I started looking at other designers’ personal website’s. After reviewing three designer websites I had a general view of what content was important and what brought traffic to sites. The main takeaway from my research is that the following sections of content are crucial; about me, portfolio with case studies and a contact section to get in touch. When reviewing the websites, I wanted to ensure that the types of designers I was reviewing were different in their nature for example one was a trainer and speaker while another designer was more of a coder and website creator. Doing so meant that I could see how presentation changes depending on the person’s career path and corresponds with what they enjoy. In this part of the process, I also looked at how and where certain content was displayed, for example the social media icons were mostly shown near the start of the webpage and near the bottom.

Website screen

This led me on to my first sketches of possible website layouts where I decided to ensure all wireframes stood for minimalism. After making a couple layout sketches I had a general view of how I could lay out each entity such as images and text.

Planning and Designing Content

After my sketches, I began planning the layout of my personal website in terms of what sections should be visible first, I decided that my portfolio work should come right after the main section of the screen. My choice behind this was the fact that not many people visiting my site have seen any of my work before thus letting the users see what type of content I have created is an important way of letting them know my personality and process. An important feature of the website was the decision to use no sharp edges on my illustrations and icons as this would help in building a friendlier webpage in the eyes of the users. In this step of the process I create all content for the site such as the text and pictures that would be used. I chose the colours which were red, green and blue to create a friendly and playful approach which invited others to look further.

Website screen

This led me to create wireframes which would look very similar to the end-product. By having this content already created I was able to quickly make wireframes that helped visualise the webpage but by having all content I was also able to create a HTML document. This left me with the CSS part of the website which would have to be polished for it to look similar to the wireframes.

Problems I Encountered

During the creation of the website I have faced issues which dictated the final outcome of this project. The issues that caused the most noticeable changes were during the coding process, the first change had occured when I looked at some css grid style navigation bars but couldnt find any that would be visible within the webpage and thus decided to change to a “stick” style navigation. In this navigation the user could access all parts of the webpage and because I was able to change the style and colours of this navigation, it made the website more personal. I learnt that the position of my logo can be made in a specified location and it can also be made in a fixed position so that it wouldnt disappear, however I chose against that method because the site is short thus it is easy to scroll back up plus by placing the monogram in a fixed position it would block content. After a lot of testing I found a big difficulty, when adding certain images into my projects the text had a large gap from below the image and adding bottom and top borders did nothing to solve this. I tried changing the size of those images to no avail, I tried the “inspect” action within Google to try get more understanding on why this was happening and still nothing came up that would cause issues. I decided then that re-inserting the images and entire text could help and it did work until I added those specific images from before. It was then that I realised how the issue could lie in the actual “page preset” itself in my creation tool. And so I changed from A4 layout onto “Web” and conducted the test for my first image, I refreshed the webpage hoping for the best and after scrolling down I realised that it had indeed worked. Then I continued this trend for the rest of the images.

Website screen

I had some issues with the layout of my footer as I wanted it to be both useful and interactive as to ensure users are aware that these elements are hyperlinks. To adjust to these requirements I created my own icons which would increase in size, change colour and be hyperlinked accordingly thus doing actions which show interactivity and make people want to click onto the links. Here are some other issues I overcame with CSS!

Next Case Study