Ai Architects - Brandbook

BRAND MANUAL THEME BRANDING GUIDELINES AND MANUAL TEMPLATE A visual identity guide for an architectural practice

Creation Date:

February 2020 Issue 01.1

On behalf of AI Airchitects Ltd Brand Manual / Theme Branding Guidelines and Manual Template A visual identity guide for an architectural practice February 2020 | Issue 01.1

Table of Contents 0.0 INTRO

5.0 ICON SET

0.1 Corporate Philosophy 0.2 Mood-board & Inspiration

6.0 STATIONERY 1.0 LOGOTYPE 1.1 Proportions & Computation 1.2 Construction & Clear-space 1.3 Logo Placement

2.0 TYPOGRAPHY 2.1 Corporate Fonts 2.2 Typo & Text Hierarchy

3.0 COLOR SYSTEM 3.1 Color Scheme

6.1 Business Card 6.2 Cover Pages / Letter 6.3 Notepads (optional) 6.4 Envelopes 6.5 Stationery Visuals 6.6 Presentation Templates

7.0 APPLICATIONS 7.1 Signage 7.2 Branded Merchandise (Optional)

8.0 WEB-SITE 8.1 ‘Coming Soon’ & Email Signature 8.2 Web-page Guidelines

4.0 GRID SYSTEM 4.1 Web Grid System 4.2 Stationery Grid System

0.0INTRODUCTION

Corporate philosophy Brand ID makes possible to coordinate the mantra with the brand language that follows, whether it occurs in the form of visual codes. The result is an unforgettable message about how the practice differentiates itself from competitors.

Brand Guidelines help make the connection between the product, the corporate identity, the logo and the brand promise, so that all of these elements will connect in a coherent way that resonates with both prospective and existing customers. The brand guidelines also contain explicit instructions of how all the tangible elements of a brand, business cards, promotion, signage, should be used in communication.

On a more practical level, the Brand Guide can also be used as an outline for budgeting. Budgeting can be broken down into several parts, including the cost of reworking stationery and signage, and the designing and printing of support material.

The budget should include the cost of advertising, PR and the possible expense of using a branding agency to manage the brand for you.

The brand guide functions as outline for both designers and marketers, helping them to work together and maintain the integrity of the brand across a variety of platforms. It helps ensure that every communication with customers is consistent with the brand values, and that all advertisements and sales literature will resonate both visually and emotionally consistent with what you provide to customers.

The Brand Guidelines have been produced to help establish and maintain the value of the AI Architects brand. This Brand is important and we want to do out outmost to protect is and ensure it conveys the values of our business at all times. Ultimately, the brand comes from the company as a whole, using the aforementioned principals laid out in the brand guide.

At the most basic level, the brand guide must be based on an assessment of a company’s core competencies. Make sure there is no conflict between these areas of competence, and concentrate only on the ones that overlap, for these will form the basis of your brand and the foundation for its identity. Keep in mind that stretching a brand too far can damage it, both internally and in the eyes of customers.

By providing you with this guidance and help in how to present AI Architects logo in its various versions, we are ensuring consistency in how the brand is presented to the public by us, our business partners and any other third parties given permission to use the brand. If you require further information on how to apply AI Architects logo in a given situation not covered by these guidelines, or need it in a specific format not supplied, please contact: Nicosia Center

.

Park House

Armenias

ou Ave

Accessing From Kennedy or Ifigenias

Str.

Lemes

An integral part of all this is the brand personality, which asks the question “who or what is this brand?” Once this personality has been identified, expanded and crystallized, it can be stripped back down to a brand mantra, which is a short, crisp, clean way of expressing what the brand represents and what’s unique about it. This mantra must be memorable. Ideally, it consists of an emotional or descriptor modifier, followed by the brand function.

At its core, though, the Brand Identity guide should also contain and elaborate on several fundamental rules for running a brand. It should state what your business achieves for your customers, but you should always remember that the Brand should be focused on customer needs, not on the values of individual customers or even customers as a whole.

Visit us: Park House 20, Evelthontos str.

