Website UI/UX Guidelines

Typography

Hierarchy

One of the most important techniques for effectively communicating content is the use of typographic hierarchy.

Choose from well-known sources, Sans-Serif or Serif are safe choices.

Choose a typeface that works well in various sizes.

Text Sizing

Text Alignement

Font Scale & Line Height

Photosynthesis was inspired by the pentatonic scale and natural law to define 10 different font sizes and corresponding line heights.

Font Color

To achieve barrier-free design, we follow the WCAG standard, which maintains an AAA level of contrast ratio, i.e. 7:1 or more between body text, title, and background color.

Line Spacing

  • Line spacing is the vertical distance between lines of text.
  • Aim for about 140%-180% for optimal readability and accessibility.
  • Limit line length to 70–80 characters.
  • Font size should be minimum 14pt. The bigger the screen the bigger the text.
  • Small fonts need more spacing.

Color and contrast

Consider making body text on-screen dark gray rather than black. Screens have more severe contrast than paper, and thus are more tiring to read at full contrast.

Set the line-spacing

To make a block of text easier to read, set the line spacing to 120–145% of the point size.

White space between the headers and the body text

Use a line-length of 45–90 characters

The optimal length of a line for a single column page is 45–90 characters. The ideal width of a text block is 66 characters.

Iconography

Angles

Stick to 45-degree angles. If your design dictates that you must break this rule, try to do so in halves (22.5 degrees, 11.25, etc.) or in multiples of 15 degrees.

Basic shapes

Specific keylines are present for certain shapes: circle, square, rectangle, orthogonals, and diagonals. These basic shapes help unify Google system icons and regulate their placement on the icon grid.

Geometry

Preset standards have been determined for specific keylines: the circle, square, rectangle, orthogonals, and diagonals. These universal and simple elements have been developed to unify Google system icons and systemize their placement on the icon grid.

Stroke Weight

Use a consistent stroke width of 2dp, including curves, angles, and both interior and exterior strokes.

Complex Icons

Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail. If necessary, optical corrections should use the geometric forms on which all other icons are based, without skewing or distorting those shapes.

Icon Sizing

System icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.

Dense layouts

On desktop, when the mouse and keyboard are the primary input methods, measurements may be scaled down to 20dp.

Layout

Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).

If additional visual weight is needed, content may extend into the padding between the live area and the trim area (the complete size of a graphic). No parts of the icon should extend outside of the trim area.

Color

The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).

Space

Adequate space should surround system icons to allow legibility and touch. Icons of 24dp can use a touch target of 48dp.

Dos

  • Recognizable
  • Embrace simplicity. (Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously)
  • Provide a single focus point. Design an icon with a single, centered point that immediately captures attention and clearly identifies your app.

Don’ts

  • Don’t use delicate, thin stroke weights.
  • Don’t use gestural or loose organic shapes.
  • Don’t place the icon on a coordinate that isn’t “on pixel”.

Layout

Grid systems for web designers to use are everywhere on the Internet. The king of the grids has been deemed “The 960 Grid”. The 960 Grid has the following structure:

  • Total width 960px.
  • 12 columns maximum, 60px each wide.
  • Each column has 10px left & right margin. In turn, this makes 20px of gutter space on the edges.
  • Total content area is 940px.
  • Responsive layout grid
  • The Photosynthesis layout grid is made up of three elements: columns, gutters, and margins.

The heatmaps

You can use the set of heatmaps to help you positioning your content inside the page, or to make design decisions based on screen ergonomy.

Example of 12 column grid

Shadow

UI Shadow color

The shadow color should be similar to either

  • The background-color (blue shadow on blue background)
  • The element’s color (red shadow behind a red object)

Lower the color opacity

Lowering the color opacity on the shadow to around 20-30.

Elevation

Elevation in Material Design: z-depth = 1 is very close to the ground, z-depth = 5 is far away from the ground. 

Changing elevation

Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the default elevations components move to when not resting.

Upon user input, the element can increase its present elevation to 4dp.

Components

  • Selection controls
  • Radio buttons
  • Checkboxes
  • Switches



Tooltips

Timing

Display the tooltip for 1.5 seconds. If the user takes another action before that time ends, the tooltip will disappear.

Keep them short. The macOS Human Interface Guidelines4 suggest a maximum of 60-75 characters.

Minimum font size 12

Snackbars

