Yesterday morning, Kyle informed me that Pitchfork, the music site that everyone has an opinion on, had launched a brand new redesign and that I should check it out. As a lot fo you know I’m a sucker for a well executed redesign, so I was curious to see how it turned out. Overall I’d say that the site seems to have some good ideas, but it feels like a step backwards. The one thing they’ve improved is their global navigation, which was old, crowded and in need of a spring cleaning. Other then that the design seems claustrophobic and monochromatic, lacking any style or vibrancy of the past design. Here are three things I’d do to put some life back in the site.

(Please open up the two images above before you read on!)

Open Things Up
The new design features not only a grey background behind the content, but a super dark grey background behind all of the content. It really makes the content look squished, rather than large and beautiful. You end up with a bunch of boxes that look too compact and your eyes don’t have a natural place to land. I’d suggest doing two things: Increasing the size of the page width to 980px to allow for more room in the gutters, and getting rid of all that grey. As you can see in my tweaked version, the results are instantly noticeable, the page looks like a breath of fresh air.

Bring Back Color
The other big thing I noticed in their new redesign is the glaring absence of red, Pitchfork’s trademark color. Like Target, Pitchfork is known for it’s punches of red all across the site, which never bothered me, personally. Now the red has been relegated to hover states only and random section titles. I’d suggest bringing the red back and using it in the logo, as well as headlines and other key points of interest.

Fonts Give Style
When I look at Pitchfork now, all I see is a Helvetica wasteland, and that’s not a dig at Helvetica. Pre-redesign the site was all in Lucida Grand, which maybe isn’t my first choice, but it certainly gave it some character. Helvetica is fine for stuff like body copy but there needs to be some sort of hierarchy between sections, and substituting a font for the titles and navigation gives it a little spark. I subbed in some Franklin Gothic, a clean and timeless font that looks good in upper and lowercase.

I also made some other changes as well that weren’t as evident but still make an impact. I adjusted the navigation to make room for the search bar. By doing that I was able to move the sharing tools to the other side of the page, giving much more balance to the header. I also increased the size of the header fonts a bit too make them more legible, and I made the body text a dark grey rather than black to improve legibility there as well.

The one last thing that needs some love is their new logo. In a general sense I really like the new logo. I’m not sure what font it is, but it’s unique and has an interesting character to it. I hate the way they’ve mutilated it though, with awkward cuts in the P and F, and the way they’ve attempted to force the points pitchfork into the K. It looks cheesy at best and really adds no value to the logo. In my version I cleaned it up and I think it looks much nicer.

As you can see, I didn’t do a whole lot, but the small details of stuff like this is extremely important, and I think they may have been overlooked. The only good way to end this post is: The devil is in the details.

Bobby

You know me, I love a good redesign, and this one from Proud Creative is one of the best I’ve seen in a long while. Created for an issue of Icon Magazine, Proud Creative took on the challenge of creating a brand new identity for the seaside town of Rhyl, which for those of you (like me) who aren’t familiar, it’s on the northern coast of Wales.

They created a brand that’s filled with bright colors and interesting patterns which were inspired by the British seaside and a skewed rectangle, inspired by the angle of the Rhyl coastline. Seeing a project like this is so inspiring. Imagine if something like this were real? If the people and political heads of Rhyl took this project and enacted it, made it happen, and brightened their community?

Maybe instead of a Re-Covered Books project I should start a contest to rebrand your small town? Perhaps it could be the town you grow up in or a small town near you? Maybe there would even be a population limit?

Bobby

I thought I’d try my hand again at doing another unsolicited redesign of a site that I enjoy, but has fallen by the wayside over the years. Back when I first started Internet-ing in the late 90′s one of my favorite sites to visit was TreeHugger. At the time there was really nothing like it, exploring alternatives and helping to usher in a green mentality. Over the years though it’s started to fade, becoming a monster of banner features and skyscraper ads. Everything is currently screaming look at me and the features themselves seem to be of little to no importance. That’s why this is the perfect candidate for a redesign. To be clear, this wasn’t sanctioned, paid for, or endorsed by TreeHugger or the Discovery Channel, this is simply me having fun.

