The Creative Process Behind the StudioPress.com Redesign

In this week’s episode, we discuss the creative process behind the latest StudioPress.com redesign … In this 29-minute episode Brian Gardner and Lauren Mancke discuss: The goals of the StudioPress redesign Changes to the existing logo Choices in typography and color Design of the Studicons font Styling and shooting the site’s photography Updates to functionality... Listen to episode

In this week’s episode, we discuss the creative process behind the latest StudioPress.com redesign …

In this 29-minute episode Brian Gardner and Lauren Mancke discuss:

The goals of the StudioPress redesign
Changes to the existing logo
Choices in typography and color
Design of the Studicons font
Styling and shooting the site’s photography
Updates to functionality
Plans for the future

Listen to StudioPress FM below ...

Download MP3Subscribe by RSSSubscribe in iTunes

The Show Notes

StudioPress.com
StudioPress 101
Shop for Themes
Unsplash
Brian Gardner on Twitter
Lauren Mancke on Twitter

The Transcript

The Creative Process Behind the StudioPress.com Redesign

Jerod Morris: Hey, Jerod Morris here. If you know anything about Rainmaker Digital and Copyblogger, you may know that we produce incredible live events. Well, some would say that we produce incredible live events as an excuse to throw great parties, but that’s another story. We’ve got another one coming up this October in Denver. It’s called Digital Commerce Summit, and it is entirely focused on giving you the smartest ways to create and sell digital product and services. You can find out more at Rainmaker.FM/Summit.

We’ll be talking about Digital Commerce Summit in more detail as it gets closer, but for now, I’d like to let a few attendees from our past events speak for us.

Attendee 1: For me, it’s just hearing from the experts. This is my first industry event, so it’s awesome to learn new stuff and also get confirmation that we’re not doing it completely wrong where I work.

Attendee 2: The best part of the conference for me is being able to mingle with people and realize that you have connections with everyone here. It feels like LinkedIn Live. I also love the parties after each day, being able to talk to the speakers, talk to other people who are here for the first time, people who have been here before.

Attendee 3: I think the best part of the conference for me is understanding how I can service our customers a little more easily. Seeing all the different facets and components of various enterprises then helps me pick the best tools.

Jerod Morris: Hey, we agree — one of the biggest reasons we host a conference every year is so that we can learn how to service our customers, people like you, more easily. Here are just a few more words from folks who have come to our past live events.

Attendee 4: It’s really fun. I think it’s a great mix of beginner information and advanced information. I’m really learning a lot and having a lot of fun.

Attendee 5: The conference is great, especially because it’s a single-track conference where you don’t get distracted by, “Which session should I go to?” and, “Am I missing something?”

Attendee 6: The training and everything, the speakers have been awesome, but I think the coolest aspect for me has been connecting with both people who are putting it on and then other attendees.

Jerod Morris: That’s it for now. There’s a lot more to come on Digital Commerce Summit, and I really hope to see you there in October. Again, to get all the details and the very best deal on tickets, head over to Rainmaker.FM/Summit.

Voiceover: StudioPress FM is designed to help creative entrepreneurs build the foundation of a powerful digital business. Tune in weekly as StudioPress founder Brian Gardner and VP of StudioPress Lauren Mancke share their expertise on web design, strategy, and building an online platform.

Lauren Mancke On this week’s episode, we’ll discuss the creative process behind the latest redesign of StudioPress.com.

Brian Gardner: Hey, everybody. Welcome back to StudioPress FM. I am your host, Brian Gardner, founder of StudioPress. Today, as always, I’m very excited to have Lauren Mancke come alongside again as the co-host of the show. Lauren, how are you doing this morning?

Lauren Mancke: Good, how are you?

Brian Gardner: I’m doing good. We get to talk about more fun stuff with StudioPress today. We are going to be talking about something fun and something that you and I worked together with. That is the latest redesign of the site. We figured the first couple weeks we’d talk about our stories. We would talk about the StudioPress redesign in the third part of this initial series here on the show.

