Darcy ClarkeDevelopment / Design / UX

Toggle Main Navigation

Aug 26, 2015

The Three Year Website

Posted in "thoughts"


Early August 2012, I looked at my website and decided it was time for a change. More than three years later and I’m still not happy with what you see here today; But as my friend Darrin Henein has always said, “you just have to ship!”.

Goals


Kicking things off, I wanted to move away from emphasizing long-form content. I still think it’s important to have a “blog” and to own the distribution platform for that content but recognized it needed less visibility if I wasn’t going to post regularly.

Also, my online persona is pretty cut and dry. I tend to convey a non-bias opinion with little-to-no personality thrown in. This works great for not rocking the boat but also makes me feel like I’m less relatable. I wanted this site to show off more of my personality and highlight things that weren’t necessarily work-related.

Sketches from 2012-2015

Process


  • Prototyping

    Every year I burn through two or three moleskins. I use them for drawing prototypes, conceptualizing layouts and jotting down dimensions or calculations. I’ve come to find them irreplaceable in my day-to-day workflow. I used half a notebook on this project alone. Frequently coming back to paper and pen before trying out new designs or intereactions helped me move, relatively, quickly.

    Note: Although I own a fancy UI Stencil, I find the straight edge to be the only uself part to it. Save yourself some money and just use a bookmark or ruler that fits in your notebook.

  • Design

    Although I’ve taken a fancy to Sketch recently, most of my designs and mockups were done in PhotoShop. That said, I’m rarely satisfied after a first design draft and came back to my PSDs a number of times before I was happy with the general direction.

  • Development

    I had the foresight to pick a tech stack that has lasted the test of time (for the most part). Going the static-site-generated route meant I could cut out any kind of server-side dependancies. Most of that generation process was done through custom built Gulp tasks (automate all the things!). Other libraries used: Jade, Stylus, Backbone, MongoDB, LoopBack, Wintersmith and CoffeeScript. The site is hosted on Github Pages which has significantly sped up my page response times.

Design variants from 2012-2015

Challenges


  • Motivation

    About six months into the redesign I had my laptop and notebook stolen. What made this an even harder pill to swallow was the fact I neglected to back up any of my work during that time. Needless to say, I learned from this experience but had a hard time finding the motivation/energy to pick up the project again and redo all that work.

  • Procrastination

    The quote “the shoemaker’s children go barefoot” only rings true if the shoemaker isn’t just being lazy. There were legitimate times where I wasn’t able to work on this project due to other obligations; And then there were the times I simply neglected to put in the effort. Putting tasks off until tomorrow doesn’t make them go away; If anything, it just ends up doubling your future workload. Nothing ever gets done “tomorrow”.

  • Perfection

    I expect a lot from myself and am rarely happy with a final product. There’s always something more that can be added or changed. I think Leonardo Da Vinci sums up my feelings perfectly, “art is never finished, only abandoned”. I hope to continually come back and improve aspects of this site as time goes on.

  • Content Curation

    Until now, I had never tried to aggregate all of my talks, photos, videos and work into a single library. Coming up with a concept for a design was easy. Being able to fill that design with real content was not. I can safely say that this was the most time consuming aspect of the site’s inception; And something I never want to do again.

Things I’d Change


  • Casestudies

    I had an elaborate design and interactive experience planned for my casestudies but ultimately paired it down to what you see now. I put together a lot of unused assets which may see the light of day at some point down the road.

  • Social Feed

    I worked for a long time on a custom social feed but put it on the back burner to focus on the content itself. I ended up utilizing a service called Juicer for the home page feed. Unfortunately, it’s a bit limited. I’d like to add a number of feeds I can’t currently (including: CodePen, Strava, Vine & more). I’ll probably circle back and finish my aggregator at some point and release it in the wild.

  • Asset Pipeline & Hosting

    I set up S3 but didn’t end up deploying any assets to it. Github seems to be holding up alright, at the moment, but eventually I’d like to transfer all static assets, including HTML, to Amazon.

  • Rendering

    React wasn’t quite as mature, as it is today, three years ago. If I were to do some more digging I’d probably refactor my views to utilize React going forward. That said, things work so… ¯\_(シ)_/¯

  • Articles

    My old articles were exported from WordPress but haven’t been cleaned up. Throughought the coming weeks I’ll be rectifing issues with broken links, images, code snippets and general styling. Some articles will be deleted as they are no longer relevant anymore. It should also be noted that my article’s pathing changed without 301 headers being set. I apologize if that causes any issues for people who previously linked to a post of mine. It’s not great for SEO either.

  • Styles

    Multiple iterations and changes to my design left me with a lot of CSS tech-debt. Looking forward, I’d be interested in porting all of my styles to JS and trying to get things DRY again. If you’re interested in what I mean by “port to JS”, check out the JSS project or keep an eye on my site for new articles.

  • Optimization

    There hasn’t been any treatment for responsive images; This ultimately affects my page’s percieved and actual load time. I know somewhere in the world Mat Marquis is shedding a single tear (sorry bud). I haven’t added any type of caching for the social feed either; This means a user has to wait around 300-500ms after the page loads before seeing content (argh).

    In the work section I’ve also noticed some paint thrashing when scroll quickly that drops things down below 30fps while some friends have noted my state opacity transitions are slow on less powerful machines.

    All of these things should, and will, be addressed over time.

Conclusion


I’ve often felt afraid to release or move forward with a project in the name of perfection. I’ve tried to hold myself to an unhealthy standard of work which has stiffled my output and creativity in the end. I think this launch is a step in the right direction to rectifying that issue. Let’s just hope you hear from me again before 2018!

Inspiration


If you’ve read this far, thanks! I wanted to highlight a number of individuals, and one organization, that have inspired me, not just these past 36 months but, throughout my career.

My friend and former colleague, Justin Windle, has always been a big source of inspiration. He’s done some amazing experimental work and was part of the reason I went to work for Fi in New York, years ago.

Claudio Guglieri is another former colleague who always lets his work speak for itself. The thing I love most about Claudio is his portfolio, “Why don’t we try?”. I think the sentiment alone speaks volumes about his work ethic toward the conceptualization, design and creation of beautiful experiences.

Recently I’ve become entranced by the work of Casey Neistat. I watched a number of his short films a years ago but recently got reinspired by his daily vlogs. Touting one of the best attitudes towards work, Casey definitely has motivated me to do more.

I stole the motto “Openness, Innovation & Opportunity” from Mozilla’s mission statement. That said, I truly do share that mantra and am so appreciative to have an organization like them advocating for users and web standards. I’m inspired by them to continue contributing to open source and promoting the web as “the platform” that connects and empowers us all.

Now watch “Life Explained in 27 Seconds” by Casey Neistat: