Studio Function is Vivian Hui, Frank Maidens, Ryan McLaren & Beth Martin

Case Studies

Marketmaker Magazine

< back    1 of 12    next >

Who are the Market Makers?

Marketmaker Magazine is a new online destination & publication tailored to deliver news on the small and medium cap business community. The inaugural iOS issue showcases profiles of noteworthy individuals and organizations doing important work in new media, education, sustainability, social innovation, etc.

< back    2 of 12    next >

Typographic Exploration

In the early stages of the identity design process, a multitude of typefaces are explored to fully vet the feelings and visual associations contained within. After a comprehensive divergence of options, certain approaches are selected for further consideration.

This process of divergence and convergence allows for multiple entry points for client feedback and ensures the identity design stays on track with the parameters outlined in the creative brief.

< back    3 of 12    next >

Wordmark Convergence

The refined wordmark concepts narrow in on typographic solutions that achieve the communication goals and appropriately position Marketmaker against other competitors in the space.

< back    4 of 12    next >

Icon Convergence

Refined icon treatments were also developed to fully explore the potential of each identity design concept.

Because Marketmaker knew that responsive web design was a core requirement of their web strategy, the full logo needed a simplified icon to fall back on when available screen space was reduced in mobile browsers.

< back    5 of 12    next >

Completed Logomark

The final logomark for Marketmaker combines a wordmark that feels editorial & digital with a simplified M icon that metaphorically represents fluctuations in various markets.

The icon was also designed to reflect the phonetic structure of ‘market-maker’ – fusing two similar elements into one visually unified whole.

< back    6 of 12    next >

Responsive Web Experience

A highly visual approach to the homepage content drove the responsive web design process, resulting in a final product that does not look like your typical business news website.

Colourful bars representing different article categories take over when the browser is scaled down to mobile – ensuring a highly visual experience is preserved when images have to be dropped to lighten the page load.

< back    7 of 12    next >

Responsive Web Experience

Special consideration was paid to the website’s expression in tablet viewports. Taking advantage of responsive design allowed us to present the site content in a way that felt more like magazine editorial – resulting in modified layouts that are easy to navigate with touch, and would go well with a sunny nook and a cup of espresso.

< back    8 of 12    next >

Article Design

Article design also took full advantage of responsive treatments, ensuring the reading and visual experience of each piece was preserved regardless of the viewport.

< back    9 of 12    next >

iOS Magazine Design

Special content was developed for the iPad magazine, available for download in the App Store. Marketmaker’s content strategy called for delineation between website and magazine content, providing multiple touchpoints for the user, and the opportunity for the editors to tell different types of stories with a faceted approach to the brand.

< back    10 of 12    next >

Magazine Features

Feature articles in the iPad issues incorporate more spot illustrations, more full-screen images, and other interesting layout opportunities afforded by the medium.

< back    11 of 12    next >

Extensions of the Brand

Consistent approaches to photo treatments and illustrations are ownable and maintain a high level of visual interest in each article.

< back    12 of 12    next >

The Full Picture

The development of robust colour, typographic, and layout design systems allows the Marketmaker brand to navigate a myriad of design contexts with ease and consistency. Stay tuned to marketmakermag.com for new content and iPad issue releases.

Learning Labs

< back    1 of 11    next >

The Future of Learning

Brought to you by the team that created Ladies Learning Code, Learning Labs is an organization working to empower adults and youth to feel comfortable learning technical skills. By providing access to a variety of workshops, part-time, and full-time courses, Learning Labs is a leading force for digital literacy in Toronto and beyond.

< back    2 of 11    next >

Sketching & Ideation

Brainstorming for the logo was centered around tech/code imagery, with a focus on a simple solution – since Learning Labs would be the umbrella brand for a multitude of smaller organizations, it was important that it be clean enough to recede.

< back    3 of 11    next >

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 logomark proved to be a simple, effective, and gender-neutral solution.

< back    4 of 11    next >

Completed Logomark

Distilling the most successful elements of the exploration down into a single mark is always a challenge. The final Learning Labs logo uses friendly typography in an uppercase setting which has a distinctly approachable, but technical feel. The icon takes its cue from the typeface and alludes to the “LL” acronym, while injecting feelings of code to the overall logomark.

