The Basics of Hub Branding

November 4, 2014 Uberflip Customer Success

It's easy to customize the look and feel of your Hub to be consistent with your company's brand.

When you’re using a Hub to present your resources to your audience, it’s important not to cut any corners. While the default look of your Hub will be amazing by default, a few simple tweaks will make it look a whole lot better and make it consistent with your brand.

So, without further ado, let’s dive in and go over what you’ll need to create a unique and 100% customized Hub!

Custom Domain

When you link people to your Hub, your domain name is one of the first things that they’ll see. By default, your Hub will be a subdomain of Uberflip.com, in the format of username.uberflip.com. So, if your Uberflip username is Targetly, your Hub will be accessed via targetly.uberflip.com.

By using a custom domain, your Hub will instead live at a subdomain of your own website. In other words, your Hub will be accessed in the format of subdomain.yourdomain.com. Using the Targetly example, this would mean that your Hub would be accessed at a url like hub.targetly.com.

Besides all of the SEO benefits of having your Hub live under your own domain, it will also look a lot better to your audience. As much as we’d love for you to use Uberflip in your URL, at the end of the day your Hub should be all about you, so be sure to use your own domain name.

Images

The default appearance of your Hub will look great, but it definitely will not look 100% customized to your brand. Thankfully, all it takes is a couple of images to dramatically transform your Hub into an experience that is truly your own.

Hero and Background

The hero and background images are what first load when someone arrives at your Hub. As much as we hate to admit it, people do judge a book by its cover, and this is especially true for your Hub. If you don’t add images, your hero and background would look something like this:

Hmm...Not bad, but let’s see what adding a logo and a background image makes this look like:

Ah, now that’s much better! Visitors are greeted with a visually appealing experience that is also consistent with the rest of the Targetl brand’s online presence. 

Banner

The banner is what sits at the top of your Hub as visitors navigate through your content. It’s what reminds your visitors of who you are and where they are. Without any customization, it will look something like this:

Now, let’s upload the logo (which we already used for our hero):

Starting to notice a pattern here? Taking an extra minute to upload a logo will go a long way towards branding and customizing your Hub.

Favicon

A favicon is the tiny image that appears beside your website name at the top of your internet browser. It’s a subtle touch, but makes a big difference. Here’s what a custom favicon looks like:

Now, you might be wondering why this even matters since it’s just a subtle addition. Your favicon will have a big impact when someone bookmarks your site on a mobile device. Some people prefer to bookmark websites to their devices’ homescreens, making them feel like apps. When doing so, it’s your favicon that will serve as the "app" icon. So, no favicon = a blank icon, and who’s going to want to click on that?

Colors

Every brand has its own color scheme, and so it’s important for your Hub to follow this as well. If you’re not sure what your brand colors are, take a look at your company’s logo — chances are your brand’s colors can be found here. Also, take a look at your existing color and take note of which colors are most dominant there.

Usually, your web designer and / or developer will be able to give you the exact codes needed to update your Hub colors.

Navigation Color

One of the most prominent colors of your Hub will be the navigation color, so it’s important for this to match your branding. This will vary depending on how you’ve set up your Hub’s menus. By selecting Targetly’s turquoise color, note the impact that this has had on the left navigation menu:

Background and Link Color

If you’ve followed our advice and changed the background image in your Hub, then you won’t notice a different background color. If you skipped this step, then the background color will be what pops out at visitors when they first arrive at your Hub.

Changing this color will also change the links found throughout your Hub. It’s a subtle way to make your content feel like it’s just that much more your own. Take a look at how changing the links to Targetly’s red color affects the Hub’s aesthetic:

When all taken together — the navigation menu, links and banner logo — Targetly’s red and turquoise color scheme all comes together for a unifying experience that is distinctly ‘Targetly.’ 

Light/Dark Theme

With just one click, you can dramatically change the whole look and feel of your Hub. Hubs initially come in the bright and clean white theme, but some brands prefer to be on the dark side instead! If you fit into this category, enable the "Dark Theme" option in the Hubs Lab section of your account. Doing so will make your Hub look like this:

It might not be for everyone, but that’s just it — it’s all about what works best for you!

Messaging

There are many places throughout your Hub to communicate with your audience and it’s important to ensure that this is consistent with your brand’s personality. We provide copy in these places that will do just fine on its own, but adding your own custom flair will be what really makes your Hub shine.

Descriptions

There are many opportunities to describe to visitors what they are seeing. When the Hub first loads, they are greeted with a welcome message. Scrolling down then displays your content and a more detailed description of what your Hub is all about. Each Stream then has its own description of what content it contains. A customized description is the difference between this:

...and this:

While we’re at it, let’s even change the name of this Stream to something a little more descriptive:

Now that’s much more descriptive of what visitors can expect to find in this Stream!

Custom Labels

There are many smaller tweaks you can make to the terminology throughout your Hub to be more consistent with the language that your company uses. Instead of saying “Read Flipbook” maybe you’d like links to say “Read Whitepaper.” Or, instead of “Share this Hub”, you might prefer “Share Targetly’s Hub”. Whatever your choices, you can change nearly any label found throughout your Hub to have the exact wording that matches your brand's personality.

The Next Level: Custom HTML, CSS and JavaScript

While we provide you with a comprehensive set of simple-to-use tools, they only scratch the surface of what’s possible. If you’ve got the technical know-how (or have someone on staff that does), you can use custom HTML, CSS and Javascript to change nearly any component of your Hub! The possibilities here are endless and, if you’re up for it, we encourage you to code away and make your Hub even more unique!

Update June 11, 2015 -- Please note that using Custom Code in your Hub is a feature only available on our Elite (new, April 2015) and Enterprise pack types. If you are on our Expert or Elite packs (also new as of April 2015) you'll have to upgrade your account to access this feature.

Previous Article
All About the Image Manager
All About the Image Manager

A new way to search for, edit and add new images to your Hub.

Next Article
How To Import a Font Into Your Hub
How To Import a Font Into Your Hub

Step-by-step guide to customizing the fonts in your Hub.

Ready to Upgrade and supercharge your Hub with Custom Code?

We Can Help