Personal Website
A portfolio website built entirely from scratch in HTML and CSS.
Duration
One Month
Skills
User Research, HTML, CSS, Iterative Design
Team
One Person
01 Research
To begin this project I researched other UX Designer personal websites in order to better understand the typical content and structure of a portfolio. I knew I wanted to create this website from scratch so I searched for elements I knew how to properly code. I viewed a wide array of websites from simple modern portfolios to extremely creative and colorful complex ones.
02 Design
Low-Fidelity Sketches
After collecting ample research I began by drawing some preliminary sketches. I find I function best when I can put my thoughts to paper, so I created many iterations of drawings. I repeatedly erased and redesigned until I created sketched I liked with a potential color scheme.
Low-fidelity drawings of various pages on the personal website
Coding the Website
I started by writing the HTML of each page so I could have all of the pieces I wanted to design already on the screen. I then added in the CSS and properly structured each page. There were many moments where I created what I drew in my sketches, but was unhappy with the finished look. The final product is the result of many iterations of design. In the images below you will notices some similarities between this site and the current one you are on. I took inspiration from the organization of the content when creating this website
The home page of the personal site
The about me page of the site
The projects page of the site
The contact me page of the site
03 Redesign
There are a few issues I have with the design of this project that I would like to note. With the knowledge I currently have about design I feel that there are some clear adjustments that should be made. For example, the red text on a black background is a accessibility issue and should be changed. I also personally feel that while the red color is fun it can be a bit too distracting for a professional site. Also, on the home page the large text saying “it’s nice to meet you” is typically in a constant scroll which is too much of a distracting element. The user’s eye is immediately drawn to that spot when it should be drawn to my name and job title.