This is the case study for the studio’s brand new website, https://www.thethinktank.online, and the re-branding that went along with it.
The Challenge
The challenge on this one was pretty simple: I didn’t have an online portfolio. 😅 But, I had also become a little bored with my old ‘full logo,’ and thought it needed an update. Over the last year, I’ve really grown as a designer and I wanted something that would stand out amongst all of the other portfolio sites out there.
I also needed a platform to discuss business-related topics and to blog.
The Solution
The solution is the website you see here, starting with redesigning the logo and iconography around the site.
New Logo, New Iconography
The icons you see here were built in Adobe Illustrator in Spring of 2020. Custom icons are a lot of fun, and they can be used practically anywhere.
One of the biggest problems I have as a Creative Generalist is trying to describe all of the different services and abilities I bring to the table — and to do so with few enough words as to not bore my audience to death. Icons are the answer.
So, you can see the new “full logo” at the top of the image with all of the iconography on it. The only thing that made the transition from old to new is the figure, “The Think Tank Thinker.” A little rendition of Rodin’s “the Thinker,” which I strongly identify with and wouldn’t change for the world. Everything else had to go (except my purple).
New Typography
One of the biggest changes made was to the typography.
I love typography, and the part a font plays in the overall scheme of a Brand is fascinating. As a designer, I become very twitchy if my documents aren’t “branded,” which mostly means they are composed in the proper typography. (I even have a specific font for drafting in. If you know anything about formal writing and publication, you may know that a double-spaced Courier New is the preferred font for formal submission to editors… though, ironically, many designers pew-pew the font’s use.)
For the new ThinkTank typography, I wanted something that was “friendly and easy to read on and off screen.”
It was touch-and-go there for a little while, but here we ended up with “Attn New Round Medium” available through Adobe. I love this font! (I geek out that I get to compose in this font and also see it on my finished website.) It is exactly what I wanted and it looks super-cute in all lower-case, which is an effect I’ve decided to use throughout this website, wherever I can get away with it grammatically.
New Colors
I love color. I love color so, so much. And what I really, really love is purple. #330066 or PANTONE 2685C. If you look at the color theme, it’s the dark purple on the far left. 😍This purple is one of the two things that has survived since the original brand from way back in 2011. I💜this purple. It has ‘staying’ power.
Pantone 2685C is a beautiful color: On screen, it has high contrast and is very dark. (Dark enough that I feel comfortable using it as the color for many fonts and headings.) On paper, it transforms to a slightly lighter violet. It can be austere and solemn. It can be cheerful and solid. The go-to color for business-to-business brands is usually a shade of blue. But, from the beginning, I wanted something a little different. This color had all the answers.
Using this deep violet as a base, it was easy to jump to Adobe Color (color.adobe.com) and dream up a new scheme. It hadn’t occurred to me that the Purple’s compliment would be such a fun golden color, but there you have it. Now I have a fun color scheme that can be anything I want it to be… I have also had the opportunity to experiment with these color combinations more than others. (Check out the cog animations throughout the site.)
The Website
Have you ever made a portfolio website? It is a pain in the butt. And — at least this was my experience — it seems like one is constantly remaking the thing from the ground up. No sooner than you’ve finished developing a portfolio website on Adobe then it seems you need to start a new one on Wix. Ugh. No more!
I needed more from this website than just a static portfolio — though that needed to look ‘cool,’ too — while also being well-organized and interconnected, with as much automation as possible. Oh! The trials and tribulations of a writer/illustrator!
Having had enough of re-inventing the wheel every time I needed to update my portfolio, I decided to develop a WordPress website and to learn the underlying code in the process. In this way, I can finally free myself of third-party solutions and have my website look exactly as I designed it.
WordPress
WordPress is, in my opinion, the best possible environment to develop a simple website and to learn to code… And the Gutenberg Block Editor is by far the most advanced (and most fun) bit of software to blog with. Fast forward to now. I am composing this Case Study with the Block Editor, which is fun and easy to use. This last part is critical for ongoing content creation. There is too much that goes into even a single blog post to waste time with editors that don’t offer control over headings (i.e. h1 vs h2 vs h3).
The Landing Page and Front End
I am especially proud of my landing page, which has traditionally caused me no end of anxiety. Here, you can see a screen shot of the page in mid-animation. It boasts the branded typography that I go absolutely bonkers without, a gently drifting gradient background, and a motion logo which are all the rage these days. Finally, I can describe what I do in six seconds or less using the miracle of motion design: I get to work speedily, and can do alllllll this stuff!
Both the gradient and the motion logo are created using the Bodymovin’ plugin for Adobe After Effects: “a Lottie.” Lotties are an awesome bit of technology that bridge the gap between Adobe products and web development. And you can see, this introductory animation isn’t using anything new, but re-using icons and logos designed years ago. (They follow along the path of the Golden Ratio, too. #themoreyouknow)
Cogs!
What I needed was something that was easy to build and easy to animate. What I got was both of those things and a lot of fun.
All over this website are all of these animated cogs that sport different arrangements of the color theme and iconography. It was a pretty brilliant idea, if I do say so myself. A real fresh, yet simple, way to change the expression of those icons I made last year.
Custom Post Types, Taxonomies, and Portfolio Automation
The neat thing about learning how to code and to work with WordPress is how well-designed the back end is. There are so many awesome things you can do to simplify. For example, I re-named the default WordPress taxonomy from “Category” to “Capability.”
A taxonomy is an organizational principal. It is “How” you organize your thoughts on a website. WordPress comes equipped with one taxonomy — Categories — and one Post Type — traditional blog posts — already installed. If you know a little php, you can easily re-name that taxonomy to whatever you need it to be. (Again, let’s not reinvent the wheel.)
“Capabilities” is my organizational principal of choice, because it readily translates in the type of final products I offer: Visual Design, Writing, Strategy, and WordPress Development. Now, with a simple click, I can categorize everything I put into this website with it’s specific Capability, which opens doors later on. The choice of taxonomy is important for websites and their content.
Case Studies
This Case Study is an example of a WordPress Custom Post Type. The default WordPress Post Type is a simple blog post.
Case Studies are important for designers. They’re more than just a simple portfolio piece, which might just be a static picture. They are the way a project comes together: The real-world solution.
So I needed something more robust than, say, just adding a “Case Study” capability. Instead, a Case Study is something entirely separate (as far as the website is concerned) which can also have Capabilities associated with it.
You can see the way it is organized in the back-end is also identical to the way individual Posts are presented, but with an entirely different semantic structure. Awesome. A great way to organize my finished work.
The Portfolio Taxonomy and Portfolio Automation
Have you ever made a portfolio? What a royal pain in the butt. Not only do you have to come up with a blurb about your piece — which is visual, and speaks for itself in most cases — but you have to make it look cool, too! Urgh. So we come to my personal favorite part of this website: Portfolio Automation!
It comes down to this: When I want to add a new portfolio piece to this website all I have to do is drag and drop the image in question to the WordPress Media Library… and that’s it. 🤯
I created a custom Taxonomy called “Portfolio.” This taxonomy is mutually exclusive of the “capabilities” one; meaning, I can organize a page by both. Then, I attached the new taxonomy to the media page. (See the first image in this section.) Do you see where it says “portfolio_piece”? If that phrase is included (and it is included by default for all new images) then the image is automatically included in the Portfolio section on the front end.
A screen shot of the Portfolio Section of this website.
I still have a lot to learn about web development, but wow! Worth it. This Portfolio section has a lot of potential. With a little bit more time (and java script) I’ll be able to make this section dynamic using the Portfolio Taxonomy. What I would like is for this gallery to update itself by ‘type.’ So, if you chose ‘graphic design,’ for example, the gallery would automatically display only those pieces designated as ‘graphic design.’
Anyway: Imagine this flow: Every time I get a real-world client, I create a Case Study. As I populate the Case Study with pictures and images from the project, those pictures are automatically added to the appropriate Portfolio Piece Section as well. That’s like six birds with one stone.
Conclusion
Before now, building a website was always such a chore. Don’t get me wrong, it’s still hard work; but, now, I can get the final product to look exactly how I want it to look without having to learn a new piece of software which will be outdated in six months. (And even then, there was no guarantee that you could get a page to appear how you wanted it.)
I have completely reinvented my business visual identity, while remaining true to its essential elements. The thing I am the most proud of on this website is that — despite it’s highly technical nature, and all the bells and whistles — it is simple and clean. It automates one of the most tedious parts of design, and keeps me focused on what matters the most after development is done: Content.