The Goals of the StudioPress Redesign

Brian Gardner: Let’s just go right into it. January of this year, we launched a brand-new redesign at StudioPress. I think it had been three years. I think it was, what, back in 2013? And that was a Rafal design back in the day. Am I right there?

Lauren Mancke: Yeah. I think the previous one was at the end of 2013.

Brian Gardner: Okay, so a good two, two and a half years, which in my world is forever because I like to redesign every two months. As we know, it’s important for brand consistency to not do that. I think even before that, that must have been my design, the one that predated Rafal’s.

Believe it or not, I went onto Google and searched Google Images under StudioPress to see all of the various site design and things like that. It’s quite embarrassing because the way it looks now is incredible compared to the stuff that I did back in the day, which is completely embarrassing. So good job. And yes, by the way, we are going to give all design credit to everything StudioPress these days to you. How do you feel about that?

Lauren Mancke: Okay.

Brian Gardner: You’re good with that, right?

Lauren Mancke: Yeah.

Brian Gardner: All right. Here’s the thing. Let’s start at the top. You and I talked about the best way to talk through the redesign. We thought it would be maybe helpful or interesting to people who are fans of StudioPress for us to just break it down and just talk about the design process, from top to bottom, of the current site.

Changes to the Existing Logo

Brian Gardner: It’s interesting, the logo that we have, even though it’s evolved a little bit and the colors have changed, that was the original StudioPress logo from back in the day.

I don’t know if you remember this. Kevin Flahaut, he’s the one of the guys that works at Rocketgenius, the guys behind Gravity Forms, he actually came up with the original StudioPress concept for me back in the day, the three little rectangles and squares thing. Of course, since then, you’ve cleaned it up and have made it look much better and tighter. It’s cool to see the evolution from the silver gradient black and orange days to the flat black and blue and white days.

Let’s talk about the logo. I’m going to let you take the mic and just talk briefly about what we did with it and maybe why.

Lauren Mancke: Overall with the goals of the redesign, we really wanted to update the entire look and feel of the site. I think that first started with the logo design. We talked about tightening up that mark and making sure it was pixel perfect down at the favicon size all the way up to regular size, full size. The logo has transitioned over the years to different iterations.

We took that previous blue color and made it bolder, stronger, and brighter. We switched the font to Proxima Nova, and it’s very similar to the previous font. I think really the most noticeable letter is the R is a bit different.

Brian Gardner: Do you remember, I can’t remember off the top of my head what the previous font was that we used for the logo?

Lauren Mancke: I think it was Museo Sans.

Brian Gardner: Yeah, that sounds right because that’s Rafal’s favorite font. Everything Copyblogger and Rainmaker is Museo. To be honest, I think even before that, the original, original logo may have been Arial, which of course is laughable now. Yet people think Proxima Nova has been around for a while, but it’s such a timeless typeface. I’m looking at it now. I’m looking right at the screen. It looks so good. I like the rounded S’s and stuff like that. You did a great job tightening up the squares and just making it to a point where we can scale it up and down.

Lauren Mancke: Yeah, I think I started with that because it always bothered me that the lines weren’t crisp on the favicon. I started with that one pixel line.

Brian Gardner: That’s Lauren’s way of calling me out, by the way. That’s what happens when you’re not a trained designer. You open up Photoshop Elements and put some blocks together and then make it smaller and bigger, and it doesn’t quite look the way it should. Your designer steps in and takes care of it for you. There you go. Okay, that’s the logo mark.

Choices in Typography and Color

Brian Gardner: Also, when we talked about doing the redesign, there was some color things that we wanted to incorporate just top to bottom throughout the entire site, front to back as well.

Lauren Mancke: I think our first discussions were about really deliberate color choices and using more bold colors. The full site, we talked about using full-width imagery, large-scale typography, a lot of intentional whitespace, pulling back the blue texture and removing some of that green color, adding a little more white to the site was where we started.

