The Blueprint is a quarterly magazine and website dedicated to what’s new in the hardware space. Combining news, opinion, reviews and a shopping experience, The Blueprint wants to be the number one stop for anyone interested in the latests gadgets and other advances in wearable technology.
The company was using an original logomark, but it lacked consistency when applied to various collateral. New concepts for an updated logomark were created to bring a constant look to all visual touch points. Both concepts also subtly reference various stages of product planning and manufacturing.
The Blueprint website seamlessly marries editorial content with shopping opportunities. Working under the creative direction of “Vogue meets Wired,” a distinctly fashion and tech art direction is carried throughout the entire web experience, with a stark black and white palette paired with hits of electric blue.
Consumer hardware goods are visually treated in a way typically reserved for high-end clothing, helping to cultivate a feeling of luxury. This art direction allows focus to be placed on the detail of products, encouraging viewers to covet hardware in the same way as other luxury items.
When browsing on any device, The Blueprint’s responsive site design adapts to showcase optimized images and text. Keeping with the established art direction for product photos, editorial content is treated in the same visually interesting manner to encourage readers to engage with content.
By embracing whitespace and letting the typography sing, all site content feels refined and intentional. Though stark in its colouring, readers are still encouraged to interact with site and have the opportunity to appreciate details in the hardware showcased throughout the site.
Each product spotlight was supported with team testing and review, represented with concise curator’s checks of approval. Interesting grids of photos helped highlight the process behind the product, and the making of the spotlight, allowing the reader a glimpse behind the scenes.
From coast to coast across Canada, Ladies Learning Code is a not-for-profit organization with a mission to be the leading resource for women and youth who want to become passionate builders of technology. Their workshops impart technical skills to absolute beginners in a hands-on, social, collaborative way.
Distilling the most successful elements of the exploration down to 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.
The Ladies Learning Code website provides a clear framework for potential learners to find and discover literacy opportunities in 19 cities across Canada. The experience of first landing on the home page points towards the ultimate goal of finding programming that is right for the user.
It’s important to provide browsing experiences tailored for various devices in today’s contemporary web landscape. By working through a content strategy process with Ladies Learning Code, pages were simplified to be more appropriate for the mobile browsing experience.
The Ladies Learning Code brand acts as the parent organization to other members such as Girls Learning Code and Kids Learning Code. Each of these programs needed scalable about pages to give more information about their mandate and ultimately connect learners with appropriate workshops.
With 19 chapters across Canada, the Ladies Learning Code programs rely on corporate sponsors and a variety of volunteer efforts.
A visually engaging page with illustrations, infographics, and concise calls to action help volunteers find ways to get involved and see what kind of social impact their contributions make possible.
By breaking out of the typical framework for this section of the site, the Ladies Learning Code blog becomes its own property and a go-to destination for the most up-to-date news. It was important to highlight the various blog contributors as these are the people that make the organization successful.
Data, text, and marketing messages are treated with the same approachable and highly legible type found throughout the Ladies Learning Code website.
Infographics leveraging brand colours and icons help pace the content while providing the reader with a visually rich and interesting experience.
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.
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.
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.
HackerYou is Canada’s first programming bootcamp, offering full- and part-time courses for people who want to learn to code.
They are passionate about helping people take charge of their career through a hands-on, project-based curriculum with some of Toronto’s most talented web professionals.
A final logo ultimately emerges as the most appropriate solution for the design challenge.
This mark for HackerYou feels young and vibrant, but also sturdy and established. The cursor icon represents each student’s potential, in addition to the commencement of their respective journeys.
With a few years of successful cohorts under their belt, HackerYou was ready for a site redesign to help potential students fully understand the depth of course offerings, and also the HackerYou community.
Photos and videos of the HackerYou classroom and communal spaces offer a glimpse into the vibe of attending HackerYou.
Through user interviews, it was determined that students often read through the course information multiple times before finally applying to the bootcamp. It was important to clearly show when each course was running throughout the year so prospective students could plan their time accordingly.
With a vibrant community and wealth of student success stories and work, the site aims to highlight the people and possibilities.
Flexible grid and content systems allow the site to be easily updated and kept feeling fresh as new testimonials and spotlights are added.
In addition to the full-time web development bootcamp, HackerYou also offers part-time courses that are often paired together – a consideration in the design of all part-time groupings.
A custom icon set representing the different languages, frameworks, and applications that students tackle in each course help add skimmable content to the page.
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.
blogTO is the leading news and culture site in Toronto with a larger online readership than NOW Magazine and Toronto Life. With over a decade of articles and reviews, they have established themselves as the go-to site for what’s happening in Toronto. Frank and Vivian were honoured to be involved in the visual identity update and responsive web design for their upcoming re-launch in Toronto and Montreal – stay tuned in 2016!
We love collaborating with passionate entrepreneurs and established businesses to help re-energize brand identities and offer insights that only outside collaborators can provide. Email us and let’s get started.
HackerYou offers full- and part-time courses for anyone interested in web development and design.
Having recently expanded to 12,000 sq. ft. on Queen St. West, HackerYou’s bright classrooms, new alumni lounge, and co-workspace make it the most inspiring place to learn and connect with other passionate minds in Toronto. Frank and Vivian have had the pleasure of helping build their brand identity over the last 3 years and truly believe that there is no better community in Toronto to advance your tech skills.
Although the gap between design mockups and front-end web development has been closing up, there are still many challenges for visual designers and developers working independently of one another. Our latest PDF introduces The Dev Pack: an outline of our design production process and suggestions for preparing mockups for dev handoff.