Case Studies
Food & Water Institute
Green Education & Awareness
The Food and Water Institute is a registered educational charity with a focus on clean, healthy food and water. They share science-based information, and challenge consumers to make informed choices.
1 of 9
Sketching & Ideation
Conceptual research based on a creative brief developed with the client lead to exploration focused on a harmonious visual balance and integration of the two parts of their organization. Various typographic styles were explored to reflect the institute’s contemporary and academic qualities.
2 of 9
Logo Convergence
The rough brainstorming sketches were then cleaned up and further refined digitally, narrowing in on suitable typographic and iconic treatments. Opacity and gradient effects proved to be a subtle way to communicate the interaction of both elements.
3 of 9
Completed Logomark
Further refinements led to a bold, memorable icon, paired with a matter-of-fact wordmark. This structural logomark speaks to both ‘food’ and ‘water’ in a visually balanced way.
4 of 9
Business Cards
The backs of the business cards zoom in on the icon in order to take advantage of the gradient colour fields. They are also smaller than a traditional business card size, adding interest while saving paper.
5 of 9
Website Design
With a lot of text information to communicate throughout the site, clear type hierarchies were required to promote readability.
http://foodandwaterinstitute.org
6 of 9
Website Development
Fullscreen background images that scale with the browser help signify a change between sections. This site was also developed with a fixed sidebar navigation so the user can easily slide up and down between page sections.
http://foodandwaterinstitute.org
7 of 9
Website Scalability
Since The Food & Water Institute holds regular events and workshops each season, it was vital to design scalable and easily updatable content blocks. By designing a narrow column, full width content still yields comfortable line lengths for reading.
http://foodandwaterinstitute.org
8 of 9
Twitter Theme
A background photo and colour palette that reflect the website helps make any Twitter page feel like part of the same brand family, as visual integration with social media touchpoints is a critical aspect of any brand system.
9 of 9
Éclat School of Performing Arts
Dedicated to the Arts
Éclat School of Performing Arts is a bilingual summer school offering courses in Toronto. Their mandate is to provide high school students the opportunity to learn from accomplished theatre professionals in a mentor/classroom setting.
1 of 11
Naming & Logo Sketching
The founders came to Function with a business plan, but they lacked a name, visual identity and a messaging strategy. Working with them and their creative board, we generated name concepts that spoke to passion, inspiration, and academia.
”Éclat School of Performing Arts“ was selected as the name as it is a performance-related term that evokes feelings both in French and English, representing the bilingual nature of the school.
2 of 11
Logo Convergence
Logo sketches are a great, unrestricted way to try something new visually, but it’s not until a sketch is refined into a preliminary logomark can its communicative value be properly assessed and tested in early design applications.
3 of 11
Completed Logomark
Éclat’s logo was designed to express kinetic luminance, paired with a beautifully-crafted wordmark. Custom letterforms ensure legibility and promote overall visual harmony.
4 of 11
Brand Consistency
For Éclat, the generation of a brand standards document was essential to the logomark’s consistent and successful deployment across all of its applications. Guides for “clear space”, sizing, and colour are provided to help retain the logo’s visual integrity.
5 of 11
Brand Standards Manual
This booklet helps anyone charged with applying the Éclat identity to make informed decisions relating to the logo’s placement, sizing, alignments and supporting typographic selections; effectively a pilot light for the life of the identity and a valuable reference piece for anyone new to its design systems.
6 of 11
Business Cards
These cards were designed to embody the design systems outlined in the brand standards manual while communicating an elegant confidence.
7 of 11
Brochure Design
Through this brochure, students and parents are given an introduction to Éclat’s philosophy and the courses being offered in the coming season. Highlighting creative board member Fiona Reid and driving viewers to the website were other important objectives for the piece.
8 of 11
Website Design
Home to all course descriptions, teaching practice info, instructor bios, and registration details, the Éclat website was designed to be the final destination for anyone interested in attending the school.
9 of 11
Web Development
We developed this site so that as users browse further down the page, the header image is hidden and the nav bar sticks to the top, for easy access. This technique allows the site to keep the number of sections to a minimum, by showing a large amount of information on long pages.
10 of 11
An Effective Web Solution
Content on this site is designed with various types of readers in mind – from casual viewers who are skimming content, to interested students who need to know all the nitty-gritty details. A system of accessible type hierarchies also help to promote reading and exploration.
11 of 11
Vizible Corporation
Pioneers of Digital Interfacing
Vizible was an early front-runner in digital 3D interfacing with online media. Their patented ‘cell’ technology was a container and visual platform for websites, video, audio, RSS feeds and still images alike.
1 of 9
Sketching & Ideation
We love energetic sketching. Informed by creative briefs and rooted in market and conceptual research, it provides identity design campaigns the required fundamentals for insight and success.
2 of 9
Logo Convergence
Certain sketched concepts will prove themselves worthy of refinement and finesse. It is in this convergent stage where ideas are more fully developed, vetted for communicative effectiveness and tested in application.
3 of 9
Completed Logomark
Vizible’s completed logo depicts all media and information as a Roman dodecahedron, framed by a window of subjectivity. An expression of the company’s ‘cell’ technology and the morphic nature of human experience.
4 of 9
Corporate Website Design
Vizible’s corporate website uses the logo as a keystone in the design grid. This provides structure for content and ensures the identity’s prominence.
5 of 9
Stationery
The core elements of Vizible’s printed stationery package.
6 of 9
Desktop Background
A number of large posters and workstation desktop graphics were produced to inspire employees and partners.
7 of 9
Supporting Product Logomarks
Supporting marks were developed for software products and internal developer tools. These marks needed to be rooted in the main Vizible identity, while also communicating messages specific to their deployment.
8 of 9
Vizible Labs Wordpress Site
This design was created to support Vizible Labs, a testing ground for innovations and the announcement other news and successes.
9 of 9
PostageApp
Making Email from Web Apps Easy
PostageApp was created by The Working Group to make sending personalized, transactional or event driven emails from web apps easier. We partnered with TWG for strategy and design of all touchpoints of the PostageApp brand, creating a fun and approachable design system for an otherwise very utilitarian developer tool.
1 of 10
Logo Exploration
Research and brainstorming lead to a multitude of logo concepts, focusing on the obvious relationship between mail and the post office, along with other iconic postal marks, such as cancellation stamps, carrier pigeons and air mail labels.
2 of 10
Completed Logomark
The chosen logo for PostageApp employs the traditional postal red and blue, paired with bold typography. The diagonal striping references mailing envelopes in a subtle way, while framing the entire mark into a compact square shape.
3 of 10
Website Wireframes
We worked with TWG on site planning and content strategy, our efforts culminating in clear and concise website wireframes to help guide copywriting, marketing efforts, and the next design phase.
4 of 10
Website Design
Strong type hierarchies help lead the user through to key information on the PostageApp home page. Loose illustrations and diagrams add a level of approachability and whimsy, while providing a quick overview of how PostageApp works.
5 of 10
Website Design – Plans & Pricing Grid
The carrier pigeon concept uncovered in the logo exploration phase shines with the different plans: egg, carrier pigeon, falcon, owl, and eagle. Attention to detail in the user interactions help to create a more enjoyable purchasing experience.
6 of 10
Website Design – Infographics
We often design and develop multiple page templates for different types of content to help create visual interest and maintain the user's attention when browsing.
7 of 10
Illustration
Origami-inspired bird illustrations bring in the carrier pigeon and delivery concept. They also play on the idea of paper vs. digital mail.
8 of 10
Web App Design
We were able to lend a non-developer viewpoint to the app ux and interface, creating something intuitive with a low learning curve. Advanced features are worked in so that they can be organically discovered when the time is right for the user.
9 of 10
Business Cards and T-shirts
Supporting PostageApp printed materials make use of the custom illustrations and colour palette.
10 of 10
Ladies Learning Code
Empowering & Inspiring Women
Ladies Learning Code is a women-run not-for-profit group working to empower everyone to feel comfortable learning beginner-friendly technical skills in a social, collaborative way. Hosting workshops several times a month, they are causing major ripples in the local and global tech scene.
1 of 10
Sketching & Ideation
Brainstorming for the logo was centered around tech/code imagery and focused in on the #ladieslearningcode hashtag that was popularized very early in the group’s formation.
2 of 10
Logo Convergence
It is at this stage that we fully develop any successful ideas uncovered in the sketching process. In this case, creating an ownable icon proved to be a simple, effective, and gender-neutral solution.
3 of 10
Completed Logomark
Distilling the most successful elements of the exploration down into a single mark is always a challenge. The final Ladies Learning Code logo has a custom hashtag symbol designed to match the round and mechanical feeling typography. The icon and colour are distinct and simple enough to be used in standalone applications.
4 of 10
Wordpress Website Design
The Ladies Learning Code website design is a refined, straightforward, living extension of the brand. Information is easily accessed through a sidebar navigation, and the starkness of the black and white is offset by hits of the friendly raspberry colour.
5 of 10
Asset Creation
New startups and not-for-profit groups often have few visuals assets, such as photos or videos, to anchor the brand around. We are often tasked with creating visual interest through other means, such as typography, icons, infographics and treating text in a visual way.
6 of 10
Growing the Site
As the organization keeps evolving, so do their online needs. Designed with scalability in mind, new site content is easily handled – it is easy to design a visually and technically consistent section for the site, leveraging the existing grids, typography, and icons.
7 of 10
Print Collateral
Taking visual cues from the website, the printed sponsorship package shares the same approachable and well-composed visual qualities, with highly legible type.
8 of 10
Print Collateral
Large blocks of content are broken up with professional event photography, helping pace the content while providing the reader with a glimpse into some past event successes.
9 of 10
Twitter Theme
A simple background image and colour palette help make any Twitter page feel like part of the same brand family. Visual integration with social media touchpoints is an important aspect of any brand system.
10 of 10
