thumbnail image of website kaitlyn nguyen
image of a portfolio website prototype displayed on a laptop screen

Branding my Name for a Portfolio Website

Role

Duration

Tools

UX/UI Designer & Web Developer

January 2019 - May 2019

Adobe Illustrator CC, Adobe Photoshop CC, Atom (HTML and CSS)

Overview

The Challenge

This project would require learning coding languages and concepts that come with web development as I have never built a website before. How can I expand my knowledge of HTML and CSS and create a tool that showcases my portfolio to a greater, online audience.

The Solution

Build a website based off of no prior knowledge in web development.

I have since learned the importance of user testing and accessible & responsive design. Furthermore, I hope to use this site as a first step to an improved portfolio that is more accessible and usable.


Process

Below are the steps of the design process for this course project!

A graph showing four steps of a design process: website planning, design, development, and tes

Website Planning

Navigation Diagram, Information Architecture

I aimed to outline the architecture of the website to mitigate making global changes to navigation and architecture in the future.

Navigation Diagram

For the navigation, I was motivated to make the website simple and intuitive. I drew inspiration from previous websites I’ve visited with easy-to-understand navigation.

Diagram that displays an intial layout for the navigation of a site

Information Architecture

For the site’s information architecture, I intended to use a directory-oriented architecture as it seemed most fitting for a portfolio page. I wouldn’t have thousands of files to worry about, so using folders was ideal—separating by documents and images. I wanted my website to use language that was easy to navigate; additionally, making my site a pleasant and functional experience.

Diagram that displays the information architecture of the planned site

Design

Branding, Wireframe Sketches, High Fidelity Mock-up

My vision for this website’s design was derived from inspiration from other websites complemented by a color scheme I curated. This would allow the website to be professional and provide a sense of personality.

Branding

For branding, I chose three colors with different tones: light, medium, and dark to contrast between background and text colors. Furthermore, for typography I wanted a slim and neat look, especially for the headers and subheaders. Compared to the other typefaces, Oswald was the best match for my vision. I chose to use one font because it matched my minimalistic experience.

Style tile used in the portfolio site

Key Takeaways

  • Looking back now, these colors are far from accessible
  • The contrast is not nearly enough to pass WCAG’s standards
  • Playing with large scale is interesting, but I would change this

Wireframe Sketches

For the navigation bar, I wanted to include a photo of myself to associate a face with my work. I was not sure if I was set on only three menu options, so I planned to go back and add more, if deemed necessary. Additionally, I wanted the user to be able to know me as soon as the website populates. I figured having the about section on the homepage would allow this.

Moving onto the portfolio page, I knew I wanted a sidebar that would seamlessly mesh behind my headshot. Throughout the different sections of my portfolio, I wanted to incorporate a secondary navigation bar to include numerous pieces of my work.

Image of a lo-fi wireframe
Image of a hi-fi wireframe

However, as I continued the progress of my site my vision changed drastically.

High Fidelity Mock-up

For the mock-up, I used a contrasting frame with content in the center. This is a popular concept: a white, bordered frame or box with the main content in the center. I liked this type of design and decided to implement it on my portfolio website.

Graphic mock-up of the portfolio site

Development

Website Building

With the planning and designing mostly settled, it was finally time to code the website. Utilizing Atom, I began to program the site to bring my vision to life.

Key Takeaways

  • Seeking out resources is completely normal when understanding new concepts
  • Learning a new skill takes consistent curiosity and learning, I am still learning more about HTML and CSS
  • Finding out the differences between coding programs was also a realm I never explored, I was intrigued by the range of programs that existed and how they could cater to my needs

Test

User Testing, Reflection

An important aspect for this project was user input. During milestones in my class, our peers would test our websites. This proved to be helpful in the early stages of my project.

User Testing

When my website reached the first stage of implementation, I began user testing to a greater extent. I created a survey asking users questions. These questions included if the user would revisit my site and adjectives that would describe the site. A big problem surveying users was the inaccessibility of my website. I had not designed the site to be mobile friendly and responsive, resulting in an abundance of inconveniences to the users. This allowed me to see the major flaw in my site and strive to improve this moving forward.

Moving Forward

Looking back on my site, I have noticed many mistakes. I failed to follow multiple, proper WCAG standards relating to responsive design and contrast. Responsive design is very important, especially with the wide use of mobile devices and technology. My mistake when creating this site was not taking into account responsive design when wireframing. Additionally, the contrast on my site does not meet the minimum requirement.

I am in the process of making a new portfolio site that implements responsive design and an appropriate color palette.

Lessons Learned

  • After this project, I learned more about accessible and responsive design. My hope is to use this new knowledge and make an improved portfolio that displays my skills as a user experience designer and professional.
  • I can continuously grow my knowledge in designing web spaces through reading articles and working with other UX designers especially as the industry changes with time