AIESEC digital guidelines [ AIESEC in Spain ]

Please download to get full document.

View again

All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
 9
 
  AIESEC digital guidelines
Related documents
Share
Transcript
  • 1. 1 AIESEC Digital Guidelines
  • 2. AIESEC Digital Guidelines Overview 5 i. Style guide overview 7 ii. General page structure - main 9 iii. General page structure - footer 11 1. Logo 13 1.1. How to display the AIESEC logo 15 1.2. Use of affiliated AIESEC logos 17 2. Colors 19 2.1. Updated AIESEC Blue 21 2.1.1. New AIESEC color palette 23 2.2. Gray and other colors 25 3. Font and typography 27 3.1. Lato is used for all communications 29 3.2. <h> tags – an overview 31 3.2.1. <h1> is for page headers 33 3.2.2. <h2> is for page subheaders 33 3.2.3. <h3> is a light subheader 33 3.2.4. <h4> is the smallest heading size 33 3.3 More on coding text 35 4. Images 37 4.1. Image layout tips 39 4.2. Related links 41 4.2.1. Editing partner logos 43 4.2.2. Editing a logo using a grid 45 5. Writing new content 47 5.1. Tone of voice – general guidelines 49 5.2. Writing for students 51 5.3. Writing for companies / NGOs 51 5.4. Writing about AIESEC 53 5.5. Writing blog posts 53
  • 3. 6. Site structure 55 6.1. Global header 57 6.2.1. Editing the social footer 59 6.2.2. Editing the global footer 59 7. Content structure 61 7.1. Responsive user journey 63 7.2. Creating a header image 65 7.3. Accessibility & contrast 67 7.4. Panels 69 7.5. Display of statistics 71 7.6. Calls to action 73 7.7. Text links within paragraphs 75 7.8. Three-column image links 77 7.9. Three different button types 79 7.10. Keep text at a readable width 81 7.11.Using columns to create a layout 83 7.12. Contact and feedback forms 85 8. Update protocol 87 8.1. WordPress admin roles 89 8.2. Be careful when editing 91 8.3. Any questions? 93
  • 4. 5 Overview
  • 5. In order to be cost effective, aiesec.org has been built as a flexible template. The underlying structure and main navigation should stay the same for all AIESEC entities. We started the web redesign project by understanding more about the key journeys AIESEC needs people to go on. The site design has been simplified to help as many people as possible find what they are looking for. The theme is easily administered and highly customisable in terms of page structure, images, video and content; you can be creative and tailor it to your local audience. Our approach enables AIESEC Member Committees to consistently communicate the AIESEC vision while making it relevant to each local audience.
  • 6. 7 i. Style guide overview The AIESEC Global website (aiesec.org) is a custom template built on WordPress 4.0 based on the Enfold theme. You can find out more about WordPress here, and you can find out more about how to maintain and administer a WordPress site here. These digital guidelines will help to establish and maintain consistency across all digital communications and properties. The guide is designed to be a useful tool to help AI (AIESEC International) and MC (Member Committee) digital and marketing teams reach key AIESEC audiences.
  • 7. 2,000 30,000126 Activate your potentialE A B C D F G K I J L H
  • 8. 9 ii. General page structure - main The global navigation (nav) at the top of each page contains the AIESEC logo (which should link to the homepage (A)), buttons linking to the main sections (B) and a Join Us button which takes people to the Opportunities Portal/Global Information System (OP/GIS) (C). Site-wide search (D) is accessed via the magnifying glass icon; this expands to display a search field when selected. Each page has a hero image/header at the top. This consists of a white headline (E), which should be concisely written and centre- aligned. It may be supported by a further short paragraph of introductory copy (F). Behind this copy there will be a suitable full- width header image or video (G). [You will need to make sure the headline, introductory copy and header image/video are chosen in such a way that the text is easy to read.] The hero image on any given page should be used to direct visitors to the one or two key next steps. The majority of links on the website are accessed via distinctive blue buttons (H). The page below the hero image is broken into panels (I) of full-width color or large images which should be alternated in order to ensure the content is effective.
  • 9. Most pages will need to contain text on a white/light gray background (J); these words provide your users with quick, engaging information, and guide them through their journey. Certain pages contain a narrow blue panel (K) that contains animated statistics relevant to the current subsection. Another common element is a row of three images supported by copy and linked text (L). Pages may contain a customisable lead generation/data capture/contact form (M). [To reduce spam, it is important to select ‘Display Captcha’ when publishing a new form.] At the bottom of each page there are three ‘footer’ areas: the social footer; quick links; and a copyright/legal statement. The social footer contains content from Twitter and Instagram, plus subscription links to AIESEC International on Twitter, LinkedIn, Facebook and Instagram (N). The quick links area (O) consists of three adjacent text boxes above up to four blue text links (P). One of the boxes contains up to five links to key sections of the site. The very bottom of each page contains AIESEC’s copyright and governance statement (Q).
  • 10. 11 t Get in touch in f Instagram M N O P Q
  • 11. 13 1. Logo
  • 12. Logo surrounded by minimum safe area x 3x x x AIESEC favicon The AIESEC logo should be used in two forms only, as above and below
  • 13. 15 1.1. How to display the AIESEC logo Where relevant and appropriate, the AIESEC logo will be present on all digital communication, and should not be altered in any way. Across digital, the version of the logo which should be used is the new AIESEC Blue on white, which can be inverted when on a blue background. The logo should not be displayed in any other color. When placing the logo on a page, make sure the logo is surrounded by a safe area which consists only of white or blue space. The width and height of this safe area is equal to the height of the band enclosing ‘AIESEC’. The favicon ‘A’ is a small (16x16px) icon seen in some desktop browser windows that is used as an abbreviated form of the logo, consisting of a white ‘A’ on an AIESEC Blue square. A larger version of this (500x500px) is used for social media profiles. Please note that the favicon is not the AIESEC logo, and should only be used for the above two purposes.
  • 14. YouthSpeak logo in white on orange background Youth to Business logo Logos for Global Talent and Global Citizen
  • 15. 17 1.2. Use of affiliated AIESEC logos In addition to the main AIESEC logo, there are other logos which relate to AIESEC’s programs and initiatives. When producing content for each initiative, make sure you use the current version of the logo, which will be available for download, along with usage guidelines, from the Media section of the global site.
  • 16. 19 2. Colors
  • 17. #037ef3 #f85a40 #f48924 #52565e #0a8ea0 #037ef3 #f3f4f7 #caccd1 AIESEC Blue #037ef3 Blue = AIESEC activities Red = volunteering; NGOsDark teal = internships; companies
  • 18. 21 We have modernized and refreshed the core AIESEC Blue. This process has been driven by consistent feedback from all aspects of the wider AIESEC community. The output has led to a choice of color which represents more closely the youthful, vibrant and modern attributes of AIESEC as an organization. This new AIESEC Blue (#037ef3) is the main color used for the global navigation, buttons and links on the global site. It is also used to relate to content specific to AIESEC as an organization, its internal operations, and general student-related activities. 2.1. Updated AIESEC Blue In order to coordinate with the new blue, a palette of carefully selected colors has been developed. Dark teal (#0a8ea0) is used within areas of the global site which relate to internships and company partners; red/orange (#f85a40) is used to denote volunteering programmes and NGO partners. The most common use of these colors is for narrow stats panels and also buttons. If you are not sure what color an element should be, make it AIESEC Blue. 2.1.1. A new AIESEC color palette
  • 19. Text is generally in dark gray, on a white or light gray background Small sections of white text on a dark gray background Heading 1 Heading 4 Heading 2 Heading 5 Heading 3 Heading 6 Alternating colors are used for related headings
  • 20. 23 Light gray (#f3f4f7) is commonly used as a background color for panels of content within the site. Mid gray (#caccd1) can be used as a color for certain panels within the global site, for example as a background color for contact forms. Dark gray (#52565e) is the darkest color within the palette. When copy is displayed using this color, it is easy to read on both white and light grey backgrounds. Very rarely, it is used as a background color in combination with white text when a section needs to stand apart from the rest of the page. The other colors are generally only used for buttons or to visually distinguish between adjacent related elements, such as headings or numbering steps within a process. 2.2. Gray and other colors
  • 21. 25 3. Font and typography
  • 22. Lato is a modern, sleek and flexible humanist sans serif font.
  • 23. 27 3.1. New digital font The mixture of serif and sans serif fonts which have been used AIESEC for the past few years have been replaced with a more modern sans serif web font family called Lato. Lato’s slightly rounded forms give it a younger, more organic feeling that distinguishes it from many other web fonts while making it easy to read. All weights of font across the website, from headings to body copy and links, are Lato. When preparing content for use across social which drives traffic into the main site, it is useful to construct this content using Lato. This will generate a more consistent user and brand journey.
  • 24. Lato Black, 72pt Lato Bold, 48pt Lato Light, 48pt Lato Light, 30pt <h1> <h2> <h3> <h4>
  • 25. 29 3.2. <h> tags – an overview <h> tags are used in web development to enable search engines to correctly interpret the hierarchy of copy within the site and understand how the content is structured. Using <h> tags appropriately improves the natural search ranking and indexing of the site; this helps AIESEC attract increased amounts of relevant traffic. <h> tags should be used whenever possible, instead of manually styling the text. The <h> tags on the global site are used as follows: This should only be used once per page. The use of a custom CSS tag (see section 3.3) on the main header image will render the <h1> tag in white, rather than gray. Any <h1> tagged headline should be concise, in order to ensure the headline does not break onto multiple lines. The white copy needs to be legible over the header image, which means selecting an image that does not contain too much white at the center, and checking readability and contrast once the page is created or an update has been made. <h1> text is set as Lato Black 72pt. 3.2.1. <h1> is for page headlines
  • 26. 31 This tag should be used for all key headings within a page (apart from the headline) before paragraphs of body copy. <h2> should also be used for any supporting text required on the header image below the headline. <h2> text is set as Lato Bold 48pt. 3.2.2. <h2> is for page subheaders <h3> can be used for less important subheadings within a page. <h3> should be used before images. <h3> text is set as Lato Light 48pt. 3.2.3. <h3> is a light subheader This tag should only be used for subheadings which introduce a small section of copy. <h4> text is set as Lato Light, 30pt. 3.2.4. <h4> is the smallest heading size
  • 27. <h2> Check out some of our events! </h2> <h2 style=”color:#ffffff;”> Check out some of our events! </h2> Check out some of our events! Check out some of our events! To manually change an attribute, insert the alteration into the <h> (or <p>) tag
  • 28. 33 The default text color across the AIESEC global site is dark gray (#52565e). This color will automatically change to white when the text appears in a headline within a Color Section or the main header which has had a custom CSS class applied to it (such as mainHeader). Should the automatic color be hard to read, you may wish to manually adjust it as follows: Take the <h> tag parameter and insert: style=“color:#ffffff;” giving, for example: <h2 style=“color:#ffffff;”> In this example, the color will be white. Please refer to the swatches to find hex numbers for the AIESEC digital brand colors. Subheadings should only ever appear in white or dark gray unless they need to be differentiated. It is possible to use the same process to change the color of body copy by inserting similar values within the <p> tags (please remember to close the <p> tags after the copy, e.g. </p>). Do not try to adjust <h> tag font sizes or weights, as this cannot be overridden. 3.3. Changing the color of <h> tags
  • 29. Theme Options
  • 30. 35 The theme settings have been customised and specific CSS added to create the AIESEC template. This ensures the brand and layout are consistent. While we have not disabled updates to this area, ordinarily, no changes should be made to it. If for some reason you feel you do need to make a change, please ensure you have a good understanding of both WordPress and CSS, and be aware of two key things: i) It can have an impact across the whole of the site, including changing the display of the global nav ii) If you make changes and try to revert to the preset custom theme by pressing Reset, you will find that you default back to the original settings for Enfold, not the AIESEC custom theme. 3.4. Never change theme settings
  • 31. 37 4. Images
  • 32. No white space = busy White space = breathing space Preview images should be 309x341px 309px 341px
  • 33. 39 Great photography is an important asset to help inspire and engage AIESEC’s audience. Photos show the different activities AIESECers get up to, and the change they make in the world. For images to work well, they need to be ‘framed’ by either white space or contrasting panel background colors such as light grey. When many images run together without white space, they become confusing to the user and each loses its impact. Therefore, images need some special attention. Please ensure when putting a new page together that full-width images or videos are not positioned on top of/next to each other. They must be broken up by a contrasting panel of some kind. Further into a page, you may wish to use a number of smaller images. Please ensure they have a consistent white space between them. One of the key mechanisms for displaying linked areas of the site/contextual promotion for other areas of the site is a row of three linked images. In order to make this feature of a page, first you need to ensure each of the images is available at 309x341px size. If you have uploaded a large image, you will find this size in the image size list tagged Preview. 4.1. Image layout tips
  • 34. Rows containing three image links are assigned a custom CSS class A Color Section/panel containing three images and related links threeImagesBlock Custom CSS class
  • 35. 41 It is important on many content pages to enable a user to find related topics quickly, or for AIESEC to cross-promote similar programs. In order to do this effectively, we have created a row consisting of three images supported by copy and links. To create a panel like this, you need to start by adding a Color Section to the page at the correct position and choosing a relevant background color for it; this may be white or light grey, depending upon the panels surrounding it. You will also need to specify a custom CSS class for it which should be ‘threeImagesBlock’. When you have created the Color Section, add three 1/3 columns to it and three Fullwidth buttons. The images used for each of the 1/3 column areas need to be set to Preview (309x341px). If you wish to use a relatively small image, it needs to be cropped to at least this size. 4.2. Related links
  • 36. Partner logo grid as it appears on the website, with the area of the squares shown in gray Partner logo in a white square 500px 500px
  • 37. 43 Partner organization (companies and NGOs) logos should be added at the highest quality available and ideally in a vector format or PNG, at least 500x500px. For visual consistency and equal weighting of each partner regardless of the shape of their logo, each logo should be resized and placed within a 500x500px white square before being uploaded to the WordPress Media Library. 4.2.1. Editing partner logos
  • 38. Each logo sits within a 500x500px white square, surrounded by a 70px ‘safe zone’ 70px 70px 360px
  • 39. 45 This is best carried out using an application such as Adobe Illustrator or Photoshop. Within a 500x500px white square, place a 360x360px square. This gives you 70px of padding. Divide this inner square into a 4x4 grid. Place the logo centrally at a size such that it is not overlapping more than eight of the small grid squares (which squares it touches depends on the orientation of the logo, but eight is a good rough guide to maintain visual balance between the logos). Remove the gridlines and export the file as a PNG, ensuring that the background is set to white and not transparent. 4.2.2. Editing a logo using a grid
  • 40. 47 5. Writing new content
  • 41. Confused? We’re here to help. Just select your question from one of the categories below FAQ SECTION: Click query from following list for answer AIESEC is warm and conversational AIESEC is not cold and mechanical
  • 42. 49 Generally, you should keep the tone of voice of all content conversational and friendly; refer to AIESEC in the first person (‘we’) and your audience in the second person (‘you’). The first language of all AIESEC communication is American English which may be supported by a number of secondary languages, in order to enable AIESEC to reach a wider audience. No digital content should be led by non-English languages. It is often worth sharing new content or amendments to existing copy and images among two or three people to check for spelling errors, tone, relevance, comprehension and, in the case of images, appropriateness. Avoid corporate and AIESEC jargon* and keep things simple. If you are unsure whether or not the content you are creating is appropriate for AIESEC, or you need to fact-check something, request support from another member of your MC, or AIESEC International. It may be important to clarify things before publishing them to a wider audience. *As AIESECers, you will be aware of what ‘MC’, ‘GIP’, ‘Global Talent’ or ‘Team Member’ mean; however, students or partners who are unfamiliar with the inner workings of AIESEC will not understand these terms. Please try to avoid them, or use the full term and provide an explanation when it is first used in an article. 5.1. Tone of voice – general guidelines
  • 43. Jumpstart your career by embarking on a professional internship abroad, develop your skills and gain relevant experiences that employers recognise. When writing for students, make it personable, inclusive and engaging Our interns bring language skills and regional insight to help you build your business in new territories. When writing for companies and NGOs, adopt a professional and trustworthy tone
  • 44. 51 The maj
  • Related Search
    We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks