write great content Archives

Websites of 2014: 12 Great Designs and How They Work With Content

by Adam Oakley | Mar 7, 2014 | Website Content

Image credit: Life of Pi movie website

We’ve taken a look at how poor web content writing can destroy a well-made website but we didn’t explore the other side of it: the look and feel. Making sure that your content is fantastic is one thing, but creating a design to match can really elevate everything that’s being done to a whole new level.

Without visual flair visitors will be hesitant to eat your fantastic meal that you’ve prepared for them because it looks like brown and gray sludge. It doesn’t matter how delicious it is. When you put it all together in a visually appealing way, and still keep the deliciousness, then no one hesitates to eat it and everyone tells their friends.

Here are some of the top 12 sites to beat in no particular order.

#12: Life of Pi

This movie came out in 2012. We’ll admit that. But the site was ahead of its time. It is doing a lot of tricks that some designers are just now picking up. As you scroll down you get a little adventure the whole time, much of it in video. At some points, (again, you only have to scroll down to experience all of this seamlessly put together), you’ll see facts about the movie come onto the screen, allowing the content and design to come together in complete harmony. Essentially, you can look at the entire experience as an enhanced preview. In a time when most movie websites look barely better than what people were putting up themselves on GeoCities in the mid 90s it’s refreshing to see this kind of attention paid to marrying content and design.

#11: Lexus

We’ll tell you right now that one of the phrases that will be used a lot in this article is “parallax scrolling.” Parallax scrolling isn’t a new concept. Well, it seems to only be a new concept for website design. It’s been used in cartoons since you were a kid. See how confident we were in saying that? It doesn’t matter how old you are, it’s been used. It has even been used in video games for decades (Super Mario World had it). But now it’s come to website design fairly frequently.

Lexus makes amazing use of it and allows users to essentially navigate an entire world of landing pages without loading anything or moving to another page at all. Even within the parallax scrolling body are smaller sections of the site that are independently interactive. For a good example of this, head to the site and go to the “Journey” section. While plenty of sites are using parallax scrolling by itself, Lexus is one of the few that is using it in tandem with already-established practices for even greater effect.

#10: Blocklevel

Most of our English-speaking readers won’t know this (unless they use Google Translate) but Blocklevel is a company that designs websites, Facebook games, and all kinds of other web-oriented things. But the specific content isn’t why we’re here, although you can tell that the content is hard-hitting and concise (it is).

The design of the site draws inspiration from the flat design trend that’s been overtaking everything from Apple’s new iOS to indie video games (Thomas Was Alone) to smartphone applications (Taasky). It’s the exact opposite of parallax scrolling. There is no illusion of depth, just bold simplicity. It’s easy on the eyes, easy to navigate, and allows your content to be the star of the show by pulling your eye right toward it. They both do wonders for enhancing content but Blocklevel is one of the examples of flat design gone right.

#9: Theory Design

Sidebars used to be all the rage but they didn’t always work on every browser with every setting. Sometimes necessary content got cut off to the side like a bad photographer cutting off your heads in a holiday family photo. All that’s left is ugly Christmas sweaters.

Nowadays it’s all about the header that scrolls down with you. This may not seem different at first but you lose the risk of having content roll off the side. It’s easier to position all of your content smack dab in the middle of the screen and there’s no problems with cutoff. In fact, that middle position brings your eyes, again, straight to the content rather than having two sections of text that, depending on the positioning, bring your eyes back and forth or even pull your eye to the blank space between the two pillars of text.

#8: Realtii

Have you noticed any similarities about any of these sites yet? That’s right; they’re all long scrolling websites. Most of their content is on one continuous page. Even if each of the sections are connected to a different web address, they are blended together so they are effectively one page. Most of the buttons, if the site even has them, cause the site to scroll down quickly rather than open a page. This reduces any load time and reduces wait time because your visitors aren’t clicking on things for design, they’re clicking on things for content. Easy design just grabs their attention and keeps them around.

#7: Paper Tiger

