UX/UI Designer & Web Developer
January 2019 - May 2019
Adobe Illustrator CC, Adobe Photoshop CC, Atom (HTML and CSS)
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.
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.
Below are the steps of the design process for this course project!
I aimed to outline the architecture of the website to mitigate making global changes to navigation and architecture in the future.
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.
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.
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.
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.
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.
However, as I continued the progress of my site my vision changed drastically.
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.
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.
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.
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.
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.