In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen.

  • Single-line snackbar height: 48 dp tall
  • Minimum width: 288 dp
  • Maximum width: 568 dp
  • 2 dp rounded corner
  • Text: 14 px
  • Action button: 14 px, all-caps text

Text fields

Video Creation Guidelines

In addition to text, video has also challenged other mediums like images, infographics, and podcasts. Although video will never completely replace these mediums, it certainly will continue to expand as “the most popular content consumed globally.”

Music

Audio library of sound effects and royalty-free music and sound effects that you can download for your videos.

Tools

  • For heavy animation – After effects
  • For basic animation – Openshot Video editor, Windows movie maker, Final Cut Pro
  • For compressing videos – Handbrake

Transitions

Common transition you can use. 

  • Cut 
  • Dissolves 
  • Fade to/Fade from Black – 
  • Wipes
  • Whip Pan
  • Zoom

Source – https://biteable.com/blog/video-transitions-effects-examples/

Subtitles

Here’s how you determine your subtitles’ XR:

  • ​Open your project in the subtitling/authoring tool you’re using.
  • Measure your video preview’s height in pixels (use Command+Shift+4 on Mac, Cropper app on Windows).
  • Measure your subs’ x-height the same way.
  •  Use any calculator to determine the size: XR = x-height ÷ video height × 100
  • Voila! — you got your value, which in my example equals 16 ÷ 640 × 100 = 2.5%

General Guidelines for Subtitles

  • As a minimum there should be a prominent black stroke of 1 or 2 px
  • Each subtitle should be written in 1 or 2 lines
  • CPS (Character per second) should be under 20
  • CPL (Character per line) Try keeping CPL under 37 characters.
  • Use (INAUDIBLE) if there is an audio that you cannot understand (eg: because of an accent) Eg: (INAUDIBLE)
  • If the sound is inaudible because of another sound effect (noise, etc…), please write the source of thenoise: (CROWD MURMURING)

Facebook

1. Shared Post Video 

Guidelines

  • Recommended video dimensions is 1280 x 720 for Landscape and Portrait.
  • Minimum width is 600 pixels (length depends on aspect ratio) for Landscape and Portrait.
  • Landscape aspect ratio is 16:9.
  • Portrait aspect ratio is 9:16 (if video includes link, aspect ratio is 16:9).
  • Mobile renders both video types to aspect ratio 2:3.
  • Max file size is 4GB (1.75 GB maximum in Sprout).
  • Recommended video formats are .MP4 and .MOV.
  • Video length max is 120 minutes (45 minutes if uploading in Sprout).
  • Video max frames 30fps.

Character Limits

  • Maximum count: 2,200 characters.
  • Recommended: 90 characters (if link is used).
  • Headline max: 25 characters.
  • Link description max: 30 characters.

2. Facebook Video Ad Specs – Desktop News Feed Link Video (Landscape, Square & Right Column)

 

Video Guidelines

  • Recommended video dimensions is 1280 x 720 for Landscape and Square.
  • Minimum dimensions 600 x 315 (1.9:1 landscape) or 600 x 600 (square).
  • Landscape aspect ratio is 16:9.
  • Square aspect ratio is 1:1.
  • Max video file size is 4GB.
  • Recommended video formats are .MP4 and .MOV.
  • Video length max is 120 minutes.
  • Video max frames 30fps.

3. Facebook Carousel Video Ads

Video Guidelines

  • Recommended video dimensions is 1080 x 1080 for Landscape and Square.
  • Minimum dimensions 600 x 315 (1.9:1 landscape) or 600 x 600 (square).
  • Square aspect ratio is 1:1.
  • Max video file size is 2.3GB.
  • Recommended video formats are .MP4 and .MOV.
  • Video length max is 30 seconds or less (continuous looping is up to 90 seconds).
  • Video max frames 30fps.

4. Facebook Stories (Ads & Organic Posts)

  • Minimum dimensions 500 x 500
  • Aspect ratios: 1.91 to 9:16, with colored gradient bars rendered above and below videos under 9:16. The text field will also be placed under below videos smaller than this aspect ratio.
  • Max video file size is 4GB
  • Max video length is 15 seconds
  • Recommended video formats are .MP4 and .MOV.

Instagram

