The Village of Gainesville
Harvesting Fresh Design Ideas
Bringing the Village Into Focus
When designing the layout I decided to have more of a focus on the village itself. There were no pictures of the village on the original website, so I had to find ways to incorporate pictures into the design. I made it so that each page’s hero would have a different part of the village that best represented that page. For instance, the Proceedings page's hero would be of the fire hall where the proceedings take place.
For the homepage, the hero would be a slideshow of the different parts of the town. I got this inspiration when looking at other village’s websites.
I also included an image in each section that best represented that section. For instance, in the section that had information on renting the park pavilion, there would be an image of the pavilion besides it.
I embedded Google Maps into sections where there were addresses, which was inspiration from other village websites. This added to the website visually, as well as served a more practical purpose of helping new comers finding their way around. The homepage would have the whole village of Gainesville map embedded, so that users can look at everything in the town, as well as to get directions from their current location.
I chose to change the more elaborate font to a very simple font so as to not distract from the pictures of the village. A simpler font also helped the website to feel more modern. I ended up choosing Inter, as this fit the criteria very well.
A Color System Rooted in Village Identity
The original colors were gray and white, so I ended up changing the color scheme to give it more color. When deciding new color schemes I thought of colors that represented the village well. There was one color my mind kept returning to; red.
Red and black are Gainesville Schools colors, the school seems to be what connected the village more out of anything else. All the kids in the village, and adjoining villages go there, many parents also went there when they were young, many parents work there, essential information is learned, friends are made. There are events, sports, concerts, and dances. It is also one of the only places of real import in the village.
The color red also shows up in other prominent places throughout the town, the park pavilion is red, the fire hall has red, etc.
However, it is important that I use red sparingly, as to not overwhelm the users or make the site seem too aggressive, which is why I like the examples above. As black is also another one of the school’s colors I incorporated dark grey into the website. I used an off white for the background, to give the website a lighter feel, especially since the other two colors are darker.
One Easy Village Website Fix
When showing my client the progress I had made, she only had one change she wanted me to make, it was how the Proceedings page was organized.
Originally the Proceedings pages was split into three main sections: Meetings and Hearings, Budget Info, and Voting Info.
My client requested that two main sections: Meetings and Voting Info. Then to add subsections under the Meetings section. The subsections would be Meeting Minutes, Updates, and Budget Hearings,