Beautiful self-promotion

I was browsing online public portfolios to get an idea of how people declare their personal brand on the web, and found this. I think this was the highlight of my 3 hour binge internet-loafing session.

The person who runs it, Alex Coven, is concurrently a graphic designer, letterer, and frontend web developer. The website makes use all of his talents in a very salient way – which is exactly what you want when you’re making a professional personal website, I guess?

From the very second you open it, and his Javascript files starts streaming (I suspect it’s pretty large-ish), we are treated to a custom pre-load image. A polygon morphs in really enticing way, and skips to the end (his logo) once the download is complete. Try stalling your browser during pre-load to watch it keep morphing.

And just because the elements are all loaded, doesn’t mean he has to give it to you straight. There’s another set of animations where each key element takes their turn to get into place. This gives it a bubbly feel, but also tells the user how to navigate the page in an incredibly natural way. Much better than the alternative of using loud colors to demarcate important buttons.

It generally makes me happy when I notice design that has deliberately and successfully imagined the user’s experience, and used that to inform the way information is presented.

My one complaint (disappointment?) is that he violates one common good coding practice – avoid sending site logic to the client. If you hit Cmd+Optn+J, and select ‘Elements’, you can inspect his HTML. Most websites have impenetrable nests of tags, and his is fairly clean. But he left some site-statistics/animation Javascript in his HTML (yes you can, but you probably shouldn’t – just save it in a script somewhere else and load it with a <script> tag). Sad.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s