1. In Feed Video/video ad (Landscape, Square & Vertical)

  • Minimum resolution for landscape video is 600 x 315.
  • Minimum resolution for square video is 600 x 600.
  • Minimum resolution for vertical video is 600 x 750.
  • Landscape aspect ratio is 16:9.
  • Square aspect ratio is 1:1.
  • Vertical aspect ratio is 4:5.
  • Max file size for all formats is 4GB (*100MB maximum for Sprout Direct Publishing and 512MB maximum for Sprout Mobile App Flow Publishing).
  • Recommended video formats are .MP4 and .MOV.
  • Video length max is 60 seconds.
  • Video max frames 30fps.

2. Carousel Video Ad

  • Minimum resolution is 600 x 600.
  • Max resolution is 1080 x 1080.
  • Aspect ratio is 1:1.
  • Max file size is 4GB.
  • Recommended video formats are .MP4 and .MOV.
  • Video length max is 60 seconds.
  • Video max frames 30fps.

3. Instagram Stories (Ads & Organic Posts)

  • Recommended resolution is 1080 x 1920.
  • Minimum resolution is 600 x 1067.
  • Aspect ratio is 9:16.
  • Max file size is 4GB.
  • Recommended video formats are .MP4 and .MOV.
  • Video length max is 15 seconds.

4. IGTV

  • Recommended resolution is 1080 x 1920.
  • Minimum resolution is 720.
  • Aspect ratio is 9:16 (recommended), or 16:9 is also supported. In-feed previews show at 4:5.
  • Videos are minimum 1 minute and maximum 15 minutes long when uploading from mobile. You can upload a video up to 1 hour using desktop.
  • Max file size for videos less than 10 minutes is 650MB. For videos up to 60 minutes, it’s 3.6 GB
  • The required file format is MP4

Twitter

1. Twitter Landscape & Portrait Videos / Video Ad

Video Guidelines

  • Landscape recommended dimensions: 320 x 180 (256K bitrate), 640 x 360 (768K bitrate) and 1280 x 720 (2048K bitrate).
  • Portrait recommended dimensions: 240 x 240 (256K bitrate), 480 x 480 (768K bitrate) and 640 x 640 (1024K bitrate).
  • Minimum dimensions for both is 32 x 32.
  • Maximum dimensions for both is 1280 x 1024.
  • Aspect ratios are between 1:2.39 to 2.39:1.
  • Max file size is 512MB.
  • Recommended video formats are .MP4 for web and .MOV for mobile.
  • Video length max is 140 seconds.
  • Video max frames 40fps.

LinkedIn

1. Shared Video

Video Guidelines

  • Aspect ratio is 1:2.4 to 2.4:1.
  • Max file size is 5GB.
  • Accepted video formats are .ASF, .AVI, .FLV, .MOV, .MPEG-1, .MPEG-4, .MKV, and .WebM.
  • Video length minimum is 3 seconds, max is 10 minutes.
  • Video max frames 60fps.

2. Video Ads

Video Guidelines

  • Required dimensions are: 480 x 360 (360p), 640 x 360 (360p wide), 640 x 480 (480p), 960 x 720 (720p), 1280 x 720 (720p wide), 1440 x 1080 (1080p), 1920 x 1080 (1080p wide)
  • Maximum file size is 200 MB
  • The accepted video format is .MP4
  • Video length max is 30 minutes, although LinkedIn’s guidelines state most ads perform best at around 15 seconds
  • Frame rate must be less than 30fps.

Youtube

1. Shared Video

Video Guidelines

  • Aspect ratio is 1:2.4 to 2.4:1.
  • Max file size is 5GB.
  • Accepted video formats are .ASF, .AVI, .FLV, .MOV, .MPEG-1, .MPEG-4, .MKV, and .WebM.
  • Video length minimum is 3 seconds, max is 10 minutes.
  • Video max frames 60fps.

2. Video Ads

Video Guidelines

  • Required dimensions are: 480 x 360 (360p), 640 x 360 (360p wide), 640 x 480 (480p), 960 x 720 (720p), 1280 x 720 (720p wide), 1440 x 1080 (1080p), 1920 x 1080 (1080p wide)
  • Maximum file size is 200 MB
  • The accepted video format is .MP4
  • Video length max is 30 minutes, although LinkedIn’s guidelines state most ads perform best at around 15 seconds
  • Frame rate must be less than 30fps.

Branding and Logo Design Guidelines

The logo is the key identity of a brand that separates it from the other competitor in the market. The logo does not only help in identifying but also acts as a symbol of trust and represents the overall reputation built by the brand. Having a story in the logo is not important, creating a logo with high recall value should be priority one. Period.

Types of a logo

Wordmark

