Monthly Archives: February 2017

Difference between Design and User Experience

The design world is abuzz with the rise of online magazines. But the vast majority of these sites run on blogging platforms like WordPress, and they operate almost exactly like traditional weblogs.

So where does someone draw the line between a traditional blog and an online magazine? And if you’re thinking of launching a new blog/magazine how do you differentiate yourself?

Let’s delve into this subject from a designer’s perspective. The growth of online magazines means that more publications are going digital with plenty of opportunity for newcomers to get into the action.

Modern Online Publishing

Digital publications have such a wide audience that it almost makes more sense to go digital over print. Most people have digital e-readers and in this past year mobile use surpassed desktop for the first time ever.

But what makes an online publication seem more “authoritative” like a magazine? What differentiates between general blogs and online magazines like Time, Inc, and Forbes?

It seems like many factors are involved but this concept of “authority” is definitely a big one, both in design and content.

For example the TechCrunch wiki entry doesn’t describe the site as a blog at all. Yet if you go back far enough you’ll see it was called a blog when it first started.

The same can be said for Mashable which is now a huge online media publisher.

So what differentiates online publishing from “blogging”? The act of writing content and publishing online is widely considered blogging, but a “blog” carries the connotation of being:

  • Generally personal in nature(maybe 1 writer)
  • Small in audience and not much traffic
  • Not made specifically to earn money

I consider these ideas to be generally true, yet all 3 of these rules can be broken.

A blog could certainly hire writers, and blogs can have massive audiences and make good money. The creator of the Modest Man blog grew his audience and advertising base to reach $10k/mo and it still feels like a blog.

Not to mention Pinch of Yum calls itself a food blog, yet based on their income reports the blog is really a fulltime business.

This proves there shouldn’t be an inherent negative connotation with blogging. Online magazines just have larger publishing schedules and generally run more authoritative brands

This is the real crux of the discussion. I’d argue the real difference is in branding, style, and presentation. This can all be explained better using examples so let’s take a look at this blog/magazine divide to see where the line is.

Magazine-Style Theming

If you want to be considered an online magazine then you’ll want a magazine theme.

This is a crucial aspect of running a site because looks do matter. Visitors judge your website in the blink of an eye, usually between 2-4 seconds. Your design should immediately let visitors know that you’re an authority on whatever subject you cover.

If you already have some authority then you can get by with simple designs like Craigslist.

But with millions of blogs already online you’re competing against an army of sites, many using very poor designs. If yours blends into the crowd then you stand no chance of ever breaking outside the label of a “generic blog”.

Take a look at Fast Company’s homepage and look at the diverse content styles. Many different thumbnails, headers, and column structures all work together creating a unique magazine look.

Following this pattern on your homepage is a good first step to appear more like a magazine. Even if you only update once or twice a month it’s better to look authoritative right away.

If you’re looking for examples to whet your inspiration these posts should get you started:

Authoritative Branding

To move beyond a simple blog you need to offer more than what most blogs offer. You need to create a brand around your website and publish more than just articles.

Look at the incredible rise of Smashing Magazine. Many would still call them “just a blog”.

But if you dig deeper you’ll notice it’s really a massive media company. They publish their own books and host their own conference.Smashing Magazine isn’t just a digital blog anymore. It’s a complete authoritative brand in the web design/dev space.

You certainly don’t need to push your blog this hard by launching a conference every year under your brand. There are much smaller projects you can tackle to build your site’s credibility.

These are 4 easy ones that seem to work well:

  • Offer print/digital magazine subscriptions
  • Start a dope podcast
  • Create a related newsletter(or a few!)
  • Setup your own ecommerce/dropshipping shop

The first point on that list may seem crazy. But it actually works well for the site Texas Monthly.Notice that site is basically a blog, yet it gives the impression of being a newspaper/magazine. Looks matter!They have an entire magazine archive where you can browse and subscribe to all their issues. This is one strategy that requires a lot of effort, but it also incentivizes readers to sign up to your site and ideally pay for the value.

This lets you create a true magazine presence while also monetizing your content. The toughest part is actually getting people to subscribe. But that’s just part of online publishing!

If you want to push beyond blogging try to find ways to expand outside your writing.