Strovolos, Nicosia Call us: +357 2225 2255 Email us: info@aiarchitects.eu

City Entrance (from Larnaca / Limassol)

0.1

Mood-board & Inspiration The early involvement in the process and the good co-operation between the client and the designer, can make huge difference in the outcome of design process and its applications ‘AI Architects’ Corporate ID concept was based on two principles: first of all it should reflect an elegant and contemporary look and subconsciously specify the provided services, and secondly, to be familiar with the practice’s object of work, to feel earthy and natural through it’s form and the selected color scheme.

Earth Tones & Textures

0.2

Conceptual stationery mock-ups

0.2

1.0LOGOTYPE SHORT HISTORY of LOGO DEVELOPMENT Initial

Removal of Underline

Adjusted Letter Spacing (Kerning) + S Updated Logo

Use of Existing Fonts (CF Helvetica Light and/or Arial Rounded)

Alternative

Proportions & Computation Logo is the key building block of your identity, the primary visual element that identifies you.

The signature is a combination of the owner’s initials and the practice name / description these two have a fixed relationship that should never be changed in any way.

The AI Architects’ Master-brand or Corporate Logo comprises two elements, the logo mark and the logo type. No “Sub-description” has been introduced on this version to keep the Corporate Logo clean and readable.

The Logo has an obvious and specific relationship with the AI Architects’ name.

The Corporate Logo has been carefully designed with a classic, elegant and yet refined, highly legible style, which has been further enhanced by the use of the upper case letters.

Logo Type Logo Mark

The corporate logo is presented through the use of color as well as shape and form. The new primary corporate colors are dark red, olive green and dark grey. It is a fresh and appealing blend of colors chosen for their strong combination: modern - classic - timeless. The Colors have been selected according to international standards, as shown on section 3.0 and are easily implemented.

Logotype Alternatives (to be used as “teasers” and in accompany with the wide logo)

10

The main logo is a dark logo used on white or light beige background.

For darker background you will find alternatives following in this manual.

100

1.1

Construction & Clear-space To preserve ‘AI Architects’ integrity, always maintain a minimum clear space around the logo.

This clear space isolates the logo from competing other graphic elements, such as photography or background patterns, other information, that may divert attention.

The minimum clear space for “AI Architects” logo is defined as the height of the ‘A’ letter in the wordmark, as showed below.

USAGE - DO / DON’T

CLEAR SPACE

1.2

1

Keep original proportions.

2

Use original logo files.

3

Use the right format / analysis.

4

Use actual sizes as provided.

5

Use logo with proposed text.

6

Use the acronym as text.

7

Use the ‘A’ letter of the logo for decorative or promotional purposes. It is always suggested to be in accompany with the wide logotype, in order to be recognizable (eg. signage & stationery).

1

2

6

AI Architects practice is...

7

3

4

5

7

Logo Incorrect Use ‘AI Architects’ logo was created to make a statement, graphically and aesthetically. In order to be always recognizable and aligned with the Brand Guidelines, the following rules must be followed.

Do not alter the ‘AI Architects’ logo in any way. Do not animate, color, rotate, skew, or apply effects to the logo. Do not separate the elements. Never attempt to create the logo yourself, change the font, or alter the size or proportions. Do not attempt to stage the logo yourself on a tag or alter the space between the logo and the text description.

1

Do not stretch or condense.

2

Don’t make personal variations of logo.

3

Don’t use a web download file.

4

Don’t over shrink logo.

5

Don’t add / remove graphic on designed logos.

It creates a new mark.

6

Don’t omit the full spelling, since most people may not know what acronym means.

7

Do not use logo as text.

8

Don’t apply any effects or rotate the logo to run vertically. Also do not skew or attempt to make the logo 3-dimensional logo in any way.

1

2

4

5

6

Design & Construction

7

Since 2007

practice designed more than...

8

Also note: // Don’t display the logo in a way that suggests that ‘AI Architects’ name is part of a third party’s name or product.

