Designing Teasers To Market A Product, Service or Event

man on a cliff

A teaser is a visual marketing aid that is used to communicate a message, thought, or idea; but it focuses only on one main idea supported by a call-to-action element. Its purpose is to simply blow a trumpet that something is coming but not to reveal everything in order to raise a curiosity. A teaser can be designed on any media of any size. It can be on paper ⎯ hard or digital ⎯ or on a video.

The reason for focusing on a single idea is to ensure that your target audience picks up the core message, thought or idea that you want to convey. If the teaser contains too much information, most likely, in 48 hours, the reader will forget everything because there is in our brain a function called reticular activating system that filters information in order to protect its health. What the reader can most likely remember is only that sometime ago he stumbled upon a teaser.

teaser versus brochure

A teaser is not a brochure. The major difference between a teaser and a brochure is that the latter contains all the information that you want your target audience to know; whereas, a teaser contains only one idea, thought or message supported by minor elements such as a call-to-action which may be a button or a link to direct your target audience to do something; or simply a number or email address to invite them to contact you.

test yourself with this pilot teaser

You will find below an example of a teaser; then, follow this instruction.

  • Put yourself into the shoes of a high school student. Then, examine the teaser and be conscious of your eyes.
An example of a pilot teaser for marketing purposes via social media
Pilot teaser for an event: a holy week retreat

Try to answer the following questions.

  1. What is the teaser all about?
  2. What is the main message?
  3. What is the first element that you noticed?
  4. Did you feel strain in your eyes while looking at it?
  5. Do you think that even a high school student would be able to get the intended message?

The teaser is talking about a Holy Week retreat. Its main message is to disconnect, which is the core purpose of any retreat: to disconnect you from your everyday routine and way of life; inviting you to leave your comfort zone and normal environment. That is why it is called a retreat.

All other elements of the teaser are merely to support the main idea. One bit of information, though, must retain in the reader’s mind because it is essential ⎯ the date; which is why it is centered and larger than the other texts but not larger than the main idea.

The main idea could be anything you see on a teaser. However, in this example, the designer wanted to emphasize most the word disconnect because it has something to do with the follow-up teaser.

why put yourself into the shoes of a high school student?

We all think differently. Not all have achieved equal level of education. Not all those who were able to attend school have the same level of understanding. Not because you are older that you are wiser. Thus, if your target audience is the general public, how would you design?

The general rule is: consider the general public like all high school students. Once you have captured them all, generally speaking, then you apply the funneling; but that’s another story. Briefly, it is when you target specific audience from a pool of a wider audience.

So, if your role is the advertiser or producer, in order for you to objectively understand a visual design, put yourself into the shoes of a high school student; not as a producer, advertiser or organizer.

how eyes react to a design

What captured your eyes first? Is it the word disconnect? Then which? Was it the date? Could you notice the flow of information? Did you feel any eye strain?

In visual design, it is important that the eyes are not strained. Elements should follow a path that is comfortable to the reader’s eyes. Colors, sizes and spaces all affect the eyes. Our eyes react most especially to colors because colors are light. Our eyes’s reaction to light is not something that we can control. For that reason, the designer must test himself if what he has designed is comfortable to his eyes; and it is following the intended path.

follow-up teaser

In order to sustain the interests of your target audience, the pilot teaser must be followed up by a follow-up teaser; otherwise, your first teaser may serve useless as it may already be forgotten. It is important that the follow-up teaser must be related to the initial teaser. Like when writing a business letter or an article, a series of teasers must also be cohesive. 

Take a look at the follow-up teaser of our example.

An example of a social media teaser for marketing purposes
Follow-up teaser for the same event

It is already obvious that the follow-up teaser is related to the pilot one. What has changed is the emphasis.

Let’s examine.

  1. The main idea or message here is the substance of the retreat which is taken from Matthew 26:40.
  2. The word disconnect still exists but no longer dominant. It still exists so that the readers can connect the second teaser to the first teaser.  
  3. The second teaser introduces the idea tHis connect, which is the name of the retreat. However, in this example, it serves secondary to the main idea because what is more important is its substance.
  4. Notice the positions of disconnect and tHis connect. Their positions suggest that they are related; its contrast adds substance to the message. Without the word disconnect, your general audience would have no idea why tHis connect.
  5. The contrasting images also add substance to the idea of a retreat.
  6. Emphasis is now given to the call-to-action, which is to call and make a reservation. The date is less emphasized as this was already emphasized previously.

what’s next

Ideally, it is enough that there’s only a pilot teaser and a follow-up teaser. A third release of your communication should already contain everything that you want your target audience to know. This may be in a form of a flier, brochure, a web page, or an event announcement. Your third communication tool must be sufficient with the necessary information to limit people’s questions and enquiries to a few because what is more important call-to-action is to buy if you are selling a product or services; to reserve a seat if you are holding an event; or to sign up, among others, if you are recruiting members.

Photo credits:
 Zachary DeBottis from Pexels 
 Guilherme Almeida from Pexels

Sandy Beach To Ocean Deep Colour Scheme

Colour Scheme Beige beach deep ocean blue

Colour Scheme Beige beach deep ocean blue
An elegant colour scheme from sandy beige to deep ocean blue. It is a twist from the common white beach and aqua blue ocean. You can apply this colour scheme to interior, invitation and even wedding colour motif. These colours contrast well with Old Rose.

The colours have no equivalent colour names. So, to keep it simple, let their names be:

  • Hex #d8d6d6 is Light sand
  • Hex #d1cebb is Wet sand
  • Hex #9bacac is Washed green
  • Hex #7bb4bb is Old Teal
  • Hex #2c6474 is Ocean Deep

Café / Coffee Shop

If you own a coffee shop, break away from the traditional coffee and chocolate browns accented with a shade of tangerine. These colours will give your café a look above the rest.

Paint the walls of your coffee shop with Light Sand as primary and Wet Sand as secondary colour to give your walls some dimension. Give your café an Ocean Deep accent by furnishing it with this upholstered colour. For your tables, top it with Old Teal. For your fixtures, paint them with Washed Green.

Living Room, Bedrooms, and Hotel Rooms

For a masculine look of your living room, give your wall a light shade of Light Sand accented by Washed Green colours. Your upholstery would look elegant with Ocean Deep. Complement your sofa with Old Teal throw pillows. For the rest of the items in your living room, colour them Wet Sand.

If you want to be more adventurous, paint the walls of your bedroom with Ocean Deep. Use light fixtures such as white or Light Sand. For your bed, alternate your bed sheets, linens and pillows with Wet Sand, Washed Green, and Old Teal.

To brighten your rooms a bit, add a few items with Old Rose or white.

Wedding Colour Motif

For a change, the bride may wear a Light Sand wedding gown accented with Ocean Deep waist band, flowers, embroidery, or other ornaments. Instead of the common black, let the groom wear an Ocean Deep suit, Light Sand shirt, and Ocean Deep butterfly.

The bridesmaids, flower girls and maid of honour shall wear Old Teal gowns or dresses accented with Ocean Deep. The groomsmen, bearers, and best man can wear Washed Green suits accented with Wet Sand.

House Exterior

Your house will be eye-catching with this light sand ocean deep colour scheme. Paint the exterior of your house with Light Sand and complement it with Wet Sand. Accent your exterior with Ocean Deep doors, window sills and frames, and roof. For the colour of furniture and fixtures outside your house, choose Wet Sand or Washed Green or a combination of both.

Other Applications

This colour scheme will also make your shops and boutique look elegant, cool and fresh all the time. If you own a resort or restaurant near the beach, you can never go wrong with this cool and fresh sand and ocean colours.

Customising WordPress Theme Twenty Seventeen

Every year, WordPress comes out with a default WordPress theme. This year 2017, WordPress came out with – your guess is right – Twenty Seventeen.

This article is about how I customised WordPress theme Twenty Seventeen for my site amikvs.org. First, let me talk about a bit of what’s new with WordPress 2017. Immediately following that is my own customisation of WordPress Twenty Seventeen.

What’s New With 2017

The main feature of WordPress Twenty Seventeen is the use of a header video on the front page of your website. The featured image is immersive that it occupies the entire width of your screen (referred to as hero images).

WordPress 2017 focuses more on business sites. It features multiple sections on the front page which you can use to showcase your portfolio, featured items, etc. Twenty Seventeen works on any device.

This site – 2017.wordpress.net – shows an example of a site built with WordPress Twenty Seventeen.

Introducing Header Video