The Logo & Mark
The first thing I did was try a light handed redesign of the logo and mark. I don’t think either has changed in years, still maintaining the flavor of early 2000′s. The vibe of the site has always been a mix of environmentalism with a tech twist, but the pixelated tree and hard angled (but not) font wasn’t really working anymore. Neither is the ‘A Discovery Company’ lockup that’s way too tight, see how the A and D caress the first E in Treehugger? My idea was to simplify the Treehugger logo and refresh the mark… literally.

The mark is a simple combination of two things: The computer symbol for refresh and a leaf. I thought about using a recycling logo, but it felt contrived and bit too on the mark. I also feel like the idea of refreshing is more positive than recycling. A leaf is the most basic way to identify nature, and plays together well with the word treehugger. Together they embody the spirit of what the site has always been, nature meets tech.

For the logo I kept things simple, using the free font Miso by Omkrets Architects. The font is similar to the old one, but is a little bit softer and less trying to be tech related. The ‘A Discovery Company’ byline has been severely minimized and reduced down using Jason Kottke’s font Silkscreen. Together I think they form a nice combination and could also work easily on business cards, letterheads, etc.

The Website
When I started playing around with the design, the first thing I thought about was color. Okay, I get it, TreeHugger, it has to be green, right? All I see when I look at the current site is this deathly, moldy shade of green in the background that’s totally unappealing. So I decided to opt for a light blue instead, which I called a much needed breath of fresh air. When comparing the two side-by-side the results are… breath taking (sorry, I couldn’t help myself).

Another huge hurdle I faced was trying to figure out what was important on the site. Currently there’s zero hierarchy on the page, everything is competing to be seen and it’s a huge mess, the web equivalent of a hoarder. I decided to break the site down into three main parts: a featured section, a main column, and a side column. The featured area is just what it sounds like, a simple carousel displaying popular or important stories. I see that TreeHugger is quite dependent on ads, I counted 7 ad units on one page, so I decided to determine the height of the featured unit by the height of a search box and a med rec.

The main column, which features all of the articles, is simplified and made larger to give it the respect it deserves. Currently on the site the articles seem like passing thoughts, squeezed between two columns of ads and click-me-nows. They’re also inundated with every sharing tool possible as well as recommendations for other stories. It was all too much. There are a few more things like tags or an Outbrain style of related articles that I could have added, but let’s not ruin the magic.

The sidebar was the last hurdle to jump, and I thought he best way to handle it was to do what Cool Hunting has done. Basically, they have a few ads in the sidebar, as well as some of their own pertinent information that could entice a reader. The genius part is that they allow for about five posts to go by, lazy load more posts, and then lazy load the sidebar again. This allows them to get a ton of ad impressions, even though a user hasn’t click a single story. I tried to get the folks at Myspace to do this, but it never clicked (yet again, I can’t help myself).

Conclusion
Overall, I think the site is a thousand times better and more easy to digest. It’s amazing how much crap can pile up on an established website over time. I’m not really sure if TreeHugger has a design staff, but hopefully my redesign gets someone in the right place thinking about changing things up. It’s also worth mentioning that they could benefit from an improved footer as well, but that’s a can of worms I didn’t want to open.

I’m looking forward to hearing your feedback and what you think about my little experiment. All critical feedback is accepted, but please keep it polite. If you don’t have anything nice to say, keep it to yourself.

Bobby

I often complain about the design and look of websites. There’s a lot of sites out there that simply need some love and a few tweaks, and they’d instantly be much better off. There are also a lot of sites out there that have been around for so long that they’ve got digital junk laying around their site, like they could be on an episode of Hoarders. Instead of complaining endlessly about the matter I’ve decided to do something about it. So here’s my first try at redesigning an existing website to look and function better.

