Studio Function is Vivian Hui, Frank Maidens & Ryan McLaren

Case Studies

The Working Group

Helping power the Toronto tech community

Based in Toronto for the last 10 years, The Working Group is a web and mobile application dev shop with the mission to be the best software company in the world to learn, work, create, and grow at.

Company culture has always been at the heart of their brand and their corporate materials required a visual update to reflect their core values.

1 of 11

Brand Update & Business Cards

Typography in the logomark was updated to feel more visually balanced and contemporary, and an expanded colour palette was developed to help support the original TWG green, representing 4 new subsections of the business: Web, Mobile, Community, and Fund.

2 of 11

Illustration Art Direction

Whimsical illustration has been at the core of TWG’s brand for over 10 years and helps to distinguish them from competitors. It was important to continue to leverage and evolve this brand art direction. Families of spot illustrations were conceived to represent TWG’s work/products, technology, and corporate culture.

3 of 11

Printed Marketing Material

Although TWG is a predominantly cloud-based company, the need for printed/offline marketing materials still arise. These pieces are meant to be one of the first touchpoints with a client, and showcase the illustrations in a professional manner, consistent with the brand.

Spot illustrations come together to produce the brand pattern, which helps to unify various marketing materials.

4 of 11

Consistent Visual Brand

Flexible and easy to use InDesign templates were designed to allow employees to quickly create beautiful and functional sales materials.

5 of 11

Website Design

Illustrations interact with devices on the website to display portfolio pieces. Spot illustrations and icons help to drive users to explore different areas of the site.

6 of 11

Website Design – The Team

A strong type hierarchy promotes ease of reading and powerful messaging. The use of serif typography provides a comfortable, serious counterpoint to the lighthearted illustrations.

7 of 11

Website Design – Process

Illustration was once again used to help visually represent TWG’s corporate process. This library of visual brand assets allow TWG to keep any piece of corporate literature – online or offline – interesting and engaging.

8 of 11

Website Design – Mobile

Conceptual masthead illustrations that integrate actual portfolio pieces while visually communicating high-level ideas are effective both when there is supporting written copy, or in standalone situations (such as projected presentations).

9 of 11

Website Design – Portfolio

Thumbnails that show the mobile work in context help provide an at-a-glance representation of recent work. For users that want to see more work, each thumbnail expands to reveal a full-size slideshow and info.

10 of 11

Facebook theme

A simple square user avatar is very legible when scaled to smaller sizes and the brand pattern cover image helps connect this Facebook page to their other materials. Visual integration with social media touchpoints is an important aspect of any brand system.

11 of 11

Fluency 21

A New Approach to Lesson Planning

The 21st Century Fluency Project has the ambitious goal of changing the way educators present curriculum. Our friends at TWG engaged us to collaborate and execute the designs required, and to update to their brand and a corresponding web app to facilitate the construction of contemporary lesson plans around the world.

1 of 13

Digital Sketching

Informed by a creative brief and rooted in research, an initial sketching process provides identity campaigns the required fundamentals for insight and success.

2 of 13

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 13

Completed Logomark

The final logomark design communicates unity and dynamism. It is meant to represent the five 21st century fluencies and their borderless relationship to one another. Clean, sans serif typography also contributes to a feeling of modernity.

4 of 13

A Brand Update

Most visual identity campaigns don’t start from the ground up, but rather progress from an existing foundation; Fluency is no exception. The updated logomark still carries the same flavour and core message found the original.

5 of 13

Paper Prototypes

Web app design can be a very complicated process so it is important to make sure the client, designers and developers all have a clear understanding of functions and features before starting the visual design. This paper prototyping process helps plan content and sets up a foundation for successful execution.

6 of 13

Web App Design

The final Fluency web app design was created in collaboration with The Working Group and leverages the circular motif established in the identity. Finding ways to incorporate rounded shapes into the layout also helped the site feel current and highly tactile.

7 of 13

Simplifying Information

Graphic systems were required to present large amounts of information efficiently and visually.

8 of 13

Pushing Conventions

Circular buttons in the secondary navigation were designed to incorporate the graphic language of the visual identity.

9 of 13

Smart Layouts

The application needed to manage a system for different users to leave comments on the unit plans, but doing so in a limited space was challenging. A sliding comment sidebar helps to comfortably display all messages left by users and could also be closed to maximize the working space.

10 of 13

Designed to Fit Multiple Viewports

Many educators today are using tablets to assist with lesson prep, as well as in the classroom. The Fluency site was designed from the outset to fit comfortably in desktop and tablet viewports.

11 of 13

A Comprehensive Graphic System