Content & Authorship

There’s usually a clear divide between the content you find on a blog and what you find on magazine sites.

Think about the type of content you’re publishing. Is it all personal opinions, quick posts, random thoughts or colloquial reviews? That’s usually the type of content you find on a blog. And that’s totally fine!

For example Malan Darras runs a personal blog covering his work in marketing, music, and just general life. It’s an awesome blog and it never needs to be anything more than that.

Understand your content goals and clarify these early on. A large magazine-style content site is not for everyone. It usually requires some level of journalistic integrity and a clear goal with content.

Magazines lean towards journalistic content because this is where they originally come from. Industry news in trade magazines, op-ed pieces, interviews, how-tos and a mix of related content all come together to form an entertaining magazine.But remember that longform content isn’t always the right goal either. Sometimes you just need to follow whatever you want to publish, even if it seems ridiculous.

Few people look to BuzzFeed for authoritative news but the site still earns well and it uses virality to its advantage.

One other point to mention is authorship. Since blogs are typically a solo effort you won’t always find multiple authors or custom author bios. However magazines typically hire writers or bring on guest writers, so adding bios to your posts can give this impression.An author bio doesn’t guarantee much authority. But it definitely helps!

If you can appear to be a larger site to most visitors then you’ll leave a lasting impression that goes beyond simple blogging.

Run It Like A Business

Tons of people launch blogs just for fun and maybe a little extra cash on the side.

But nobody launches a magazine for fun. Publishing is a business, and if you plan to launch one you have to treat it as such.

This isn’t something the user will see on your homepage directly. It’s subtle.

It’s the way you brand your site, your content guidelines, your newsletter layouts.

Online magazines operate like for-profit businesses with KPIs and clear goals. If you can run your blog like a business then it might scale large enough to actually become one.

Let The Labels Go

Remember that the goal of both blogs & magazines is to publish great content and share it with the world. The labels “blog” and “magazine” are still new to websites, and online magazines were basically non existent 10 years ago.

But there is most certainly a difference between blogs & online magazines. The line just isn’t very clear and it’s something we’ll discover more as time goes on.

I do hope this article clarifies some key points that can help anyone turn a blog from a simple WordPress site into an authoritative and trustworthy magazine brand. And if you have any other ideas or suggestions drop a line in the comments area below.

How to Implement Good Consistency in Web Design

There’s tremendous value in consistency of digital interfaces. People browsing the web encounter dozens of websites that all have different styles, yet most feature very similar page elements.

Most designers don’t even think about these features. Page headers, navigation menus, body copy, CTA buttons, the list seems endless.

By designing with consistency you’ll learn how to create interfaces that encourage typical user behaviors. Your layouts will build trust and teach users repeatable patterns that help them work through your site much quicker.

Design For User Expectations

Most users expect websites to work a certain way. It should scroll vertically, links should be clickable, and the navigation should be visible right from the first page load.

How you design these expectations is completely up to you. But when you’re designing for consistency you want to keep a clear uniform design across the entire layout.

For visual consistency on the web I think BodyBuilding.com is a pristine example.

This site has many portals linking to their forums, their eCommerce shop, and their online help guides. All of these pages have the same design and the same navigation to keep them consistent with the entire site.

Users don’t want to think. They just want to act and get results. Consistent design helps this happen.

Do the thinking for your user to understand what they need. How would you design a blog page to encourage reading? What about an ecommerce shop to encourage checkouts?

Think about these questions yourself and apply them to your web projects. Which elements should be consistent on every page? This line of thinking always leads to solutions.

The homepage of Sketch is very consistent with certain user behaviors and expectations. The page has two CTAs: one for downloading a demo and one for buying the program.

But not everyone who visits the site wants either of those options. The top nav becomes the obvious next step.

Someone new to the site might care about features or how Sketch works. But an existing user might want to look into extensions or get support.

Add consistent elements with clear in goals. If you know what users expect to do on your site then you can design for those expectations.

One more point to consider is with redesigning a layout. The popular social news site Reddit has been online for well over 10 years. Over that time they have made a few changes, but generally the site looks very similar today as it did back in 2005.

If you’re making minor changes to improve performance and optimize the user experience that’s always welcome. But drastic abrupt changes to a design usually throw people off.