Wordmark, as the name suggests, is the name of the brand that is branded using colors, typeface, and grids. A logo can comprise of just a wordmark or is paired with a brandmark to form a complete logo.


Lettermark

Letter mark, also known as a monogram, pulls out the initials of the brand name and highlights it by making a logo out of it. This helps when the brand name is too long, so by shortening it up it becomes more memorable.

Brandmark

A brand mark doesn’t include a brand name, just the graphic which represents the brand. This kinda approach needs a lot of marketing efforts to make the brand known to be understood without a brand name next to it. This approach is usually taken by well-established companies.

Lock-up

A lock-up is a combination of a lettermark/wordmark and a brandmark. This is the most common approach as this logo can be used with or without a brandmark or likewise. The brandmark creates a memorable pattern in the viewer’s mind and the wordmark tells the name of the brand.

Process

Discovery

This session is all about gathering information about the brand from the key people representing the brand. Discovery includes learning why the company started, it’s goals, the audience they are catering to, brands they are competing with.

Here is a list of questions you can choose from to ask during the discovery session
(button) Discovery Questionaire

Research

After we receive answers from the client in the discovery session, the topic can be researched deeper considering the touchpoints mentioned by the client in the discovery regarding audience set, color preferences, the styling of the typeface in the logo, etc. During the research part few key pointers to keep in mind

  • Market research: Here you research the industry this brand falls under, how people are reacting, and to what type of visuals get more attention on the shelf if it is a product. If its a service can track the impressions. Their marketing efforts and the type of visuals they design. Customer research is conducted so as to identify customer segments, needs.
  • Competitive research: This type of research is used to learn in detail about competition. What logo type most of them use, the colors they have, this helps to define our brand to stand out in the market place with a fresh look.
  • Brand Research

Researching or using the material the brand already has to learn every inch of the product or to dive deeper in the services they provide so we can create visuals keeping in mind it features, user, and future expansion

Here’s an article that explains deeper how to conduct research.

Designing

This part starts after we have well researched and have all the questions in our head answered. Now we have a clear idea of how to position this brand. This stage is basically taking the text/info we received in the discovery and research stage and converting it into visuals. 

The ideas can be either discussed during the initial phase or take it one step ahead, develop it in B/W. This helps to see the logos in one solid color and can easily see the weight it holds.

Once we have a series of options filter the options by putting them in three rounds eliminating as many options in the first two rounds. Ideally, the final round should not have more than 5 options left, out of which only three can be developed further and shared with the client. Logo options can be filtered based on their legibility, scalability, recall value, design impact, and contrast. Providing more than 3 options will confuse the client, hence 3 options are not too less not too many.

Presentation

The concept note: Having a concept note alongside the logo option helps the client to understand the thought process better and gives the logo more value as the concept note shows the depth of research and thought process put to develop the option. The concept of the shapes in the logo can be written about, the typeface used and why it is the best fit, if there are colors then color impact and the reason behind making the color choices can be noted here.

Mockups: When the logo options are put in mockups, it bridges the gap between the designer’s imagination and the client’s imagination of how the logo will look in usage. It is ideal to have two mockups one to show the macro usage (eg- hoarding, signboard, reception wall) and one for micro usage (eg- Business Cards, button badge, laptop sticker) this shows the scalability and legibility of the logos, that it can be used on small print as well as big ones.

Deconstruction: If there are any morphing of shapes involved which maybe like a hidden meaning, to make the client understand it better, we can isolate the hidden shape to highlight it explain it to the client.

The client chooses one option from the three provided options and gives his/her inputs. If the inputs given align to the brand and have a strong reason, the changes can be added and a revised logo is shared.

Packaged logo

Once the logo has been approved, the assets are created to make it easier for the client to use it on collaterals. The packaged logo folder should have 2 primary folders, web and print.

Web folder: This folder should include logos in .png, .jpeg in RGB format to be used during web designing. Three logo options to be provided- Black, white, color. If the logo has a brand mark then a version of the brand mark to be included.

Print folder: This folder has assets to be used by the designer/ printer for printed collaterals like letterheads, business cards, etc. This folder should include PDF, Ai files, both converted to CMYK and font flattened so that the font doesn’t go missing when it is opened on a different system.

