Sbac digital guideline presentation

South Bangla Agriculture and Commerce Bank Limited 2018©
Branding Activation Toolkit Identity 01
SBAC
Digital Brand
Guideline

Digital Brand Guideline Content 02
Digital Brand Guidelines
Contents
Introduction
How to use these guidelines
Foundation
Basic content structure
Vertical grid
Breakpoints
Columns and content blocks
Spacing
Horizontal grid
Building blocks
Partner Logo use
Banner Branding & Google Ads Sample
Pop-Up Window / Modal
Iconography
Social
Social media
Facebook
Twitter

Digital Brand Guideline Introduction 03
Digital Brand Guidelines
Introduction
These guidelines have been prepared to
assist with the rebrand of all digital touch
points for SBAC BANK. Best practice
user centric and responsive design
theory has been considered throughout
to create a contemporary and functional
visual identity for the SBAC BANK.
The correct implementation of these
guidelines is essential for the
performance of SBAC BANK’s digital
assets and overall consistency.
How to use this document
The initial sections offer prescriptive
instructions on the foundations and
building blocks required to change
specific elements. Later sections guide
with the implementation of the
brand by channel and purpose.
Any queries or assistance related in the
implementation of new brand assets
should be directed to the Office of
Marketing
and Communication:
Note: This document is a guide only. Colours of the document
may vary depending on viewing/printing conditions. Do not
extract any logos, images or templates directly from this
document. Always use supplied artwork, contained within the
CD. Please ensure that branding applications are in
accordance with the guidelines stipulated above.

Digital Brand Guideline Basic content structure 04
Basic content structure
Websites created for the SBAC BANK
should consist of a hierarchal content
structure. This ensures an e ective user
experience with important information kept
as high as possible and still allowing
essential supplementary content to be
accessible as the user scrolls the page.
A signi cant majority of users don’t scroll
down to see the whole page when visiting
sites (especially returning visitors), so critical
content (i.e. call to actions, site search)
should always be ‘above the fold’ (visible on
page load).
Critical page content should be in the top
680px of the site.
The basic content structure should consist
of 4 stages:
1. Navigation
2. Promotional (A feature)
3. Content
4. Footer
READ MORE
READ MORE
Welcome to
SBAC CARDS
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
Apply Now
Priority
Banking
Apply Now
Welcome to
sobCASH
Apply Now
Welcome to
sobCASH
Apply Now
Welcome to
sobCASH
Apply Now
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
SBAC
Mobile
App
LEARN MORE OR CONTACT
LOCATE BRANCH LOCATE ATM LOGIN
Lorem Ipsum
Apply Now
Latest News
CSR activity of
SBAC Bank
Limite
Read More
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
সুখী স�য় gvÎ
IMPORTANT NOTES: FAKE NOTE DETECTION INSTRUCTION
COPYRIGHT © 2018. SBAC BANK LIMITED, DHAKA, BANGLADESH. ALL RIGHTS RESERVED.
POWERED BY INFORMATION TECHNOLOGY DIVISION.
DISCLOSURES UNDER RISK BASED CAPITAL | DISCLOSURE ON GREEN BANKING
SOC |FINANCIAL HIGHLIGHTS|CORRESPONDENT BANKING CORNER|CRR
CODE OF CONDUCT (BB) | CODE OF CONDUCT (SBAC) | SANCHAYAPATRA FORM
Priority
Banking
INTERNET BANKING
MOBILE BANKING
e-TRADE
HOME
ABOUT US
PERSONAL BANKING
SME BANKING
CORPORATE BANKING
AGRICULTURE BANKING
READ MORE
READ MORE
Welcome to
SBAC CARDS
Apply Now
Priority
Banking
Apply Now
Welcome to
sobCASH
Apply Now
Welcome to
sobCASH
Apply Now
Welcome to
sobCASH
Apply Now
Lorem Ipsum
SBAC
Mobile
App
Lorem Ipsum
Apply Now
Latest News
CSR activity of
SBAC Bank
Limite
Read More
Priority
Banking
Homepage desktop basic content structure Level 2 navigation page desktop basic content structure
1
2
3
4
1
2
3
4
680px
page fold