Consistency goes beyond keeping pages similar and usable. It can also mean staying consistent with redesigns if your site already works well.

Intuitive Navigation

Users should understand a lot about your site just from the header. This area should explain what the site does and what it’s about, not to mention the top navigation links.

A well-designed navigation isn’t enough. You’ll also want great copy to sell the pages and let visitors know exactly what’s on your site.

Nav text can be restyled in my ways including font size, writing style, and interface elements like hamburger menus for responsive navigations. The key is to stay consistent and keep these links easy to use.

The nav links on P’unk Avenue are quite unique and rather detailed. But they work well for this site because they help explain what’s on each page.

Their nav links feature descriptions on larger screens, but rely on the hamburger sliding menu with simple links for smaller screens. An excellent design style for anyone creating custom layouts with detailed aesthetics.

For larger nav menus you might have to add sub-menus or links in a larger list. The Guardian has a fine example of this on their website.

When you browse through any of the top categories you’ll get a sub-menu directly underneath. This can work like a breadcrumbs bar or sub-categories based on the primary link.

The consistent style and multi-link menus are great for big sites and blogs. As users get familiar with those links they’ll have an easier time browsing through content.

Repeat Layout Styles

This technique breeds consistency and it can work on multi-page sites or singular landing pages.

The goal is to re-use similar elements all throughout the page, but with different content & graphics.

By repeating certain styles you’re creating a theme on the site and building comfort with users. Consistency breeds familiarity and this is what you should be going for.

Notice the repeated patterns on the Webflow homepage that alternate between colors and different design styles.

Each section features a screenshot of the app listed alongside main site content. This style is beautiful and it’s one of the cleaner ways to craft a consistent design.

Note this style is predominantly found on the Webflow homepage but it could be repeated elsewhere. That’s why consistent elements are easier to use across the whole site.

But aside from page elements you can also repeat styles in your design. Take a look at Algolia for one example.

This site uses heavy diagonal lines between page sections along with darker background colors. Headers all have a small underline and the text all follows a similar size & thickness.

If you dig deeper into the site you’ll notice the box shadow effect is replicated throughout. This is a small touch but it’s one of the easiest ways to build visual consistency.

Try not to get too lost in repetitive page elements.

Instead think about how you can make the interface easier to use and what that might entail. Most of the time you clone what you’ve already done and keep using those patterns.

Keep Branding Consistent

Web branding is a deep topic and it’s more than a simple identity.

You also need to consider page colors, textures, typefaces, padding, and icons/elements related to the brand. There are no right or wrong ways to brand, just some ways that work better for some websites.

MailChimp does this by repeating their branded monkey friend everywhere. The site has a fixed top navigation which includes this logo on every page.

But you’ll also notice similar typeface designs and colors with similar text styles. This may seem like an obvious thing to do, but some designers underestimate how much this can impact branding.

An even better example is the Docker homepage with their cargo whale logo.

This creature finds its way into almost every part of the site. The header, the footer, and most content pages also feature illustrations of our Docker ocean friend.

You don’t need to create a mascot just to build consistency. It’s merely one more tool you have in your arsenal for digital branding.

If you study some of your favorite sites you may recognize subtleties you never noticed before. This is the best way to get ideas for creating consistent branding in your own projects.

Wrapping Up

As you browse the web you’ll notice consistency across nearly every site. But since each project is different you need to think about the user’s needs before designing anything.

The one thing you can guarantee is that every single user wants a consistent experience. And I hope these tips can get you thinking more about consistency in your everyday web design work.

Suggestions for Developers and Designers web design

If you’re a web designer or developer, it’s always smart to keep up with the latest website building trends. That doesn’t mean that you have to be caught up in the “innovation” rat race.  Even though innovative work, ideas, and technologies are what many clients are asking for.

There’s no need to chase after the newest and shiniest innovative technics. They can be a never-ending waste of your time and money. A simpler solution is to take advantage of innovative concepts and designs offered by others. You will find 10 examples of that described below.

All the Innovation You’ll Need is But a Single Click Away

Be Theme is the largest WordPress theme ever, and a Top Five ThemeForest best seller. Be’s 260+ pre-built websites make it easy for you to do quality work, and do it fast.