< back    5 of 11    next >

Responsive Web Design

The Learning Labs website provides a clear framework for potential learners to find and discover literacy opportunities. The experience of first landing on the home page points towards the ultimate goal of finding the course that is right for the user.

< back    6 of 11    next >

Responsive Web Design – Home

It is an important practice in today’s contemporary web landscape to provide browsing experiences tailored to various devices. By working through a content strategy process with Learning Labs, simplified content was deemed most appropriate for the mobile experience.

< back    7 of 11    next >

Responsive Web Design – Member Organizations

The Learning Labs brand acts as the parent organization to members such as Ladies Learning Code, HackerYou, and Girls Learning Code (all of which are past Function clients). Each of these member organizations needed to keep an overall feeling of their existing brand equity, while aligning to the new Learning Labs visual language.

Member organization templates were created with scalability in mind, leveraging strong uses of brand colours to marry these different properties into a consistent brand family.

< back    8 of 11    next >

Responsive Web Design – Courses

Like the organization pages, courses offered by different members – in this case, HackerYou – needed to reflect their existing brand elements. A large amount of content was comfortably captured on short pages by using expanding accordion elements with clear, visual labels, allowing users to quickly skim and find the right information.

http://learninglabs.org

< back    9 of 11    next >

Responsive Web Design – Blog

By breaking out of the typical framework for this section of the site, the Learning Labs blog becomes its own property and a go-to destination for the most up-to-date news coming from Learning Labs and its member organizations. It was important to highlight the various blog contributors as these are the people that make the organization special.

http://blog.learninglabs.org

< back    10 of 11    next >

Print Collateral

A graphic language for member sponsorship packages was established through a marriage of the Learning Labs brand with the existing look and feel of the member organizations, in this case Ladies Learning Code.

< back    11 of 11    next >

Print Collateral

Data, text, and marketing messages are treated with the same approachable and highly legible type found throughout the Learning Labs website. Infographics leveraging member organization brand colours paired with Learning Labs icons help pace the content while providing the reader with a visually rich and interesting experience.

The Working Group

< back    1 of 10    next >

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.

< back    2 of 10    next >

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.

< back    3 of 10    next >

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.

< back    4 of 10    next >

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.

< back    5 of 10    next >

Consistent Visual Brand

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

< back    6 of 10    next >

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.

< back    7 of 10    next >

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.

< back    8 of 10    next >

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.

< back    9 of 10    next >

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

< back    10 of 10    next >

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.

Fluency 21

< back    1 of 13    next >

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.

< back    2 of 13    next >

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.

< back    3 of 13    next >

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.

< back    4 of 13    next >

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.

< back    5 of 13    next >

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.

< back    6 of 13    next >

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.

< back    7 of 13    next >

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.

< back    8 of 13    next >

Simplifying Information

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

< back    9 of 13    next >

Pushing Conventions

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

< back    10 of 13    next >

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.

< back    11 of 13    next >

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.

< back    12 of 13    next >

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.

< back    13 of 13    next >

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.

Éclat School of Performing Arts

< back    1 of 11    next >

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.

< back    2 of 11    next >

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.

< back    3 of 11    next >

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 that its communicative value be properly assessed and tested in early design applications.

< back    4 of 11    next >

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.

< back    5 of 11    next >

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.

< back    6 of 11    next >

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.

< back    7 of 11    next >

Business Cards

These cards were designed to embody the design systems outlined in the brand standards manual while communicating an elegant confidence.

< back    8 of 11    next >

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.

< back    9 of 11    next >

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.

< back    10 of 11    next >

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.

< back    11 of 11    next >

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

Cicada Design Inc.

< back    1 of 8    next >

Leaders in Design Visualization

Cicada Design tells compelling 3D stories about complex projects, ranging from large-scale urban design to minutely detailed furniture.

< back    2 of 8    next >

Sketching & Ideation

Conceptual research based on a creative brief developed with the client lead to exploration focused on iconic and typographic integrations of cicada themed imagery.

< back    3 of 8    next >

Logo Convergence

It is at this stage that we clean up and fully develop the most successful ideas uncovered in the sketching process. In this case, delicate typography and the incorporation of subtle wing venations were brought to life digitally.

< back    4 of 8    next >

