Speak Your Truth Today’s Website 💟
Role: Web Designer + Developer
Timeline: July - Aug 2023 | Ongoing
Software + Tools: WordPress, Elementor Pro, Canva
TLDR: I designed an organization’s website to aid domestic violence survivors. I worked directly with the Founder and Executive Director, Hannah, to bring this site to life and create a safe space for survivors to get help and the public to gain information related to domestic violence.
Speak Your Truth Today 🌻
Speak Your Truth Today began as a vulnerable Facebook post when the founder, Hannah Hollander, shared her own experience with domestic violence in 2019. Speak Your Truth Today achieved 501(c)3 status in May 2021. Over 70% of members report that the group has provided them encouragement and support on their healing journey, and they’ve been able to help about three people each week escape abuse.
My Interest + Involvement 🏔️
I had the opportunity to work directly with the organization’s Founder and Executive Director, Hannah Hollander for the entirety of this project. If it hadn’t been for a web design volunteer job listing on Indeed, I would have never crossed paths with such an amazing person and an amazing cause. Initially, I was selected to work on another site for them; a global campaign called Run The Globe. I finished that site and wanted nothing more than to continue to help in any way, so I started designing their new organization site.
While Squarespace is my personal favorite CMS, their site was hosted on Wordpress so it was time to dig into my Wordpress knowledge chest. Luckily, Elementor Pro and various plugins helped me along the way.
Branding + Styling 🎨
When designing for any brand, it’s important that who they are be properly represented on their site. In the simplest form, branding is made up of things like typography, colors (primary, secondary, accents), and styling for things like links and buttons. While there are some variations of these brand guides on the site, most of what you see on each and every page is the same style-wise. After working on this project for nearly two months, I know these colors and fonts like the back of my hand. I have dreams of Fira Sans Condensed headings in color #161511 and letter spacing 1 px. I can now only see buttons with a 2px border and an outline shadow that has a horizontal and vertical offset of 8px.
Colors
“Borderline Black” - #161511
“Borderline White” - #F2F2F2
“Dark Purple” - #6a5186
“Medium Purple” - #9176b1
Buttons
Button Default State - #F2F2F2 background, #161511 text color and 2pt solid outline, 8 x and y shadow offset in #6a5186, Fira Sans Condensed
Button Hover State - #161511 background, #F2F2F2 text color and 2pt solid outline, 8 x and y shadow offset in #6a5186, Fira Sans Condensed
Typography
Fira Sans Condensed
Poppins
American Typewriter
These fonts were used directly from Elementor and were chosen to mimic current SYTT branding, marketing materials, and affiliated websites.
“That’s not accessible.” ✏️
These are words that have become a regular part of my vocabulary. I’ll often receive brand colors and ideas from clients and one quick glance will make me think, “That’s not accessible.” Accessibility is so much more than colors, but since we’re talking about branding, it’s important to know what accessibility looks like in terms of text colors on backgrounds. For example, to the naked eye, “medium purple” (hex code #9176b1) looks great under white text. To my eye and WCAG AA/AAA standards, it is not a good combination for people with certain visual impairments. I make it a point to stay up-to-date on accessibility guidelines and share my knowledge with those I work with.
Pictured: examples of color contrast checker results from coolors
“But it looks fine to me!” — Someone somewhere, probably
Lucky you! However, in the United States alone, 8% of the population (20 million people), are visually impaired in some way. Color contrast impacts the readability of content, making it essential for colorblind users or those who have low vision. Good color contrast means all users can see the content regardless of the device they're using or the lighting around them.
Other ways I considered accessibility during this project: adding descriptions (alt text) to non-decorative images (1.1.1), only providing text as opposed to images with important text, ensuring meaningful sequence of content (1.3.2), avoiding the use of color as the only way to convey information (1.4.1), and avoiding using flashes and overwhelming animations (2.3).
Learn more about web content accessibility guidelines with this reference sheet.
Responsive Design 📱
I designed this website using WordPress and Elementor Pro for design and development. While Elementor Pro does have a lot of features that help make sure websites are responsive, I had to do a lot of manual editing (HTML, CSS, JS) to ensure things like sizing and spacing were properly scaled for tablet and mobile views. In my opinion, there is no point in digital designing if you’re only going to design for one format. It’s impossible to control which devices users will access the site from, so I wanted to make sure their experience didn’t suffer because of it.
