The Site's Design Decisions

December 12, 2018

If you're marketing yourself as any kind of UI, UX, interactive design, freelancy, HCI person, you spend a great amount of time picking at your portfolio and attempting to think about the experience of hiring from the perspective of an employer. You've been conditioned into concern for your users' needs and the stories you tell through your interface. It's been something that I've been dwelling on quite a bit while I'm on the job hunt and figuratively nailbiting at the portfolios of others in the field and their own approaches to presenting their work.

Like this, see!

For example, half of the purpose of adding a blog to the site is for documenting personal projects for fun, but also to baldly erect this idea that I'm the kinda guy who could powerslide around the industry like Mega Man with blog posts and the contemplation of recent trends. It's not false, and I love studying our interactions with the digital world, but let's acknowledge that this is a calculated maneuver.

So, today we're going to examine the current implementation of my site and why I've made the design decisions I've made, and take a critical look at the decisions that may be questionable and should be amended in the future.


The tactic here is to distinguish the site by leveraging the orienting response. When you walk into a room with a television on, your automatic instinct will be to orient your eyes towards the movement on the screen. When you watch something on YouTube, it's difficult to pry your vision away unless you swap out the stimuli with movement elsewhere. Evolutionary psychologists theorize that this is because we've evolved visual sensitivity to movement in order to detect danger. Movement is a break in the 'pattern' of an image, and we're pretty good at finding patterns and their breaks.

So, I plaster the index with a perpetually looping cinemagram that I shot at the University of Washington!

Hey, stay on my portfolio. Things are in motion here.

My navigation buttons breathe, the tiles expand on mouseover with descriptions that slide up, and select menu items run image carousels. I'm trying to give an impression of a 'living,' 'moving' site to capture and hold the attention of visitors.

I'd have the menu buttons play chords when scrolled over, but conventional wisdom is that embedding sound on the web is one of those great design faux pauxs of the 00's, and developers are discouraged from doing that anymore. It's one of those extra features I'd like to experiment with later, and see how it fares. But for real, a perverse side of me misses when you could load a YouTube channel or Myspace page and be, without warning, audially blasted by a nu metal collab between Linkin Park and Jay Z.

Entry Buttons

This is something that I'd been waiting to resolve for what felt like forever: On iOS devices, you can't scroll embedded .pdfs. You just can't do it. I'd pull up my site on my phone, and my .pdfs would be frozen there; you'd swipe, and they'd remain static, locked on their very first page. I can understand why: If a scrollable .pdf obstructs the user from scrolling elsewhere on a page, the user is stuck.

I had another problem: How can visitors intuit that they can enter the sites under the 'Websites' section by clicking on the header images at the top of the respective articles?

Bam. Make clearly labeled, clickable buttons directly linked to the .pdfs and websites. Two birds, one stone!

Tiles & Carousels

This could be an unchecked sunk-cost affinity, but I'm proud of the tiles. I don't like it when color of an image is entirely obstructed by a semi-transluscent pop-up descriptive text. It'd make no sense to run a carousel of screenshots if they're 50% darker by way of "Here's what I did in this project, yatta yatta," so I lure users into scrolling over tiles to read only semi-obstructive descriptions... and then I run the image carousels.

Prior to my implementation of the descriptions, it used to be that the user would have to unknowingly wait for the carousel to run on mouseover. A visitor could feasibly browse the site and have no idea that the tiles had image carousels in the first place if they hadn't been waiting for the initial images to roll over to the next. By including pop-up descriptions, I incentivize users to experience the carousels by way of having them stop to read the descriptions, giving the image carousels enough time to be executed by their browsers.

Responsive Design

I decided to avoid a multi-columned, oft-gridded design, with the theory that there'll be this continuing trend of cramming higher pixel density into increasingly tinier devices. If people end up using touch to navigate the web, I figured that it'd be easier to always have big, selectable elements more conducive to their fingers than text hyperlinks or more compact, gridded tiles representing my projects.

On a commercial site with a larger selection and variety of content, it'd make sense to bolt together a sophisticated bootstrap.css multi-column approach, but in this case, I've stuck everything into a single waterfall of content with the assumption that it'll minimize distraction by side elements and complexity.

I'll also have less work in the future fussing with the media query break points.

I've yet to test the site on a 4K+ screen, and I'm a little anxious as to how the site would scale on higher resolution monitors. Would it be legible at all? I don't have a 4K monitor on hand, so this isn't something I can resolve without flying blind at the moment.

In the future I may experiment with breaking the larger resolutions into grids, but it's not a feature with any urgency until the price of IPS 4K monitors drops to something I can afford.


A selection of fonts implemented
		on the site.

I'm trying to communicate a kind of 'intersection of technology and design' narrative with the monospace (Anonymous Pro) and sans-serif (Nimbus). I think there's a lot of great monospace fonts that we don't get to see too often on the web outside of developer blogs and documentation. I'm also trying to distinguish the ambience of this place to be unlike the elegant, serif'y, Squarespace-like site design in vogue at the moment, in hopes that the noticeable break in this pattern would better orient visitors to... to hiring me.

It's definitely possible that this strategy could have the exact opposite effect, so I should beef up my portfolio with examples of elegant, serif'y, Squarespace-like site design. I haven't had such an opportunity recently.


A screenshot of Jekyll 

I don't plan to do anything sophisticated enough to require an interesting back-end or user interaction, so I built the site using Jekyll, a static site engine.

I think it keeps me in 'shape,' too: If I want a certain aesthetic, I'll punch it into the style sheet, and if I want the equivalent of a plug-in, I'll write it up myself, though, again, I can't imagine wanting anything complex. Most of the unique features of the site that require JavaScript are entirely aesthetic. That's another design decision that I think is kind of fun; if a user visits this site while running NoScript, it'll be entirely navigable and functional! Admittedly, that's a stretch-case, and if I'm really so concerned with accessibility, it'd probably be better to make this a more pleasant experience for the color blind or the deaf.

In retrospect, it would've been great to get some practice with WordPress, Squarespace, Drupal and the like.

"Hey, I've got your three years of WordPress experience!"

There's also the tangential benefit that visitors can't inadvertently or deliberately access any login to an administrative CMS interface when there isn't one. No PHP or Java vulnerabilities, no forms, no nothing. If anything were to happen to the site, git's got it across a couple computers.

Troubles to Shoot

That pattern in the site background appears differently across monitors and graphics cards, and in some cases, it's indistinguishable from the white backgrounds of the navigation buttons. I need to replace it, refine the navigation menu, or both.

The soft drop shadows aren't so trendy anymore, and I might experiment with hardening or eliminating them altogether.

And I'm not so sold on the big, monogram 'JE' button I'm using in the navigation menu and the site favicon. It seems a little self-occupied. I've just got to come up with some better branding.