Ripley Studios: The Making Of

A lot of hard work went into the creation of my new website. In this post, we take a look at some of my early concepts, the challenges I faced, solutions I came up with, and a general look into my design and development workflow.

Act One: Design

The new Ripley Studios website was a design challenge from the beginning. My initial philosophy was that a designer’s website should be just that—it should feel ‘designed’ (whatever that means). This lead to some interesting and colorful concepts, but at the end of the day, none of them felt like me.

In all, I created 28 different versions of the initial Ripley Studios website design, eventually settling on the version that you see here. Ultimately, the design I came to create puts a lot less emphasis on trying to communicate that ‘I am a designer,’ and instead gets out of the way to let my work say that for me. I think this unobtrusive approach is the right way to go, in design simpler is often better.

Act Two: Development

After completing the design process, I jumped right in to development of the new, opting to try and complete the renovations as quickly as possible. WordPress was an easy and obvious choice to serve as a framework for the new site. Providing a complete content management system, WordPress handles capabilities like custom content types (I created a custom post type for my design work) and custom taxonomies (the custom ‘services’ taxonomy provides a way for me to display the services I provide in an intuitive way). Additionally, WordPress allows me to leverage the power of the community by using 3rd-party plugins, and provides comment functionality that gives users a voice. As for a front-end framework, Bootstrap (formerly Twitter Bootstrap) provides a CSS reset and some basic formatting. I use it at the very least as a CSS reset in almost every web project, in my opinion it’s the best in the business.

Many other challenges occurred throughout the development process. When I needed to find a way to include full-size background images that would scale in a responsive-friendly way, I turned to a solution that I use often, the excellent backstretch.js plugin. Backstretch is a lightweight, jQuery/JavaScript plugin that will fit an image to the size of its background container at any size, without distortion. Though I’ve chosen to use SVG images wherever possible in order to support high-resolution screens, for older browsers that don’t support SVG, the svgeezy plugin provides substitutions that they can handle. And speaking of fallbacks, I have to mention the awesome modernizr, which ensures at least partial support for older browsers as well as users without JavaScript enabled.

Though the site is now up and running, both design and development are ongoing. Future updates mostly focus on UX improvements for now, but I have a few functionality additions in the works as well. Stay tuned for more exciting changes!

About the Author

Nathan Ripley's portrait

Nathan Ripley is owner and creative director of Ripley Studios, a Lakewood, Colorado graphic design agency. He has a B.A. in graphic design from Carthage College, and has more than five years experience working in the field. Ripley Studios is available for hire by companies seeking to disrupt, outcompete, and increase revenue through exceptional design.

Leave a Reply

Your email address will not be published. Required fields are marked *