Completed Logomark

Distilling the most successful elements of the exploration down into a single mark is always a challenge. Cicada’s completed logo features delicate custom typography with an integrated, ownable wing icon contained within the lowercase a.

< back    5 of 8    next >

Portfolio Website Design

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

< back    6 of 8    next >

Portfolio Website Design

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.

< back    7 of 8    next >

Supporting Print Brochures

By utilizing a more vertical brochure size, landscape images could be displayed comfortably on double page spreads, while accommodating extreme vertical images easily.

< back    8 of 8    next >

Stationery

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.

Selected Work

Web Design

< back    1 of 24    next >

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.

< back    2 of 24    next >

Pressly

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

< back    3 of 24    next >

Pressly

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

< back    4 of 24    next >

Pressly

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

< back    5 of 24    next >

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.

< back    6 of 24    next >

Public Inc.

Long blocks of written copy were transformed into easily digestible sections, labeled with clear thesis statements. This solution on the desktop site translated into a very user-friendly option for the mobile browsing experience.

< back    7 of 24    next >

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

< back    8 of 24    next >

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

< back    9 of 24    next >

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

< back    10 of 24    next >

Éclat School of Performing Arts

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

http://eclat-arts.com

< back    11 of 24    next >

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.

< back    12 of 24    next >

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.

< back    13 of 24    next >

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.

< back    14 of 24    next >

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.

< back    15 of 24    next >

The Working Group

Based in Toronto for over a decade, 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.

< back    16 of 24    next >

Antelope Inc.

Antelope combines a proprietary analytics platform with their team of engineers and strategists to answer social media’s most challenging questions. Spot illustrations and clear typographic hierarchies help viewers easily uncover Antelope’s key messages and value proposition.

http://antelopeinc.com

< back    17 of 24    next >

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.

< back    18 of 24    next >

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

< back    19 of 24    next >

ZippMarket

The ZippMarket e-commerce site targets a young, professional, urban audience. Common food and home products are brought to life by using casual and fun lifestyle photography to sell items.

< back    20 of 24    next >

Learning Labs

The responsive Learning Labs website provides a clear framework for potential learners to find and discover literacy opportunities. The experience when first landing on the home page all points towards the ultimate goal of finding the course that is right for the user.

< back    21 of 24    next >

Learning Labs

It is an important practice in today’s contemporary web landscape to provide browsing experiences tailored to various devices. By working through a content strategy process with Learning Labs, simplified content was deemed most appropriate for the mobile experience.

http://learninglabs.org

< back    22 of 24    next >

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.

< back    23 of 24    next >

PostageApp

The carrier pigeon concept uncovered in the logo exploration phase shines with the different plans: egg, carrier pigeon, falcon, owl, eagle, pterodactyl (and beyond). Attention to detail in the user interactions help to create a more enjoyable purchasing experience.

http://postageapp.com

< back    24 of 24    next >

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

Visual Identities

< back    1 of 7    next >

< back    2 of 7    next >

< back    3 of 7    next >

< back    4 of 7    next >

< back    5 of 7    next >

< back    6 of 7    next >

< back    7 of 7    next >

Print & Editorial

About Us

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

Learning Labs

From the awesome team that created Ladies Learning Code, HackerYou, and other national youth programs, Learning Labs is a new digital literacy hub in the heart of downtown Toronto. Frank and Vivian were honoured to be involved in the branding, responsive website design, and environmental graphics for their 2014 launch. Check out learninglabs.org.

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

Coins

Peter is a super talented composer and instrumentalist based in Toronto. His work includes original soundtracks for film, television, and video games – which he manages alongside a busy schedule of live performances and an involvement with Maker Kids.

Recently he has been focused on channeling his natural aptitude for melody and rhythm into his own brand of electronic dance music under the moniker Coins. Listen to the latest tracks and follow @coinselectro.

The Blog

Diamonds in the Rough

All of our lives are inundated with visual design, and unless you’re living on the moon, it’s everywhere you look. For us, it's difficult to get through a day without our critical design thinking senses tingling for one reason or another. This blog focuses in on selected examples of terrible communication design pieces that we stumble upon throughout our day-to-day, breaking down what we think went wrong, and also trying to learn from these unpolished diamonds in the rough.

View the blog