I helped create this website for the Business Professionals of America Web Design Team competition with teammates Bhargav Yadavalli, Robbie McCracken, and Rahul Gudivada. I mostly worked on the UI/UX along with the Graphics and general front end development for the application.
The competition entailed creating a website for a program called BPA Cares, showcasing the different special awards given out by the BPA committee for those who show excellence in service for BPA.
The theme of this site was to take a flat design approach, keeping a very minimalistic look for the site, making sure that information was very accessible and obvious, all while making sure the user was not flooded with content.
We wanted the main focus to be the content, so we kept the page minimal which allowed the text to be the element that stood out.
The navigation of the site was one of the more difficult components of the site, with the challenge being making sure that you can access all pages on the website no matter where you are.
The solution was to create a dropdown menu for the three different award categories, listing all of the possible awards in a very user friendly manner.
The dropdown menu took a while to develop due to the intricacy of getting it to work on all devices. The menu needed to work on phones, laptops, tablets, and this was no easy feat. It required a lot of formatting, especially on mobile devices to keep the navigation experience as seamless as possible.
We were tasked with creating a logo for the site to almost give it its own identity. We wanted to keep the navy blue and red that BPA used on their main site, while also giving it a vibe of achievement, so we created a badge. It had a navy blue body, a red ribbon, and gold accents.
We used very bold sans serif text for the text on the logo, hoping to give it a very poppy look when you look at it.
We went for a card design throughout the site, with the awards category and cards and the grid where all of the awards are listed.
Behind the card, we added images with a shader over the photo, allowing the text to pop while still allowing the pictures to shine.
We felt the card layout would work best because it allowed us to easily display the awards without occupying too much space or displaying the information in a boring manner.
The grid system allowed for easy viewing of the different awards by categories, with the different categories marked by one of three colors, blue, red, and gold.
We kept all of the animations to 0.4 seconds which is the ideal time frame, not too fast, not too slow.
This site was definitely a challenge, the navigation and the searchable grid proving to be the most problematic parts of the site. I learned a lot about templating since a lot of the award pages were very similar, and this was my first site with over 20 different pages. Overall it taught me about keeping stylesheets very nice, and reusing CSS stylesheets.
See this project on my Github