I’m going to ask you to please bring out your cell phones for this next one because “responsive design” is the name of the game for this site. When you go to the site on your PC it looks gorgeous. Some parallax design elements, some wonderful typography, easy-to-digest content. But when you open it up on your smartphone is when it gets really interesting. Without even having to direct you to m.papertiger.com you see a perfectly formatted site.

The parallax scrolling and header have been eschewed for a fully functional, flat design that just brings you content with no frills and minimal loading time. The buttons are massive and bold, making them perfect for even the clumsiest of thumbs and easy to see when you’re walking around or bumping up and down on the bus.

#6: Goldee

The first thing you see on the Goldee site is a button that plays a video. When you watch it you immediately answer the questions:

What is Goldee?
Who runs Goldee?
What’s Goldee’s mission?
How does Goldee work?
What can Goldee do for me?
How can I get Goldee?

After that, if you still have questions, you can scroll down through simple content and a sight design that illustrates what Goldee is setting out to do for you.

#5: Tool

When you open up Tool’s website you are greeted by a background video and your eye is directed right toward “View Reel.” This is going to sound counterintuitive, but bear with us for a second. The video that it leads you to doesn’t tell you much if you don’t know what the business is. If you know what Tool is, then it’s impressive. If you don’t, then you immediately are curious about checking out those header buttons.

Speaking of the header, it’s not intrusive at all. It doesn’t take up a quarter of the screen or distract the eye, but you know it’s there when you need it.

#4: NASA Prospect

This is not a site for any particular product or service but more of an art project that was done by several students for the Humans in Space Project along with NASA. It illustrates a lot of the aspects of parallax scrolling and various situation-specific changes to the site as you progress.

One thing it has that hasn’t been touched on so far in this article is story telling to build emotional connections. And writing Although this isn’t for a brand, it illustrates the point beautifully. If you’re thinking of making your site interesting it can help to bring a story into it.

The first time you load this site up you are curious about why there is an astronaut floating alone in space (without David Bowie singing “Ground control to Major Tom…”). As you scroll down further and further you get more of a narrative and new things to discover.

“Why shouldn’t I just have a paragraph on our ‘About Us’ section?” some of you may ask.

The reason that you shouldn’t do that is due to pacing. Some of the above sites pace their content so that it’s read and absorbed at a certain speed (though most of it isn’t story-related content). Stories absolutely thrive on pacing and this is one of the first times that stories have been able to be presented in this way. With a good story, the content and design can enhance each other and get the visitor more invested in what you have to say and more curious to see what you have up your sleeve.

#3: Dangers of Fracking

Fracking is an incredibly divisive issue… and we’re not going to talk about it here. Leave your politics at the door when you’re visiting the site because we’re talking about how design enhances content.

Everyone has seen those crisp, cartoony infographics that have been popping up everywhere for the past few years. This is a larger version of that concept. As you scroll downward (with parallax scrolling, no less) you are treated to a story, pop-up facts (or “facts” depending on your political stance), and a seamless website from top to bottom.

In years prior this site would have been made into a video, slow-loading flash site, or, worse yet, separated into multiple pages (yuck!). Now it’s just simple, clean, and bright with small amounts of text that convey content clearly and easily. It even adds most of the bullet points to the header as you scroll downward, creating a mobile header as you go.

#2: Pack

This is a little site about dogs and the people that love them (if the huge words on the homepage weren’t enough for you). Aside from the long scrolling, the header, and the small sections of content that is easy to digest, it remembers one other thing that makes you love the content that much more.

That thing is that no one wants to read Comic Sans, Curlz, or Papyrus. It’s been shown that you can discredit yourself with fonts so this may be one particularly important piece of web design, even beyond all the technical prowess and HTML5 magic.

With the Pack website you can see, very simply, the emotion of the website just by the font. It’s playful and kind of raucous and full of energy (like a dog). Even the name of the company, Pack, has something about it that is a little laid back. It’s sans serif, making it a little less formal, but it doesn’t have that serious look of Ariel or Helvetica. It’s more laid back because of the rounded edges on the corners of the letters. It’s like the weekend version of Gill Sans. Just, y’know, like whatever… I’m gonna go play with my dog.