Digital Brand Guideline Vertical grid 05
Vertical grid
The gird
For a contemporary and functional
experience across all new
websites, a responsive, mobile rst
uid grid system should be
implemented. This should appropri-
ately scale up to 12 columns as the
device or viewport size increases.
This allows a consistent experience
for
all screen sizes and gives an
accessible, industry standard
framework that will futureproof the
build of all new websites for the
SBAC BANK.
To maintain website proportions,
the grid is set to a max content
width of 1140px with 40px (20px +
20px) column padding for desktop
and 15px column padding for
mobile viewports (<767px).
Desktop Grid Tab Grid Mobile Grid
READ MORE
READ MORE
Welcome to
SBAC CARDS
Apply Now
Priority
Banking
Apply Now
Welcome to
sobCASH
Apply Now
Welcome to
sobCASH
Apply Now
Lorem Ipsum
SBAC
Mobile
App
Lorem Ipsum
Apply Now
Latest News
CSR activity of
SBAC Bank
Limite
Read More
Priority
Banking
READ MORE
READ MORE
Welcome to
SBAC CARDS
Apply Now
Priority
Banking
Apply Now
Welcome to
sobCASH
Apply Now
Welcome to
sobCASH
Apply Now
Lorem Ipsum
SBAC
Mobile
App
Lorem Ipsum
Apply Now
Latest News
CSR activity of
SBAC Bank
Limite
Read More
the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing
Priority
Banking
Lorem Ipsum
SBAC
Mobile
App
READ MORE
Latest News
CSR activity of
SBAC Bank
Limite
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text
ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a
type specimen book. It has survived not only five
centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop
publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
Read More
Lorem Ipsum
printing and typesetting industry. Lorem
Ipsum has been the industry's standard
dummy text ever since the 1500s, when an
unknown printer took a galley of type and
scrambled it to make a type specimen book.
It has survived not only five centuries, but
also the leap into electronic typesetting,
remaining essentially unchanged. It was
popularised in the 1960s with the release of
Apply Now
Welcome to
SBAC CARDS
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text
ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a
type specimen book. It has survived not only five
centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of
DISCLOSURES UNDER RISK BASED CAPITAL |
DISCLOSURE ON GREEN BANKING
SOC |FINANCIAL HIGHLIGHTS|CORRESPON-
DENT BANKING CORNER|CRR
CODE OF CONDUCT (BB) | CODE OF CONDUCT
(SBAC) | SANCHAYAPATRA FORM
IMPORTANT NOTES: FAKE NOTE DETECTION
INSTRUCTION
COPYRIGHT © 2018. SBAC BANK LIMITED,
DHAKA, BANGLADESH. ALL RIGHTS
Apply Now

Digital Brand Guideline Breakpoints 06
Breakpoints
The grid has ve de ned breakpoints that allow
a uid transition between screen resolutions.
When creating wireframes and designs for
future sites, create 3 versions
- Mobile (BP1), tablet portrait (BP3) & desktop
(BP5).
Designing to these breakpoints allows e ective
visualisation across a broad range of devices.
BP2 and BP4 can be used for optional
adjustments in the front end build stage to tidy
unforeseen anomalies in the designs.
IMPORTANT:
Designing a site on a 12 column grid does not
mean there are 12 available content columns
for use. See section 1.3 for details on how
content can be used with the grid.
BP1 - Smartphone 320 - 599px
10px column padding.
12 columns forming 2 primary columns.
BP2 - Small Tablet Portrait 600 - 767px
20px column padding.
12 columns forming 2 primary columns.
BP3 - Tablet Portrait /
Small Tablet Landscape 768 - 977px 20px
column padding,
forming 12 primary columns.
BP4 - Small Desktop /
Tablet Landscape 978 - 1139px 20px column
padding,
forming 12 primary columns.
BP5 - Large Desktop + / Tablet Landscape
+ 1140px + 20px column padding, forming 12
primary columns.
1140px
768px
Minimum 320px
[640px retina]
20px
10px
[20px retina]
20px
[40px retina]
20px 20px 40px
Desktop BP5
Tablet BP3
Mobile BP1
20px 20px 20px 40px