There is always more to an identity that just a logomark. Fluency required a host of other resources to communicate effectively and consistently across the board. The selection of colours and typefaces, development of icon sets and the production of other graphic standards all ensure the identity is impactful and memorable.

12 of 13

Ready to Use

The classroom view allows for polished and extremely legible lesson plans that translate easily to print stylesheets. The Fluency 21 Unit Planner is a highly functional tool with a low learning curve that educators can use to plan progressive, contemporary class projects.

13 of 13

É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.

http://eclat-arts.com

11 of 11

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.

http://ladieslearningcode.com

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

The 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.

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.

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

Selected Work

Web Design

Pressly

Pressly, the latest innovation by nulayer, is a platform that helps publishers and content marketers build and deliver beautiful tablet and smartphone content apps, quickly and easily. A new marketing site design was required to encourage beta signups.

1 of 23

Pressly

The interaction between photography and various tablet and mobile experiences was an important way to highlight content as king.

2 of 23

Pressly

The brand art direction successfully blends photography and vector line illustrations, creating a technical and approachable look and feel.

3 of 23

Pressly

Strong grids and layout design help the viewer easily understand Pressly’s features and pricing options.

4 of 23

HackerYou

HackerYou offers one-day workshops and three-month courses for anyone who wants to learn how to code. The website helps to communicate the school’s unique approach to learning and allows potential students to access details and signup.

http://hackeryou.com

5 of 23

Public Inc.

A new responsive site was designed for Public Inc. – an agency, consultancy, and incubator – to help them attract new business, talent, and better describe their service offering.

6 of 23

Public Inc.

The responsive site has both optimized layout and content tailored to various breakpoints, including tablet (portrait and landscape) and smartphones.

http://publicinc.com

7 of 23

Éclat School of Performing Arts

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.

8 of 23

Éclat School of Performing Arts

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 fine print details. A system of accessible type hierarchies also help to promote reading and exploration.

9 of 23

Éclat School of Performing Arts

Dramatic photography throughout the site helps keep the Éclat brand consistent.

http://eclat-arts.com

10 of 23

Cicada Design Inc.

Cicada’s extensive portfolio is showcased in a manageable way on one page, with additional content hidden in carousels or external project pages.

11 of 23

Cicada Design Inc.

A sticky navigation at the top allows for easy browsing between the different sections and the peekaboo effect creates an engaging tension. Clean grid variations help distinguish between the different types of content.

12 of 23

Felix Wedgwood Photography

This redesign for Felix Wedgwood Photography showcases his work in a large and impactful way, while bringing in his pinhole/diecut branding elements in subtly. The user is greeted with a random image upon arrival each time to keep things fresh and provide a quick browsing experience.

13 of 23

Felix Wedgwood Photography

Contemporary javascript functionality helps bring content and images to life – at a glance browsing is achievable through thumbnail grids organized by type.

14 of 23

The Working Group

Based in Toronto for the last 10 years, TWG is a web and mobile application dev shop. A strong type hierarchy promotes ease of reading and powerful messaging. The use of serif type provides a comfortable, serious counterpoint to the lighthearted illustrations.

15 of 23

Food & Water Institute

With a lot of text information to communicate throughout the site, clear type hierarchies were required to promote readability. 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.

16 of 23

Food & Water Institute

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

17 of 23

Ladies Learning Code

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.

18 of 23

Ladies Learning Code

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.

http://ladieslearningcode.com

19 of 23

PostageApp

Collaborating with TWG, a unique design solution for PostageApp was created, with strong type hierarchies which help lead the user through to key information on the home page. Loose illustrations and diagrams add a level of approachability and whimsy, while providing a quick overview of how PostageApp works.

20 of 23

PostageApp

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.

21 of 23

PostageApp

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.

http://postageapp.com

21 of 23

MCM Inc.

A clean and simple portfolio showcase was designed and developed in line with MCM’s new brand update, taking them from a flash website to a scalable and easy to update template which lets the beautiful work speak for itself.

http://mcminc.biz

23 of 23

Visual Identities

Print & Editorial

The Working Group

Although TWG is a predominantly cloud-based company, the need for printed/offline marketing materials still arise. These pieces are meant to be one of the first touchpoints with a client, and showcase the illustrations in a professional manner, consistent with the brand.

Spot illustrations come together to produce the brand pattern, which helps to unify various marketing materials.

1 of 20

The Working Group

Flexible and easy to use InDesign templates were designed to allow employees to quickly create beautiful and functional sales materials.

2 of 20

The DIDDI Project

Continuously acquiring sponsorship is an important activity for non-profit groups like DIDDI. As this information package will likely be one of the first encounters addressees will have with the new identity, we designed it to feel established, and explore the ideas beneath Digital, Interactive, Design, Development, and Innovation.