#1: 24 Hours of Happy by Pharrell Williams

This is at least 360 music videos in one. This is one of the best marriages of design and content because the design is the content. It’s a continuous 24-hour music video of Pharrell Williams’ song happy. You can watch Pharrell sing the song or watch various people dance to the music. Simple design, good typeography, content at the forefront, and no need for tutorials to navigate the site. Just a laid back song on a laid back site that might make you want to pick up the new Pharrell album.

Great content and product may bring people to your site but a great, streamlined, and intuitive design will keep them there and keep them coming back. It’s absolutely vital to join the two so that you can attract the attention of your established base as well as maybe winning some converts in the process because, if all things are equal between you and your competitor’s products, your design may be able to tip the scales in your favor.

Copywriting & Playwriting: Secrets of Great Writing from the Big Screen

by Adam Oakley | Feb 17, 2014 | Copywriting

Were you ever in a play? Most of us have tried our hand at acting at some point in our life. For the majority of us, it was in elementary school. Some of us volunteered or auditioned for roles in middle and high school productions. The brave and bold out there, they went to college and took acting classes. Whether we found it fun or nerve wracking, most of us have been in a play at least once.
According to SoYouWanna.com, every stage play has a beat. Actors learn about the beat early on in their careers, and they work with beats on every production they undertake. SoYouWanna.com says a beat is “that moment in a scene when something big happens, when stakes are raised, when characters confront their foes and win. Or lose… It’s a given that a play won’t crackle and keep audiences on their toes unless it has commanding beats.”

Copywriting Secrets: What Play Beats Can Teach Copywriters

Play beats are written by none other than writers who specialize in playwriting and scripts. Every theatrical production is composed of beats, whether it’s a Broadway play or a big Hollywood production. SoYouWanna.com goes on to reveal that a good beat is made up of five specific keys:

Action
Obstacle
Event
Stakes
Strategies

If you dabble in copywriting (or even creative writing), I’m willing to bet your brain is buzzing right now. Don’t these five keys sound just a little familiar? Obviously, they aren’t identical to the primary keys we follow when writing copy. Nonetheless, I’m willing to bet you’re drawing comparisons to the five keys of copywriting:

Grab attention
Overcome objections
Present the benefits
Tell them what they stand to lose (or gain)
Issue a call to action

As you can see, we have the potential to learn a lot from the “tricks” of playwriting and big screen script writing. But before we dive into the parallels and review a few vital secrets, let’s first talk about the biggest swaying point of films, plays, television and writing: the audience.

The TV Audience versus Your Audience

In regards to television, Steve Jobs said, “I think it’s brought the world a lot closer together, and will continue to do that. There are downsides to everything; there are unintended consequences to everything. The most corrosive piece of technology that I’ve ever seen is called television – but then again, television, at its best, is magnificent.”
What makes a television program undeniably magnificent? Not everyone is a fan of Hallmark movie productions. You know what I’m talking about. Those Hallmark feature films, the ones that air on a special night on your local television station, usually right around a holiday. In fact, I know some guys who won’t hesitate to labels these feature films as “sappy chick flicks,” and they do everything in their power to get out of watching them with the girlfriend or wife.
But when they fail to escape a Hallmark movie night, do you know what inevitably seems to happen? They’re usually caught quickly wiping away a tear at some point, pretending it never happened. Why? The program touched them. It reached them. They connected to it, and they felt something. They felt something so strong that it evoked a physical reaction.
Successful television productions, the ones that stand out as award winning material, all have one rudimentary thing in common: they reach out and touch the audience. Successful copywriting projects, the ones that scream awesome and go viral, also have one rudimentary thing in common: they reach out, touch the audience and move them to action.
The primary focus of both industries is the audience. Let’s face it, without the undivided attention and backing of the audience, every production would inevitably be a lost cause. Content is useless if no one wants to read it, just like a play, movie or television program isn’t worth production costs if no one wants to see it.