Brand Book: This is a user manual for the design team so that the usage of the logo is consistent across collaterals. The brand book should have a brief about the company, color palette with HEX codes, Typeface for headings, and body. Can also include a link to the repository where one can find installation files for the typeface. It should have do’s and don’t for the usage of the logo. It should also include iconography, this defines the style of icons that will be used also if any additional patterns or shapes used for the background to be mentioned so all the creatives have consistency and look like a part of one brand.

Here’s a brand book created by the Ghaas team for one of our clients.

Social Media Design Guidelines

Social media is a free advertising tool – by posting regularly valuable content with engaging graphics attached you can easily maximise the brand recognition and connect your target audience with your business and services. If your post image can make the users pause scrolling and pay attention to what you actually posted, you are on your way to gain more followers.

Dimensions

Facebook

Cover

16:9 aspect ratio

Profile picture

1:1 aspect ratio | 400 x 400px

Ad

Carousel

  • Maximum file size: 30MB
  • Minimum dimensions: 1080 x 1080px
  • Minimum cards 2, maximum 10

Images that consist of more than 20% text may experience reduced delivery.

Images
  • Dimension: 1080 x 1080px (square), 1200 x 627px (rectangle)

Images that consist of more than 20% text may experience reduced delivery.

Video
  • Recommended H.264 compression
  • Ratio: 9:16 to 16:9
  • Video File Size: 4GB Max
  • Video Length Minimum: 1 second
  • Video Length Maximum: 240 Minutes

Video thumbnail images that consist of more than 20% text may experience reduced delivery.

Post

Image
  • Verticle: 1080 x 1350px
  • Horizontal: 1200 x 628px
  • Square: 1080 x 1080px
Video
  • Recommended video size is 1280 x 720 landscape, 720 x 1280 portrait.
  • Minimum width 600 pixels for both landscape and portrait.
  • Landscape aspect ratio is 16:9.
  • Portrait aspect ratio is 9:16.
  • Max file size is 4GB.
  • Recommended video formats are .MP4 and .MOV.
  • Video length max is 120 minutes.
  • Video max frames 30fps.

Instagram

Profile Picture:

  • 1080 x 1080px

Post:

  • (Square) 1080 x 1080px
  • (Verticle) 1080 x 1350px

Ads:

Square
  • Minimum Resolution (600 x 500 pixels)
  • Maximum Resolution (1936 x 1936 pixels)
Landscape
  • Minimum Resolution (600 x 315 pixels)
  • Maximum Resolution (1936 x 1936 pixels)
Vertical
  • Minimum Resolution (600 x 750 pixels)
  • Maximum Resolution (1936 x 1936 pixels)
Video
  • File size can be up to 4 GB max.
  • Your video ads in Feed can be up to 120 seconds.
  • Square – 1:1 | Landscape – 1.91:1 | Vertical – 4:5

Linkedin

Profile Picture

  • Dimensions: 400 x 400 px

Cover Photo

  • Dimensions: 1584 x 396 px

Ads

  • Dimensions: 1200 x 627 px
  • Image upload maximum weight: 5MB
  • Image upload supported types: JPEG, GIF, PNG

Twitter

Profile Picture

  • 400 x 400px

Cover Picture

  • 1500 x 500px
  • Max size: 10 mb

Note: The cover space is also a perfect place to advertise events such as talks, webinars, new books, and many others.

Post

  • 1024 x 512 px
  • Max size: 5 mb
  • Media type: photos, GIFs, and videos
  • Cards Image: 800 x 320 px
  • Summary Card Image: 280 x 150 px
  • Video: 720 x 720 (square), 1280 x 720 (landscape), 720 x 1280 (portrait), Max length: 140 secs

Email Design Guidelines

“Email has an ability many channels don’t: creating valuable, personal touches—at scale.” – David Newman

Effective and engaging email design can directly pitch the brand to a consumer. 

Dimensions

Mailer width: 900px
Content width: 600px

Guidelines

Call To Action (CTA)

Bring CTAs early on in your emails. The majority of your subscribers only see the very top portion of their email messages thus making snap judgments about whether the content is worthy of their time. Early CTAs ensure that they make an informed decision. Your CTA should be visible at first glance and preferably on the left. Numerous eye-tracking studies have discerned that the average Web user’s reading habits skew more towards scanning (more on this shortly) rather than word-for-word reading. This means that stuff on the left gets more attention than the stuff on the right.

Big CTAs

Your CTAs should stand out. They should be powerful and should look clickable. Everything about your CTAs should make people want to click on them – to do something, see something, make something happen. Large CTAs not only required for visibility but also the responsiveness of your email design. Considering that mobile email consumption surpasses that of desktop use – you need to make sure those buttons are big enough for touchscreen use.