3 of 20

The DIDDI Project

Background on DIDDI, its goals, and parent company, as well as a list of sponsorship opportunities all needed to be communicated simply and directly.

4 of 20

Éclat School of Performing Arts

Éclat needed a brochure designed to distribute in high schools and education fairs across Canada. With the consistent use of this striking image on the cover, the website, signage and advertisements, brand recognition is achieved through photography as well as logo and type treatments.

5 of 20

Éclat School of Performing Arts

On the centre spread, clean typography presents the messaging strategy we developed for Éclat, highlighting the philosophy, mentorship opportunities and bilingual environment that exist at the school.

6 of 20

Dandyhorse Magazine

Tammy Thorne, Dandyhorse’s Editor-in-Chief asked us to art direct the magazine’s 2010 spring issue.

7 of 20

Dandyhorse Magazine

The political climate at the time of the issue’s release made for emotionally-charged feature articles, supported by beautiful illustrations from Toronto’s own Elicser Elliott.

8 of 20

Dandyhorse Magazine

News spreads, featured articles, bike spotting and other magazine sections all needed to be governed by a consistent editorial design system.

9 of 20

Dandyhorse Magazine

The use of white space and restraint keeps a critical focus on what’s most important: beautiful submissions from the magazine’s roster of contributing artists.

10 of 20

Caplansky’s Delicatessen

We often work with existing identities to leverage core design elements into new applications. Caplansky’s needed new restaurant menus, signs, flyers and business cards, all centered around their existing brand.

11 of 20

Cicada Design Inc.

The exclusion of colour from the Cicada stationery suite keeps everything clean and confident feeling. When looking at the stationery and print brochures together, the images pop against the clean backgrounds.

12 of 20

Cicada Design Inc.

Print brochures were designed for Cicada to help showcase their extensive portfolio. By utilizing a more vertical brochure size, landscape images could be displayed comfortably on double page spreads, while accommodating extreme vertical images easily.

13 of 20

Nick di Genova

A Japanese curriculum vitae and introductory letter was designed for Nicholas Di Genova to help him establish relationships with some of Japan’s most notable contemporary art galleries.

14 of 20

Nick di Genova

All English-to-Japanese translations supplied by the lovely and talented Masako Kameyama.

15 of 20

LE Gallery

A brochure produced to showcase the new works of David Trautrimas, a resident artist of LE Gallery.

16 of 20

LE Gallery

Interesting alignments and discreet typographic treatments help to keep the reader engaged with the artwork.

17 of 20

BFF

The Bicycle Film Festival travels to 26 cities internationally every year. This café poster and mosaic were designed for the Toronto leg of the tour to generate buzz for the 4 days of events and drive online ticket sales.

18 of 20

Ladies Learning Code

Taking visual cues from the website, the printed sponsorship package shares the same approachable and well-composed visual qualities, with highly legible type.

19 of 20

Ladies Learning Code

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.

20 of 20

About Us  Frank, Vivian, & Ryan

Design for Love

Function is a Toronto-based design studio whose practice offers a dynamic range of communication design services. Our focus is the propagation of meaningful, functional solutions to visual design challenges, great and small.

Visual identity campaigns, messaging strategy, contemporary web solutions, print collateral, product packaging, and illustration are all passions. In short, we design for business, we design for love.

Involvement

From Rooftop to Tabletop

Rooftop Gardens Inc. is focused on bringing green spaces to the urban landscape, offering products and consultations to help customers convert rooftops, balconies, windows and decks into organic food-growing opportunities. Frank and Vivian collaborated with the team at Rooftop Gardens to build a visual identity and launch their new website – visit rooftopgardensinc.ca.

Working with budding startups is near and dear to us – we love collaborating with other passionate entrepreneurs to help grow ideas and establish a brand strategy in their early stages. Email us and let’s get started.

#xoTO

Modifide Bike Polo Equipment

Toronto’s own Steven Sal Debus (formerly of Modrobes) has fallen in love with bike polo and is presently responsible for producing some of the sport’s best equipment. Modifide is a new line of ultra-light mallet heads and shafts designed for performance and durability that every player can benefit from. Support Toronto-based innovation & awesomeness – visit modifidebikepolo.com or their Facebook page.

Food for Eyes

Bringing complex concepts to life

Sam Island is a freelance illustrator with a simple and distinct comic-inspired style. His bold use of colour and cheeky sense of humour always make us smile. He has been recently published in The New Yorker, Bloomberg Businessweek, and The New York Times.

His body of work is an inspiration to us – check out samislandart.com for examples of his awesome, recent illustrations.