A couple of weeks ago there was the launch of 'Collections', a WordPress theme I designed for The Theme Foundry. It was a pleasure to work on this theme, and a true privilege to work with and for this creative team. Today I want to share my story about this project, and tell you all about my design process. Be prepared for a rather extensive article, which is only a recapitulation of this design adventure…
Briefing
The briefing for the design of this WordPress theme was pretty straightforward. The basic idea was to create a theme design that would serve 6 different types of content: images/photos, articles/posts, audio, videos, quotes, and links. The graphical style was totally up to me. During the briefing we were already discussing which direction we could go. The idea came to mind of designing big illustrative icons for each type of content for the homepage that would serve as big buttons which would show an overview of the respective content type, ordered by date, with the most recent at the top. Selecting one of them would then lead the user to a single view page with comments and comment form option. We also wanted to create a design that would easily transform into being responsive.
Concept
A sketch of first concept I had in mind: circles, big illustrative icons, and responsive.
First idea that came to my mind was to use circles as my main theme. These circles would serve as buttons and containers for each item on the homepage, and I was also thinking of using different colors for each type of content, so for the different sections of the site. I also thought of a basic composition that would work well for making it responsive. The widest version would show 3 circles on a row, then at a certain point when the screen is smaller 3 rows of 2, and the smallest sizes would show 1 circle per row. This was the basic concept I had in mind, and so I sketched it down to show The Theme Foundry team. While sketching this, I was trying to envision the graphical style. The first idea that crossed my mind was some sort of a scrapbook style using some subtle textures for the background, and maybe also for the illustrative icons.
First design
The first design I created was totally into a different direction than the final design. The first idea I had in mind was to use a vintage style. After some fine tuning I ended up with a design as shown in the next 3 images. At this point we thought that the style was all set, and so I started working on the different types of pages.
Feedback
The good thing about this project is that we were able to give the design time as there wasn't a specific deadline. After letting this design rest for a bit, The Theme Foundry team felt this wasn't exactly the type of design style they had in mind. They liked the design I created, but there were some problem areas that concerned them and could limit its appeal to a wide audience. I could see their point. This design wouldn't speak to a broad audience for sure. This wasn't something I took into account at all. I always try to come up with a totally different graphical style for each theme I create. Usually I just do my thing and which style I end up with isn't really an issue. Still, I wanted to deliver a theme design The Theme Foundry and I are fully happy with, a design that we both believe would be successful. Here is the feedback described in more detail:
Color: We would like to see color in this theme, we feel the current pastel color scheme will only be appreciated by a niche market. I think this is something we can work on and improve together.
Texture: This theme is very textured. We'd like to go for a cleaner and sharper look — reducing or eliminating the texture and increasing the contrast.
Layout: Currently, the layout is very traditional and blog-like. Your ideas are creative and original, and we'd like the theme to reflect this with a layout that's fun, somewhat quirky, and application-like.
A new graphic style
After discussing this new direction we decided to start from scratch again, only keeping the elements that we thought would fit in well in this new design style: the icons that represented each type of content, but at first I wasn't sure if we should drop the illustrative style, or just use the flat ones I created for the footer. Maybe I was also just attached to them as they took a lot of time creating them. I was also thinking of keeping the circles as I was convinced this would set a the style of the theme together with the choice of colors.
I started with the design of the homepage first, experimenting with the icons and circles. Since we thought of trying to adapt the look and feel of an application, I was thinking in the direction of a stream of content, showing a teaser of the most recent post for each type of content.
This lead further to some other designs, based on the design on the right in the previous image as we found this one was heading into the right direction. We decided the flat icons would fit best, but the colors needed some work. Meanwhile I also already had a few ideas for some subtle animations in the back of my head.
Color palette
After some experimentation and further tweaking and comparing the colors, we decided to go with the color palette as shown in the image below. It's a palette that shows a perfect contrast between each color so each section would be perfectly recognisable. We chose colors that are vibrant, yet slightly muted, easy for the eye, and that can last.
New homepage design trying out a light background versus a dark background.
During this phase I worked closely with Scott Rollo, and we bounced a lot of small iterations back and forth until we had something we both felt happy with. In the first phase he tweaked some of the colors, muting them, removed the rounded corners… Then I worked further on his design, improving the colors more into this new direction, fine-tuning some details, proposing some new subtle effects, a textured background… This was actually a fun way of working together. I guess this works well if you as a designer are open for the fact that other people 'touch' your work. Working for Fab comes close to this kind of experience, only, it's usually me who does the final design touches for Fab. Other people of the UX team have usually set the direction I should go into, and of course the brand and its style is something I created and continue to (re)use. There is also a lot of interaction and collaboration in the team, so as a designer who's only been self-employed this was a new experience. My thinking is, if someone from The Theme Foundry team improves the design, than I have no problem if my design changes a little.
Index pages
For the different content type pages we decided to create flat greyscale mockups first before jumping into Photoshop and designing things into the very detail. Quick as I am in Illustrator, I knew this would save us a lot of time, by focussing on the placement of the different elements first. The flat icons were already created in Illustrator anyway. Since we wanted this to feel and respond like an application, not a website, we were also already vaguely discussing the possible user interactions during this phase.
Just a few of the many flat greyscale mockups I created for the index and details pages.
We decided we would first design the index pages of each content type and then the detail pages. I started with the articles index page experimenting with how the sidebar versus the content could look. Scott and I both felt that the version with the dark background (last version in the row) worked best.
In a next step I focussed on designing the stream of article entries. This section can have 2 possible types of entries: an article which has a title and can be as short or as long as you want including images, and another one which is just a short paragraph of text which we called an aside. We decide to create a different styling for both, and so I experimented with a few designs of these items.
One of the many experiments of the content area of the Articles page.
One of the many experiments of the content area of the Links page.
For all of the items I did a lot of experimenting while trying out ways of presenting the different items in an original and interesting way. One of the items I did a lot variations on was the one for the quotes. Some of them are shown in the images below:
Some of the many iterations and experiments of the Quotes index page.
The Photos, Videos and Audio page took less iterations as we already had a pretty good idea on how to present them. After the first design, only some fine-tuning and tweaking was needed to get it perfect.
Single view pages
Once I started working on the single view pages the process went into a higher gear, as I had a clear image in my head of how these should look while I was working on the greyscale mockups. Since we wanted to adapt an application look, we decided to leave out the sidebar and work with a 'view all' link instead (view all articles, view all photos, etc.), and have a big next and previous button all the way to the left and right of the page. I figured this kind of navigation would really feel intuitive on tablets. It also puts a complete focus on the content which is what we really wanted.
Final design of the Audio single view page
Final design of the Photos single view page
The theme's name
During the entire process we were also thinking about a proper name for the theme. The first idea that popped my mind was 'Collections'. That's also why I used it already in all the designs, but we gave it some thought meanwhile. I also created 2 icons to choose from for the stream page which shows all entries in list form ordered by date. It took us some time to make the right choice here, but in the end the circles won as we found it suited best.
2 ideas for the 'stream' page that shows all entries in list form ordered by date.
Turning it into a WP theme
Once the design was final, the dev people of The Theme Foundry turned it into a working WordPress theme. I'm really happy with how it turned out. They did a fantastic job in making this 'Collections' theme look so perfect to the pixel. So here is my thank you!