Website for Olivia (prototype)

Here is the current final version running as a prototype in Figma! You can follow this link to look around the Figma file and run the prototype yourself. Olivia and I are both quite happy with this iteration, and I intend to move this forward into a fully fledged website. This version emerged after a meeting with Olivia where I took notes on what she'd like changed from the version below. It was hugely instructive doing this reworking because I realized that most of what I had done was very sloppily formatted, so not only does this look better, but it's a much more navigable and dynamic file. All the frames are properly labelled and the auto layout on the header and page elements actually work now. There was also just a lot more polish; Changing the body font, rounding image corners and adding captions, normalizing alignments, tweaking the writing layout, and actually getting the CV page working!

This is the first attempt in Figma. I should say this is also my first project in the program, so a lot of the work for this version was learning how to use all the tools I needed. Beyond just making text and frames and components, I also had to figure out how to make the page links in the header underlined on mouseover, how to make the header stay in place when you scroll on the writing page while preserving the background gradient, little details like that.

Here you can see a very rough draft I put together in Wordpress. This was my first time starting a project from scratch on Wordpress, and I ended up running into a lot of problems because of how different a tool it is for translating ideas into websites than HTML, but I was still able to get a very basic idea of how it would look on a screen. Originally we had talked about it being a non-white color, and blue had come up, so I tried it, but it was too garish and hard to get good text contrast with so in the next version I switched to the off-white gradient.

And finally, a sketch from back in December when we first started talking about me making a website for Olivia. Many of the core ideas have made it through into the final version, mainly the links header and formats for all the pages other than the CV. Now I just need to register the neocities domain and translate all this into HTML and CSS!