ASE Website

Website Design

Home page, calling the user to follow ASE on social media, sign up for the email newsletter, learn more, and donate.

The Task

Design a responsive website for a non-profit organization, either real or fictional.

The Solution:

Allied Schools and Educators (ASE) is a fictional organization that helps teachers and faculty at the K-12 level promote inclusivity in the classroom, with regards to LGBTQ students and issues. The ASE site has national news relating to LGBTQ issues, information on how to train educators in schools, and free online resources to read or watch. Some copy was borrowed from the following sites: glsen.org, lalgbtcenter.org, gsanetwork.org, and hrc.org.

The site uses an original logo, bright photography, and subtle rainbow accents to provide a positive, educational, and approachable tone. Rainbow boxes used for the navigation mirror the horizontal rainbow lines used periodically on each page to divide sections.

The About page informs visitors of the mission statement and history of ASE.

The Contact page conatins the building's contact information and a form for visitors to sent a suggestion or question via email.

The Donate page uses a bright and friendly donation form to encourage people to donate money to ASE.

The Learn page is where visitors can learn more about how to make their classrooms and schools more inclusive.

Logo and Style Guide

The ASE logo made for this site works on both white and dark gray, and in both a vertical and a horizontal format.

The style guide shows how the site uses Stymie and Agenda alongside an array of vibrant colors to keep a vibrant and friendly tone throughout.

Process Work

Sketches for the home page of the site, across three different platforms. Each one uses a different layout to arrange the elements of the home page. At the bottom left are some explorations for buttons and menu options.

Wireframes for the desktop version of the site. From left to right: Home, About, Contact, Donate, Learn.

Wireframes for the tablet version of the site. From left to right: Home, About, Contact, Donate, Learn.

Wireframes for the mobile version of the site. From left to right: Home, About, Contact, Donate, Learn.

You may also like