So, where does the innovative part come in? It’s build right into each of these professionally-designed pre-built websites. They come with a 1-click installer, so these innovative designs are yours at a touch of a button. This cool 40 second video shows you how easy it all is.

It’s a win-win situation for every type of client you’re likely to encounter.

Your eLearning clients will be delighted with your ability to produce such an innovative and easy to work with website for their eLearning platform, in such a short period of time. It’s responsive as well, which should make your client’s students happy and always eager to come back for more.

Here’s a theme that provides an excellent solution for a client who sells a handcrafted product. Be Craftbeer’s large image and neat JavaScript effects focus on the product, while the overall design structure and attention-getting buy buttons make this an ideal choice for many different small businesses.

Interior design or architecture clients often have trouble finding website designers/developers who truly understand their businesses. That won’t be the case if you use this pre-built website to show them a prototype of what you can do for them.

Creatives can be fussy. Designing a website for any craftsman or artist can have its own set of challenges; especially when it relates to producing an innovative design for a website. Be Artist’s customizability, use of parallax scrolling and JS portfolio filtering combine to present creative’s work in a unique, pleasing way.In today’s food-oriented culture, your catering industry clients are going to look to YOU to set them apart from the competition. That’s hardly a problem when you have Be Burger to work with. The large mouth-watering images, easy-to-order forms, and the overall structure of this pre-built website combine to make conversions happen.The clean, crisp images, eye-catching animations, and cool parallax effects that are interwoven in the various pages makes Be Sports Club the ideal vehicle for you to produce a website that health and fitness club clients will gladly stand in line for.

Be Hotel2 is designed to impress your clients in the travel and lodging industry. These are clients who expect a great deal, and this is THE pre-built website that allows you to make that happen. Perfectly structured, and with the focus on images, you can easily command a premium fee with this pre-built website.Be Restaurant gives you the capability of building a 5-star website for a 3 Michelin star restaurant or for the cozy bistro down the street. Producing an unusual website like this one with its special slider effect will make any client in this competitive industry a satisfied client indeed.

Tech startup owners thrive on innovation, and they will expect nothing less from you. With Be VPN at your fingertips, you won’t have to go on a lengthy search for cool, new ideas. This is the go-to website for this often somewhat fussy and demanding clientele. It’s clean, structured, corporate, and friendly.Be Car is the go-to elegantly designed pre-built website when your client is in the business of selling luxury cars with their clean lines and elegant interiors. The clever use of white space and stunning hero image will make you the toast of the town among this ofttimes pretentious clientele.

Ultimate Benefits of Jumping Off the So-Called “Innovation” Track

So, you’ve made a leap of faith, and jumped off the innovation track.

Now what?

For one thing, you can spend more time and effort focusing on your client’s real needs.

  • No more time spent scrolling through hundreds of themes. With Be Theme, you can deliver top-quality, innovative websites. This will lead to thrilled clients, repeat clients, and greater financial security.
  • You’ll leave the competition in the dust by delivering a custom website in less than 4 hours for your client. And you will do that no matter what industry or niche your client is in.
  • As the word of your expertise gets around, clients will seek you out. No more having to work with difficult clients to pay your bills.
  • You’ll find yourself creating amazing websites for two of the best types of clients – repeat clients, and referred clients.

And there you have it. 10 diverse client types with 10 innovative websites would seem to be a difficult challenge without Be. If you let Be Theme provide the innovative concepts to get you started, it could hardly be easier.

Be’s 260+ pre-built websites cover most of the niches you’re apt to be working with.  You can still look forward to new and different ones showing up each month.

Best and Finest Practices UX Website Design

User experience is an integral part of any website design and there is no doubt about that. However if there’s a single industry where user experience matters more than anything else is, of course, hospitality.

Hospitality is all about meeting and exceeding guest expectations and providing stellar guest experience from the very first touch point till the last.

And in the digital era that we live in, hotel website is quite often where the guest experience with a hotel starts. At least that’s what every hotel brand strives for: direct bookings. So as a hotel owner you want to make sure the user experience of your website is as good as the guest experience in the hotel itself.

