Portfolio

Portfolio Website Commentary

Original Site

New Site

Portfolio Website Commentary

The predecessor to this site was built in CampusPress, a free school-focused version of WordPress. Most of the themes were legacy WordPress themes, which meant many modern features weren't available. The way it handled pre-placed elements also made it difficult (and sometimes impossible) to customize how they looked. This led me to remake the site from scratch with HTML and CSS so that I could have finer control and better showcase my web design skills.

While setting up this site's color palette, I darkened the background colors from the original site to enhance clarity. The old site was a bit flat and unfocused because the background colors were so similar to the foreground colors in saturation and brightness. By keeping the range of background colors and the range of foreground colors far apart, I made sure the important elements would stand out better.

With my newfound freedom, I experimented with motion design to provide helpful feedback to the user. I added animations to the buttons, portfolio items, links, and other interactible elements. I kept these animations lightweight and clear, but impactful enough to help orient the user and ensure they know what element is being targeted. Another thing I experimented with was the use of light to make otherwise dull elements more interesting. I added highlights to the containers to help them feel less flat without being too distracting.

When designing interactible elements, another strategy I employed was creating consistent patterns. One pattern is the consistent use of gold to denote buttons and links. This color is almost never used for other types of elements, making it stand out more in this context. Another pattern is the glow applied to links when hovered over. This immediate feedback helps highlight the link and serves as a context clue for what its function is if you've interacted with other links already. Creating a consistent, intuitive design language like this is a key aspect of UX design.