{"id":3375,"date":"2023-08-21T07:49:00","date_gmt":"2023-08-21T12:49:00","guid":{"rendered":"https:\/\/wpaccessibility.day\/2023\/?p=3375"},"modified":"2023-08-23T07:31:13","modified_gmt":"2023-08-23T12:31:13","slug":"weve-rebranded","status":"publish","type":"post","link":"https:\/\/wpaccessibility.day\/2023\/weve-rebranded\/","title":{"rendered":"We’ve Rebranded!"},"content":{"rendered":"\n

Over the past few weeks, you may have noticed that we have been working on a rebrand. We have been sneaking bits and pieces of the new brand styles and graphics into our social media, and recently relaunched our website with the new design.<\/p>\n\n\n\n

Deciding to Rebrand<\/h2>\n\n\n\n

When we decided that we were going to make WP Accessibility Day an official nonprofit organization, we thought it might be time to create a more formal logo and brand. <\/p>\n\n\n\n

Last year’s logo and website were a basic recolor of the original 2020 logo and site. That logo included a grid of 9 random patterns and a serif font. <\/p>\n\n\n\n

\"WordPress<\/figure>\n\n\n\n

None of us were really sure what the square meant or how it represented us. We also weren’t in love with the purple and teal color scheme or serif font. <\/p>\n\n\n\n

Rebranding and building a new website is no small feat, though, so we asked the organizing team<\/a> what they thought about doing a rebrand. Was it worth the effort, and did we have people willing to volunteer to help with design and development efforts?<\/p>\n\n\n\n

There was resounding agreement that we needed to create a more intentional and energetic brand for WordPress Accessibility Day, and we were lucky to have a dedicated team of volunteers willing to make that happen, so we embarked on the process in early spring.<\/p>\n\n\n\n

New Logo & Brand Styles<\/h2>\n\n\n\n

We owe our brand aesthetic to organizer Ryan Bracey<\/a> and the team at Second Melody<\/a>. Second Melody is a branding studio specializing in identity development, customer engagement, website design, and user experience. Ryan, Jay Zawislak, Kevin Greene, and Mike Lanzafame from Second Melody volunteered to design the logo, website, and this year’s t-shirt<\/a>. <\/p>\n\n\n\n

After an initial discovery call, Ryan, Jay, and Kevin created several logo concepts. Over two or three rounds of ideas and Slack conversations, we arrived at our new logo, colors, and font.<\/p>\n\n\n\n

\"WordPress<\/figure>\n\n\n\n

The Emblem<\/h3>\n\n\n\n

The logomark, based on a clock, consists of 12 colored rectangles that make up a ring around a central figure, which is the icon for universal access ( a person with their arms and legs outstretched in a star shape). This icon is frequently used to represent web accessibility.<\/p>\n\n\n\n

Beyond communicating the all-day nature of our event with a clock, we liked that the ring around the person represents unity, while the multiple colors represent the diversity and the wide range of topics that are discussed during WordPress Accessibility Day. <\/p>\n\n\n\n

Our logo can be shown with and without the year, depending on how it is being used.<\/p>\n\n\n\n

The Fonts<\/h3>\n\n\n\n

The logotype is set in the “Fieldwork” font, a geometric sans serif font. <\/p>\n\n\n\n

On the website, the primary typeface is “Sora,” an open-source font. Sora was chosen because of its distinguishing letterforms, which make it highly legible.<\/p>\n\n\n\n

We looked at quite a few fonts when selecting the font for the website. We were specifically looking for something easy to read for people with dyslexia, low vision, or other disabilities. We selected Sora because of its unique characteristics for commonly confused letters like capital I and lowercase l. <\/p>\n\n\n\n

The Colors<\/h3>\n\n\n\n

We gave the Second Melody team the incredibly vague challenge of “making the brand colors more energetic and passing Web Content Accessibility Guidelines AAA color contrast.” Aside from knowing we didn’t want purple or teal, we didn’t give any other direction, and we couldn’t be happier with how the colors turned out. <\/p>\n\n\n\n

The bright colors feel fun and vibrant, and we are able to utilize them in both “light mode” and “dark mode” while passing AAA color contrast.<\/p>\n\n\n\n

About Our New Website<\/h2>\n\n\n\n

After designing the logo, the Second Melody team created designs for the major pages on the site in Sketch.<\/p>\n\n\n\n

The designs utilize icon patterns to provide interest so we don’t need to rely on stock photos, and included both light and dark mode styles. <\/p>\n\n\n\n

\"Zoomed<\/figure>\n\n\n\n

The website was coded by Joe Dolson<\/a> and Nick Croft<\/a>, with help from Danielle Zarcaro<\/a> and me. Alex Stine<\/a> and Raghavendra Satish Peri<\/a> tested the site with screen readers to ensure it stayed accessible during the rebuild.<\/p>\n\n\n\n

New Support for Color Modes<\/h3>\n\n\n\n

You may have noticed that the new website has a color mode toggle in the header. With this new site, we wanted to showcase how websites can be more accessible by providing multiple color modes for users.<\/p>\n\n\n\n

Nick led the development of this feature which includes:<\/p>\n\n\n\n