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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Nudge Rewards is one of Canada’s top emerging technology businesses, focused on building innovative mobile solutions with tangible rewards to drive positive social change.
Formerly known as Greengage Mobile, the brand relaunch was lead by a new name, visual identity, responsive website, and supporting collateral – all to reflect Nudge’s position as a leader in CSR and social-purpose software.
The name “Nudge” was chosen based on the behavioural science theory arguing that positive reinforcement and indirect suggestion can greatly influence decisions and promote compliance within a group.
Brainstorming for the logomark was centered around this concept, along with the idea of physically encouraging something to start an action.
By having an ownable visual treatment applied to the first N letterform, the letter can act as a standalone icon for social media and other instances where it appears in conjunction with the company name.
A bright, fresh, contemporary colour family was crafted for use in various Nudge collateral. These colours were chosen to directly represent the company’s goals, target sectors, and audiences.
The bright colour palette was leveraged in the web and mobile app designs to further enhance the smart and approachable brand direction. Flat colours and cohesive icons were developed to create an engaging and easy to use interface, helping in user adoption.
The Nudge website is a breath of fresh air, with clear and focused messages telling the brand story. The photographic art direction incorporated bright lifestyle shots of the community engaging sustainability, wellness, and volunteer initiatives without being too obvious or expected.
Clean illustrations provide quick visual overviews for the different How it Works bullet points. When viewed on a phone, the site seamlessly scales down to provide a more comfortable reading size and overall user experience for intimate mobile browsing.
The photographic art direction found on the website is carried over into Nudge’s print collateral, including postcards and other leave-behind material.
The line illustrations act as a counterpoint to the lifestyle photography, grounding the pieces and adding diversity to the graphic language while contributing to a sense of technical expertise.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
HackerYou offers full- and part-time courses for anyone interested in web dev and design. Frank and Vivian are excited to announce they will be returning to teach the spring sessions of Intro to Design Fundamentals & Applied Visual Design. Classes begin on May 5, 2015 – apply today!
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.
Studio Function is proud to announce our recent win for “Best Canadian Studio Website” at the 13th annual FITC Awards. FITC produces design and technology focused events worldwide which inspire, educate and challenge attendees, with the Awards celebrating the best of the digital media industry across the globe.
Check out all of this year’s winners and finalists from Toronto and beyond at fitc.ca/awards/2014.
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.