Please note: Use of ‘AI Architects’ logo by a third party requires a license agreement. // Don’t combine the logo with any other elements - such as logos, words, graphics, photos, slogans or symbols that might seem to create a hybrid mark.

1.2

Color - Do / Don’t Use COLOR - DO / DON’T 1

Do use the selected color palette.

2

In dark backgrounds use the chosen second color that keeps the mark and the text visible.

3

Use the grey-scale version only when the use of color is not possible.

1

Do not use two or more primary colors.

2

Do not use a color that makes te text or the entire logo to disappear into the background.

1

2

3

1

3

2

4

3 Don’t alter the transparency of the logo.

4

Do not outline the logo.

It creates a new mark.

2

1.2

Logo Placement - Do / Don’t Use PLACEMENT - DO / DON’T 1

Include the logo or the acronym “above the fold” on all web pages and printed material, in the same visual place / field.

2

Give to the logo at least ½ of the box width on either side and at least 1/4 box width above or below the edge of the page or other graphic material.

3

Keep a clear distance between the logo and the search bar or other information.

1

Do not burry the logo in the footer or on the back cover of a print piece.

2

Do not align the logo with the edge of the page.

Follow space requirements.

3

Don’t place search bar or other information too close to website’s logo, that will make the search process unclear and confusing.

3 1

2

3

2

3

|

1

1

2

Go

3

|

Go

1.3

2.0TYPOGRAPHY

Corporate Fonts Typography plays an important role in communicating an overall tone and quality. Careful use of typography reinforces brand’s personality and ensures clarity and harmony in all AI Architects communications.

#1 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h ij k l m n o p q r s t u v w x y z 1234567890 - + < > ’ ?!@$ *

Figures & Characters

CF Helvetica Family - A clean and thin font that it helps inject energy and enthusiasm into the entire communications, as the primary typeface.

#2

ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890-+<>’ ?!@#$%^&*( _ )

Figures & Characters

Open Sans - a primary corporate typeface, used for architectural drawings and visuals / presentations.

#3

ABCDEFGHIJKLMNOPQRSTUVWXYZ a b c d e f g h ij k l m n o p q r s t u v w x y z 1234567890 - + < > ’ ?!@$ %^&*( _ )

Figures & Characters

PF Isotext - a secondary corporate typeface, used specifically for Autocad files / architectural drawings.

2.1

Typo & Text Hierarchy Typographic hierarchy is another form of visual hierarchy, a sub-hierarchy per se in an overall design project.

Typographic hierarchy presents lettering so that the most important words are displayed with the most impact, so users can scan for key information - it creates contrast between elements. There is a variety of ways you can create a sense of hierarchy. In this section someone can find the most common technics for AI Architects layouts.

2.2

Text, Characters & Figures

To be Avoided

Text, Characters & Figures

Copy-text

Text & Characters

Headlines Copy-text

Text & Figures

Sub-lines Sections

Text

Big Headlines & Title

Text & Characters

Sequencer and Title for Marketing

CF Helvetica Thin Lower Case / 50pt Type CF Helvetica Light Lower Case / 10pt Type Open Sans Lower Case / 6pt Type

(sample text) !?% (Sample text) !?%

Sample text 12345

Open Sans Lower Case / 10pt Type

Sample text 12345

Open Sans Lower Case / 12pt Type

(Sample text) !?%

Open Sans Lower Case / 15pt Type

Sample text 12345

CF Helvetica Light Upper Case / 30pt Type

SAMPLE TEXT (?)

CF Helvetica Light Lower Case / 30pt Type

(sample text) !?% 2.2

3.0COLOR SYSTEM

Color Scheme When it comes to communicating the AI Architects brand, color is quintessential.

The following color configurations show how AI Architects preferred and supplemental colors can be expanded analogously to build harmonious color palettes and complementary applications. Working from these analogous extensions will yield results that match well with practice’s foundation colors.

An earthy color that highlights texts / information.

A neutral color that highlights images & drawings.

A subtle color that highlights texts content.

Primary Color

Primary Color

Secondary Color

Secondary Color

RGB 121/129/117 CMYK 30/43/44/18 HEX #947062