Let me be clear about my objective. I’m not trying to rethink or reinvigorate these websites, I’m simply giving them a facelift. Clearly these sites are popular for a reason, so I’ve made a list of simple suggestions on how they can improve their user experience. My version is meant as a critique of their current website, definitely not an attack on anyone in particular.

To start off my first redesign I chose a website which I use quite often… Netflix. I use Netflix quite often, and I love using it… on my television. The 10 foot experience is perfect for browsing movies on your couch. But when you use their website it looks like it hasn’t been updated in about 5 years. Is it functional? Yes. But could it look and function better? In my opinion, the answer is yes. I’m not here to make the whole damn site better, far from it, I simply have some ideas that I think would help. I should also make it clear that I have no relation to Netflix, this isn’t some kind of ad, I’m just doing this because I’m a weird-o. So what would I change? Read on to see my suggestions.

Color Palette

The first thing I’d do is adjust the site’s color palette. Netflix currently uses it’s trademark deep red, which is reminiscent of movie theater curtains (a nice connotation), a dark blue for their links and primary action buttons, a yellow-ish gold for their user-rated star and navigation arrows, and a series of grays to round things out. I’m a fan of the red, it’s obviously their color, but the blue seems like a web legacy color which kind of drives me crazy. The yellow color of the stars also seems a bit dull to my eyes.

My suggestion would be to leave the red, introduce a bright green that can visually stand it’s own against the intensity of the red, and change the yellow to a shade that’s bright and poppy. The red and green seems like a natural idea to me. I think this combination manages to defy the X-mas stigma that tends to pop-up when you pair the colors, and instead makes the standard links and buttons pop-out quite nicely. I enjoy scanning the page and seeing lots of green opportunities available to me. I also like the bursts of yellow where I’ve rated things. I’ve also simplified the shape of the stars and made them flat rather than the 3D style that’s currently on the site. To me the fake 3D-ness interferes more than it enhances.

Search and Site Navigation

A big change I made was to the top portion of the site, specifically the search field and the navigation. I have no metrics of what the most important aspects or areas of Netflix are, but I feel like Search would be high up on their list. So, I straight up copied YouTube. If it works for one of the most largest websites out there, why not for Netflix? I increased the size of the Netflix logo, which felt kind of weak to me, and put in a big ol’ search bar next to it. My guess is people want to instantly find the movies they want to watch, so the giant search bar would help facilitate that.

I also gave the top level page navigation a bit of a makeover. I didn’t feel like the one, giant navbar that’s currently used worked very well, so I decided to use a common tool and make some tabs. It’s far from innovative or fancy, but it works. I gave it a little visual hierarchy, some differing shades of gray, and voila. I feel like this area could potentially use some more work, but I think this application is stronger than the existing one.

User Engagement and Suggestions

I based my mock-up idea on a screencap I took which leaned heavily on user engagement, specifically, making it easy for the user to finish watching a movie they’d started, and also getting the user to rate the content that they’d seen recently. But these actions were displayed in such a way that took up way too much room, effectively pushing the recommendations way down the page. So I consolidated things here and tried to use the space more efficiently.

Previously, the ‘You Recently Watched’ section stretched the entire width of the page, as did the ‘Rate’ a previously watched film section. I decided to consolidate these into one, cohesive, 950 x 145 pixel module unit that gives you the ability to rate four movies and finish watching three movies you’ve previously started. I chose to use the same progress meters because they work just fine.

Finally, there’s the ‘Top 10 for Bobby’ section which is used to give the user suggestions. My assumption is that this area is meant to be a cream of the crop, the “here’s exactly what you want” area which gives a user suggestions that they’ll love. Unfortunately, this section doesn’t feel special, premium or custom-tailored in any way. So I thought it would be nice to introduce a gradient here which transitions you from some utility features into a more premium, just-for-you area. I kept the overall structure here pretty much the same, though I grayed out the other selections to give more focus on the selected film. I also ripped out the description of the content, which used to live in the flyout menu, and put it next to the content so you can easily read what the movie is about and have access to the info more easily, no messy pop-outs needed.

