{"id":337,"date":"2015-05-26T15:32:38","date_gmt":"2015-05-26T19:32:38","guid":{"rendered":"http:\/\/harrisweb.ca\/blog\/?p=337"},"modified":"2016-11-25T18:04:03","modified_gmt":"2016-11-25T23:04:03","slug":"website-design-selling-the-sizzle","status":"publish","type":"post","link":"https:\/\/www.harrisweb.ca\/blog\/website-design-selling-the-sizzle\/","title":{"rendered":"Website Design &#8211; Large Background Images &#8211; Selling The Sizzle"},"content":{"rendered":"<p>I remember a radio interview here in Toronto a few decades ago with an owner of a successful Steakhouse, who was opening a new location in downtown at the time. \u00a0I remember her talking about how her steak was as good as the other steakhouses established in North America at the time and how her decor was as good as any, and her pricing equal to that of her competitor&#8217;s but when the interviewer asked her, &#8220;If it is about the same as everyone else, why do your diners rave about how good it is?&#8221;<\/p>\n<p>I swear I could here her smile on the radio as she answered, &#8220;Butter.&#8221;<\/p>\n<p>&#8220;Butter?&#8221; queried the interviewer.<span style=\"font-size: 13px;\">.<\/span><\/p>\n<blockquote><p>She went on to explain that they served steaks on a hot iron plate inlaid into a wood surrounding. \u00a0At the exit to the kitchen was a huge tub of butter and every waiter and waitress was instructed to throw a tab of butter on the side of the hot plate as they exited the kitchen. \u00a0This would merrily sizzle loudly as the waitress carried the plates through the dining room, engaging \u00a0the senses of all the diners, sight, smell and hearing &#8211; priming diners for taste when their meals arrived.<\/p><\/blockquote>\n<p>It truly was &#8211; Selling the Sizzle &#8211; most literally. \u00a0Today we might call this a <strong>unique selling proposition.\u00a0<\/strong><\/p>\n<h2>A Different Kind of Sizzle<\/h2>\n<p>My wife and I were sitting on the couch the other night and she was relaying a story to me about telling a young co-worker how are granddaughters love the game Trouble. \u00a0I started to recite the commercial from our youth, <em>&#8220;Have you got trouble, wait don&#8217;t run, this kind of trouble is lots of fun&#8221;<\/em> and she joined in and we recited the commercial verbatim to its end. If you are in your 50&#8217;s right now it is probably running through your head&#8230;leave a comment below if it is&#8230;the 30 second spot is below if you are not familiar.<\/p>\n<p>The commercial successfully illustrates the emotional appeal to both children and adults of &#8220;emotional sizzle&#8221; \u00a0If you don&#8217;t think so, just think that my wife and I both, and possibly you, can recite this commercial 40 years later and my wife bought the game for our granddaughters to play.<\/p>\n<p><iframe loading=\"lazy\" width=\"1080\" height=\"810\" src=\"https:\/\/www.youtube.com\/embed\/HfznucMwNuU?feature=oembed\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h2>Using Large Background Images<\/h2>\n<p>One way to make an emotional impact is to use large background images that embody the message you are attempting to transmit. \u00a0These images must be chosen with care.<\/p>\n<ul>\n<li>They must convey the idea<\/li>\n<li>They must connect to the audience<\/li>\n<li>They must not interfere with the text message<\/li>\n<\/ul>\n<p>Here is a website I built for a local auto body shop.<\/p>\n<p><a href=\"http:\/\/weprintink.ca\/touchup\/\">http:\/\/weprintink.ca\/touchup\/<\/a><\/p>\n<p><a href=\"http:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/bg1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-916\" src=\"http:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/bg1.png\" alt=\"bg1\" width=\"960\" height=\"600\" srcset=\"https:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/bg1.png 960w, https:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/bg1-420x263.png 420w, https:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/bg1-744x465.png 744w, https:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/bg1-300x188.png 300w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Unfortunately the website has been\u00a0redesigned in a completely different direction so this one is from my archive, without the finishing touches. \u00a0If you take a look the first thing you will notice is there are no before and after pictures as you usually find in this type of website. \u00a0What we are selling here is the finished product, what you will drive away with. \u00a0Throughout the website we use &#8220;romantic&#8221; images, like the tail-fin of a 1960 Cadillac and the 1950&#8217;s styled young woman leaning on the yellow &#8217;55 Ford &#8211; both are selling, romance &#8211; Sizzle! \u00a0And your life can be this cool.<\/p>\n<h3>&#8220;It works&#8221;, is not enough<\/h3>\n<p>The web grew up with left-brained, linear thinking, geeks, of which I was one, because HTML looked a lot like programming. \u00a0Today this is still very true, but today&#8217;s new-branded geeks have been exposed to the likes of Apple, who&#8217;s designs have driven markets &#8211; remember the iMac colours. \u00a0The market today is telling us that it is not enough that things work, they have to be stylish and work at the same time.<\/p>\n<h2>Ultimately Design is for Humans<\/h2>\n<p>Design is about engaging more than just the cerebral logical side of the brain, it is about appealing to the senses and the more you can do that the better your message is conveyed to the viewer. \u00a0That being said there are also other considerations when choosing images that will connect to the intended audience.<\/p>\n<h3>Contrast<\/h3>\n<p>Images, especially background images, must be chosen to have a &#8220;uniformity of shade&#8221; at least in large regions of the image so text or other elements show up against it. \u00a0The good news is that good images usually do not place key parts of the image in the centre of the layout, they are usually only constitute about 1\/3 of the real estate, that leaves a lot of room for you to maneuver your content into. \u00a0So the key element of the image, that which embodies the emotional impact of the image, is still visible, and your message has a clear space to be placed.<\/p>\n<h3>Structure<\/h3>\n<p>If the website design is to be successful there must be a call to action. \u00a0It has to stand out from the background without impeding it and can either be part of the message or separate from it. \u00a0Below I mocked up a layout that works \u00a0and I will run through the though process to do so.<\/p>\n<h3>Choosing a Large Background Image<\/h3>\n<p>The background image was chosen to convey the romantic notion of the golden years of North American automobiles, because our audience are classic car aficionados. \u00a0The girl is classy, not overly sexy but still appealing; this is important because women can get easily turned off by overt sexaul layouts and not glean the message from the layout. \u00a0The car reflects the style and condition that our customers probably own, or wish they owned. \u00a0The image also offers large, fairly homogenous spaces in the sky and in the grass, both places our message could be placed.<\/p>\n<h3>Placing the message<\/h3>\n<p>In this case the message is simple, &#8220;this is who we are, this is what we do&#8221; \u00a0The name in many ways tells the reader what we do and because of the image, the audience is going to assume that we restore cars, not coke machines. \u00a0The sky, in the top left was the obvious place to put this. \u00a0It should be noted the image originally faced the other way and I reversed it so I would have the top left to use like this.<\/p>\n<p><a href=\"http:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/large-background-layout.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-921 aligncenter\" src=\"http:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/large-background-layout.png\" alt=\"large background layout\" width=\"639\" height=\"400\" srcset=\"https:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/large-background-layout.png 639w, https:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/large-background-layout-420x263.png 420w, https:\/\/www.harrisweb.ca\/blog\/wp-content\/uploads\/2013\/08\/large-background-layout-300x188.png 300w\" sizes=\"auto, (max-width: 639px) 100vw, 639px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>Adding the Call to Action<\/h3>\n<p>I played with where to put the button to click, under the tag line, under the car, touching the car, but I chose to put it where the woman was looking. \u00a0It probably fits and looks better between the logo and the car, but the eye is often drawn to where the person in the picture is looking, so I chose to put it there. \u00a0Also when things are slightly discordant we are drawn to it.<\/p>\n<h2>What we have learned<\/h2>\n<ol>\n<li>\u00a0Selling the sizzle can be part of our Unique Selling Proposition<\/li>\n<li>That we have to define our audience and play to them<\/li>\n<li>Large background images can convey a mood and idea quickly<\/li>\n<li>Large background images must be chosen with care to convey the message but also allow us room to place our other elements for the page.<\/li>\n<li>Contrast and Structure are important when placing our assets on a large background image<\/li>\n<\/ol>\n<p>If you are interested in my website design services you can see more here:\u00a0http:\/\/www.harrisweb.ca\/website_design.php<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I remember a radio interview here in Toronto a few decades ago with an owner of a successful Steakhouse, who was opening a new location in downtown at the time. \u00a0I remember her talking about how her steak was as good as the other steakhouses established in North America at the time and how her [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":926,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[18,20],"tags":[54,45],"class_list":["post-337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphic-design","category-website-design","tag-graphic-design","tag-website-design"],"_links":{"self":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":35,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":925,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/posts\/337\/revisions\/925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/media\/926"}],"wp:attachment":[{"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.harrisweb.ca\/blog\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}