Digital Brand Guideline Columns and content blocks 07
Columns and content blocks
Desktop columns and content blocks
The 12 columns can be divided into content
blocks. The grid allows for a diverse array of
content blocks to keep layouts and templates
visually engaging.
All 12 columns sit ush within the grid with 20px
inner padding (desktop).
Each content block is separated by
40px (20+20px) column padding.
This ensures all content has consistent alignment.
Tablet and small desktop columns and content
blocks
Due to the lower resolution of tablets, the amount
of available columns is reduced. This should be
considered when designing new assets to keep
important content as high on the page as possible.
Mobile columns and content blocks
The 2 columns within the mobile grid create only
two content blocks. However, in most situations a
single content column should be used.
1140pxVariable Variable
Minimum 320px
[640px retina]
Minimum 768px
[1536px retina]
Desktop columns and content blocks
Mobile grid and columns Tablet grid and columns
12 column
12 column
6 column
4 column
3 column 3 column 3 column 3 column
4 column 4 column
6 column
2 column
1 column 1 column
6 column 6 column
4 column 4 column 4 column
3 column 3 column 3 column 3 column
2column 2column 2column 2column 2column 2column
2column
2column
7 column
10 column
9 column
3 column
3 column
20px
10px
[20px retina]
20px40px
20px
[40px retina]
55px 55px 55px 55px 55px 55px 55px 55px 55px 55px 55px 55px
40px 40px 40px 40px 40px 40px 40px 40px 40px 40px

Digital Brand Guideline Spacing 08
Spacing
Spacing
All spacing throughout all layouts is based
on natural incremental divisions of the
40px gutter.
For example to maintain a strong visual
aesthetic use spacing of either:
40 pixels
20 pixels
10 pixels
5 pixels
Example desktop content layout
1. Margin: 20px
2. Column padding: 40px
3. Content block spacing: 40px and 20px
4. Content padding: 20px
Example mobile content layout
5. Margin: 10px
6. Column padding: 20px
7. Content block spacing: 10px 8.
Content padding: 20px
1140px
Example desktop content layout Example mobile content layout
20px 20px
20px20px40px
20px
[40pxretina]
40px 40px 20px
[40px retina]
10px
[20px retina]
20px 10px
[20px retina]
1 1
56
7
4
3
3
2
4
8
2
Minimum 320px
[640px retina]

Digital Brand Guideline Horizontal grid 09
Horizontal grid
Horizontal grid
The horizontal grid is 10 pixels.
To maintain a consistent visual ow through out all
pages align the baseline of visual elements to the
horizontal grid.
When using the horizontal gird, allow elements to
have su cient margin and/ or padding so site
pages avoid looking cramped. See section 1.4 for
more guidance on spacing
Desktop horizontal grid
Mobile horizontal grid Tablet horizontal grid
10px
10px
[20pxretina]

Digital Brand Guideline Co-branding and partner use logo 10
Co-branding & Partner Logo
Partner lockup
The following rules are a guide to harmonis-
ing the relationship between the SBAC
Brand Mark and other potential partners,
supporters or related organisations.
note:
For digital, the horizontal logo should be
used primarily. There are cases where the
vertical stacked logo can be used, but
marketing approval must be given.
The rules for scale and position are based
on a proportionate scaling approach. The
scale of this proportion is de ned by the
overall height and width of the Brand Mark
and the Shield width, as a spacing guide. In
practice, this means that partnering logos
do not exceed the width or height of the
Masterbrand.

Digital Brand Guideline Online Banner Branding Advertising Formats Structures 11
Ad formats standards
are a necessity when it comes to online
advertising. These standards enable
designers to standardize their templates
when creating websites that will display
paid advertisements or when creating ads.
Google Adwords is now the authority on ad
placement and dictates the industry. All
these formats provided below, are
standards tested across the Net. All sizes
are in pixels (width X height).
Top Performing Google
Adwords Formats
Leaderboard: 728 x 90
Half-Page: 300 x 600
Large Rectangle: 336 x 280
Large Mobile Banner: 320 x 100
Inline Rectangle: 300 x 250
Supported Google Adwords
Formats
Large Leaderboard: 970 x 90
Billboard: 970 x 250
Banner: 468 x 60
Portrait: 300 x 1050
Mobile Leaderboard: 320 x 50
Square: 250 x 250
Small Square: 200 x 200
Wide Skyscraper: 160 x 600
Common Formats Unsup-
ported by Google Adwords
Half Page Banner: 300 x 600
Fat Skyscraper: 240 x 400
Small Banner: 230 x 33
Button: 120 x 30
Button: 120 x 90
Button: 120 x 60
Button: 88 x 31
Blog Button: 94 x 15
Pop-up Standard Formats
Large Pop-up: 550 x 480
Pop-up: 500 x 350
Vertical Banner: 120 x 240
Half Banner: 234 x 60
Small Rectangle: 180 x 150
Button: 125 x 125

Digital Brand Guideline Online Advertising Formats Structures 12
Top Performing Google Adwords
Formats
1. Leaderboard: 728 x 90
2. Half-Page: 300 x 600
3. Large Rectangle: 336 x 280
4. Large Mobile Banner: 320 x 100
5. Inline Rectangle: 300 x 250
1
2
3
4
5

Top Performing Google Adwords
Formats
10 px Padding x 4
20 px Padding x 4
20pxPaddingx4
20pxPaddingx4
YOUR HEAD COPY
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing software like
"Neque porro quisquam est qui dolorem
ipsum quia dolor sit amet, consectetur,
adipisci velit..."
"Neque porro quisquam est
qui dolorem ipsum quia dolor
"Neque porro quisquam est qui dolorem
ipsum quia dolor sit amet, consectetur,
adipisci velit..."

Formats
1. Large Leaderboard: 970 x 90
2. Billboard: 970 x 250
3. Leaderboard: 728 x 90
4. Banner: 468 x 60
5. Half-Page: 300 x 600
15. Vertical Banner: 120 x 240
16. Half Banner: 234 x 60
17. Small Rectangle: 180 x 150
18. Button: 125 x 125
1
2
3
4
17
18
15
5
16

Formats
6. Portrait: 300 x 1050
7. Large Rectangle: 336 x 280
8. Large Mobile Banner: 320 x 100
9. Mobile Leaderboard: 320 x 50
10. Inline Rectangle: 300 x 250
11. Square: 250 x 250
12. Small Square: 200 x 200
13. Wide Skyscraper: 160 x 600
14. Skyscraper: 120 x 600
10
11
12
7
8
9
6
13 14
TO PROVIDE
A CUSTOMER
FRIENDLY
ENVIRONMENT
TO PROVIDE
A CUSTOMER
FRIENDLY
ENVIRONMENT

Digital Brand Guideline Online Pop-Up Banners 18
Pop-up Window or
Promotional Pop-ups
Pop-up Window
A modal overlay is a content area that sits
in front of the content beneath it. When the
modal overlay is active, the content under
the overlay cannot be interacted with until
the overlay is dismissed by the close button
or clicking on the semi-opaque overlay.
Modal use
- As a container for a form
- To display supplementary content such as
competition terms or disclaimer details.
1. Desktop overlay
Colour: #000000 80% transparency Note:
There is no transparent overlay on mobile.
2. Modal panel
On desktop the modal has a solid colour,
no drop shadow and no outline. The width
of the modal for desktop is recommeded to
be 8 columns. However if this size is too
wide or small it can t ush to either 4, 6 or
10 columns wide.
On mobile the modal is full screen ommiting
the need for a transparent overlay.
Desktop modal
1
2
2
APPLY NOW

Common Formats Unsupported
by Google Adwords
3. Half Page Banner: 300 x 600
4. Fat Skyscraper: 240 x 400
5. Small Banner: 230 x 33
6. Button: 120 x 30
7. Button: 120 x 90
8. Button: 120 x 60
9. Button: 88 x 31
10. Blog Button: 94 x 15
1
2
3 4
5 6
7
8
9
10

Digital Brand Guideline Online Pop-Up Banners 17
Pop-up Standard Formats
1. Large Pop-up: 550 x 480
2. Pop-up: 500 x 350
21
APPLY NOW

Digital Brand Guideline Social Platfrom Template 19
Facebook guidelines
Check for the latest online
guidelines for cover and
proﬁle photo:
https://www.facebook.com/
help/125379114252045
820 x 249 Group Page
851 x 315 Personal Page 820 x 312 Business Page
826 x 294 Event Page

01
Digital Brand Guideline Social Platfrom Template
MOBILE AREA
DESKTOP AREA
315px
851 px
640 px
MOBILE AREA
DESKTOP AREA
315px
851 px
640 px
20

Digital Brand Guideline Social Platfrom Template
Facebook guidelines
1. Safe area
Focus element of the cover photo
needs to be in this area, not behind
the pro le picture nor the copy and call
to actions at the bottom.
Don’t use text in cover photo. Only
photos, studio shots or lifestyle shots.
Pro le photo should feature color
relevant to the program that it
represents, however if there are no de
ned colour, use a white background
with the Crimson shield.
2. S MARK
uses Crimson colour and is 80px
width.
3. Divider
1px thick, #d4cec9.
4. Program name
Chronicle G1 Roman,
minimum font size: 13px,
add an extra line if doesn’t t and
center the logo vertically.
21
MAin Busines Page
1
2
3
6
MAIN SBAC BANK
PROFILE PICTURE
OTHER FACEBOK SITES
DEFAULT COLOUR

FACE BOOK POST DESIGN
1. Link / Call To Action
2. Photo
3. Like Ad
4. Video
5.Carousel

Twitter
Image & Background

Digital Brand Guideline Iconography 24
Iconography
Icons are used in the rebrand to add an alternative
visual language to content heavy areas and act as
navigation points into deeper areas of websites.
Good judgment should be applied when choosing
and designing icons to use, consistency of tone
and style are mandatory.
All icons are predominantly solid in shape,
simple forms with rounded corners and have a
consistent stroke weighting. They should ﬁt within
a 64x64px square area to maintain proportions
across the family.
Colour use
Any primary colour can be used for icons as well
as tints of 50%. Highlight colours can be used,
but only if the icons are acting as buttons and are
linked.
Note: Icons must be approved by marketing prior
to use. This is to maintain consistency across the
SBAC’s family of sites.
Icon 64x64 pixel grid
64px
64px
Example icons

Digital Brand Guideline Icons in use 25
Appreved Balance Bank Car ATM Cash Register Cash
Check Credit-card Currency Diamond Finances Gold Ingots Growth
Insurance Investment Loan Mobilephone Money Money Mortgage
Payment Bank Point of service Presentation Safebox Saving Stopwatch
Wallet Wealth EROR EROR EROR EROR EROR
Financial Icon
These guidelines have been prepared to assist with
the rebrand of all digital touch points for SBAC BANK
Note: This document is a guide only. Colours of the document may vary
depending on viewing/printing conditions. Do not extract any logos,
images or templates directly from this document. Always use supplied
artwork, contained within the CD. Please ensure that branding applications
are in accordance with the guidelines stipulated above.

Digital Brand Guideline Icons in use 26
Bank Certificate Brokerage Profit Capital Pie Chart Diploma
Currency Graph Manager Investment Goverment Graphic Income
Investment Investment Investment Learning Currency Protection Pyramid
Return Retirement Account Money Bag Investment Conference Taxation
Laptop Wealth EROR EROR EROR EROR EROR
Saving & Investment Icon
These guidelines have been prepared to assist with
the rebrand of all digital touch points for SBAC BANK
Note: This document is a guide only. Colours of the document may vary
depending on viewing/printing conditions. Do not extract any logos,
images or templates directly from this document. Always use supplied
artwork, contained within the CD. Please ensure that branding applications
are in accordance with the guidelines stipulated above.

Sbac digital guideline presentation

Recommended

Recommended

More Related Content

Similar to Sbac digital guideline presentation

Similar to Sbac digital guideline presentation (20)

More from zoheb hossain mollick

More from zoheb hossain mollick (14)

Recently uploaded

Recently uploaded (20)

Sbac digital guideline presentation