Repeat CTAs

Your email subscribers need a hassle-free experience. So, don’t make them scroll all the way to the top of your email just to take the action you’ve spent the last 600 pixels trying to persuade them to. Repeating your CTA at the end of your email can be super-effective at getting that elusive click.

Clean Design

Always do a cleaning pass on your email. After designing the first version, remove anything that keeps them lingering. Take off overly complex layouts, long copy paragraphs, and superfluous design elements.  

Left Right Rule

Try to keep the images on the left and the text on the right. Studies have shown that readers’ eyes are attracted more strongly to striking imagery over text – even if the text is important. With this in mind, put the image on the left, so it’s the first thing your readers see – once they’ve satisfied their visual curiosity, they can continue reading your oh-so-important headline.

Image optimization

Make sure you optimize your images for output – but don’t downgrade them so much that the compression introduces artifacts. Ideally, the image size should be under 100kb. 

Image selection

The brain processes images 60,000 times faster than it does text. So, using awesome images is great. However, to be more impactful, images with people in them.  Human figures are more relatable. 

Generic fonts

Web-embeddable fonts create problems in displaying, so stick with the default generic fonts

Eg- Arial, Verdana, Georgia. Ideally, the minimum font size should be 22pt for the body text.

Mailer length

The attention span of a reader going through a mail is very limited and a lengthy mailer can throw a reader off. Crisp and compact content and imagery can sustain the attention and get the message through. The ideal height of the mail should be 1200px to 1900px. 

Types of Layouts

Inverted Triangle

An effective way for structuring email elements (headers, imagery, buttons, etc) is placing them such that they work together to draw people in, deliver the key messages of your campaign and get them to click-through, like an inverted triangle. 

Waterfall 

Another layout style is the Waterfall layout wherein the elements guide the reader’s eye from left to right and slowly moving downwards like a pinball game. This helps in holding the attention of the reader and move it on the right side while moving down to keep the engagement while getting to the end of the mailer.

Waterfall Email Layout

Examples of some great email designs

Retargeting Ads Guidelines

“Design is intelligence made visible.”– Alina Wheeler

An effective design is crucial to the impact an ad makes. Retargeting ads are ads that brand triggers for customers that have visited their website or a target landing page. This means that these users have some interest in the brand and are likely to convert with the right messaging and persuasion. Thus, how well your adrolls are designed is crucial in converting these prospects. 

Components

A display ad has four main components:

  1. Your logo or company name
  2. A value proposition
  3. An image or visual representation of your service
  4. A CTA button
Key elements of retargeting ads

The Ideal Positioning

Naturally, your value proposition and CTA are most important. One company found that optimizing its landing page CTA led to a whopping 245% increase in leads. This goes to show just how critical your CTA is.

Thus, your value proposition and CTA should be the most visually distinct elements. You should place your logo on the sidelines, at one of the edges of your ad. Plus, you have to make sure your image doesn’t obscure any of the copy.

Size

Google offers various ad sizes from half-page ads to leaderboard to large mobile banners. The top three ad sizes in terms of performance are 300×250 (medium rectangle), 336×280 (large rectangle), and 728×90 (leaderboard). 

Color

There’s a lot to think about when it comes to picking a color palette for your display ad. The most important questions to ask yourself are:

  • Who is my campaign aimed at and which colors will appeal to them?
  • What do people expect from my brand and industry?

Go for a minimal color palette. You should pick two or three main colors to use in ads. If you use a rainbow of colors, the viewer won’t be able to focus on what’s important.

Typography

Typography helps you in directing the viewer to the information you want to see using the right order and scale.

There’s a limitless number of fonts out there that you can use. But that doesn’t mean you should be using a bunch of different fonts in your display ads. Like with color, if you do this, then the viewer won’t be able to focus. Ideally, stick to a maximum of two font types. 

Additionally, use sentence case, and avoid using “all caps.”

In Closing

  • Display your logo. Brand recognition is very important when creating a display ad. It is a way for viewers to easily know and connect with your brand. The logo should cover 10-15% of the total ad area.
  • Don’t cram too much in a small space. Most display ads have fixed sizes like 300×250, 728×90, or 300×600, so use the space wisely and restrict the number of design elements you use. 
  • Do make your call to action look like a button. Consumers will readily click on a button to fill out data, use this approach in your display ads.

Samples