Music is my passion. My side-hustle, my "weekend warrior" gig. Front End design and development is another passion of mine, and that's what I currently do for my day job.

I came in to work yesterday morning feeling discouraged, which tends to happen when I'm stuck on something (the "thing" has been resolved now, by the way). I made a lot of progress in my music music over the past weekend, and when I came in to work it felt like my momentum came to a screeching halt. So I took a moment to write this pen. (May be best viewed in full screen mode if you're on mobile.)

Technique

In my eyes it's a very minimalistic pen, just messing around with text and positioning. It's not meant to be perfect, but I think I'd like to start writing pages out like this on a somewhat-regular basis. I like using css "reset" because it gets rid of the margin and all that stuff that I'd want to get rid of anyways. But the headers still look like headers and whatnot. I put everything in a tight flexbox, and used some nth-of-type pseudoelements to select specific paragraphs.

Flexbox and vh

I used the vh unit of measurement to add padding between paragraphs, which seemed to work really well in creating the appropriate amount of space depending on page height. I think this gives it more breathing room. I also had to give it a minimum height so that it didn't collapse on small screens. Flexbox align-items: space-between is a life-saver for me. I'm always looking for ways to space things out quickly, and flexbox provides the solution.

Text Effects

In general I try not to over-do effects, but I wanted the words "break-through" to shake a bit. I initially was going to time them to shake after about 8-10 seconds, expecting readers to reach the words "break through" at around that time. But I figured I'd do it on mouse-over and on click. It's less intrusive. I think we have a tendancy to want people to see our subtle additions, but sometimes elegance and minimalism are key.

The mouse-over action (handled in css) is optimal for desktop, while click (handled in javascript) catches the mobile experience. If I didn't add click, the hover would only work once on mobile. The user would have to click outside of the text and then click on it again in order to activate the animation. There really isn't much inviting the user to tap on the words, but it's also not a 100% necessary factor in the experience.

I emphasized the words "you can make a difference" by adding some color, background, and boxshadow. All of this just on a "span" element. I had to break it at about 900px and under because the typography started to get out of whack. I think I broke some kind of design rule about not using red text on blue background, but I felt the colors just worked. They weren't too busy — just bold enough. The text itself is about being different. I think part of being artistic is to know when to stray from the guidelines.

Inspiration

I wanted to artistically depict something that would get me back in the moment. Back in the mood to conquer the day. Like I said, I've gotten a lot of things done this past weekend. So really I should feel accomplished, not discouraged. Sometimes you just have to keep pushing through those kinds of moments. That's what inspired me to make this pen. Actually, making this pen is what inspired me.

After I made it, I read some text on a project by Rachel Smith. So I thought I might as well post about my pen. I was wondering how I might go about posting this thing on the web anyhow. Should I post it to my Facebook? Blog? Once I read that project, I figured this might be a good way of doing it.

About Aaron Rhoades

I'm a front end developer, singer, and keyboardist. Currently working on an electronic EP inspired by Stranger Things and various indie/electronic artists. You can find me on Instagram, Facebook, and the web.

Bonus points if you sign up for the news letter.


1,636 0 9