Web Design Critique #57: Okay Geek
Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is Okay Geek, an awesome gadget and tech blog.
The Ultimate Designer Toolkit: 2 Million+ Assets
Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.
About Okay Geek
Previously known as “T3ch H3lp”, Okay Geek is a re-thought technology blog which strives to bring geeky original content for people who have a passion for tech. We have built Okay Geek from the ground up using Squarespace and our own custom tools. We want Okay Geek to be a fast, well designed and easy to use website and we believe we have done that very well.
Here is a screenshot of the homepage:
Initial Impression
You know, I’ve written almost sixty of these critiques. At first it was pretty easy, I received lots of submissions that were great, but had some solid areas that needed improvement. Lately, submitters haven’t been making it so easy on me. Okay Geek is one of these sites.
It’s pretty easy to critique an ugly site, but this one is gorgeous. Despite being a bit on the template-y side, as far as tech blogs go, this is definitely one of the more attractive ones I’ve seen in a while. I mean, have you seen Gizmodo lately? But I digress…
Bottom line, Okay Geek is a great looking site with content that I genuinely find interesting. After reading this review, be sure to stop by the site to check it out.
In light of not having much in the way of negative comments, let’s take a look at a few things I like about Okay Geek.
Lots of Whitespace
Whitespace is a difficult beast to wield properly. Many designers seem to be afraid of it and cram everything on the page extremely close together. Others fall into the trap of always using a preset gutter width in a CSS framework and never really analyzing whether or not the items really need more room to breathe.
Whitespace is something that you should analyze on a per design basis, there’s no magic formula that will work best for each site. Okay Geek has really opened up the traditional Envato-like blog layout and given each column lots of room. The result is a nice, airy feel that gives each individual piece the emphasis it needs to stand out from the rest of the content.
One small note, that box on the right in the image above is just a tad too high. Bump it down a few pixels to make it line up with the left column.
Adaptive Whitespace
Perhaps even more important is the fact that the whitespace responds really well to different size browser windows. As the window gets smaller or larger, the layout makes minor adjustments that squeeze the layout into a smaller space while keeping everything nice and readable.
Suggestion: Media Queries
One suggestion that you’ll likely see me start to make a lot is the incorporation of media queries to make the site look better at a few preset generic sizes. Okay Geek already has an outstanding mobile site for smartphones, but media queries and custom styles could help tighten the design for those in-between, tablet-sized layouts.
A Slick Header
I’m a sucker for a good looking header. For sites like these, they really serve as the cover that you judge the book by. Here the header is nice and big, container the requisite search and navigation items right where you’d expect them to be and has three large featured article images with nice animated hover effects.
Placing these features articles right in the header is a great way to suck users in right away. I know I can hardly resist a click if I see a story about The Legend of Zelda!
Nice Post Previews
Another thing that I really like is the general design of the post previews. They’re nice and big with plenty of teaser content. I particularly love those huge images, which really draw you in (though I do think the site may be taking a performance hit for them).
I can tell that a lot of thought and effort went into making this site look as great as it does. There are lots of small touches that go a long way, such as the fact that when you hover over a post preview, the slightest drop shadow hover effect appears. A really nice touch!
Suggestion: Text Alignment and Save Button
I have two small concerns about this area. First, the paragraph text on the bottom is too far to the left. It should have the same margins as the other content in the box, but it seems to break out of these and come awkwardly close to the edge.
Also, I love the Instapaper integration right here from the home page. My only problem with it is, there really is no way to tell that the save button is a link to Instapaper. “Save This” is a little vague and not necessarily a term we are familiar with in a blog context. Perhaps a “Save to Instapaper” button would be more appropriate.
A Useful Sidebar
The general two-column layout of Okay Geek is pretty popular, but the right column is typically overrun with clutter and useless garbage that no one wants to look at. However, I found the Okay Geek sidebar to be quite interesting. Going the extra mile to actually create relevant material for this section really helps justify the area to your users rather than simply making it an advertising catch-all. This also helps actually get your advertisers some views!
Seriously Social
Okay Geek spares no effort in trying to get you to share their content with your friends. This venture can easily come off as over-the-top, especially with all of the various social links and buttons scattered throughout the site.
However, each little social area is custom-designed to fit right in with the blog theme so the result it far from cluttered. Blogs live and die by social media so solid integrations is a must!
Your Turn!
Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.