--- title: Marketing Design with Some Breathing Room description: Giving designs some breathing room by thoughtfully working with white space can improve everything about your communication through websites. image: https://blog.baycreative.com/hubfs/breathing-room.jpg ---   [![](https://www.baycreative.com/wp-content/uploads/2021/03/bc-expand.svg)](https://www.baycreative.com/)         ## [Marketing Design with Some Breathing Room](https://blog.baycreative.com/marketing-design-with-some-breathing-room) Posted by [Arne Hurty](https://blog.baycreative.com/author/arne-hurty) on Aug 31, 2015 3:45:51 PM Find me on: [LinkedIn](http://www.linkedin.com/pub/arne-hurty/0/31/198) You can find a lot on conversions and ways to improve conversion rates. What less obvious places can marketers look to improve conversions? Here are a few words on the topic of “white space” in the design. Any designer and many marketers will have heard this term and understand that to mean open area in a design. This is a design oriented topic but relevant to maketers. And can have a big impact on the experience your prospects and customers have. Here is a strategy and an exercise you can ask your designer to help you with. You might be happy and surprised with what you find out. **1) Establish the distinct components of the content** Any page or screen exists to convey information. (Be it entertainment, technical, sales oriented, artistic, or for any other purpose.) The proliferation of amazing gadgets increases the options for presenting that information. Images, video, audio, copy, downloads, and other kinds of content are all easier than ever to use and blend on a page. Take the content you intend to use and separate it into distinct pieces. Break any copy down into heads, subheads, lead sentences, etc. Choose all the images you want to use and calls to action you intend to have. Lay all that out in front of you either as an outline or better yet as pieces of paper on a table or sketch it on a white board. Helpful here is also the intended purpose of each piece of content, if you know it. It might just be “we want this here because it’s cool” whatever the reason, state the purpose.  **2) Describe the user experience** You may want to do this before the prior step in this order might work as well. The point is, this step and the one before it are pretty intermingled. Ask yourself what you want the visitor to do. What do you want them to know after visiting? What actions do you want them to take? How do you want them to feel? Etc. With the information from these first two steps in front of you, you can get an idea of the sequence for that content. **3) Organize the content** Now get organized even further and establish the relationships between pieces of content. A video might have a rectangular preview and also a title in text, as well as a button to launch it. Body copy will have subheads, bullets lists, etc. Images may come in a set or a group and have related copy. Some things relate more to each other than they do to others. Now, consider how the groups of content relate to each other. How does the presentation of the video relate to the presentation of the banner, etc. And finally, how does everything relate to the frame of the device itself? **4) Establish the hierarchy** At this point your content should be much more organized. You may still be working with paper on a table or sketching on a white board or even a wireframe on a computer screen. Either way, you should be ready to perform the next step in our process. ![breathing-room](https://blog.baycreative.com/hs-fs/hubfs/breathing-room.jpg?width=358&name=breathing-room.jpg) My suggestion is to do this in a literal way. Actually assign a value to the different relationships in the hierarchy. For example, a thumbnail for a video and the title for that video might get a value of one—a close relationship. The video content taken together (thumbnail, title, and button) might get a value of three relative to the banner area or an area with more copy. **5) Make some room** Now that you have this mapped out, apply this to a layout. Assign space to these hierarchical values. For example, give a value of one a space of 4 pixels and a value of two 8 pixels, a value of three 16 pixels. **6) Try some design** Now try laying out the content following this guideline. I realize that this is alone is not going to get you a good design. The exercise will inform the design you want to wind up. And this guideline in no way should inhibit or restrict creativity for the design. There are still unlimited options. **Benefits** The goal finally for this is to produce an experience for your audience that is more clear and so easier to follow. And by doing so creating a little breathing room in the middle of the massive information onslaught we all face each day. Topics: [website design and development](https://blog.baycreative.com/topic/website-design-and-development), [graphic design](https://blog.baycreative.com/topic/graphic-design), [b2b marketing](https://blog.baycreative.com/topic/b2b-marketing) [![Share on Facebook](https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png)](http://www.facebook.com/share.php?u=https%3A%2F%2Fblog.baycreative.com%2Fmarketing-design-with-some-breathing-room%3Futm_medium%3Dsocial%26utm_source%3Dfacebook) [![Share on LinkedIn](https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png)](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fblog.baycreative.com%2Fmarketing-design-with-some-breathing-room%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin) [![Share on Twitter](https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png)](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fblog.baycreative.com%2Fmarketing-design-with-some-breathing-room%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=https%3A%2F%2Fblog.baycreative.com%2Fmarketing-design-with-some-breathing-room%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=Marketing%20Design%20with%20Some%20Breathing%20Room) [![Share on Email](https://static.hubspot.com/final/img/common/icons/social/email-24x24.png)](mailto:?subject=Check%20out%20https%3A%2F%2Fblog.baycreative.com%2Fmarketing-design-with-some-breathing-room%3Futm_medium%3Dsocial%26utm_source%3Demail%20&body=Check%20out%20https%3A%2F%2Fblog.baycreative.com%2Fmarketing-design-with-some-breathing-room%3Futm_medium%3Dsocial%26utm_source%3Demail) [![contact-bc2.jpg](https://blog.baycreative.com/hs-fs/hubfs/CTAs/contact-bc2.jpg?width=205&name=contact-bc2.jpg "contact-bc2.jpg")](http://www.baycreative.com/contact) ### Subscribe via E-mail ### Follow BayCreative [![Download our free Guide: 7 Steps for Successful Websites](http://cdn1.hubspot.com/hubshot/13/03/14/a4b074d1-eddf-47fb-81cf-6827344ac51b.png)](http://cta-service-cms2.hubspot.com/cs/c/?&cta_guid=e5657dc1-ede6-4d0f-96ef-634f466d6edb&placement_guid=ba86e520-669a-4a48-8d97-c12eb1f19334&portal_id=159984&redirect_url=vcddmXAHNrb36FqDs4DgGMQTPfa2lLGKKjvu7OnXLlZxhcGTTvMUq1GIr6zWRWpaey2vOcCfTJoIuQnyhXwZFV0lXo2HStNeZO2yvz%2Bdnxw%3D&iv=jkk44amPhl0%3D&hsutk=115785631a8806362c48b8d8df01ae38&canon=) ### Latest Posts ### Posts by Category - [b2b marketing (68)](https://blog.baycreative.com/topic/b2b-marketing) - [Content Development (64)](https://blog.baycreative.com/topic/content-development) - [strategic marketing (60)](https://blog.baycreative.com/topic/strategic-marketing) - [marketing strategies (56)](https://blog.baycreative.com/topic/marketing-strategies) - [marketing agency (49)](https://blog.baycreative.com/topic/marketing-agency) - [Messaging (41)](https://blog.baycreative.com/topic/messaging) - [full service marketing (35)](https://blog.baycreative.com/topic/full-service-marketing) - [inbound marketing (35)](https://blog.baycreative.com/topic/inbound-marketing) - [demand generation (30)](https://blog.baycreative.com/topic/demand-generation) - [Social (25)](https://blog.baycreative.com/topic/social) - [Brand Development (24)](https://blog.baycreative.com/topic/brand-development) - [Thought Leadership (23)](https://blog.baycreative.com/topic/thought-leadership) - [digital marketing (19)](https://blog.baycreative.com/topic/digital-marketing) - [website design and development (16)](https://blog.baycreative.com/topic/website-design-and-development) - [Branding (15)](https://blog.baycreative.com/topic/branding) - [Online Marketing (14)](https://blog.baycreative.com/topic/online-marketing) - [creative marketing (14)](https://blog.baycreative.com/topic/creative-marketing) - [Client Relationships (13)](https://blog.baycreative.com/topic/client-relationships) - [Presentation (12)](https://blog.baycreative.com/topic/presentation) - [video (12)](https://blog.baycreative.com/topic/video) - [lead generation (11)](https://blog.baycreative.com/topic/lead-generation) - [SEO (8)](https://blog.baycreative.com/topic/seo) - [Creative Agency (7)](https://blog.baycreative.com/topic/creative-agency) - [Outsource Marketing (7)](https://blog.baycreative.com/topic/outsource-marketing) - [Collaboration (6)](https://blog.baycreative.com/topic/collaboration) - [customer experience (6)](https://blog.baycreative.com/topic/customer-experience) - [Pay-Per-Click (5)](https://blog.baycreative.com/topic/pay-per-click) - [PowerPoint (5)](https://blog.baycreative.com/topic/powerpoint) - [content (5)](https://blog.baycreative.com/topic/content) - [customer profile (5)](https://blog.baycreative.com/topic/customer-profile) - [marketing plan (5)](https://blog.baycreative.com/topic/marketing-plan) - [quality design (5)](https://blog.baycreative.com/topic/quality-design) - [Advertising (4)](https://blog.baycreative.com/topic/advertising) - [Award winning marketing agency (4)](https://blog.baycreative.com/topic/award-winning-marketing-agency) - [Power Point (4)](https://blog.baycreative.com/topic/power-point) - [graphic design (4)](https://blog.baycreative.com/topic/graphic-design) - [Development (3)](https://blog.baycreative.com/topic/development) - [keywords (2)](https://blog.baycreative.com/topic/keywords) - [slide deck (2)](https://blog.baycreative.com/topic/slide-deck) - [Presenter (1)](https://blog.baycreative.com/topic/presenter) - [photography (1)](https://blog.baycreative.com/topic/photography) - [stock imagery (1)](https://blog.baycreative.com/topic/stock-imagery) - [user experience (1)](https://blog.baycreative.com/topic/user-experience) see all © 2013 BayCreative, Inc. All rights reserved | [About Us](http://baycreative.com/baycreative-team/) ![](https://googleads.g.doubleclick.net/pagead/viewthroughconversion/1068449901/?value=0&guid=ON&script=0)