A Design System Around
yellow
TYPOGRAPHY
Though I’m part of the Helvetica cult, this site uses Omnes Pro and my handwriting that I turned into a font! This font has since fondly been named “Egg Font.”
It could definitely be neater (so I’ve heard since eighth grade when I first started writing in all caps after copying my dad's handwriting...), so I'm always working to improve my letters.
COLORS
If you haven’t noticed by now, yellow is my favorite color. As Maggie Nelson said in Bluets, “Suppose I were to begin by saying that I had fallen in love with a color. Suppose I were to speak this as though it were a confession; suppose I shredded my napkin as we spoke. It began slowly. An appreciation, an affinity. Then, one day, it became more serious. Then (looking into an empty teacup, its bottom stained with thin brown excrement coiled into the shape of a sea horse) it became somehow personal.”
Accessibility
This site was designed closely with the Web Accessibility Evaluation tool (WAVE). For navigation, the image map on the home page is navigable with tabbing for interactive elements. I’m always striving to make this site more accessible and find more high-contrast yellows, so please contact me if you have any suggestions or feedback!
GRAPHICS
Almost all my graphics were created in Blender!
Here’s Mushie, a little mushroom guy that I couldn’t figure out where to put on my site.
Creating this site
I first started wireframing my portfolio in Figma. Once I had an idea of the hierarchy, I moved into creating the yellow laptop’s “home” screen (of the home screen… home screen²) in Figma using components inspired by the classic MacOS design system.
To create the scene of the laptop on the desk, I 3D modeled each component in Blender, played around with the lighting and textures, and UV wrapped the Figma screen onto the laptop and my handwriting onto the post-it note. There were about 5 versions of different scenes before I landed on this final render—deciding which picture of my dog to put in the frame was an unreasonably difficult decision
To make the files clickable on the image render, I created an image map for each area and associated the links to the areas.
CREDITS
Pageballoon on Github for their site that simplified the image mapping process.
Brett Anderson for their MacOS Classic file on Figma community.
Special thanks to Peter, Phil, Sophia, and Thedoe for readily agreeing to be my users for some informal user acceptance testing (or friends acceptance testing?) for this site.