Inspiration

Sites We Love: 99u

Website inspiration for longform articles and bright, clean design.

Great design is often the product of inspiration. When we see something that both looks and works beautifully it inspires us to want to do the same. Mind you, it’s not about simply copying someone else’s hard work. Rather, it’s a matter of looking at what makes something work and adding your own creative voice to it. Take a specific idea, and then make it your own.

If you look around the web for any length of time, you’ll undoubtedly find inspiration. Today, for example, we’ll take a look at 99u. Run by Adobe (and using WordPress), it’s a web magazine geared towards creative professionals.

We’ll dig in and discover what makes 99u a fantastic site from a design and functionality perspective (the two are often intertwined). Then, we’ll look at some WordPress themes, plugins and design elements that you can use to create your own inspired masterpiece.

Why we love it

99u-breakdown-01

99u features a grid layout that is both visually appealing and easy to follow. While the look of articles on the home page can be considered eclectic, they do share consistent headline fonts. Combined, this design choice allows us to more easily pick out individual articles.

Speaking of that eclectic look, one of the most interesting aspects of this design is that each category of the site is represented in its own specific way on the home page. Some feature bold photographs or illustrations while others are simply text on a white or light gray background. This approach helps to distinguish different types of content.

99u-breakdown-02

And, as you scroll down the page, you’ll notice that a blue navigation bar appears at the top of the window. Simplifying navigation is always a welcome feature on a content-heavy site. At this point, a search field is also added into the navigation.

Another nice feature of the home page is the inclusion of a few calls-to-action amongst the standard content. There are calls to subscribe to a newsletter and a quarterly magazine.

Post index pages all follow a more straightforward grid layout. Each post in the listing sports a featured image along with a topic (category) link, article title, excerpt, social sharing and author info in a gray background below.

99u-breakdown-03

Inside each article, again there is more of a standardized look. A large featured image introduces the content with a single column of large, easy-to-read text below.

99u-breakdown-04

The overall impression of the site is that, while not earth-shattering in terms of innovation, 99u did a fantastic job of making a content-heavy site feel lightweight and open. Browsing content is simple and straightforward. It takes the complicated task of laying out various types of articles and gives it all a very natural flow. In all, the content speaks for itself. That’s really what any magazine site should strive for.

Project Assets

Now, let’s look at some project assets that you can use to bring a similar style to your own website. Keep in mind that these items won’t give you a 100% match. But, each selection contains elements of what makes 99u such a well-crafted website.

Themes

Cook Traveler

99u-breakdown-05

While Cook Traveler doesn’t feature the same exact sort of grid layout we saw above with 99u, it does reflect a similar design philosophy. Using the “Grid Boxed” layout option, posts are very easy to browse on the home page. Each post in the list contains a featured image, category title, publish date, social sharing and an excerpt. There is even a sticky navigation bar at the top. Individual post pages are also similar, as they utilize a large featured image and a single column of text.

Rinjani

99u-breakdown-06

Rinjani is a WordPress theme that, similar to 99u, displays different types of posts in different ways. This is accomplished by taking advantage of WordPress Post Formats. For example, video, quote and image post formats display in a manner which best fits their specific style of content. The advantage of this is that we can more easily discern one type of content from another. And, tweaking the theme’s styles for these various formats could result in an even more eclectic mix.

Elliot

99u-breakdown-07

Elliot is a theme that uses one of our favorite elements of 99u – the ability for a specific post to display across multiple columns of the grid. This allows for a post to stand out amongst the crowd and also break up the monotony of the layout. A sticky navigation bar is also included. There are also several home and post layouts available, including the “Grid” shown above.

Plugins

FlatFolio

99u-breakdown-08

If you’re happy with the theme you have but would like to incorporate a grid layout of blog posts, FlatFolio will provide you with many options. The Mosaic grid, like the one shown above, will give you that unique look while still fitting together seamlessly. You can also opt for more standard post grids as well.

Lemon Grid

99u-breakdown-09

If you’re using Visual Composer and would like to create a similar grid layout, then Lemon Grid is an excellent choice. It takes advantage of Visual Composer’s drag-and-drop interface to create a beautiful post grid.

UberMenu – Sticky Menu Extension

99u-breakdown-10

The Sticky Menu Extension for the wildly popular UberMenu plugin helps you create a stunning and useful navigation bar. Combine these two plugins to create virtually any type of navigation setup you can dream of.

Awesome Header

99u-breakdown-11

You can use Awesome Header to easily create a sticky navigation menu for your WordPress website. Or, replace your site’s entire header if you like.

Design Elements

One of the fun elements of 99u is their use of bright and colorful animations. Below are a few selections from Envato Elements that will give your website that extra flair. With a subscription to Envato Elements, you’ll get unlimited downloads and access to thousands of resources for a single monthly fee.

Pop GUI

99u-breakdown-12

Electro Boho Seamless Vector Patterns

99u-breakdown-13

Set of Business Vector Illustrations

99u-breakdown-14

Make It Your Own

Today, we examined a rather unique website in 99u. Through research, we found ways that we can incorporate some similarly inspired features into our own projects.

Inspiration can strike at any moment. Sometimes, it’s just a matter of having the right resources in hand to take your ideas and make them into a reality.


About the Author Eric Karkovack

Eric Karkovack is a web designer with well over a decade of experience. You can visit his business site here. In July 2013, Eric released his first eBook: Your Guide to Becoming a Freelance Web Designer. You can follow his rants on Twitter @karks88.