Branding & Design

Branding

Whether styling a brand for a startup and working from scratch based on nothing much more than a logo and product line, or adapting a strictly enforced brand guide for the web, we’ve been working at this as an agency for 15+ years. Owner Chris Gilroy has been designing for iconic brands since 1999, with over 20 years of professional experience. We take branding very serious, and enjoy well-thought-out UI and web styling that’s unique and personal to you and your business.
Featured Clients
Design by The Microtechs Devils Canyon Habanero Red Ale
Custom Styling can include everything from Font Families and Typography, Adaptive Sizes for Device Screen Width, and Custom FontFaces to match print, to animated and programmatic elements and functions. From designing custom icons, to configuring custom applications to respond and display in ways that are unique to the brand, the user experience and visual design should always communicate the brand.

Style Guide

When creating a Style Guide and working brand for the web, there are many aspects and applications that are often not anticipated. Beyond having default, primary, secondary, tertiary brand colors, different UI elements may have default, active, hover and disabled styles. Below are a few examples from the Oakland A’s intranet project. In addition to setting preconfigured rules and hierachy, there are practical functions that need to be preset globally. For example, when an admin creates a page that begins with a primary-colored section where the navigation is transparent, the Logo should adjust automatically to use the copyright-approved logo meant for colorful or dark backgrounds.
primary background
secondary background
warning
Full Screen
Note the brandmark logo above has changed to the round “A’s” version to adjust for the dark green Secondary Background color. The gold icons are now displayed in semi-transparent opacity white with the Light setting. Compare the elements, which have been automatically adjusted without any action needed from an Administrator, to the default settings on the right.

Custom Styling

On standard default backgrounds, the “Athletics” logo appears on the navigation bar with the Main Menu. The Navbar’s icons show in the Warning Gold background color with Light-style content, matching the highlighted interactive calendar beneath that is displaying dates from the database which have Homestand Games being played at the stadium. The Secondary Dark Green, which is actually a bit blue, is the standard default color for Text Headlines and Active elements.
On standard default backgrounds, the “Athletics” logo appears on the navigation bar with the Main Menu. The Navbar’s icons show in the Warning Gold background color with Light-style content, matching the highlighted interactive calendar beneath that is displaying dates from the database which have Homestand Games being played at the stadium. The Secondary Dark Green, which is actually a bit blue, is the standard default color for Text Headlines and Active elements.
Style Guidelines
  • Vets for Vets Healthcare Logo

    When we develop and design a new website for a company or organization that doesn’t have style guidelines and copyright rules, we essentially define and set the rules to present the client. Sometimes a logo is all we have to work from, and that’s okay. It represents the entire brand, as good logo design must do. The Microtechs branded Vets for Vets Healthcare with a logo that checks all the boxes. A healthcare industry company for veterans, red, white and blue are the obvious color palette. But following the wordmark and brandmark rules, notice the company name is in the art. There are two V’s, FOUR stars. Vets “four” Vets. The V is designed in the shape of a heart, for health. Its a home run at visually representing the heart and soul of the company. 

  • When creating a new brand from scratch, there are some fundamental laws to live and work by. One of the rules The Microtechs adheres to with as much rigor as possible is that the brandmark (the art) and the wordmark (the text) of a brand should be able to stand alone. There are a considerable amount of people that are poor of sight, abled with rods and cones that make some colors inaccessible, or for whom English isn’t fluent making the brand name meaningless. The art must be able to stand on it’s own, and the wordmark must be able to stand on it’s own.

Accessibility

The WCAG standards have 12-13 guidelines. The guidelines are organized under 4 principles: perceivable, operable, understandable, and robust. For each guideline, there are testable success criteria. The success criteria are at three levels: A, AA, and AAA. The success criteria are what determine “conformance” to WCAG. That is, in order to meet WCAG, the content needs to meet the success criteria. Details are in the Conformance section of WCAG. For a short summary of the WCAG 2 guidelines, see WCAG 2.1 at a Glance.
"This is how I always envisioned our website. Great job!"
Dave Shapiro, CEO, Cartelligent
The Oakland Athletics Logo
Read about the custom system we developed for The Oakland Athletics
Case Study
CMS Web Design

Joomla & WordPress
Since 2008
Popular Links
The Microtechs, LLC
Strategic Branding, Online Marketing, and
SF Bay Area Web Designer & Developer Experts Since 2008
© 2008-2023 The Microtechs, LLC