Brian Gardner: It’s no secret that I’m a huge fan of minimal design, whitespace, and emphasis on typography, which, of course, it worked well because you and I, even though we have different tastes to some degree, we also are very like-minded. It was easy and fun to work together on this. I would just throw a few things out there and let you run with it. I didn’t have to worry about you coming back with something I didn’t like.

I think the intentional part of this with the colors, the spacing, and the typography, I’m thrilled with the way it turned out. I know that we went through a few minor evolutions within this redesign process, but I’ve been pleased with it.

Lauren Mancke: Also we talked about really creating a well-organized light interface so that the content could shine through. I think that is the goal of minimal design, to let what you really need speak for itself.

Brian Gardner: Well, obviously at Copyblogger, for us, content is pretty much everything. Obviously, that is not blasphemous to design because that is just as important, especially here at StudioPress because we are the industry standard for premium WordPress themes and plugins. We need to maintain that. For us to do a redesign — which felt like the design before was around five years — by the time we got to the redesign, I was really ready to move forward and do something new.

As we’ve discussed, Proxima Nova, like I said, it’s a timeless font. I love it. Some of the elite designers have a tendency to look down on it because it’s so used all over the Internet. I think there’s a reason for that. What do you think about that?

Design of the Studicons Font

Lauren Mancke: Yeah. I wanted to stay true to the brand identity. We had been using Proxima Nova on a lot of things with Museo Sans. I thought it would definitely fit with keeping that consistency. We went with a thinner version though for the large titles, I think made it look a little bit fresher. We continue to use that bold uppercase version for small titles to keep that consistency with the previous versions.

Brian Gardner: As I think about it, we approached StudioPress’ site from a design standpoint. When we designed Copyblogger, it was obviously different audiences. The bold headlines work more in a content or marketing-based industry. For us here at StudioPress, more design-focused and more emphasis on keeping up with the latest trends and all of that. I love the thin headlines, and I think they stand out. I think it was a departure from what we had. I think they look great.

Lauren Mancke: I think, too, that this wasn’t really a complete overhaul of the structure of the site because we had already done so much conversion testing for what was there that we were really just focusing on the look. I think lightening up that typography really helped.

Styling and Shooting the Site’s Photography

Brian Gardner: All right. Let’s go to the homepage. Let’s talk a little bit about that. Obviously, we talked about the logo and the branding up there on the header. Obviously the links need to be there. Those are very intentionally placed.

The photography and we’ll talk and about this many times here in the future and probably have in the past. One of the great things about Lauren is that not only is she a great graphic designer, she’s a complete creative. She edits these podcast episodes, believe it or not, and she’s a great photographer.

A lot of the photography that we see in the themes that we’ve recently released have been shots taken by Lauren. Anyway, it was important for us to not just grab stock photography for StudioPress. We had a reputation to uphold. As pioneers in the creative world, it just made sense that, as part of the design, that you would go out and organize shoots and do photography so that we can use that on our own site.

Lauren Mancke: Yeah, the previous site we discussed, when we were talking about the redesign, the goals for the redesign, the previous site didn’t have any specific photography. There was a few head shots from testimonials, but really nothing for the site itself.

I thought since a lot of what we do is based on this awesome online community, I really wanted to show people, along with the product, a lot of thought went into the styling of the shots. I wanted to use natural lighting — light, bright, really organic feel. A lot of the photos are very high contrast. The subject matter isn’t very colorful. It’s mostly a desaturated color palette.

Brian Gardner: Yeah. One of the reasons, aside from I think it just looks better to have, I’m talking more so now in our own themed demos and stuff like that. The photography that we use, we talked probably years ago about starting to do our own photography. The reason behind that is because everyone uses Unsplash. It’s a great resource for people, especially people who are blogging and need featured images and stuff like that.

It gets to a point where I think, at least on WordPress-themed demos, it’s almost clichéd to see the same mountain shot, and somewhat boring and, quite honestly, lazy to just default to that. There are times and still will be times where, depending on the theme, I’ll just go grab shots on Unsplash because it just works. Those shots are actually perfect for what we’re going for.

