Overview
This project done for a course called Frontend Development for Designers by CareerFoundry. I worked on it from November 2020 to January 2021. As an aspiring UI Designer I needed a place to showcase my work. I designed it to be professional and simple to use. It showcases my design skills, my work process, and personality. The project taught me to design a website from scratch rather than using a template.
This gave me valuable experience in frontend development and expanded my skillset to include web design. It gave me experience working in HTML, CSS, Javascript, and keyframe animation. Familiarity with frontend development will help me work with people who specialize in this in the future and also broadens my skillset.
Because coding is not my main skillset, I ultimately decided to use Adobe Portfolio to create my online portfolio. However, I'm still proud of the work that I've done and wanted to showcase the knowledge that I learned from this project, so I included it here!
Process and Insights
I came into the project with no prior knowledge or experience coding. I began with basic HTML, then learned to stylize using CSS. I implemented media queries for responsive, mobile-first development. I also used some simple JavaScript for additional functionality.
In terms of styling, I wanted the site to convey a professional demeanor. I chose a dark blue primary color with white, white, grey, and light red as secondary colors. The blue and white work together in the navigation section to convey calm and confident disposition. I used a very light grey for my background and dark grey for the body copy so that text would be legible and clear, but have a mild level of contrast. I thought this would be soothing and easy on the eyes. My headings are all dark blue to stand out. I made the links and buttons light red so that they would stand out at any point in the site, but still be soft enough to avoid being obnoxious.
The orientation of the site is all about simplicity and clarity. My logo and important links are in the navigation bar. The links direct the user to my work section, an about page, and my contact information. I wanted these sections to be easily accessible and that was proven successful well when I conducted user tests. The homepage features three projects. Two that I worked on during the UI Immersion course I had taken prior and one keyframe animation I learned to make during the Frontend Development for Designers course. Each project page is a case study that delves into the creative process that went into making them. My about section is simple and contains my photo along with a bit of my background and skills.