Branding

Personal Portfolio Website

PROFESSIONAL PROJECT

This project was a logo and website redesign for my own website. I wasn't able to identify myself with my logo or my website anymore which was the reason of the brand redesign. From the color scheme to the layout of the landing page there where a lot of areas that needed to be redone. In the last months I learned a lot about websites and UX/UI. That's why I wanted to use my new knowledge to start fresh.

Idea Development and Concept Development

The idea was to analyze my old online portfolio and figure out how I wanted to present my projects online. I wrote a list of things that I wanted to change starting with a logo redesign, a new color, fix the old icons, fixing the font because it wasn't consisted on all pages and adding rounded corners to the images. These were the main goals and changes of the project adding a lot of little things and problems that come along the way and had to be fixed in the code of the website. But the first I created a new logo because I couldn't identify myself with the old one which consisted of my name written in handwritten font and a circle filled with the old color of the website.

Logo Development and Final Design

My logo design process started with sketching out different ideas with pen and paper. The goal was to use my initials for the logo in a circle or square shape because it can be used very versatile. Furthermore the logo should be modern and have a clean design. When I finally picked an idea I switched to Illustrator to continue working on it. During the design process I also created two logo ideas from the final version that I didn't end up choosing because I wanted to have a stronger emphasize on the letter "D" than the "K".

The final logo consists of my Initials the "D" and "K". The lines should not only represent the "K" vertically flipped but also create an arrow that points to the right representing moving forward. For the background I used a filled green colored (#234946) circle. As one can see below there are different versions of the logo for a variety of areas. The first one is just the green circle with the white initials.The next one is for the favicon and the colors are inverted because depending on the viewers browsers (dark mode on or off) the green would not be visible enough because of the low contrast between the grey and green. The last two versions are the logos with the text next to them were one was used for the desktop version of the website and the other one for the mobile version. The difference is that the text of the mobile version is bigger to make it easier readable on smaller screens.

Icons

I redesigned the social media icons - LinkedIn, Xing and Instagram - from my old website because they weren't consistent. The old LinkedIn icon and Xing icon were filled and the Instagram icon just had an outline which made they seem unbalanced. Now all three icons are the in the same style with a white outline and a no fill color. Furthermore they were repositioned on the website and are now beneath the text about me and no longer in the footer.

Website

After I created a prototype in Adobe XD, my brother made the changes from the new design in the code. Changes that were made overall were the new logo in the header which is now positioned on the left and not in the center anymore, and I got rid of the categories under the header because they didn't work for me. The font sizes and weights were adjusted for the headings and the body text, creating a clean and consistent overall picture. The social media icons got repositioned from the footer to the about me page and the old color got switched with the new green one (#234946). On the landing page and the project detail pages all the images got rounded corners. The project title and category are written in grey while all the other text used on the website is in black except when the background is green it is white. The background on the "About Me" page changed to green and the picture of me got switched to a new one with more color in the background which also created a contrast to the green. The new social media icons are under the text and I added new software skills. The last page was the contact page which also got a redesign. The contact form now fits to the images on the website as it also got rounded corners. When you click into one of the boxes the background color changes to white and the font color to black making it easily visible which of the boxes is currently selected.

May 29, 2020