Portfolio Website Design
🟪 Project Overview
The essence of this project is to create a website design for my portfolio of artworks. As a student of the Multimedia Design and Development program at Humber College, I will be doing an internship soon. Being a digital designer and thinking about how I would like to present myself to a future employer, I came to the idea that the best way to tell about myself is to use my professional skills and create my own unique portfolio website.
🟨 Project Goal
I set myself the following tasks:
- Create a design that reflects my authenticity
- Impress the user, hit a nerve with my design
- Sell my idea and service through emotional design
- Achieve the uniqueness of the visual components to make this website stand out from the rest
- Work on the proper UX
- Choose the right style using mood board
🟩 Software Used
The main tool in the work of any web design is a prototyping environment. There are 2 main tools — Figma and Adobe XD. Having experience with each of these applications, I found it more relevant to use Figma because of its greater functionality and convenience.
🔶Creative Process
Stage 1 — Associations 🔻
At the very beginning of the work on the project, the first questions I asked myself were “What do you want your self-presentation look like? What feelings do you want to evoke with it?”. With that in mind, I decided to write down the main potential associations that I want to root with my brand in the user’s feelings. Here they are:
- Premium
- Multilateral (combining both Child Core and Old Money aesthetics)
- Sincere
- Nostalgic
- Unattainable but open
- Upscale
- Sometimes playful
- Inspiring
I chose these words because everything described applies to my own self. As I wrote above, I would love my website to combine both the Child Core and Old Money aesthetics, because the qualities of my personality contain these two manifestations. Sometimes I can be playful and funny, while at other times people around me feel wisdom, incomprehensibility, style and depth from me.
◼️ Summing up all of the above, I set myself the main task of combining these two dualities (Child Core and Old Money aesthetics), trying to make them work for each other.
Stage 2 — Typography 🔻
In order to carry out the previous step, I started working on the choice of typography. To do this, I searched for a suitable font in my font library collected this year, as well as in various stocks. To create a suitable font pair, I chose these two fonts:
◼️ I decided to choose grotesque over antiqua as I find sans-serifs much more relevant these days, especially for the matter of this project.
Stage 3— Color Palette🔻
All was clear to me here. Since my design will contain my other digital design artworks, this means that the background should definitely have the most neutral color possible, in my case white. As for the accent color, I chose orange, as this color is very relevant now and goes well with black and white photographs, but most importantly, with this combination, it evokes a nostalgic feeling and a desire to plunge into this atmosphere.
◼️ Main colors — white & orange
Stage 4— Inspiration🔻
These are some of the visual representatives that inspired my future ideation.
Stage 5— Wireframe🔻
Initially, my project was planned to be a single page website, so the original Wireframe was built for such a high fedality prototype. While working on the final design, I realized that I wanted to pay more attention to each part of the portfolio and expand the project as a whole so it means that the final project will be presented as a multi-page (≈ 8 to 10 pages) website design.
Stage 6 — Last Minute Trendwatching, Thoughts & Ideas🔻
After analyzing the above points, I decided to once again go through the various websites for designers, to think about what could make my design even more unique, and this is what I came up with:
- Add motion to my website (.gifs, videos) to grab the user’s attention
- Minimalism is almost always better than maximalism in design (except of the specific trends)
- Try to use a custom/unusual grid inside of the container
- Try to play with the typography and make it smaller than usual. It attracts attention (no wonder luxury brands often use this on their websites)
- Build a creative header & footer (e.g add image)
- Use unusual packs of illustrations, elements, pictures, icons e.t.c
- Throughout the process, ask myself if my design is losing “soul” and, if so, reconsider it
◼️ ! Helpful Information
Just in case if anyone need a link to the website I use to improve my design skills and develop a sense of style, then I usually use Awwwards. It is a great website used by many people in the field.
🔶 Final Showcase
Here I will provide a screenshots showcasing the work done, but you can always access my Portfolio Website Design using this LINK.
*Loading GIF images while playing the prototype file may take a little time on some screens, so please wait a bit and the video will start.
Home page
About
Footer
Artworks — Main
Artwork Pages
Again, if you would like to see my project in details including all motions and scrolls, please feel free to use a link provided above!
*To launch a project In Figma just click to the play button at the right top.
🔶 Reflection
This project has become a real journey inward for me. Since this website design is dedicated to me, therefore, I had to think carefully about what meanings and feelings I want to convey to the viewer.
I feel that I coped with the tasks set during the ideation. I am pleased with the visual component and the fact that I decided to expand the project by adding a lot more new pages than I planned. In my opinion, this will be able to tell people about me and my artworks in a much more detailed way.
It was an amazing experience!🫂🤍