RGB 1107/107/107 CMYK 51/42/41/29 HEX #7D7D78

RGB 162/176/143 CMYK 39/17/47/9 HEX #A0AA87

RGB 231/229/217 CMYK 11/8/16/0 HEX #E1DCCD

Secondary Color RGB 92/92/92 CMYK 55/45/45/35 HEX #5C5C5C

3.1

4.0GRID SYSTEM

Web Grid System A successful web design must be responsive, to respond to the user’s behavior and environment based on screen size, platform and orientation. It consists of a mix of fluid grids and layouts, images ans media queries.

40

320

500

960

1100

1240

[1] Turning on Responsive features. In mobile devices it makes the browser use the real size of the device. This way a device with a width of 320px will not display a website like a device with a width of 1280px.

1280

[2] Understand Bootstrap’s grid. The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled.

280

460

200

[3] Use of Bootstrap’s Media Queries. Media queries allow for custom CSS based on a number of conditions (ratios, widths, display type, etc) but usually focuses around min-width and max-width. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of existing devices.

Bootstrap's Media Queries: 40

40

120

120

PC screen Web-Grid

40

1

Modify the width of column in our grid

2

Stack elements instead of float wherever necessary

3

Resize headings and text to be more appropriate for devices [4] Create flexible images. In responsive web design you can make the image auto resize to the max width of the boundary.

[5] Use Responsive Classes. Bootstrap comes with 6 ready-to-use classes to show and hide elements in desktop, tablets and phones: [6] Relate margins and padding. If you need to add margins or padding to any element in responsive web design do not use a fixed pixel value, use percents instead.

Example of how grid is organized in various devices / orientations.

4.1

Stationery Grid System Ths page shows the approved layouts and grid / calculation of AI Architects stationery system for Business Card, Cover pages & Letterhead.

For further details and information refer to sections 6.1 / 6.2 / 6.4 0

20

70

0

90

82 90

50

50

25

27

Tel: +357 2225 2255 Email: info@aiarchitects.eu

15

20 Evelthontos street, K1 2003 Acropolis, Nicosia, Cyprus

5

7

www.aiarchitects.eu

0

0

0

30

210

0

30

150

190 210

0

297

297

297

275

275

275

30

110 CL

250 225 200

Project: AiA140 Skate Park @Engomi, Nicosia

Project: AiA140 Skate Park @Engomi, Nicosia

200 6

www.aiarchitects.eu

175

50 25 10 0

4.2

Proposal

25 10 0

| 20 Evelthondos Street, Office K1 | 2003 Acropolis, Nicosia, Cyprus | (+357) T 22252255 | info@aiarchitects.eu |

10 0

CL

CL for text

190 210

5.0ICON SET Icon Set is an easy way to communicate though compact images (pictograms).

Pictograms have been popularized in use on the web and in software, displayed on a computer screen in order to help user navigate a web page or a computer system.

In the last decade icons found fertile ground in promotion. They’ve been extensively used in devices (such as Pcs, mobiles and tables), but also in F&B units and retail adds, street adds and in daily contact.

Sample of Icon Set:

Note: this section is still in progress

6.0STATIONERY

Business Card This page shows the approved layouts with the primary elements and information of the AI Architects’ stationery system for business cards.

The business cards will be used for official contact and communication of AI Architects practice.

Place your data into business cards and feel free to give them to your partners and clients.

ALTERNATIVE DESIGN with SPOT UV

FRONT SIDE - Color Alternatioves

Tel: +357 2225 2255 Email: info@aiarchitects.eu 20 Evelthontos street, K1 2003 Acropolis, Nicosia, Cyprus www.aiarchitects.eu

FRONT SIDE - Landscape

REAR SIDE - Landscape

Tel: +357 2225 2255 Email: info@aiarchitects.eu 20 Evelthontos street, K1 2003 Acropolis, Nicosia CY

www.aiarchitects.eu

REAR SIDE - Portrait

REAR SIDE - Spot UV layout

Parameters: double-side plot business card Dimensions: 90X50mm Weight: 400g/m - uncoated white paper with spot UV printing 6.1

