JdV Portfolio website

The redesign of JdV Portfolio website to achieve goals that align with the client's wishes to keep up with today's trends and maintain a sense of professionalism that showcases her abilities and skills.

MY ROLE Web designer and developer

CLIENT Jeanne de Villiers

INDUSTRY Web Design, Web Development, UI Design, Fine Art

PROJECT OVERVIEW/PROJECT SCOPE

The main goal for this project is to redesign JdV's website to make the appearance professional and showcase her skills. To achieve this, I captured all aspects of the previous website for reference, and researched extensively what current trends are regarding portfolios. With the knowledge gathered from doing research, it was in some cases more obvious than others what needed to change. With the changes I expect that the new webstie will portray a sense of professionalism that will lead to more opportunities for growth.

PROBLEM

Example of JdV's previous website home page

Example of JdV's previous website about section

Example of JdV's previous website portfolio page

GOAL

Example of JdV's new website contact page

PROBLEM AND GOAL

During capturing the previous website as reference I came across a couple of problems. Although the home page showcases her coding abilities and skills, it does not portray a sense of professionalism that she wants to show now. That is why I ended up designing the goal home page that is elegant and professional.

The second problem I came across was while doing research pertaining specifically to portfolios, and that is the use of measure bars to show a level of skill. It is outdated and subjective. I rather decided to show her skills, education and experience in a more traditional sense going for the resume style, keeping in line with the elegant and professional look.

Instead of having a separate page to showcase projects, I have included them on the home page. Most recent projects being showcased first with a detailed case study, and previous work with a link to the websites. The previous website seems to be missing a contact page, which is a huge problem. The redesign contains a form as well as an active email address.

STYLE GUIDE

Example of colours used in designing JdV's website

FONTS

RANADE Variable

Headings

INTER inter

paragraph

BUTTONS

Active state

Hover state

CHALLENGES AND CONSTRAINTS

In all honesty, the most challenging part is writing a case study.

Being the client and the designer has its own set of challenges, as design decisions seems to change quite easily and a lot. Knowing what you want and executing the design needs to be handled like any other client designer relationship.

Developing the design into a working website is another challenge I faced. There is always room for improvement and growth. Facing certain challenges to write code according to a design is one of the most hardest challenges, but very rewardig. Coming up with solutions to work around some of my short comings is definitely an opportunity of growth.

PROCESS

At the very beginning I set out to research and find inspiration. I had an idea of what I was going for, and made a mind-map, capturing ideas such as elegant, professional and captivating for the brand.

According to what I studied and researched, a combination of black and gold radiates glamour, elegance and style. And so the idea was born. Digitally drawing a background for the new portfolio website consisting her initials, as this her brand as an artist as well. Using shapes and a dash of colour to portray her quirkiness is important and needs to be visible throughout the website.

I started with layout drawings to sketch an idea of what the new website will look like. Consisting of mainly three pages: home page, about page and a contact page. Each project with a case study respectively opens in a new page as well. Keeping it minial coincides with the brand of keeping a sense of professionalism. After completing the skeleton layout I used my mood board and inspiration board to start designing on Figma.

Together with designing for web, I designed for mobile, keeping in mind that the same principles should apply when viewing the website on a mobile phone.

MOBILE SCREENS

THE SCREENS SHOWING FLOW

Design and flow of website shown on Macbook

Then started the coding. Some more redesign, and some more coding.
Testing. Coding.

Until is was done. Success.

MEASUREMENTS AND RESULTS

I do not have real world measurements (yet), but I did use my research to reference successful designers and what they did in regards to writing case studies and designing their portfolios. According to their success, I base my own to be successful.