![\"content-that-converts\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/12\/content-that-converts.jpg\")
<\/figure>\n\n\n\nA good conversion rate boils down to effective content, presented effectively in a website design. It requires excellent design built around content that converts. The two\u2014design and content\u2014are inextricably entwined, and for one to be effective, the other must also be. While designers don\u2019t have to be copywriters or photographers, they do need to have a good grasp of how to present a site\u2019s content in a way that\u2019s both attractive and effective for conversions.<\/p>\n\n\n\n
To get you started, here are five \u201csecrets\u201d to designing content that converts.<\/p>\n\n\n\n
1. Ditch Dummy Text<\/h2>\n\n\n\n
Many designers will often come up with a web design and use Lorem Ipsum dummy text to flesh it out. This is absolutely not how to work if your goal is conversion\u2014it\u2019s critical to have your content in hand before setting the design. Otherwise, your design is simply a hypothetical \u201cthis would be a nice website\u201d project and not the highly nuanced form of art you\u2019ve been hired to create. The content needs to dictate the design. Otherwise, you run the very real (and often realized) risk of elements in the design that are superfluous, the need to shoehorn content into a design that doesn\u2019t quite fit, and an overall presentation that completely fails at emphasizing the right content at the right time.<\/p>\n\n\n\n
A simple website that presents its content well is going to convert better than a beautifully designed website that fails to highlight key pieces of information and obscures others. Designing with hypothetical text and images is just setting yourself up for a design that the client might fall in love with, but ultimately will fail when the real content is put in. Sketch your ideas if you need to, but before doing any serious brainstorming or putting together wireframes, know exactly what you\u2019re working with and what elements need to be featured. Designer Jeffrey Zeldman said it best back in 2008<\/a>: \u201cDesign in the absence of content is not design, it\u2019s decoration.\u201d<\/p>\n\n\n\n If you offer copywriting services along with design services, you may be able to sculpt your copy around your design ideas (or vice versa), but you still need to have a good sense of what you\u2019re presenting before you can figure out how to present it. No shoehorns allowed in this game.<\/p>\n\n\n\n A really good sitemap is a fantastic gift you can give any website\u2019s users, especially if there\u2019s a lot of stuff to navigate in the site. What you may not realize, though, is that a great sitemap can also be a gift to yourself, and to your client. If you\u2019ve got a sitemap in hand before beginning a design, what you\u2019ve essentially got is an outline to build the entire structure of the design. As Cameron Chapman wrote for KISSmetrics<\/a>, a good sitemap is \u201ca centralized planning tool that can help organize and clarify the content that needs to be on your site, as well as help you eliminate unnecessary pages.\u201d<\/p>\n\n\n\n In other words, the sitemap is kind of like the roadmap for your website. Creating one doesn\u2019t invoke any design skills at all, just organizational ones. That means laying out the sitemap is a responsibility you can leave to your client, collaborate to develop, or take on yourself. If you\u2019re responsible for the sitemap, be sure the client does a thorough evaluation before moving forward; sitemaps often evolve over time, but the less it changes along the way, the better off you\u2019ll be.<\/p>\n\n\n\n A sitemap clarifies what content needs to be and where, without being cumbersome or difficult to put together or adjust. It eliminates the possibility of inefficient design or navigation because you can see where each piece of content needs to go and create helpful internal links, rather than duplicating information. No more duplicated content means no more wasted time for you or the site\u2019s users.<\/p>\n\n\n\n Another perk of the sitemap is that it helps crystallize the scope of the project right from the outset, which you and the client would probably both appreciate. The real logistical benefit of the sitemap is that it can serve as a tracker for the parts of the project you\u2019ve finished and the parts that are still in progress. Keep it digital and be sure everyone with input into the sitemap and the site design\u2019s progress can access it. Use it as a quick tool for keeping your client updated, and keep referencing it any time changes to the content are suggested to save yourself time and headaches.<\/p>\n\n\n\n When a site\u2019s goal is conversion (and this is most often the case), one of the most critical elements is the call to action. Frankly, most sites should have some sort of call to action, whether it\u2019s to \u201csign up\u201d or to \u201cadd to cart\u201d or to \u201cview the gallery.\u201d Users should be guided toward some action, and that action needs to be laid out plainly and clearly. It could be a button, a link, or something else. Whatever it is, that\u2019s what we mean when we say \u201ccall to action.\u201d<\/p>\n\n\n\n Whether your call to action takes a humorous tone (sign up today or the bunny gets it!), invokes camaraderie (join the cause), or is loaded with urgency (on sale today only!), it needs to be designed in a way that\u2019s compelling to the target audience and consistent with the overall messaging of the site. For some great ideas and examples, check out Helga Moreno\u2019s write-up on the call to action for Just Creative<\/a>.<\/p>\n\n\n\n An important thing to note: if your call to action on the landing page is for the user to fill out an opt-in form, include the form on that page. Don\u2019t<\/em> have the user click a link that takes them to an opt-in. One-step opt-ins have been shown to have much higher conversion rates<\/a> than two-step ones. Just work the opt-in into the landing page. And while you\u2019re at it, make sure the form is only requesting the information you actually need\u2014the less it requests, the higher it converts.<\/p>\n\n\n\n Any web writer worth their salt will tell you that headlines are critical\u2014and it\u2019s true. We all joke about annoying clickbait and short attention spans these days, but research shows that any website has all of eight seconds to capture a visitor\u2019s attention before that visitor bounces. Eight seconds is not a lot of time, and it\u2019s safe to assume that the majority of those seconds are spent scanning the headline. That\u2019s why it\u2019s absolutely critical that anything even remotely headline-like in your site design is strong: only a compelling headline will keep a user on your site long enough to have the opportunity to convert.<\/p>\n\n\n\n If the responsibility for generating the headlines and other H1 text in a design ever falls on your shoulders, you need to sharpen your headline-writing skills. My two favorite resources are this quick-tip post from Copyblogger<\/a> and the free Headline Hacks<\/a> PDF from Jon Morrow. Both of these resources were developed for writers, but they present the basics of writing good headlines in a way that anyone with English fluency can absorb and put to use pretty much immediately.<\/p>\n\n\n\n There\u2019s a science to the art of images (and other visual elements, like logos and standout fonts) in web design, and it would behoove you to have a keen understanding of what exactly makes a good image selection\u2014especially if you\u2019re layering content over the image, or tying in a critical headline or call to action. Most actual web design takes place on a desktop or laptop computer. When compared with all the screens in our lives, these computer monitors are spacious, relatively low-lit, and most often indoors or, at the very least, shaded from direct sun or other glare. But that\u2019s not the only environment in which images are viewed on the web these days.<\/p>\n\n\n\n Images that look great on the hulking iMac in your office aren\u2019t necessarily going to look as good\u2014or even show up \u2014on the screen of an early-model smartphone being carried down a brightly lit street. And neither of those will compare to how a horizontal mini tablet displays the image. The nature of connectivity and technology today requires that you take into account all kinds of monitors and viewing scenarios when you build your website.<\/p>\n\n\n\n Your images need to be striking and scalable to accommodate different monitor sizes in different environments: think 4 inches in bright light overhead to 40 inches indoors with indirect sunlight filtered in. If the image is compelling because of its nuance or intricate detail, it\u2019s probably not the right image to use. Tweak any images as needed, if the tweaks can make them feasible (or if the client requires their use), and focus on contrast to render high clarity.<\/p>\n\n\n\n While these five \u201csecrets\u201d aren\u2019t really secrets at all, it can be easy to overlook or completely miss these key elements to creating content that converts. Websites are the vehicles for presenting content, and the users must be taken into account with any web design. But, as these tips have demonstrated, effective web design isn\u2019t just about making a website nice to look at and easy to use. There\u2019s often another purpose: driving conversion. Mastering and using all five of these areas of web design workflow will go a long way in your ability to create websites that are truly effective in every sense of the word.<\/p>\n","protected":false},"excerpt":{"rendered":" As a web designer, it can be easy to think of yourself as a visual artist instead of a business strategist. While it\u2019s true that web design involves creativity and artistry\u2014and that is an integral and valuable part of web design\u2014truly effective web design isn\u2019t just pretty websites. It\u2019s effective websites. And effective can take…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":14418,"template":"","resource-topic":[],"resource-role":[],"resource-type":[916],"class_list":["post-14415","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n![\"content-that-converts-content\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/12\/content-that-converts-content.jpg\")
<\/figure>\n\n\n\n2. Do the Sitemap Before the Site<\/h2>\n\n\n\n
![\"content-that-converts-sitemap\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/12\/content-that-converts-sitemap.jpg\")
<\/figure>\n\n\n\n3. Have a Clear Call to Action<\/h2>\n\n\n\n
![\"content-that-converts-call-to-action\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/12\/content-that-converts-call-to-action.jpg\")
<\/figure>\n\n\n\n4. Make Sure the Headlines are Good<\/h2>\n\n\n\n
![\"content-that-converts-headlines\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/12\/content-that-converts-headlines.jpg\")
<\/figure>\n\n\n\n5. Use Versatile Images to Capture and Keep Interest<\/h2>\n\n\n\n
![\"content-that-converts-images\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/12\/content-that-converts-images.jpg\")
<\/figure>\n\n\n\nThe Keys to Copy <\/h1>\n\n\n\n
That Converts<\/h1>\n\n\n\n