Cover Pages / Letter This page shows the approved layouts with the primary elements of the AI Architects’ stationery system for the front side of the cover pages & the letter.

These A4 pages will be used for all official contact and communication of AI Architects practice. Primary use: PDF files via email.

Type or write your message into the letter page and send your documents throughout the world.

Project: AiA140 Skate Park @Engomi, Nicosia

www.aiarchitects.eu

Proposed Color Variables 6.2

Parameters: single-side plot cover & letter pages Dimensions: 210X297mm (A4) Weight: 90g/m - uncoated white paper (out source printing is optional)

Notepads (optional) This page shows the proposed layouts with the primary elements of the AI Architects’ notepad system, for orders, site visits or just organizing theday.

In A4-lined notepad you can keep your contact information, “save” your fleeting ideas, have more effective brainstorming, plan in daily base your orders - it’s definitely a strategic tool.

Parameters: single-side plot notepads Dimensions: 210X297 mm (A4) - 148.5X210mm (A5) Weight: 90g/m - uncoated white paper 6.3

Envelopes This page shows the approved layouts with the primary elements of the AI Architects’ stationery system for the three proposed types of the corporate envelopes.

The envelopes will be used for all official contact and communication of AI Architects practice.

Insert the company’s letter sheets and send your documents throughout the world.

www.aiarchitects.eu

www.aiarchitects.eu

www.aiarchitects.eu

Parameters: single-side printed envelope Dimensions: 458X324mm Weight: 85g/m - uncoated white paper

www.aiarchitects.eu

Parameters: single-side printed envelope Dimensions: 229X324mm Weight: 85g/m - uncoated white paper

www.aiarchitects.eu

www.aiarchitects.eu

Parameters: single-side printed envelope Dimensions: 220X110mm Weight: 85g/m - uncoated white paper 6.4

Stationery Visuals

Conceptual design of cover pages use

Preliminary mood board of stationery mock-ups

6.5

Presentation Templates This page shows the approved layouts with the primary elements of the AI Architects’ presentation template for the Power Point and/or PDF shared files.

These files are prepared in ppt format and can be frequently used for most of the communication and spread the AI Architects Brand image abroad.

Project: AiA107 Cedars Agios Lazaros, Larnaca

Project: AiA139 Skate Park @Engomi, Nicosia

Parameters: single-side printing A3 page Dimensions: 210X297mm

6.6

Presentation Samples

Cover Page for project AiA140

Presentation layouts of project AiA129

6.6

7.0APPLICATIONS

Signage The term Signage refers to the design or use of signs and symbols to communicate a message to a specific group, usually for marketing. This section shows some of the signs that can be used for AI Architects’ applications.

PROJECT MANAGER

ΑΡΧΙΤΕΚΤΟΝΑΣ

ARISTOTELIS IRZENSKI

AM 98842

2 0 E v e l t h o n d o s s t. , o f f i c e K 1, S t r o v o l o s 2 0 0 3, N I C O S I A - C Y P R U S T e l. 2 2 2 5 2 2 5 5, F a x. 2 2 2 5 0 0 4 4, M o b. 9 9 4 8 8 2 6 2, e - m a i l: I n f o @ a i a r c h i t e c t s . e u

PROJECT MANAGER

ΑΡΧΙΤΕΚΤΟΝΑΣ

Site sign with the initial logo & colors

Site sign re-branded

ARISTOTELIS IRZENSKI

AM 98842

20 Evelthondos street, office K1, Strovolos 2003, Nicosia - CYPRUS Tel: (+357) 2225 2255, Mob: (+357) 99488262, e-mail: info@aiarchitects.eu

Parameters: Metallic sign with printed adhesive film Dimensions: 1700X400 mm Weight: 90g/m - uncoated white paper 1

Use the product identity and logotypes provided as artwork.

2

Use the corporate typeface for text in addition to the logo.

3

And always send your design to info@aiarchitects.eu for review before going into production.

7.1

