This is a website I created, start-to-finish, for a Vanderbilt University > Peabody College > Leadership, Policy & Organization (LPO) department grant-funded research project in 2015.
Overall Decisions...
The majority of the users for this project were using small laptops or tablets, so I grabbed the most common screensize & resolution to use as a constant viewport size. This project had no need for a specifically responsive or mobile version site, which was good because I had a very small window of time to get the major functions & design done. The team really liked the round/large icons, & I went with a more casual feel because the users in this project were a bunch of K-12 teachers.
continue below...
Design Notes
The Header
• This header became the psuedo logo/branding for this whole project. All the printed materials also had this graphic.
• I created it in Photoshop CS6; using the official logos of the two project intities.
• The stars in the Tennessee state shape are the locations of all the participating schools.
• I used HTML5 & CSS3 tecniques to float the header above all else in a fixed position -BUT- once the user begins to scroll down, it moves only half-way out of view (as you can see in the following screenshot). I separated the blue bar from the rest of the graphic, put it on it's own layer, and it does remain completely fixed in position & heirarchy. This way when the rest of the header graphic slides up & halfway out of view, its elements keep contact with the blue bar, so the user will always be able to see part of it. This was a compromise with the team as it was important to them that the header graphic always remain in view; but I needed the vertical space for the content.
• Additionally, I have a white-to-transparent gradient as the headers background. This ties the top in with the white top background & allows the illusion that, when scrolled, the content fades in/out from behind the headers blue bar.
The Footer
more info coming soon. please check back in a few days.
continue below...
