Conservation International
Design System
Project
My Role
Brand
Layout and Spacing
Colours
Interactive Design
Design Icongraphy
Project
Group Effort
Project
Duration
2
Weeks
20+
Screens
Project
Background
Goal
Project
Brand
Brand/design purpose and shared values
Brand language and identity
Eliminate Jargon
Outside of a specialized audience, most people do not know exactly what “ecosystem- based adaptation” is, nor nature-based solutions,” nor how to ” scale up. ” In each case, it is better to provide a broader definition, a brief example or avoid the term altogether.
Stay Optimistic
Environmental news can be one depressing headline after another. CI must ensure that its communications take an optimistic approach by focusing on potential solutions, and not succumb to the gloom and doom that is often rampant in environmental communications.
Avoid Embellishment
Do not overhype or hyperbolize. Breathless hyping of CI programs or hyperbolizing the prospect of CI science or success stories do not resonate with our intended audiences, who are educated and discerning. Better to let our science and our successes speak for themselves.
Establish Credibility
Use a conversational yet authoritative tone. Our written materials must be informative without being dry. A more conversational tone, as in a typical news magazine piece, is appropiate.
Brand Values
INNOVATION
COLLABORATION
We work closely with communities, governments, businesses and others because we make a bigger impact when we work together. We design each partnership to achieve the goals at hand, drawing on the strengths of our partners, and then share our results with others to achieve greater success.
GLOBAL VISION
Design System
Logo
WEB LOGO
LOGO SPACING
The gray area around the logo defnes the minimum space that must be left between the logo and any other graphic elements such as text, illustrations and borders. This is to ensure that the logo retains a strong presence wherever it appears.
The “x” measurements in this diagram are used to indicate equal spaces. The width of the green bar is equal to the gray space around the word mark.
Always allow as much space as possible around the logo.
MINIMUM SIZE 86 PX
LOGO COLOURS
LOGO ON SOLID BACKGROUND
HOW NOT TO USE LOGO
Design System
Design Principles
Aim to simplify the user interface and navigation, minimize the number of clicks required to access information, and present information in a clear and concise manner. By doing so, users would be able to quickly and easily find the information they need, leading to a better user experience and a higher likelihood of achieving the website’s conservation goals. By doing so it will improve user experience, increase engagement, improve conversions and enhance credibility.
Grouping related information or elements together on the page to make it easier for users to understand the relationships between different pieces of information. Non related should stand further away. We will use white space to achieve that. And will help to improve the overall clarity and organization of a website.
By following established design patterns and making it easy for users to accomplish their goals on the website, the designers will help to create a positive user experience and increase so users will return to the website in the future.
The designers can help users understand how to interact with the site and accomplish their goals more easily. This can result in a better user experience, increased engagement, and improved conversion rates.
Using clear and explicit labels and icons to help users understand how to interact with different elements on the page. Helping users understand how to use the website more easily and reduce confusion or frustration. This can lead to a better user experience, increased engagement, and improved conversion rates.
Maintaining a consistent look and feel throughout a website, including the design, layout, and navigation. Using the same colors, fonts, and graphic elements throughout the website to create a unified visual identity. Creating a sense of trust and reliability for users, and make it easier for them to navigate the site and find the information they need. By doing so this can lead to a better user experience, increased engagement, and improved conversion rates.
Using a green color scheme, which is commonly associated with nature, growth, and sustainability, also reflecting the organization’s mission to protect and sustain nature and the environment.
Helps to create visual interest and guide the user’s eye to important information. By using a variety of contrasting colors, primarily by using white or light gray text on top of darker backgrounds. This creates a clear and readable contrast, making it easy for users to navigate the site and find the information they need.
In the hierarchy, we want the most important content to appear first, which should be eye-catching, such as a large font size and some color contrast. There should be a closer relationship between content that belongs together. It is also important to have enough white space on the page to attract the eye. This will help to improve the overall user experience of a website.
Design System
Design principles are fundamental guidelines that designers follow to create effective and aesthetically pleasing designs. These principles encompass a variety of elements, including visual design elements (such as color, typography, and layout), user experience (UX) design, accessibility, and more.
Design principles are important because they provide a framework for designers to create cohesive and effective designs, regardless of the medium or platform. They also help designers to create designs that are accessible and inclusive for a wide range of users, and that can be easily adapted to different contexts and situations.
Design System
Atomic Design
Atomic Design is a methodology for designing interfaces that is based on the idea that complex systems can be broken down into simpler, more manageable components. These components are then organized into a hierarchy, starting with the smallest and simplest elements and working up to more complex ones. The hierarchy of components in Atomic Design is often represented as a series of layers or levels, with each layer building on the one below it.
The basic idea behind Atomic Design is that everything in a user interface can be broken down into five basic types of components, which are called atoms, molecules, organisms, templates, and pages.
BENEFITS
The benefit of using Atomic Design is that it allows designers and developers to create consistent, modular, and scalable user interfaces. By breaking down complex systems into smaller, more manageable components, Atomic Design makes it easier to build and maintain interfaces over time. Additionally, Atomic Design promotes a more collaborative design process, as designers and developers can work together to create and refine components at each level of the hierarchy.
DESIGN TOKENS
Design Tokens are a way to abstract design values into reusable, global variables that can be used across different projects, platforms, and channels. They are like building blocks of a design system that define the visual language, such as color, typography, spacing, and other properties.
ATOMS:
These are the smallest and simplest building blocks of a user interface. Examples of atoms include buttons, form labels, and icons.
MOLECULES:
Molecules are groups of atoms that work together to perform a specific function. Examples of molecules include search bars, login forms, and navigation menus.
ORGANISMS:
Organisms are groups of molecules that work together to form a larger, more complex section of a user interface. Examples of organisms include headers, footers, and product listings.
TEMPLATES:
Templates are a combination of organisms that define the overall layout and structure of a page or interface. Templates can be used to create different types of pages, such as product pages, blog posts, and landing pages.
PAGES:
Pages are the final output of the Atomic Design process. They are the actual pages or screens that users interact with.
Design System
Layout and Spacing
Using a grid and spacing system will improve readability and make the design look cleaner and more consistent.
Below are the grid guides
Phone
Columns: 4px
Gutter: 16px
Margins: 16px
Tablet
Columns: 4px
Gutter: 16px
Margins: 16px
Desktop
Columns: 12px
Gutter: 24px
Margins: 24px
SPACING
Design System
COLOURS
The colours in the brand’s palette are vibrant, daring, and draw inspiration from the world that surrounds us. When applied harmoniously, these hues enrich photography, imbue words with greater depth, and effectively convey their message of hope.
COLOUR GRADIENTS
Design System
TYPOGRAPHY
Typography plays a vital role in shaping a brand’s image. We’ve chosen typefaces for their simplicity, clarity, and versatility in print and digital media. A well-organized font hierarchy boosts message readability and simplifies content access for readers.
PROXIMA NOVA
Proxima Nova is our standard font used in all print and digital materials. It offers a variety of weights from thin to bold and reflects many of the visual elements found in our logo.
PROXIMA NOVA EXTRA CONDENSED
Proxima Nova Extra Condensed is our headline font used for adding emphasis to the headlines and introductions to our stories. This alternate style allows for greater variety in our type structure.
Proxima Nova is a an Adobe font and Montserrat is the equivalent Google font.
Maintaining a consistent typographic standard is crucial for brand consistency across all materials. Text color may vary depending on the subject matter, with a field program using warm colors and a water project utilizing a cool color palette, for instance. Typically, the title color differs from the subtitle color as a standard practice.
TEXT COLOURS
Design System
ICONOGRAPHY
SIZES
EXAMPLES
USAGE
For displaying drop down on navigation bar
Social media Icons in Navigation bar
Pagination and other elements
Social media icons in footer
Social media icons in side navigation
Icons in text and paragraphs. Used to highlight content.
Icon variation may include a circle icon taking over the whole 75×75 box.
ICON COLOURS
Design System
IMAGERY
IMAGERY
The main photos should show off nature, how the Brand works around the world and where. They should clearly represent the message the brand is trying to convey. The images used on the webpage are used as backdrops, used in cards and even used as buttons. Images are always used together with links for articles.
PHOTOGRAPHY
The brand’s photography plays a critical role in communicating its message that people need nature. The themes are optimistic, intimate, and, when appropriate, human-focused. The beauty of the natural world is showcased, featuring people, landscapes, and marine and terrestrial species. The brand’s style is bold, colorful, and saturated, with a photojournalistic approach. The brand acknowledges that our Earth can sometimes outwardly display turmoil, and photos depicting disaster and degradation can be used in moderation, but never without a message of hope.
INTERACTIVE PHOTOS AND VISUALISATION
The websites uses lots of interactive pictures as links and gateways to different types of content. In some instances, pictures are being highlighted when hovering over. In other places, the pictures are used as back drops for buttons and information such as the example below.
INTERACTIVE PHOTOS AND VISUALISATION
Design System
COMPONENTS - Buttons and Inputs
Components are the building blocks of a user’s experience with a product or service. They encompass aspects like layout, color, typography, buttons, forms, icons, and more. They wield substantial influence over user interaction and experience. Skillful design and integration of these UX components yield more intuitive, user-friendly, and engaging products.
BUTTONS
Design System
COMPONENTS - Form
Design System
COMPONENTS - Cards
CARDS
Cards are elements that displays information in a condensed and visually appealing format. They are rectangular containers that typically contain a piece of information or a group of related information, such as an image, title, description, and action buttons.
Cards are often designed to be responsive, meaning they can adapt to different screen sizes and orientations. They can also be interactive, allowing users to perform actions such as liking or sharing content.
Overall, Cards can improve the user experience by making it easier to scan and understand content, while also providing a visually appealing and engaging interface.
Design System
TOP NAVIGATION
Design System
FOOTER
Design System
STYLES
CORNER RADIUS
Conservation International uses no corner styles. That means that all buttons, cards and has a 0 degrees corner. We did find some inconsistencies with additional buttons as exampled below. However we believe the main style uses no corner radius on elements.
SHADOW
Conservation International uses no shadow styles except header logo and solid colours in footer.
IMAGERY
The main photos should show off nature, how the Brand works around the world and where. They should clearly represent the message the band is trying to convey. The images used on the webpage are used as backdrops, used in cards and even used as buttons. Images are always used together with links for articles.
IMAGERY
The shape of the photos on videos used are never rounded. They are always squares, but can be used in different formats. The corner radius should always be 0.
Design System
INTERACTIVE DESIGN
