BRYCE YODER
Designer and
full-stack developer
Chestnut Housing is a non-profit organization that works to provide affordable housing in Lancaster through direct action: purchasing properties, fixing them, and leasing them at low rates to individuals experiencing housing insecurity. The organization had previously worked with a designer to create a robust brand identity, but hadn't had the opportunity to update their website to match. I worked with Chestnut Housing to create a website that looked fresh, professional, and closely followed their brand guidelines.
Technology Used
WordPressSwipe to view more →
The hero section of the homepage, demonstrating the use of layouts and elements in accordance with the brand guidelines
The generic WordPress "page" layout. The pattern element behind the image is randomized, and its color is automatically matched against the chosen page image.
The generic WordPress "post" layout. In this example, no featured post image is set.
Some examples of mobile layouts on the site
An example of a generated study guide. Generated content is cached in the database to improve performance and reduce cost; admins can choose to clear the cached content in order to force a re-generation.
The simplify tool rewords lesson content for different age levels. Users can click the "Copy" or "Print" buttons to export the content from the block.
A generated testing sheet for self-assesment
The hero section on the site's homepage. While the client did not have extensive brand guidelines, I worked off of the logo to create an image slider that included the same design motifs.
This page lists the upcoming events hosted by the center. It was important that these events be easily updated through the interface in the WordPress backend.
The site "bulletin board" was a specific feature request, allowing the client to update the homepage with news bulletins that were too ephemeral to be actual posts.
Some examples of mobile layouts on the site
The main chat interface. Normally the block sits in the right sidebar, but the pop-out button in the top right moves it to a dedicated window for better readability.
A screenshot of the block log page. If enabled, all chats are logged, and this report can be filtered by user and date.
Generate a list of viable words given a set of Spelling Bee letters
Once the Letterboxed board is filled, a user can request that the solver attempt to find a solution that matches a certain number of words
Your classic Sudoku solver. The lighter-colored numbers are the digits that had been filled in prior to solving.
The introductory page to the website
An example of a page showcasing one of the books on sale. The images can be clicked on to show them in a photo gallery for better viewing.
One of the pages from the online portfolio section
Some examples of mobile layouts on the site
The main directory page of the site
An illustration of the menu navigation. If desired, the site admin can associate images with each post category, and those images are displayed in the background when said category is selected or hovered.
One of the catalogued articles. Footnotes are displayed next to their relevant text; hovering on one of them will hide the others and highlight where in the text it is noted.
Some examples of mobile layouts on the site
The hero section of the homepage, demonstrating the use of layouts and elements in accordance with the brand guidelinesThe generic WordPress "page" layout. The pattern element behind the image is randomized, and its color is automatically matched against the chosen page image.The generic WordPress "post" layout. In this example, no featured post image is set.Some examples of mobile layouts on the siteAn example of a generated study guide. Generated content is cached in the database to improve performance and reduce cost; admins can choose to clear the cached content in order to force a re-generation.The simplify tool rewords lesson content for different age levels. Users can click the "Copy" or "Print" buttons to export the content from the block.A generated testing sheet for self-assesmentThe hero section on the site's homepage. While the client did not have extensive brand guidelines, I worked off of the logo to create an image slider that included the same design motifs.This page lists the upcoming events hosted by the center. It was important that these events be easily updated through the interface in the WordPress backend.The site "bulletin board" was a specific feature request, allowing the client to update the homepage with news bulletins that were too ephemeral to be actual posts.Some examples of mobile layouts on the siteThe main chat interface. Normally the block sits in the right sidebar, but the pop-out button in the top right moves it to a dedicated window for better readability.A screenshot of the block log page. If enabled, all chats are logged, and this report can be filtered by user and date.Generate a list of viable words given a set of Spelling Bee lettersOnce the Letterboxed board is filled, a user can request that the solver attempt to find a solution that matches a certain number of wordsYour classic Sudoku solver. The lighter-colored numbers are the digits that had been filled in prior to solving.The introductory page to the websiteAn example of a page showcasing one of the books on sale. The images can be clicked on to show them in a photo gallery for better viewing.One of the pages from the online portfolio sectionSome examples of mobile layouts on the siteThe main directory page of the siteAn illustration of the menu navigation. If desired, the site admin can associate images with each post category, and those images are displayed in the background when said category is selected or hovered.One of the catalogued articles. Footnotes are displayed next to their relevant text; hovering on one of them will hide the others and highlight where in the text it is noted.Some examples of mobile layouts on the site