A letter from Dr. Dustyn Williams
OnlineMedEd makes high-quality medical education more widely available and accessible. We believe that because medical knowledge belongs to no one, medical education should be accessible to everyone.
This site is the sum total of my life’s work. I left a successful decade-long career in academic medicine to focus all of my energy on helping students become better doctors—at scale.
I’m humbled that we now have 200,000 learners on the site every month. I’m honored that over 86% of US medical students use OnlineMedEd before graduation. And I’m incredibly proud of the thousands upon thousands of testimonials we continue to receive expressing gratitude for what we’ve built.
The next step in OnlineMedEd’s evolution is to make educators’ lives easier, the same way that we have with students’. We’ve proven through the dozens of institutions we already work with that when OnlineMedEd is integrated into a school’s curriculum, good things happen for everyone.
Thank you for taking the time to evaluate our program.
Dr. Dustyn Williams
M.D., Founder and Lead Educator, OnlineMedEd
Visual Marks
The design of the OnlineMedEd logotype emphasizes the company’s core focus of medical education through the bold style of the latter half of the name—"MedEd.” The logotype is composed of a modified version of Graphik, and a modified version of Futura, two tried-and-true sans-serif faces that pair well together and convey approachability and reliability.
Logotype
Clear Space
The height of the M determines how much clear space should surround the logotype at all times to ensure that the logotype is legible. It’s important to avoid impeding on the designated clear space with text, graphics, etc.
Minimum Size
In addition to clear space guidelines, it’s important to establish minimum size guidelines so that the logotype doesn’t become too small to decipher. As a rule of thumb, avoid scaling the main logotype down to anything below a width of 2 inches, or 200px.
Lettermark
Clear Space
The clear space for the lettermark is determined by the width of the legs of the M itself.
Minimum Size
The minimum size of the lettermark is 100px or 1 inch.
Incorrect Usages
a. DO NOT distort the logotype or lettermark
b. DO NOT apply a gradient to the logotype or lettermark
c. DO NOT apply a drop shadow to the logotype or lettermark
d. DO NOT apply a color to the logotype or lettermark outside of the color palette
e. DO NOT try to replicate the logotype or lettermark
f. DO NOT outline the logotype or lettermark
g. DO NOT use the logotype or lettermark as a pattern
h. DO NOT rearrange elements of the logotype or lettermark
Sub-brand System
OnlineMedEd's sub-brand system was created to unify the various offerings: Basic Sciences, Clinical Sciences, Residency, Case X, Intern Bootcamp, Nutrition, Coaching, and Faculty. With these global and extended offerings, the lettermark has been incorporated to establish a logotype for each one.
Sub-brand Logotype
Construction
The sub-brand logotype is composed of the lettermark and Sofia Pro, a typeface that resembles the Futura typeface used in the main logotype. The lettermark divided into fourths determines the spacing between the offering and the lettermark.
Clear Space
The clear space for the sub-brand logotypes follows the same guideline as the lettermark: clear space is determined by the width of the legs of the M itself. This should be applied to the entire logotype.
Minimum Size
The minimum size of the sub-brand logotype is 100px or 1 inch wide.
Color
One of the most-recognizable aspects of a brand is its color palette, and that’s no different at OnlineMedEd. Since the start, we’ve used blue as our primary color because of its associations with stability, wisdom, and trust.
Primary
These are our core brand colors—the ones we use the most over the widest spectrum of applications.
Active Blue
Light Blue
Accent Blue
Secondary
These colors act as supports to our primary palette. They are used to differentiate between sub-brands as well as add visual interest to an otherwise monochromatic primary palette.
Violet
Purple
Pink
Orange
Yellow
#Green
Grayscale
Our grayscale palette is primarily used for backgrounds and text.
Gray-003
Gray-006
Gray-013
#Gray-800
Black
Incorrect Usages
Certain color combinations should be avoided to ensure that we adhere to WCAG 2.0 standards of accessibility. These include but are not limited to:
a. Active Blue on a Light Blue background
b. Light Blue on an Active Blue background
c. White on a Light Blue background
Typography
A surprising amount of a company’s brand voice can be inferred through their type styles. Here at OnlineMedEd, we’ve chosen a handful of typefaces that speak to our company’s sense of fun, approachability, and reliability.
For Print
The two typefaces that we use for printed materials like the Intern Guide Book and Quicktables Book are Gotham and Adobe Caslon Pro.
Gotham
AaBbCcDdEeFfGg
HhIiJjKkLlMmNnOo
123456789
Adobe Caslon Pro
AaBbCcDdEeFfGgHh
IiJjKkLlMmNnOoPp
123456789
Example
An easy way to determine what size your type should be is to use relative proportions. The height of the H1 (the largest heading) is double the height of the H3 (the smallest heading), for example.
For Digital
The three typefaces that we use across all of our digital materials are Georgia, Lato, and Montserrat. It's important to note that Georgia is currently only used in the QBank.
Georgia
AaBbCcDdEeFfGg
HhIiJjKkLlMmNnOo
123456789
Lato
AaBbCcDdEeFfGg
HhIiJjKkLlMmNnOo
123456789
Montserrat
AaBbCcDdEeFfGg
HhIiJjKkLlMmNnOo
123456789
Examples
Shown here are 3 different examples of typographic hierarchy found throughout our website. The combination of Montserrat and Lato isn't used as commonly, but it works well for high-level overview pages like the homepage.
Icons
Icons are yet another way of differentiating between sub-brands and different areas of content in a concise yet simplistic way. Our icons are cohesive and consistent and can be divided into two categories—topic icons and system icons.
Construction
Whether topic or system icons, they all follow the same set of guidelines. They should be simple line drawings in a uniform stroke weight with rounded caps and corners.
Topic Icons
Topic icons represent the different topics found throughout our website like cardiology or neuroscience.
System Icons
System icons represent our different offerings, from our PACE methodology to performance measures.
Cats
One of OnlineMedEd’s most long-standing assets is Dr. Cat. Based on Dr. Dustyn Williams’s cat, Kimber, Dr. Cat has been around since the company’s start in 2014. As the company has grown and evolved, so too has the look of our beloved Dr. Cat character.
Full Cat
The full-body illustration of Dr. Cat as shown on the far right is what we refer to as "Full Cat."
While you will not see the full cat often, as it is more common on legacy materials, it is reserved for special cases where there is a desire to highlight the playfulness of the OnlineMedEd brand.
Cat Face
The Cat Face is directly based on the face of the Full Cat, but with slightly adjusted colors to read better at different scales. Cat Face is used rarely, but it's a fun option for social media profile pictures.
Simple Cat
Simple Cat is a 1-color version of the Cat Face that can be used in situations where the number of colors is restricted and/or there’s a need for a less-distracting cat face.
Outlined Cat
The most minimal of the three, the Outlined Cat can be used in a variety of situations without distracting from the content. It also reflects our overall icon style.
Collateral
With some of the more basic foundational elements of the brand squared away, we can start to put the puzzle pieces together to create assets that reflect and support OnlineMedEd’s goals.
Print Collateral
Although OnlineMedEd is a primarily digital company, printed collateral is necessary for in-person conferences and events, and it gives us a great way to stand out and show our personality.
Business Cards
Business cards are the quickest way for us to get our contact information out to other schools and business at events and conferences.
The card shown here is a sample card, so please reach out to the creative team to get your custom card designed.
Envelope
There are two versions of the #10 envelope, the first being a basic, all-white, standard mailing envelope, and the second being a full-color, special use case envelope.
Letterhead
The letterhead is fairly simple and straightforward. Access to the Google Docs version of the letterhead template can be found here.
Posters
These posters were created to showcase our sub-brand system in a realistic scenario. It's easy to imagine these posters hanging on the walls of a college campus.
Digital Collateral
In order to stay consistent throughout the various digital platforms we use, we’ve assembled several templates to be used throughout the company by designers and non-designers alike.
Email Signature
The email signature utilizes the lettermark and should be composed according to the linked how-to guide below.
Presentation Template
The presentation template is composed of various slide layouts that can be used or altered to fit your presentation needs. Simply copy and paste the slides into your own deck and change the content to whatever you'd like.
Zoom Backgrounds
Here you'll find a series of branded backgrounds to use in your next Zoom meeting, ranging from holiday-themed to evergreen options.