To do so you need to understand why travelers visit your website in the first place. What are the main traveler intentions? Once you know the answer to this question, you will be able to meet traveler expectations with a matching, user-friendly website.

Understanding Traveler User Behavior

As a designer you will need a little bit more insights into hospitality industry and traveler behavior analysis to come up with a well-thought user experience flow that actually converts.

According to a study conducted by Google, on average 60% of travelers are turning to search engines first vs. hotel website for online trip planning.

This means that when users visit your hotel website they most probably have already done some sort of research and want to;

  1. Compare prices on your website versus online travel agencies, like Booking.com and Expedia.com.
  2. Get more information about the hotel, like extra services, more photos, videos.
  3. Check to see if there are any special deals or package offers for selected dates.
  4. Contact the hotel directly to arrange for custom requests or direct bookings.

Generally, these are the main guest intentions when visiting a hotel website.

Now let’s see how exactly we can design the user experience to cater to those needs.

1. Optimize Booking Flow for Conversions

This should be your mantra. Nothing else matters, not your aesthetics or taste, not even user’s taste. You might think this is not how user experience should work, but as long as the website converts well, you are doing the right thing. And that said there is no success formula for a hotel website.

However, there are some best practices you should consider.

FIrstly, the booking window should always be in a visible spot and be clear with less design and more usability.

Secondly, users need to be able to compare room types, rate types easily to make decisions quickly. We need to help them decide by clearly articulating rate differences and providing a good amount of visuals for room types.

Last but not least, ask as little information as possible upon check out. Make sure to provide a clear summary of the booking and optimize the checkout form according to numerous research and best practices.

2. Think Mobile First

There is no need to explain the importance of having a mobile ready website. But we should stress the benefits of thinking mobile first, which means designing for mobile screens first and then taking it all the way to the biggest screens possible.

This is especially important for travel industry where users make purchase/booking decisions on the go and there is a sense of urgency, which means you need to design for maximum usability rather than maximum functionality. Although it is best to provide the same functionality to mobile users as to the web users, but if you can’t, you might want to provide a link to view the full website.

3. Visual is Key

When it comes to hotel bookings, users crave high quality photos of every single corner of your hotel, including hotel grounds, indoor, exterior, all of the facilities and especially room photos. One of the reasons users check multiple websites before booking is to find the most accurate information about the hotel, better quality photos, videos to make a more informed decision.

As a part of flawless hotel user experience, it is important to create a visually compelling website. Keep in mind though that visually heavy website tend to load slowly which is a huge issue for mobile users.  According to Kissmetrics, “40% of people will abandon a site if it takes longer than three seconds to load.”

So be sure to implement all of the techniques for faster loading.

4. Provide better Customer Experience

User experience and customer experience in a traditional sense are closely related and can’t exist without one another. Your website UX can thus make or break your hotel’s overall guest experience. So it’s best to start providing exceptional level of customer service from the very first touchpoint which is quite often your website. This is one of the biggest advantages of a hotel brand website as opposed to aggregators like Booking.com, Expedia, etc. These online travel agencies can never provide the personalized guest service on their website the way a hotel can.

First, make sure there are multiple ways to get in touch with your hotel on your website; landline phone number, skype, contact form for reservation related inquires and special requests, as well as a live chat.

Secondly, offer special add-on services, which are not available on any other sales channel. It can be as simple as a welcome drink, but you can also go all the way and offer all your paid services to be booked online, perhaps with a small discount.

These will make the user feel the difference when booking with a hotel directly.

5. Top It With Credibility and Social Proof

One of the most important factors affecting customer buying decisions is social proof, which comes in so many different forms: testimonials, reviews, video blogs, social following, etc. Hotel guests are no exception. In fact, according to Tripadvisor, “77% of travelers always reference reviews before booking travel accommodation”. But the tricky part here is the source of the reviews.

While this might not be the most aesthetically pleasing addition to your website design, but adding a tripadvisor reviews widget to your homepage or designated landing page is much more convincing than your own website reviews.

Final Thoughts

Building a strong hotel website is a challenge both in terms of marketing and in terms of UX design. It usually takes more than one iteration to end up with a functional, conversion-optimized and user-friendly website, so make sure to make data-backed decisions and always test with real users.