Recommendations

I didn’t want to go crazy with the Recommendations section of the site because it seems pretty functional just the way it is. I did think you could use the space a little more efficiently though, so I chose to add another entry into each section. I think I could definitely be wrong about my ideas here. Five options could end be feeling too cramped or like there’s too much information there, and maybe Netflix has some metrics around this, I don’t know. It’s not quite perfect, but I think it works.

Miscellaneous Thoughts

Honestly, I don’t really feel like Netflix is that bad, which is part of the reason why I chose it to be the first. I feel like Netflix could take two weeks with one designer and one developer sitting together in a room, and they’d be way better off than they were before. My ideas aren’t meant to be revolutionary or groundbreaking in any way. It’s simply saying that small changes can make a big impact. I’m sure I could have done a lot more with this project, but I wanted to create something rather quickly and get it out quickly so that I didn’t dwell on my ideas or overthink things too much, as I tend to do.

I’d love to hear your feedback on this self-assigned design project. You don’t have to like or agree with anything I’ve done, all I ask is for you to be constructive and polite with your comments. I’m planning on doing more of these as well, so if you have any ideas for future redesigns, feel free to leave them in comments. Just remember that this project is aimed toward larger blogs that lots of people use, don’t think you’re going to get a free site redesign out of this, haha… I’m really hoping to see if Netflix picks up any of these ideas. I don’t really care about making money, I just want to see good design spreading throughout the web.

Bobby

“The Champagne of Beers” is it’s tagline, and boy do I believe. Miller High Life, introduced to me by my buddy Michael, has in the last couple years become my usual standby. Last summer, in the midst of my freelancing (aka starving) the “champagne of beers” was my $1.46 refreshment that would get me through the sweltering days. Now this classic beer has been given a fresh face thanks to the team over at Landor. From a press release from Landor:

“Once the flagship brand for Miller Brewing Company, Miller High Life had over time been repositioned as a below-premium beer that belied both its product quality and rich 100+ year-old heritage. In order to improve consumer perception, we contemporized and better leveraged its revered and iconic brand elements—the Miller High Life Soft Cross and the Girl in the Moon. The new visual identity allows the brand to stretch beyond the below-premium category into a more premium territory that we think positions the brand to reclaim its iconic status.”

The dazzle is in the details on this redesign. The choice of fonts, the subtle patterns and textures, the blue, reen and reds that compliment the golds of the beer/cans… it’s all spot on. What’s kinda funny is that I already thought it was an amazing packaging design, but it’s rad that they’ve stepped up their game on such a low priced product.

Found through The Dieline

Bobby

Last Thursday I posted this video showing the redesign if the $100 bill here in the U.S. and the proceeded to talk about how horrible it was. To my surprise there were a lot of commenters who seemed to think that the idea of security and beauty were two concepts that couldn’t live together, which kind of baffled me.

In response I’m posting these currency redesigns by Michael Tyznik, who I think did an amazing job of bridging the gap between design and potential security. His design includes ideas like a holographic strip, which not only makes it easier to tell the bills apart easier but could also be filled with a bevy of security features, I would assume. Inside the strip there are also embossed dots for the sight-impaired, something that current currency definitely doesn’t take into consideration.

This in my mind couldn’t be any better looking. It’s simple and bold while still giving a nod to the history of money in America. If you’ve happened to notice that there’s a lack of $1 you’re right, Michael suggests doing away with the $1 all together and replacing them with coins instead as it only has an average lifespan of 21 months. Kinda interesting, huh?

Bobby

Ugh. When the hell is U.S. Treasury going to start hiring actual designers to start dictating the look of our money? In the video above you get an interactive tour of the shit-tastic new $100 bill which features a quite fluid, rubbery bill and a background filled with all kinds of horrific lens flares.

I don’t give a damn about a security ribbon or a bell in an inkwell that makes the money harder to counterfeit, nor do I think any other normal person does. I think what we need it something that looks good, seeing as how for the time being it’s a global currency. I think the design should also help those with vision problems be able to tell which bill is which easier. I think it’s even less about aesthetics and more about usability.

