Who is the target audience?
The target audience for this page are students (past and present), families and community members who would have an interest in attending the Digital Arts Showcase this year. The design of the site supports this audience by providing a focus on the programs featured in the showcase, as well as time and location details for those wishing to attend. The design is friendly for both desktop and mobile users, so students browsing on their phone will be able to easily navigate each program's information and obtain quick directions through the 'contact' section.
What is the message?
The message for this site if simple, with a primary focus on providing the 'what' (showcase and program information), along with the 'when/where' via the contact page and aside sections calling out the date and time of the event. The design largely focuses on reiterating this information in an attractive way, primarily using a card system.
What is the goal?
The goal of the site is to let the audience know what the event is, who it will feature, where it is, and when. The design promotes this by prominently featuring who is featured in the event, as well as using an aside to provide what/where/when. The aside is below the fold but draws attention by featuring a gradient background that breaks out of the main wrapper.
What are the call(s) to action?
The calls to action are primarily the programs that will be participating in the showcase. They are highlighted through a card system that features a slight hover state change that brightens the 'Read More...'' link. The cards also feature a large image to draw attention, and they are optimized for a reactive design, adjusting to fill the full width on small displays, then adjusting to a 2-column format, and eventually a 3-column format for large displays.
Design Summary
Layout
The layout is completed primarily on a grid system and utilizes a mobile first reactive web design. Mobile navigation is completed through an attractive hamburger menu, which adjusts to a flex banner when viewing on larger displays. Important links are done through a card system, using the full display width in mobile, and breaking to a 2-column then 3-column arrangement for larger displays. An aside is used to break the central page wrapper to highlight interesting information. The page wrapper is utilized under normal circumstances to centralize content.
Colors
A semi-complimentary color pallet is used, with a red/orange complementing a muted blue. The body of the page is black, with the central wrapper being blue. Subtle gradients are used to add interest and highlight information. Drop Shadows are used to add dimension.
Typography
All fonts are sans-serif, with headers featuring a unique Google font 'Raleway', which has a bold appearance with some variance in baseline to make it interesting while remaining professional. Drop shadows are added to the text of headers to provide emphasis, and good contrast that draws the eye.