Tag Archives: Philadelphia

Julia R. Masterman Branding & Website

During our time in Philadelphia, my partner, Austin, worked at Julia R Masterman Laboratory and Demonstration School as their Computer Support Specialist. He worked as a part-time contractor repairing technology and maintaining the school’s website. In 2018, the Philadelphia School District ported all of their website work to WordPress with a visually restrictive template. In large part, this posed a problem because schools needed to entirely redesign their websites to work within a new system with a rigid template. I volunteered my graphic design services to the school to redesign the website and create a visual identity that could be implemented across the board in their collateral.

Expanding Masterman’s Branding

Before I could redesign their website, I had to refine and expand Masterman’s brand system. A few things were already set in stone: the school’s classic navy blue, and their established logo. Everything else was on the table: from color and typography to layout and iconography.

I chose to start with typography because Masterman’s logo already had a serif ‘M’ character in it. My first concern was accessibility. The school didn’t have a design budget, so getting them to purchase the rights to a type family wasn’t in the question. Austin informed me that the school was heavily reliant on the Google Suite. This meant that using a Google Font made the most sense (I can hear the collective groans of every graphic designer). In a perfect world, I would find another option; however, the school uses Mac, PC, and Chromebook operating systems. An easy-to-download and universally accessible typeface is the most realistic solution for this school. I settled on Merriweather as the primary typeface because the ‘M’ character had a stable form. Roboto’s geometric characters were the perfect complement to Merriweather’s classical serifs. It’s also incredibly versatile in that it comes in many weights.

After I created typesetting examples with my Merriweather-Roboto match, I focused on the school’s color story. I felt a monochromatic solution would be the least confusing and would be easier for faculty to work with. I kept the Masterman’s navy color and named it ‘Slate’ for its greyish tones. I chose a medium-toned blue, ‘Sky Blue,’ and a light grey, ‘Steel,’ to compliment it. I wanted a four-step progression from the greyish-navy to white, where the two colors in the middle highlight the overarching chromatic relationship.

Building a Modern Responsive Website

Once I established the visual identity for the school, I could begin to plan the look and feel of their new website. My main priority was benchmarking what other schools around the world were doing with their websites. Rather than diving in and working only within the Philadelphia School District’s template guidelines, I wanted to get inspired by design excellence and find ways to adapt. I was particularly interested in the web design I saw from private schools in Japan. The typography felt crisp, and the layout and color palettes were clean and airy. I found that high school websites in Philadelphia were suffocating in content — packed wall to wall with words. There was an overwhelming contrast between the examples from America and Japan. I wanted to distinguish Masterman from its competitors and portray it in a new light. This design direction was the way to accomplish just that.

I started with a five-column system to keep the website airy. Adding visual cues to anchor information with a given hierarchy is the key to the redesign. I alternated section backgrounds between Masterman’s Steel and white to create visual breaks as you scroll. Icons and photography draw your eye and help distinguish important sections. Variation in typography keeps each page interesting, while also directing the visitor’s eye. By designing a few key pages, I was able to create a design system Austin and the Technology Teacher Leader could implement in the rest of the website. I stayed on as a design consultant to answer any layout questions that might come up moving forward, as well as any design integration that could help with the school’s digital switch during COVID-19.

To see the full design, visit  Julia R. Masterman Laboratory and Demonstration School’s new website today.

It was so fulfilling volunteering to help Masterman firm up their branding and expand it digitally into their website. Working with the technology team and the administration was a joy, and gave me a new respect for the work Austin does. We were even more excited to find that the Philadelphia School District loved the Masterman website redesign so much, they implemented the stylistic decisions into their own website. I felt both flattered and humbled. I truly believe good design is powerful and has the ability to spread like wildfire. I love that I could help make the world just a little more beautiful with this volunteer project.

Moving to Austin, TX

I remember exactly what I was doing when I decided to move across the country…again. I woke up at 6:20 am on March 20th: the first day of spring. I was so excited because the winter, this year, was particularly cold. I got cleaned up, kissed my cat, grabbed my coffee and purse, and left for another day of work at URBN. I made it one step out of our front door and fell into 8 inches of packed in snow. It was spring, and I couldn’t go anywhere because the sky opened up and buried the city in snow. After five years of this, I decided I had enough. I walked back inside to immediately start complaining to my boyfriend. “Austin, why are we still here? I’m practically done with school and it’s FREEZING! We’re from Las Vegas. What are we thinking?!” Neither one of us were fans of Philadelphia’s frigidity, and growing up, we thought 6oº F was chilly.

That morning, we put our heads together and got to Googling. We needed a new home that was warm, had plenty of greenery, a bustling creative industry, decent property prices for our future…the list went on. Austin, TX fit all of the items on our wishlist.  We seemed satisfied and scared. Moving across the country for school was really hard in 2014. We left our family, friends, and most of our belongings behind. Was this really something we wanted to do again? Our roommate, Jon, burst through the front door. He was soaked from the snow. His car got stuck as he was driving to school and he looked miserable. After cluing him in on our plan, there wasn’t a moment of hesitation. We were ALL moving. It was going to be arduous and painful at first, but we couldn’t survive another snowy winter.

For months we pinched pennies and made a cohesive plan. We were all applying for work constantly, and I switched the rest of my schooling online to finish my master’s degree on-the-go. In July, we were packed up and the boys took off in the U-Haul. I stayed behind with the cat to finish some accounting and marketing homework. She and I would be flying into the city in a couple of days to meet up with our little family.

Leaving Philadelphia felt weird. There was so much I didn’t like, but there were some things I’d severely miss. Autumn was always beautiful, and driving next to the Schuylkill River on Martin Luther King Blvd. always felt so peaceful. I’d sit with my kitty in the yard and write essays while she chased birds and squierrls. This was the first real home Austin and I built together. Leaving was bittersweet, but I was amped for our new adventure.

After my kitty and I got off the plane, Jon picked us up at the airport. Looking out the window, this new city immediately felt like home. It was as though the best parts of Philadelphia combined with my childhood home. It was nearly 100º F and I was beaming from ear to ear. Adjusting won’t be easy — there’s a lot left that we have to do. We have to find work, explore, find a staple Chinese food restaurant… We have each other though, and we’ll make this place our new home. If anything, we won’t be shoveling snow any time soon. That, I can promise.