The Secrets of Great Writing

Steven Spielberg, unarguably one of the greatest movie directors of our time, once said, “It all starts with the script: it’s not worth taking myself away from my family if I don’t have something I’m really passionate about.” It’s amazing what passion can do. It reaches deep down into the depths of our core. It motivates us. It has the power to temper or amplify our reactions. It can be like jet fuel! So, what prodigious secrets does great writing from the big screen reveal?
The first secret we can glean from the big screen is that if it lacks passion, it’s not worth doing. The first key to awesome copywriting is grabbing attention. How do we accomplish this? Like the playwriting beat, we start off with a little action. We infuse a little passion. We take our excitement and transform it into a hooking introduction that cascades down into the headings and paragraphs. The infusion of passion, a strong and basic emotion, is the perfect means of instantly establishing a connection with our all-important audience.
It’s important to point out that just as a beat holds the audience’s attention throughout a theatrical production, the writing of copy needs to likewise hold attention. It can’t start out amazing and then vanish. The audience will vanish right along with it. Steven Spielberg offers another piece of advice that applies, “The public has an appetite for anything about imagination – anything that is as far away from reality as is creatively possible.”
Now, the world of copywriting revolves around content that is usually educational, factual, informative and designed to promote a certain way of thinking or something for sale. How is Spielberg’s advice pertinent? A key means of holding the audience’s attention is through storytelling. Nine times out of ten, you’re relaying a true story, but the mere fact that it’s a narrative story connects the audience through the most motivating mental power known to man: imagination. Don’t underestimate this!
The second secret is all about overcoming. For playwriting, it’s the characters overcoming an obstacle. For copywriters, it’s overcoming the audience’s objections. Don’t be afraid to bluntly present objections and then heroically overcome them. An excellent example from the big screen are the Sherlock Holmes movies starring Robert Downey Jr. Holmes tackles obstacles with sizzling precision, and leaves our jaw hanging as simple deduction and logic prevail. You can do the same when attacking and conquering the probable objections of your audience.
The third secret revolves around a planned event or presenting the benefits. In the realm of copywriting, benefit presentation is our main event. It’s the moment where our audience sits on the edge of their seat, eager and ready to learn the answer to the all-important question, what’s in it for me? It’s just like that highly anticipated event in any movie where we perch on the edge of the movie theater seat, holding our breath and wondering, what’s going to happen next?
The fourth secret we can glean from playwriting is the stakes. What does the character have to lose? How will the loss affect them? For crying out loud, how will their loss affect us as we’re chomping away on popcorn? When it comes to copywriting, presenting the audience with what they stand to lose by not adopting an idea or purchasing our product or service can be just as devastating. Metaphorically speaking, your goal is make them drop the popcorn in shock and awe, mutter about something in their eye as they wipe away a tear or fly backwards in their seat as they experience that unmistakable “Whoa!” moment.
The fifth and final secret we can take away from the theatrical beat is the implementation of a strategy, or in our case, a call to action. You want a movie that delivered one gripping set of strategies? How about two series of movies to review: James Bond and the Jason Bourne films. You can’t deny that by the end of these films, you walked out of the theater ready for the next installment. And there had better be a next installment in the works! A copywriting call to action is similar. Content should build so much anticipation and excitement that by the end, the audience jumps at the chance to take some sort of action.

Inspiration and Passion = Awesome

Perhaps the most valuable thing we can learn from Oscar winning movies and Tony winning plays is that audiences have an insatiable hunger for inspiring, passionate entertainment. Our job as copywriters is to create an educational and informative piece that also entertains. It stands to reason that by adopting the five keys of creating a beat, merging them with the five keys of killer copywriting and throwing in some inspiration and passion for good measure, we’ll create the perfect recipe—maybe even “The Perfect Storm”—for capturing the minds and souls of our audience. What about sales? That’s one of the main points of our online content, right? Well, it’ll follow as we connect with our audience.