BCPS Web Site Page Re-Designs and Web Development Improvements
March 20, 2015 - 3 minutes readThe Challenge
We were approached by our valued client Broward County Public Schools (BCPS) with the challenge of improving the overall web design on four key pages of their site as well as provide the front-end code (HTML, CSS, and JS files) for the new fully developed pages. The current pages were lacking branding style consistency like typography, color usage, layout, spacing, and style treatment of web elements such as lists, tables, and CTA buttons. This was not a complete web site re-design overhaul. However, our challenge was that we needed the site to be built of the current sites existing CSS framework.
The Process
First and foremost, our team started the web page redesigns by focusing the new Photoshop mock-ups on uniform brand consistency, enhancing usability, and creating a better visual hierarchy for improved readability. These four pages were included as part of the scope: About-BCPS, School-Info page, School-Info Detail page, and School Departments Information Detail page. As part of an earlier scope of work that we created for BCPS entitled “Web and Communications Guidelines,” we had a guide to follow for proper primary color palette values, which included a vibrant blue, green, and orange. Leveraging our new guidelines, we were able to in a balanced and intelligent way, bring the pages to life. Once the new page designs were approved, we hand-coded them into fully functional HTML pages with custom CSS and implementation of a Jquery plug-ins for table row hover effects and a tabs widget.
The Final Results
Take a look at the before and after examples. Typography, layout, spacing, graphic elements (web icons were utilized to make document easier to scan and more interesting to read), and color were improved dramatically.
How can we help you with your agency’s website redesign or creation of brand communication and web guidelines? Email JinJa Birkenbeuel at birkdesign at gmail.com or at info at birkdesign.com for a phone consultation.
About Us Page Web Design Before and After:
School-Info Page Web Design Before and After:
School-Info Detail Page Web Design Before and After:
School Departments Info Detail Page Web Design Before and After:
0 Comments