Signage The term Signage refers to the design or use of signs and symbols to communicate a message to a specific group, usually for marketing. This section shows some of the signs that can be used for AI Architects’ applications.

WALL-MOUNTED “BILLBOARD” SIGN

PROJECTING SIGN

60-80cm

50cm

10-15cm

10-15cm

Narrow aluminum frame with exposed vacuum acrylic light box

Wide aluminum frame for capping the acrylic parts

10-15cm Metal plate @10mm glued and screwed on concrete or solid wall

PROJECTING OR BACK-FIXED SIGN

50cm

60-80cm

Internally illuminated acrylic box with adhesive letters -or- Aluminum box with illuminated laser-cut logo

Internally illuminated acrylic box with adhesive acrylic letters -or- Aluminum box with illuminated laser-cut logo

Wall-mounted Projection Sign Check the wall consistence and the power supply before fixing / screwing the sign.

7.2

1

Use the product identity and logotypes provided as artwork.

2

Use the corporate typeface for text in addition to the logo.

3

And always send your design to info@aiarchitects.eu for review before going into production.

WORKING HOURS 0800AM-1730PM (MON-THU) 0800AM-1600PM (FRI)

Laser-cut Letters on Translucent Film Fixed on Glass

info@aiarchitects.eu

200-300cm 100-150cm

20-40cm

Metal sheet with laser-cut illuminated logo -or- gypsum board panel with illuminated letters fixed on concrete or solid wall

Shopfront sign

Using metal like galvanized steel, aluminum or copper for outdoors is always a solid, safe and durable solution.

If back-lit sign is not an option, the visual separation from the back ground can be achieved with a different finish or spacers.

Other Exterior Sign Samples

Note: keep clear distances on upper/lower and side parts of the Logo, even when the bulkhead or billboard height doesn’t look sufficient.

7.2

ARCHITECT: Nooun, [ar-ki-tect] A professional skilled in creating artful, inspirational and socially meaningful structures that are eventually reduced to four concrete walls by bankers.

See also: Consultants’ Babysitter 7.2

ARCHITECT: Nooun, [ar-ki-tect] Somenone who does precision guesswork based on unreliable data provided by those of questionable knowledge See also: Wizard, Magician

Are you obsessed with architecture?

NO YES

Branded Merchandise (optional) It’s all about the looks: these mock-ups were created to visualize the new Brand ID in everyday items and applications.

In case you find them attractive, you automatically realize the importance of preserving the Ai Architects’ system.

They strongly reflect the image of the practice and they make a real statement, graphically and aesthetically.

1

Use the product identity and logotypes provided as artwork.

2

Use the corporate typeface for text in addition to the logo.

3

And always send your design to info@aiarchitects.eu for review before going into production.

7.2

8.0WEB-SITE

‘Coming Soon’ & E-mail Signature This section has some optional requirements regarding the way AI Architects practice can communicate with its people (clients or coworkers). Sometimes even the smallest details can make a company look more professional, with consistency and by everything being there for a reason. e-mail signature - Option 01: Your Name Your Title AI ARCHITECTS

20, Evelthondos st., Office K1 2003 Strovolos, Nicosia Cyprus

(tel.) +357 2225 2255 www.aiarchitects.eu Facebook: www.facebook.com/aiarchitects.eu

e-mail signature - Option 02: Your Name Your Title AI ARCHITECTS 20, Evelthondos st., Office K1 2003 Strovolos, Nicosia - Cyprus Tel: +357 2225 2255 Website: www.aiarchitects.eu Facebook: www.facebook.com/aiarchitects.eu

One line title for creating a new email: AiA000 - Project, Location | General Description - Details e.g.: AiA000 - Brand Guidelines | Stationery - Printer Appointment A sample about the ‘Coming Soon’ web-page.

This page should be kept simple, and maybe with the main information partially concealed: its not necessary to cry out your services or that you are an architect.

8.1

Web-page Guidelines This section refers to the main design rules used & must be followed, in order to create a web-page with clear navigation system, consistency and with great accessibility from all devises launched in the market.

