It gives me great pleasure to announce the newly redesigned and rebuilt website of Eric Elliot has launched. Please look around, explore my recent work, and say hello.
Finally! After about one year of working in small chunks here and there, in between client work and personal life, I am finally ready to unleash this website to the world. It has been a labor of love, with moments of anguish and frustration, but I couldn’t be more thrilled with the end result.
A very brief history
I’ve wanted to redesign my site for quite some time. My old website was pretty simple from a development standpoint (static HTML and CSS, nothing fancy). It effectively displayed all my work, and at the time, I loved the simplicity of it. It was a great learning experience as well because it was actually the very first website where I had built every single component completely from scratch. I had built my prior site in Flash, which required some ActionScript but not any web-based coding languages. Even though I was new to the world of web development, it became immediately clear there was a right and wrong way to do things (and in some situations, many ways to do things). These are known as best practices, and employing these in my work early on helped to shape the foundation of my approach to development for years to come.
The more development work I did, the more I prided myself on utilizing these best practices. Using semantic code with the latest HTML5 and CSS3 capabilities became very important, and knowing how to leverage these technologies with modern browsers while supporting older systems was an absolute must. I began working with teams of other designers and developers and quickly saw how differently people wrote their code from one another, and the effects (both good and bad) that can have on a project. As with traditional graphic design, I found there was a real art to designing well constructed, efficient code.
My development work grew incredibly fast, and soon I was designing and building sites in WordPress and other content management systems, playing with javascript and jQuery libraries, and customizing plugins to meet my needs. I continued to show new work on my existing portfolio site, but had grown bored with the design. I wanted something that was more engaging, something more interactive for the user that would reflect my programming abilities. I concluded that a complete redesign was in order. But what would my new site look like? What did I want to show people? What message did I want to send?
Ideas, ideas… and more ideas.
Like I do at the start of any new project, I began researching and brainstorming my thoughts. Looking at examples of top work from some of the best in the design industry, my head was bursting with ideas. I already had a good sense of the general aesthetic look I was going for, but the actual layouts of pages and organization of elements, the brand messaging, the typography, the content and writing style was all undecided. And what sort of development skills should I display on the site itself? Animations and transitions give a heightened sense of interactivity, but where should they be applied, and do they serve any purpose? The more research and brainstorming I did, the more roads I wanted to go down. It was clear this was going to take some time if I wanted to build something that I was truly proud of.
And take my time I did. As I sketched out different concepts, I also embarked on creating a new logo for myself. I love designing logos and creating brand identities, just not so much for myself. To be honest, I’ve always felt that designing for oneself is the most challenging task, and most designers I know tend to agree. I worked at it tirelessly, and eventually, I crafted a new logo mark that formed the base of my brand identity.
Designing and building the site
During the logo design process, I was still very focused on my new website, and actually began playing with some layout and interaction ideas on a staging server. I tested out multiple logos on a combination of different layouts and devices, so I could get a fully comprehensive understanding of how each design would work in various situations. Shortly after finalizing the logo, I narrowed down the overall concept for my new site, with these main priorities:
- Portfolio projects are the focus (so static branding elements should be minimal)
- Animations / transitions can be used instead, as interactive branding elements
- Build case studies for larger projects to showcase details and processes
- Portfolio work should be easily accessible (2 clicks at most from homepage)
- Make use of a CMS for the new site
In terms of layout and structure, I decided to utilize a fullscreen composition to present my work initially. This would make the site feel immersive as each featured project would fill the entire screen, enveloping the user in the experience. When an user finds work that looks interesting, they click and are immediately brought to the full case study. My old site never included this much detail about each project, so writing all that content was quite a task! In reality, it was an amazing exercise in communication, and got me back into the process of writing, which I believe is a very helpful process for any designer. The ability to communicate clearly with your client, and truly understand what they are asking for, is crucial in this field.
On the back-end side of things, I decided to really put my skills to the test and push my programming abilities by building out all the WordPress theme functionality myself. Everything from registering custom post types and taxonomies to new widget arrays, rebuilding the portfolio and custom menu navigation, adding meta boxes and new content interfaces to the admin side, and creating custom logic for elements like auto-obfuscated e-mail addresses and category-based smart pagination.
The new site design allows me to put the major focus on my work, while also showing off some modern development techniques, such as the scroll-jacking interface you see on the homepage and project category pages. I’ve incorporated SVG elements for lossless scalable graphics with .PNG fallbacks, subtle animations based on user interactions, devised my own solution to the ‘hamburger menu’ problem, and ensured everything is completely responsive for all device types. There is something truly satisfying when you’ve poured this kind of energy into building something, knowing every pixel and line of code was crafted from scratch. The added bonus is that I bettered my skills as a developer by learning and doing everything myself.
With that said, the learning never stops for a developer or a designer. In the time since I started rebuilding this site, my development workflow has already evolved significantly. I’m utilizing gulp and Bower to compile asset packages and automatically minify them for production. I’m using git not just for mobile apps, but web apps and websites too. And I’m absolutely loving Sass as a CSS preprocessor. I’ve even started learning Swift programming in my spare time, so native iOS apps might be next!
For me personally, this website will always be somewhat of a work in progress. There’s always new ways to optimize performance and new methods of serving content. Who knows, I might even rebuild the whole thing utilizing my gulp/Sass workflow just for kicks!