Cafe’s a perfect example because, at the time, there wasn’t a lot of food imagery over at Unsplash. It’s like, “How are we going to do a restaurant-style theme without putting shots of trees and mountains in there?” I think that was when we first started talking about it. You said, “I’ll just go out and take some shots.” The same thing with StudioPress. We could have put some boring laptop shot on a homepage, something from Unsplash or from somewhere else.

I’m looking right now at our ‘getting started’ page. If you go to StudioPress’ website, if you go to the StudioPress 101 link, which is right next to our logo, you’ll see which one I’m talking about. We can drop this down in the show notes also. The shot itself, it just looks so much like it fits with the rest of the site and the design and the colors and the high contrast, as you mentioned, and the blues and the whites and the blacks. I think it just feels very native where it’s at.

Lauren Mancke: The model actually in the photos is my husband Will. He is very good about volunteering for these kinds of things. He stepped in. It’s funny that you mention Cafe Pro because he actually made all the food for that. He made the mussels. He baked that bread, so I could take pictures of it. He’s just always willing to help out in these types of scenarios, whatever crazy thing I come up with.

Using Custom Icons

Brian Gardner: Okay. Speaking of that page, as I scroll down, there are some great examples of other things outside of just photography and web design. Part of it is an element of web design. It’s the icons that we use, kind of like Unsplash. Yes, we could have gone out and used something that was out there that everybody else uses, but another tool that you have is the ability to design custom icons, which you’ve done for the site.

Lauren Mancke: Yeah, the icons are just some simple thin line icons. I think they really mirror that thin typography in the headlines. There’s nothing hugely unique about them. They just really fit with the rest of the design.

Brian Gardner: I think sometimes what people do is go out and find icons and then try to craft their content around it. In other words, you can’t go to Ionicons, Genericons, or Dashicons and find spark plugs and car icons. You can find something that may be conceptually insinuated that, but then it wouldn’t look like it really, really fit, that you were trying too hard, or people might get confused.

For us, in this case, we had the luxury of having Lauren just create exactly what we needed to have from an icon standpoint. They can scale on various devices and so on. That is another element of the entire site design as a whole that is good. Everything is custom on the site — and that I love.

Updates to Functionality

Brian Gardner: Moving forward, this is probably by far the most important page and the one that we probably put the most amount of attention and detail towards is our Themes page. Obviously, StudioPress top-level domain is probably what gets hit the most. But then immediately people know us as designing and developing WordPress themes. Their next instinct would be shop for themes, right?

Lauren Mancke: Yeah. I think we spent a lot of time playing with the amount of themes on the page. We ultimately settled on a two-column layout to really let those big images showcase the themes themselves.

Brian Gardner: Yeah, I struggled with that because we probably have, what, 50-some themes on that page? Instinctively I thought, we got to trim it down to three columns so that it’s not as tall, so you don’t have to scroll as much. When we did that, it just felt really busy, which, of course, goes against what we had discussed previously on the front page and other areas where this breathability and whitespace.

I think the old-school way of thinking is the above-the-fold, cram-everything-up so that you don’t have to scroll as much. But times have changed, and especially with the amount of devices and various screen sizes that are out there. For me, it came down to seeing it in two columns was a breath of fresh air. It was like, “Wow.” First of all, you can actually see the screenshot because it’s bigger. Even if you have to scroll more, big deal, right? Everything else on the page looks good.

Lauren Mancke: I think we also took that idea and went with that also on the singular theme page. That top section is dark to let that screenshot shine where you can really see the themes. A lot of our themes are white, light color palette. We went with a darker header for those pages individually.

Brian Gardner: Yeah, I’m a huge fan of that decision. Typically, I’m not an advocate of white text on black or dark backgrounds and all of that, but because of the fact that, yes, we wanted to emphasize the design of each theme, I think in this case it worked. It also helps the call to action button, which in this case is green. We wanted that very specific thing to stand out a little bit more than just the regular blue. I think it would have blended in more and would have been maybe less converting or harder to see.