[1] Simplicity While the look and feel of your website is important, most visitors aren't coming to your site to evaluate how slick the design is. Instead, they're coming to your site to complete some action, or to find some specific piece of information.

Adding unnecessary design elements (i.e., elements that serve no functional purpose) to your website will only make it harder for visitors to accomplish what they're trying to accomplish.

[3] Navigability Having intuitive navigation on your site is crucial for ensuring visitors can find what they're looking for. Ideally, a visitor should be able to arrive on your site and not have to think extensively about where they should click next. Moving from point A to point B should be as pain-free as possible.

5

Keep the structure of your primary navigation simple (and near the top of your page).

1 Colours. Don't use too many.

6

Include navigation in the footer of your site.

2 Typefaces. The typefaces you choose should be legible at the very least.

7

Include a search box near the top of your site so visitors can search by keywords.

3 Don’t overuse Graphics. Use them only if they'll help a user complete a task or

8

Don't offer too many navigation options on a page.

9

Don't dig too deep. In most cases, it's best to keep your navigation to no more than three levels deep.

perform a specific function.

4 Every element on a page must add value to the user or the business - and

ideally, to both of them.

10 Once you've settled on what your site's main (top) navigation will be,

keep it consistent.

[2] Visual Hierarchy

11 The labels and location of your navigation should remain the same on each

and every page of your site.

Closely tied to the principle of simplicity, visual hierarchy entails arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.

Home

Who we are?

Our Menu

Offers

Login

Sign Up Free

Home

Who we are?

Our Menu

Offers

Login

Sign Up Free

The goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable.

Examples of intuitive navigation

8.2

There are a lot of benefits in creating a style guide for AI Architects’ web-page. First of all it's an easy way to have a reference, when handing over a project like this. Guidelines makes you also look professional and your partners will know that AI Architects did everything for a reason. You can maintain control of the design and the most important, you avoid cheapening the design, message and branding. And last but not least, makes you to define and hone your style, making for a more cohesive design.

[4] Consistency The overall look and feel of your site should be consistent across all of your site's pages. Backgrounds, colour schemes, typefaces, and even the tone of your writing are all areas where being consistent can have a positive impact on usability.

[6] Conventionality There are certain web design conventions which, over the years, internet users have become increasingly familiar with. Such conventions include: 12 Having the main navigation be at the top (or left side) of a page.

That's not to say that every page on your site should have the same exact layout.

Instead, you should create different layouts for specific types of pages (e.g., a layout for landing page, a layout for informational pages, etc.), and by using those layouts consistently, you'll make it easier for visitors to understand what type of information they're likely to find on a given page.

13 Having a logo at the top left (or centre) of a page.

14 Having that logo be clickable so it always brings a visitor back to the home-page.

15 Having links change colour / appearance when you hover over them.

[5] Accessibility [7] Credibility Tablet internet consumption grew 30% between 2013 and 2015. Smart-phone internet consumption, meanwhile, grew 78% during the same time period. In order to provide a truly great user experience, your site needs to be compatible with the different devices (and operating systems, and browsers) that your visitors are using.

At a high-level, this means investing in a website structure that is highly flexible. At a lower level, improving accessibility can be as simple as adding alt-text to all of your images (so visitors who can't see images in their browsers can still understand what's on the page).

Ultimately, it's more important that your website provides a great experience across different platforms as opposed to having to it look identical across those platforms.

One of the best ways to improve your site's credibility is to be clear and honest about the services / knowledge you're promoting on the site. Don't make visitors have to dig through dozens of pages to find out what you offer. It is also important to not have a pricing page. Engage people to contact you in order for them to learn more about your offers and the working system - this way you can definitely make your business seem more trustworthy and legitimate.

[8] User-Centricity Usability and user experience hinge on the preferences of the end users. The real key to improving the design of your site is to conduct user testing, gather feedback, and make changes based on what you've learned.

8.2

Thank You!

On behalf of AI Airchitects Ltd Brand Manual / Theme Branding Guidelines and Manual Template A visual identity guide for an architectural practice February 2020 | Issue 01.1