It’s kind of like when you have a website designed by a developer. Sure you need the developer to build it, but 99% of the time they have no idea about aesthetics or how to make it more user-friendly. Massive fail U.S. government.

Bobby

As you may have noticed, things are a bit different here on the blog, but actually they’re really not. Last night I started making some little tweaks to the site, changing some fonts and stuff. As per usual, this lead to me totally redoing entire chunks such as flipping the entire blog and having to completely recreate the header and big yellow dot. So while it’s kind of opposite from it’s normal state, everything is the same, like the widths of the columns and the main layout.

This is something I’ve been wanting to try forever now, and honestly I’m really liking how it looks. To me, it feels like the content is more front and center where it’s supposed to be. I know it looks weird for now, but all I’m asking is to give it a try. There’s no right or wrong way to design a blog. I just want it to be as clear and simple as possible.

While doing all of this I found a screen capture of the site from July of 2007. If you’re not a fan of the site right now, imagine browsing it over 2 years ago! What the shit was I thinking?! Those half tone dot dots in the background, the crusty looking ID picture, the typewriter font all over the place… the purple. It was a different time and I was a different man. Please enjoy laughing at what once was and feel free to leave snide remarks in the comments.

Also, if you have any constructive feedback for the site design I’d love to hear it. One thing I was thinking about doing was adding 10 more pixels to the center divider to give the sidebar and main column a bit more space. I can’t promise I’ll do through with suggestions but I’m always open to new ideas.

Thanks for being awesome readers.

Bobby

A couple months ago I got an email from Justin Gage, creator of the Los Angeles music blog Aquarium Drunkard asking me if I’d be interested in helping his site out with a redesign. I had been a fan of his blog for years now, so I was totally excited that he asked me to help him.

Checking out his old blog, which I failed to take a screen cap of to show the before and after, it was kind of a mess. First off it was extremely dark, using prmarily blacks, browns and golds. Second all of the content was contained in one tiny main column and it was all pushed to the left side, only 20px left of the edge of the browser. To say it felt cramped would be an understatement. My idea for the site was to lighten everything up, increasing font sizes, giving the site brighter colors and making it feel more welcome in every way possible.

My inspiration for the site was old bars, as Justin and I are both expert beer drinkers. The difficult part was not making it too campy or too tongue in cheek, with bottles of booze or drink rings. I went through several versions, you can see earlier versions under the cut, but it wasn’t until I created the background pattern that I found my direction. I decided to go with a blue and creme color palette with accents of black. I also wanted to make things a little gritty cuz that’s how a bar should feel and I like how it looks.

Overall I’m really happy with how it turned out. As with all my projects I really try to focus on simplicity, usability and legibility. Making it snazzy looking is just a perk of the job. Big thanks to my buddy Justin for reaching out to me on this project, I had a blast doing it.

Check under the cut for more early versions of the site.

Bobby

Since I’m starting to do more freelance work I thought I’d start posting more of the projects I’ve been working on over the last few weeks. The first was a logo redesign for my friends fashion label, Skingraft, a brand that makes contemporary feeling clothes that are Victorian-era inspired, and they also create a lot of leather pieces as well.

The name alone connotates some not so cute imagery, so I went with a really simple but unique font that would contrast well with their harder edged look. They were also looking for some sort of crest or mark as well, so we took inspiration from all of the mounts on the walls of their studio and created a stylized ‘S’ inside of a mount. It’s a bit gothic, a bit old fashioned, and definitely bold.

The poster above was created for the Live Improv Movie Project, a project my friend Ari is a part of. Basically, the old poster was desperate for an update, so I decided to go with an old fashioned, sort of 70′s French cinema feel, or at least that was my inspiration. I figured simple and bold was the best way to go, I figured I’d stop and look to see what this poster was about.

I’ll try to post updates more frequently if you guys are interested.

Bobby