Rebecca's Journal
A new look - Not just frontend.

My main website was getting a little bit dated, and I decided to re-create it from the ground up, focusing more on me as a person and my skills, as opposed to just being this journal. I set out to design a website with minimal compromise. Polishing the design was my number one priority with this project. I think I achieved that.

Starting out

The task was a little bit daunting, having to completely rebuild my website. I tried to focus in on what I wanted it to look like. I knew I wanted a very clean design, but what did I want it to look like? My previous websites have been as simple as a directory listing of .txt files. This needs to be different.

The Dilemma

I decided on a typographical layout pretty quickly, but there’s an incredibly important part to typography - the typeface. I really like Futura, but then quickly realized that I typically use many weights of Futura in my typography work, which would add up to a relatively large expense pretty fast. I already have Futura on my computer, but buying licensing for web fonts was basically a no-go. I quickly asked my friends for suggestions and eventually settled on the font Radikal by Nootype. I picked this because I could express my entire website in a single font weight - something I couldn’t do with many other fonts I looked at. I normally rely on font weight changes to highlight and accent areas of text. This font particularly forced me to think outside the box, coming up with new ways to highlight text.

Design

I settled on a design where each part of the page is a “slide” - an area that consumes the whole viewport width. Each slide has a background color that progresses from the initial black background to the final purple background. This provides a smooth visual transition between each slide of the website. As I mentioned, I used alternate ways of highlighting text. I settled on a few.

Why these colors and decorations? Because in all cases of colorblindness that I tested - they were still discernable from each other. There were no two highlights that looked identical. Even in some cases of colorblindness where it was difficult, I made sure to use capitalization in a way that clearly indicates which items are acronyms. However, the webpage is still fully-functional without the colors, and is still completely understandable. I’m still working on finalizing the accessibility functionality of the website, however.

User Experience

I’m very picky about user experience (UX) - and a great example of this was the contact form at the bottom of the page. I designed a very sleek contact form, but I still wanted a CAPTCHA protecting it so I don’t get a bunch of spam messages. Google provides their “invisible” reCAPTCHA tool, but it puts this little tag on the right side of my window, which I felt was disruptive and confusing. I consulted the documentation and found I could inline that object - putting it on the page to let me kinda stuff it away, not being ever-present. I put it about 60 pixels below the contact form slide. A user that is using the nav arrows (Which I’ll get to) will likely never see it. I sent the website to a few people to test out and they thought the form was broken since they saw no evidence of a CAPTCHA. I reassured them that the form worked flawlessly. This was a major win for me, having developed a website that has a contact form with a completely invisible human verification.

So, when there’s a full-page slide just in your face, it’s a little hard to realize that there’s more content. There’s no clear indicator other than the scrollbar, which may be hidden on some platforms. I built these little arrows that go at the bottom of each slide that smoothly scroll you to the next slide. I made sure they fit in with the content as needed, and put them all over the page. I also made the “Contact me” link immediately jump to the contact form at the bottom of the page. It let people smoothly scroll through the website and not have to fiddle with their scrollbar to get the positioning perfect.

Contact Form

The giant contact form at the bottom is an incredibly interesting design, not just in UX, but also in the way it handles messages. I have the backend built so that a message sent on my website sends a message to me using an instant messaging application. Instead of having it sent via e-mail which I check relatively infrequently, it’s sent directly to a platform I check regularly. I can disable this feature and force it to send them to my e-mail address, or even into a file and at the end of the day send me a digest email of who contacted me.

I wrote that feature with NodeJS, since the application runs on that. It’s mostly static pages, but the contact form relies on it.

Finishing up

I just deployed it to my hosted VM and put it behind a reverse proxy so that it would show up where it was supposed to. I had to move this journal to its own directory, maybe I’ll make it a subdomain. Who knows. I finished a much-needed website renovation and I’m extraordinarily happy with the results.