A video on the front page of your site is a good way to attract viewers because of motion. Use a header video that is related to your site or a product. Use subtle and soft music. Some viewers do not like loud sounds because they annoy them. With WordPress Twenty Seventeen, you have no problem with that because it mutes the audio.

WordPress Twenty Seventeen recommends a video size of 2000 x 1200 pixels. In order not to confuse you how is that set, most video editors have a default of 1080p, which means 1920 (width) x 1080 (height) pixels. If it is not the default, usually it is among the choices asked upon creating a new video, so just select 1080p. Settle on this size and you are already safe. Moreover, that’s the maximum dimension that YouTube can accommodate.

The header video is responsive that it covers the entire screen of any device or computer display. However, in order not to distort (video stretched ugly) its aspect ratio, the video produces pillar boxes, if the screen is too wide for its height, or letter boxes if the screen is too tall for its width. Pillar boxes are black vertical bars that appear on the sides of the video. Letter boxes are black horizontal bars that appear at the top and bottom of the video.

Most preferably, upload your video via YouTube and enter its URL in the customizer header settings rather than upload it natively on your site. Your video loads faster via YouTube compared to a video that you uploaded directly on your site. For now, WordPress 2017 accommodates only YouTube videos.

Native Video vs YouTube Video

The recommended video dimension is 2000 x 1200 pixels in order for the video to cover the entire with of the screen. YouTube accommodates only up to 1920 x 1080 (1080p). As a result, if you are going to use a video header via YouTube, your video header will show pillar boxes (black empty space on both sides of the video). Even if you tweak the YouTube URL by specifying the width and height to 2000 x 1200, the settings are ignored. In some cases, maximizing your browser to full screen may do the trick. However, you cannot expect all users to do that for you.

As a remedy, or to take advantage of a 2000 x 1200 video, you must upload it to your site via WordPress media library, however —

  • Your video must be less than 8 MB. This is the maximum size that WordPress can allow you to upload.
  • Your host server must be able to stream your video.
  • Not all bandwidths are created equal. Internet users with low bandwidth might not be able to see your video. I tried a 5 MB video but it couldn’t play. So keep your video as light as possible. The video used for the demo site 2017.wordpress.net  was only 3.9 MB and 17 seconds long.
  • Your video editor must allow a customized 2000 x 1200 aspect ratio settings if you want to adhere to this recommended size. iMovie, for example, cannot create a 2000 x 1200 video. However, a 1080p video is just good enough.
  • Adding an audio to your video makes it size heavier.

Keep Your Header Image Lightweight

If you do not like to use a video header on your front page, you have the option to use a header image. Likewise, WordPress Twenty Seventeen recommends a header image that is 2000 x 1200 pixels in dimension. This is to maintain the good quality of your image even if viewed on larger screens; however, limit the weight of your image to 300 kb or lower. Upload images that are exactly 2000 x 1200 pixels. It makes your images lightweight and saves space on your web host server. There are software, that you can download for free, to crop and resize images such as Fotor and PhotoScape for Mac and its native Preview; and for Windows, FastStone.

If you want to use multiple images for your header, give your photos a common character or attribute by using filters. For example, you can make all your header images all sepia or retro. Multiple header images are displayed randomly.

You can have both a video header and an image header so that while the video buffers, your viewer can see your image header. Otherwise, your viewer is going to see a blank black space before the video starts to load.

Header Image vs Featured Image

If your header image is enabled, and you used a featured image on your post, you will see a horizontal crop of your header image above the navigation menu; and below it, you will see your hero (featured) image full screen. With the two together, your page can look unappealing.

Either you disable your header image or not use a featured image. A featured image, however, is helpful especially when sharing your post on social media sites. If you disable your header image, your viewer will see a blank screen before your header video starts to load.


Customising WordPress Twenty Seventeen

The following sections assume you already know how to use WordPress at backend. For beginners, WPMU DEV has written a detailed tutorial on how to customise your site with WordPress theme 2017.

My Preferred Style

My preferred design is simple and minimalist. For my website, I want it to look neat and elegant. I don’t want clutter.  So, the first thing I would do is not to use the header media.

Disabling the Header Image

Disabling the Header Image is simply easy. Just go to WordPress’s built-in Customizer and head for the Header Media. In Customizer, click Hide Image.