I love how we inverted the colors of the logo and the navigation as well, the menu items to go white as well. I think that also helps make things a little bit interesting. It’s not quite as templated throughout the entire site where you’ve got a little bit of variety. You get to the Theme page, and all of a sudden you’re like, “Oh wow, this is attention grabbing,” and makes me want to scroll down.

With the features of each theme down below the icons and the descriptions of the theme features, I think having the dark above helps contrast and doesn’t wash that out. Again, total fan of what you did. Then, of course, below of that is the pricing section, which is black and white. It is a mix of the two sections above. Huge fan as always.

Lauren Mancke: Yeah. I think we also use that mindset of wanting it to be easier to read in with the changes we made to the dashboard. We wanted a seamless experience between switching from the regular site, the sales site into where you log in and you have all of your resources. We wanted to keep a lot of the features that people have come to be familiar with, but we also wanted to make that dashboard really easy to read, really easy to navigate and get to what content you need.

Improving the My StudioPress User Experience

Brian Gardner: All right. That’s a great segue. We’re going to move from StudioPress.com now over to the My StudioPress member area, which, in and of itself, has a lot of little nuances and things that maybe we didn’t anticipate from a user experience standpoint and having to display certain types of informations and to get people from here to there. I think my favorite part of the My StudioPress experience is the blue bar at the top.

There’s no real reason to have that throughout the site itself, but from a member standpoint, you have the additional member profile, the member links that are necessary. We were trying to figure out how exactly we were going to display that. I think you came up with this blue bar. When I saw it, I was like, “That’s absolutely perfect.” It sits above the header, so it feels like just that additional piece. It stays out of the way, but it’s there. That was just a great way of coming up with that solution.

Lauren Mancke: The previous site had a blue bar, but it was actually just in a different location. I moved it up to make it more of a dashboard feel. I think we have a lot of GitHub tickets right now. There’s still more work to be done on the dashboard itself. But that’s the nature of the redesign. The design is never done. Isn’t there a Leonardo da Vinci quote, “Art is never finished, only abandoned”?

Brian Gardner: Yes. It also reminds me of the whole concept of the Golden Gate Bridge and how, when they get done painting it, it’s time to go back and start over just because there’s so much work to be done. At some point, you got to go back and fine-tune what you’ve already worked on.

Lauren Mancke: Exactly.

Brian Gardner: Like I said, with the My StudioPress member area, just so many different things to consider — like a downloads page and all the documentation that we have for code snippets, tutorials, and stuff like that. I would have taken the shortcut and just made those regular pages and boring with a side bar.

But you’ve done a really good job of, especially on the downloads page, using columns and design and icons just to help make that even a better experience for our users. That was for sure one area where you totally rose above where I would have taken it. That’s why you’re designing the StudioPress site and I am not. Of course, we do have static pages on the site and the StudioPress Blog. You did a great job laying things out there.

Plans for the Future

Brian Gardner: I just thought it was fun that we would talk about the redesign and just start this whole podcast off with the three part series of who I am, who Lauren is, the StudioPress redesign. The next series is going to be probably my favorite and the one that I’m most looking forward to.

We’re going to be taking a break, a week off. We’re going to do segmented series here. I’m hoping maybe four to six shows. We are going to reach out to the community, the StudioPress and Genesis community, and talk to those who are working with our product and have built businesses around our products. There’s all kinds of people, couples and design agencies. You’ve got developers on their own and every type of thing in between.

We’re going to reach out to some folks and hopefully have them on the show that will represent different parts of our ecosystem. I am looking forward to that. What about you?

Lauren Mancke: Yeah, I’m really looking forward to that. I think that’s what makes StudioPress and Genesis so great — the community. There’s lots of different types of people who are working with it and making it better and creating that community.

Brian Gardner: That is something that you can look forward to as much as we will. Thank you for listening to the show, StudioPress FM. See you on the next one.