Matthew’s Portfolio Website
An Immersive Journey into My Personal Website’s Vision for Recruiters:
Ever since I embarked on my career in the realm of Product Design, I’ve always found myself perusing other designers’ portfolios, and even exploring Awwward’s websites, wondering how it would feel to craft a distinctive personal website of my own. In this article, I will delve into the process of designing my website and share the inspirations behind it. I’ve strived to infuse my skills and personality into every nook and cranny of the entire website.
Structure
To make it easy and efficient for recruiters, I developed a streamlined landing page featuring four primary sections:
1- Intro
2- About me (Brief)
3- Works
4- Contact Info
In addition to the four key sections on my landing page, I’ve incorporated a straightforward header that facilitates smooth navigation. By simply clicking on the desired section, users can effortlessly scroll through the page. This feature not only enhances the user experience but also ensures recruiters can access the information they need quickly and efficiently.
In addition to the succinct “About Me” section on the landing page, I’ve created a separate and comprehensive “About Me” page. This dedicated space provides a more in-depth exploration of my background, skills, and experiences. It’s there for anyone who wants to delve deeper into understanding who I am and what I bring to the table.
Animations
To maintain a cohesive and engaging user experience, I’ve implemented consistent interactive animations throughout my website. When it comes to clickable elements, I’ve applied a thoughtful approach:
Clickable elements: Scale down animation.
Non-clickable elements: Scale up animation.
It’s worth mentioning that as users scroll down, background elements gracefully scale up. This deliberate design choice is aimed at emphasizing the significance of the website’s introduction. After all, it sets the tone and defines the initial experience for visitors.
To convey the sense of tranquility and focused thought that I bring to my projects, I’ve incorporated a subtle yet effective design element: the fade-in effect. Generic elements, such as text blocks and images, gracefully appear with a gentle fade-in animation. This deliberate choice in design not only adds a touch of elegance but also reflects the calm and deliberate approach I bring to my work.
Visuals
UI Style
In keeping with the theme of my website, I’ve opted for a design that is both flat and smooth. This aesthetic choice not only provides a modern and clean look but also enhances the user experience by minimizing distractions and promoting clarity.
One distinctive aspect of this design is the use of sharp corners for approximately 90% of the elements. These sharp corners are not just a stylistic choice; they serve as a symbol of professionalism and unwavering commitment. They convey a sense of precision and attention to detail, which are qualities I bring to my work.
Within the introductory section of my website, you’ll find three distinct shapes, each laden with its own symbolism:
- Circle: The circle embodies my unending aspiration to enhance my knowledge and skills. It represents a continuous journey of growth and improvement, mirroring my commitment to never cease evolving in my field.
- Square: In the form of a square, I encapsulate the notions of stability and the unwavering consistency of my career path. This shape signifies my resolute pursuit of the loftiest professional objectives, staying grounded on a stable foundation while reaching for the stars.
- Triangle: The triangle, a dynamic and multifaceted shape, signifies the three primary facets of my design process: functionality, appearance, and quality. These are the pillars upon which I build my work, ensuring that every project I undertake is not only visually appealing but also highly functional and of impeccable quality.
Colors
Colors play a pivotal role in conveying the essence of a design, and my website is no exception. I’ve judiciously selected three main colors for the background and text, each carrying its own significance:
- Black: The color black symbolizes my decisiveness and capability in making design decisions. It reflects the authority and confidence I bring to my work, ensuring that every design choice is made with purpose and precision.
- White: White represents my dedication to clarity in design and communication. It underscores my passion for creating designs that are not only visually appealing but also easy to understand. It reflects my commitment to clear and effective communication in both design and workplace interactions.
- Dark Gray: Dark gray embodies my composed and dependable character in the workplace. It signifies a sense of reliability and stability, qualities that are essential in delivering consistent and high-quality design solutions.
In a heartfelt tribute to my nationality, I’ve incorporated three distinct colors in the introductory elements of my website: Red, Blue, and Orange. These colors are a direct representation of the Armenian flag, a symbol of my heritage and cultural identity.
Fonts
For the typography of my website, I opted for the Montserrat font. This choice was deliberate, as Montserrat offers a harmonious blend of clean aesthetics, readability, and an appealing appearance when scaled up.
Montserrat’s clean and contemporary design aligns seamlessly with the minimalistic approach I’ve embraced for my website. Its readability ensures that visitors can effortlessly consume the content while appreciating the aesthetics of the font. Additionally, when used in larger scales, Montserrat maintains its elegance, making it a suitable choice for creating a visually pleasing and professional impression.
The choice of Montserrat font for my website extends beyond its visual appeal and readability. It serves as a subtle yet poignant representation of my unwavering and persistent character, both in my professional and personal endeavors.
Montserrat’s bold and assertive letterforms echo the strength and determination I bring to my work. Its clean lines and modern design reflect my commitment to clarity and precision. In essence, this font becomes a visual embodiment of my resolute and unyielding nature, underscoring the tenacity that defines my approach to all aspects of life.
In addition to Montserrat, I’ve introduced the Caveat font as a secondary typeface on my website. This font choice serves as a deliberate nod to my passion for infusing a unique human touch into all my designs, a key component of my signature style.
Caveat’s handwritten and somewhat playful appearance adds a personalized and artistic dimension to my website. It symbolizes my dedication to crafting designs that are not only visually appealing but also carry a distinct, human element. This secondary font reinforces my commitment to creating designs that resonate with individuals on a personal level, leaving a lasting impression.
Charting a Vision: My Bold Path Forward
My commitment to delivering a top-notch user experience doesn’t end with the website’s initial launch. Instead, I’ve embarked on a journey of continuous improvement, guided by insights from Google Analytics and an ongoing Field Research Process.
Google Analytics provides valuable data that allows me to track user interactions and behaviors on my website. By identifying key events and user patterns, I can make data-driven decisions to enhance usability and navigation. This iterative approach ensures that my website evolves to better meet the needs of recruiters and visitors.
Additionally, my Field Research Process involves gathering feedback from users, including recruiters, to gain a deeper understanding of their preferences and pain points. This qualitative research informs design changes and optimizations that are implemented gradually over time.