Site Identity

I prefer to show my logo somewhere else instead of in the header. Since I have disabled the media header, my logo, site title and tagline won’t be showing.

For my site, I only uploaded my site icon. I have entered my site title and tagline (you should), but I opted not to display them.

If you prefer to use the theme’s options, you have the following choices whether to show or not the following on the home page of your website.

  • Title and tagline
  • Logo with the title and tagline
  • Logo only

Colour Scheme

Colours give your site a characteristic. Since I am aiming for minimalist and elegant look, I have chosen monochromatic colours. With the aid of W3 Schools monochromatic colour scheme online tool, I have picked this palette.

If you prefer, you can just pick from W3 School’s ready-made color palettes.

Once you have picked your colour theme, head to WordPress’s customizer and customize Colors. WordPress 2017 offers only three color scheme options: dark, light or custom. Choose Custom and move the slider to the hue nearest your colour theme. With custom you can see in the live preview the changes in text colours. 

Customise color scheme of WordPress 2017

Once you have picked your colour theme, head to WordPress’s customizer and customize Colors. WordPress 2017 offers only three color scheme options: dark, light or custom. Choose Custom and move the slider to the hue nearest your colour theme. With custom you can see in the live preview the changes in text colours.

Specifying Exact Colour Scheme

The custom colour slider to choose a colour scheme is helpful but not exact. If you have specific colors for your site color theme, you have to use CSS. There are plugins that allow you to do this, but if it’s only a short line, I’d prefer CSS.

Accent
Hex color #282216

Used as background color of the top menu and footer. To force the background color to change, add this CSS line.

.navigation-top, 
navigation-top ul {
background-color: #282216 !important;
}

Background
Hex color #F4F7ed

Used as default background color of the body and HTML. All pages and post would have this light background. To alter the original background color, add this CSS.

.html, 
.body,
.site-content-contain {
background-color: #f7f4ed;
}

Primary
Hex color #625741

Used as color of all headings h1, h2, h3, h4, h5, h6. To specify the color of all headings, add this CSS code.

h1, h2, h3, h4, h5, h6 { 
color: #625741 !important;
}

Secondary
Hex color #A28E67

Used as secondary accent such as background color of other elements, buttons, and links.

.coming-soon { }

Effects
Hex color #D3C19C

Used for hover effects.

.coming-soon { }

Footer Color

To change the background color of the footer, add these CSS line.

footer { 
background-color:#282216;
color:#d3c19c !important;
}
footer .widget-column a {
color:#d3c19c !important;
}

Customising the Top Menu

By default, the top menu is aligned to the left. When viewing your site on a wider screen, the top menu appears off. I leave it that way. I like it a bit off than centered. To keep my top menu simple, I’m dropping the drop-down menus. That means that I’m not adding any menu item under the main menu items. I’ll think of another way but that will come later.

In case you want your top menu centered, add this short CSS line. In WordPress customiser, click Additional CSS. In Customizing Additional CSS, enter the following line.

#top-menu {
text-align: center;
}

If you want it right-aligned, change center to right.

Changing the Hover Effect of the Top Menu

The default hover effect of the top menu is very simple; a horizontal line appears below the word when you mouse over it. I tweaked that a bit by increasing the thickness of the horizontal line and changing its color and by adding a transition effect. In CSS, these are the lines I added.

The following CSS line sets a transition when you hover on a menu item, decreases the spaces around it, reverts the font weight to normal, and forces to change the color of the menu item.

/* CUSTOMISING THE TOP MENU */ 
.navigation-top a {
transition: 0.8s;
padding:9px;
font-weight:normal;
color:#f7f4ed !important;
}

The next CSS displays a thick 50% opaque white border below the menu item when you hover it and decreases the bottom padding to zero, giving a rising effect of the border. If the menu item is active, the border appears without the transition (it’s actually there; you just don’t see the effect).

/* CUSTOMISING THE TOP MENU */ 
.navigation-top a:hover,
.current-menu-item >a {
border-bottom:3px solid rgba(255,255,255,0.5);
padding-bottom: 0px;
}

Disabling the Sidebar

For my minimalist site, I won’t use the sidebar. If the sidebar contains many elements, it tends to clutter your single page or post, aside from the reason that it distracts your readers. I just want my viewers to focus on the main content.

Additional resources: