Sbac digital guideline presentation
0 likes320 views
The document outlines the digital brand guidelines for South Bangla Agriculture and Commerce Bank Limited, aimed at providing a consistent visual identity across all digital platforms. It emphasizes user-centric design principles, the importance of content structure, and correct usage of brand assets. Additionally, it includes specifications for layout, branding applications, and a responsive grid system for web development.
![South Bangla Agriculture and Commerce Bank Limited 2018©
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](https://image.slidesharecdn.com/sbacdigitalguidelinepresentation-181210124441/85/Sbac-digital-guideline-presentation-6-320.jpg)
![South Bangla Agriculture and Commerce Bank Limited 2018©
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](https://image.slidesharecdn.com/sbacdigitalguidelinepresentation-181210124441/85/Sbac-digital-guideline-presentation-7-320.jpg)
![South Bangla Agriculture and Commerce Bank Limited 2018©
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]](https://image.slidesharecdn.com/sbacdigitalguidelinepresentation-181210124441/85/Sbac-digital-guideline-presentation-8-320.jpg)
![South Bangla Agriculture and Commerce Bank Limited 2018©
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]](https://image.slidesharecdn.com/sbacdigitalguidelinepresentation-181210124441/85/Sbac-digital-guideline-presentation-9-320.jpg)
Sbac digital guideline presentation
- 1. South Bangla Agriculture and Commerce Bank Limited 2018© Branding Activation Toolkit Identity 01 SBAC Digital Brand Guideline
- 2. South Bangla Agriculture and Commerce Bank Limited 2018© 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
- 3. South Bangla Agriculture and Commerce Bank Limited 2018© 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.
- 4. South Bangla Agriculture and Commerce Bank Limited 2018© 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 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 Welcome to sobCASH 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 Welcome to sobCASH 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 Welcome to sobCASH 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 Lorem Ipsum 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, SBAC Mobile App LEARN MORE OR CONTACT LOCATE BRANCH LOCATE ATM LOGIN Lorem Ipsum What is Lorem Ipsum? Apply Now Latest News CSR activity of SBAC Bank Limite Read More 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. 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. সুখী স�য় 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 সুখী স�য় gvÎ INTERNET BANKING MOBILE BANKING e-TRADE HOME ABOUT US PERSONAL BANKING SME BANKING CORPORATE BANKING AGRICULTURE BANKING LOCATE BRANCH LOCATE ATM LOGIN 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 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 Welcome to sobCASH 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 Welcome to sobCASH 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 Welcome to sobCASH 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 Lorem Ipsum 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, SBAC Mobile App LEARN MORE OR CONTACT LOCATE BRANCH LOCATE ATM LOGIN Lorem Ipsum What is Lorem Ipsum? Apply Now Latest News CSR activity of SBAC Bank Limite Read More 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. 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. সুখী স�য় 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 Homepage desktop basic content structure Level 2 navigation page desktop basic content structure 1 2 3 4 1 2 3 4 680px page fold সুখী স�য় gvÎ
- 5. South Bangla Agriculture and Commerce Bank Limited 2018© 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 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 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 Welcome to sobCASH 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 Welcome to sobCASH 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 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. Lorem Ipsum 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, SBAC Mobile App LEARN MORE OR CONTACT LOCATE BRANCH LOCATE ATM LOGIN Lorem Ipsum What is Lorem Ipsum? Apply Now Latest News CSR activity of SBAC Bank Limite Read More 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. 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. সুখী স�য় 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 সুখী স�য় gvÎ 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 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 Welcome to sobCASH 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 Welcome to sobCASH 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 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. Lorem Ipsum 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, SBAC Mobile App LEARN MORE OR CONTACT LOCATE BRANCH LOCATE ATM LOGIN Lorem Ipsum What is Lorem Ipsum? Apply Now Latest News CSR activity of SBAC Bank Limite Read More 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. 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. সুখী স�য় 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 সুখী স�য় gvÎ Lorem Ipsum 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, LEARN MORE OR CONTACT SBAC Mobile App READ MORE সুখী স�য় gvÎ সুখী স�য় gvÎ Latest News CSR activity of SBAC Bank Limite 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. Read More Lorem Ipsum What is Lorem Ipsum? 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 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. 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 LOCATE BRANCH LOCATE ATM LOGIN
- 6. South Bangla Agriculture and Commerce Bank Limited 2018© 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
- 7. South Bangla Agriculture and Commerce Bank Limited 2018© 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
- 8. South Bangla Agriculture and Commerce Bank Limited 2018© 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]
- 9. South Bangla Agriculture and Commerce Bank Limited 2018© 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]
- 10. South Bangla Agriculture and Commerce Bank Limited 2018© 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.
- 11. South Bangla Agriculture and Commerce Bank Limited 2018© 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 Leaderboard: 728 x 90 Banner: 468 x 60 Half-Page: 300 x 600 Portrait: 300 x 1050 Large Rectangle: 336 x 280 Large Mobile Banner: 320 x 100 Mobile Leaderboard: 320 x 50 Inline Rectangle: 300 x 250 Square: 250 x 250 Small Square: 200 x 200 Wide Skyscraper: 160 x 600 Common Formats Unsup- ported by Google Adwords Large Leaderboard: 728 x 210 Large Leaderboard: 720 x 300 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
- 12. South Bangla Agriculture and Commerce Bank Limited 2018© 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
- 13. South Bangla Agriculture and Commerce Bank Limited 2018© Digital Brand Guideline Online Advertising Formats Structures 13 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 10 px Padding x 4 20 px Padding x 4 20pxPaddingx4 20pxPaddingx4 YOUR HEAD COPY 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. "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..."
- 14. South Bangla Agriculture and Commerce Bank Limited 2018© Digital Brand Guideline Online Advertising Formats Structures 14 Supported Google Adwords 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
- 15. South Bangla Agriculture and Commerce Bank Limited 2018© Digital Brand Guideline Online Advertising Formats Structures 15 Supported Google Adwords 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
- 16. South Bangla Agriculture and Commerce Bank Limited 2018© 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
- 17. South Bangla Agriculture and Commerce Bank Limited 2018© Digital Brand Guideline Online Advertising Formats Structures 16 Common Formats Unsupported by Google Adwords 1. Large Leaderboard: 728 x 210 2. Large Leaderboard: 720 x 300 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
- 18. South Bangla Agriculture and Commerce Bank Limited 2018© 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
- 19. South Bangla Agriculture and Commerce Bank Limited 2018© Digital Brand Guideline Social Platfrom Template 19 Facebook guidelines Check for the latest online guidelines for cover and profile 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
- 20. 01 South Bangla Agriculture and Commerce Bank Limited 2018© 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
- 21. South Bangla Agriculture and Commerce Bank Limited 2018© 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
- 22. South Bangla Agriculture and Commerce Bank Limited 2018© Digital Brand Guideline Social Platfrom Template 22 FACE BOOK POST DESIGN 1. Link / Call To Action 2. Photo 3. Like Ad 4. Video 5.Carousel
- 23. South Bangla Agriculture and Commerce Bank Limited 2018© Digital Brand Guideline Social Platfrom Template 23 Twitter Image & Background
- 24. South Bangla Agriculture and Commerce Bank Limited 2018© 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 fit 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
- 25. South Bangla Agriculture and Commerce Bank Limited 2018© 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.
- 26. South Bangla Agriculture and Commerce Bank Limited 2018© 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.