Established in 2006, Brand New is the best, baddest, awesomest, most best blog in the world. That’s what it would say if we had a Wikipedia page, because those are hard facts. False modesty aside, yes, Brand New is new today! Like, drastically new. I decided to post this as a Review not because it’s on par with Google or Facebook or Juventus rebranding but it is a big deal, so it gets top billing today. Some things are the same, some are very different. Read on to see what’s what; it’s a long post so you might experience some tl;dr. Oh… and to finish my opening paragraph in usual style… This week Brand New introduced a new logo and website designed by Austin, TX-based UnderConsideration.
I will start by talking all about the website and leave the logo to the end. The previous version of Brand New was introduced in July of 2013, a relatively short 3.5 years ago. It was only the second responsive website I had built and my CSS skills were fine but limited. (They are still limited today but at least I find that I can make layouts do what I want them to do and not layouts making me do what they want.) I liked the design but I do acknowledge the home page had hierarchy issues from the start and the side column with the polls on the individual posts was far from ideal. Still, we’ve been rocking this layout and, at the end of the day, most of you have politely and thankfully put up with any limitations because the content is what matters. Still, things could be improved, so that’s what I set out to do as well as implement some important changes to accommodate more content and the growing demand of potential advertisers. Following is a run-down on the most obvious changes.
Yes, I see it too and that’s the point. Our advertiser banners have been 500 × 150 pixels for years and they are now getting lost easily, which is not good for business. The new ad size is common among web publications and it’s as tastefully done as possible. Compared to the onslaught of ad units, pop-ups, and pushy modal windows other sites use, we are extremely kind to you. A bigger ad will attract more advertisers and more advertisers mean better funding for this blog which takes a big portion of time. We do encourage you to click on the banners now and again to support those companies and organizations that support us.
This is the number one request we get from advertisers. For the longest time we have tried to steer away from it but it’s become really hard to ignore. We will do our best to bring you relevant sponsored posts. Again, please consider engaging those posts, instead of just scoffing at them or ignoring them — which you have every right to do — but remember that these posts will help keep Brand New going. As you can see in the home page, the posts are not invasive and they are clearly marked. In the RSS feed they will also be clearly labeled. Heck, you might even consider buying one now and then to promote a product, service, or even that project I refuse to include in Friday Likes.
New section: Spotted
One of the biggest reasons for the update was this, to be able to include many more logo redesigns than what we’ve done until now. For better or worse — I like to think for better — I have established a strict set of criteria of what kind of projects I write about and that leaves a lot of projects on the cutting room floor. I think I post about 50% of the tips I receive… that’s a lot of wasted sources. Spotted will have no opinion, no application images, not even an introduction. It’s just a radar for as many changes as possible. You will still be able to comment and vote on them. You might say, “Don’t be lazy, Armin, and just write a sentence”, to which I say, “Yes, in an ideal world, that would happen but there simply aren’t enough hours in the day to write about every logo”. My plan is to post 2 or 3 Spotted a day.
New sections: Pinned and Curated
Towards the bottom of every page, there will be two sets of 6 thumbnails — or 4, depending how wide your browser window is. The first are “Pinned”, which are the most big-news posts we’ve had in the last 6 to 12 months as a way to keep those big changes in the spotlight. The second are “Curated”, which will be a bi-weekly selection of common posts from our archives. We are kicking off with the best projects tagged with “blue” but we’ll refresh that section with other parameters like best projects with birds, or the best automotive projects, etc.
I would like to think I did a good job on this. The site looks its best at 1,500 pixels wide, which sounds huge by 1999 standards but it even fits in my 11-inch MacBook Air so I know I’m not being extreme. The site shrinks to 1,000 pixels and drops two columns from the layout to fit nicely into iPads. Then it shrinks to 500 and drops two more columns for a pleasant experience on phones. The navigation now has any browsing options in a drop-down, full-page screen that makes it fairly easy to, well, browse.
We are rocking Hoefler & Co.’s Mercury Text ScreenSmart and Operator ScreenSmart, served from their Cloud.typography service. Mercury has always been one of my favorite serifs and I have been wanting to use Operator since it came out; it works amazingly well at small sizes and I was surprised at how readable it is, despite having an off-beat structure.
RSS / Feedly
It’s not perfect, because each RSS reader now interprets content in their own way, but I’ve done what I can to optimize our RSS feed and for Feedly in particular. Still, we encourage you to read posts on the site because not only do they look better here but I worked really hard on it : ).
Someone had mentioned that we needed this, so individual posts will now convert to Twitter cards when you copy our URLs.
I didn’t want to do a big announcement on the redesign because I wanted y’all to experience the home page in its usual layout. Whenever we have news, whether it’s taking a week off or Brand New Conference updates, they will appear on the home page big like the image above and will stay like that for a couple of days, then moving to the left column.
Gone is the sidebar. Individual posts are now one, long, wide-ish center column that shows off the content a lot better. With the polls at the end. I hope you like the polls, btw, that took one full day of styling! And now that the cookie issue has been resolved, you can vote like mad!
One of the recurring pieces of feedback on the site was somehow have the ability to see the “before/after” image once you had scrolled past it. I tried floating it as you scroll but it felt very inelegant and I tried putting it to the side but that was too small. My proposed solution is a floating corner bug that gives you access to the before/after image and a key application:
You can turn it on and off when you want and it’s mostly out of the way of the content — except for the mobile version, where it’s really tight; there is a chance I might take it off the mobile version if many of you find it obtrusive. The toggle button appears after you get into the first paragraph and disappears AFTER the last paragraph hits the top of the browser.
I think that’s it
Those are the major changes, I think, I don’t know, I’ve been working so non-stop on this I can’t tell things apart. Obviously, bugs are to be expected so if you find any, please let me know in the comments or by email.
The old logo — now is a good time to click on the Key Visuals so you can glimpse the old logo — was typeset in Village’s Apex Serif, all in small caps. I constantly received emails asking what font it was so I had a vague sense of achievement about it but truth be told I don’t even remember why I chose that font or why a chunky slab serif was the way to go, but it had been like that since the very beginning. I know I liked the font, so that’s as deep as the concept behind the old logo went.
In a way, I wanted to keep a similar attitude in not obsessing about the right logo — there is really no “right” logo for a blog about logo changes — so I kept my eyes open for options as I was designing the website and focused most of the energy on the site, knowing that I could very well revert to the old logo.
Because I end up on Lineto.com often, usually getting the link to Circular or Brown, I decided to poke through all their fonts, especially the display fonts. Prismaset caught my attention (because I have a thing for concentric letterforms) and the style with five lines was starting to look pretty cool.
I am the first to acknowledge that this is a geometric sans serif — a style I consistently label as unsurprising — but I wanted to see if there was something I could do within that trend that would look good and be somewhat unique for Brand New. I know it’s not unique-unique as there are dozens of concentric stroke logos like this but I knew that at least, technique-wise I could deploy it in a unique-unique way. So…
That’s not a gratuitous underlying grid, there is a point! When I typeset “Brand New” in Prismaset Five I immediately liked it but I hated how fuzzy it got once I used it as a web graphic, even as an SVG because those strokes start to show up as 1.5pt thick and they get fuzzy. So, based on Prismaset Five — I paid for a license, yes — I redrew the characters so that the vertical and horizontal lines would render, always, as 1-pixel-thick lines and look perfectly sharp. So each line is 1 pixel thick with 3 pixels in between. This forced me to change some of the original shapes of Prismaset, primarily the “B” but pretty much all letters are different as the proportions changed. As an SVG file the logo looks even crisper and it’s only the diagonals and circles that have a little bit of unavoidable fuzz. As the site shrinks responsively, the logo stays at the same size, keeping its 1-pixel lines intact. (Except for the mobile version; that had to budge.
I don’t know if it’s a logo that will last another ten years; maybe it will outgrow the trend maybe not, but, for now, I like it and I like how it complements the thin sharp lines of the site and the overall airiness.
For the colors, you might say, “Hey, you lifted those off directly from the Saffron redesign” but I can honestly say I have had this color palette since December, before the Saffron project came out. I’m not saying I did it first but I just want to make sure no one thinks I stole someone else’s color palette. Why pastels? Because Brand New has been so stark and black and red for so many years that I wanted something softer. I needed to color-code each of the editorial categories — Reviewed, Noted, Linked, etc. — and by default I ended up with light colors that could support dark gray type on top.
Finally, I did a monogram for social media and other purposes. There is a version for bigger avatars with the full five lines and there is a small version with only three lines, which you can see at the end of this paragraph, service as the closing monogram of each post. Both monograms have slightly different proportions between them and the main logo, trying to keep each letter to half of a square. In the big version, the letters touch to create a more unified monogram but in the small version there is one line of space between them because otherwise it looks like a smushed fly. So, that’s it! I hope you like the new version!