Supporting Documents
Who is the Target Audience?
The target audience of the Digital Arts Showcase page is NWTC students, friends and family of students, faculty and staff, and people in Green Bay interested in digital arts. The design of my page supports the target audience by presenting the most relevant information (date, time, location, and programs on display) on the home page so it may be viewed immediately upon entering the site. I entered this information in the opening paragraph as well as in an aside underneath the home page image so it won't be easily missed by anyone visiting the page. I made the navigation clear and concise, with multiple links to the programs pages and programs themselves that appear on most pages of the site. This way, there are multiple paths to the same information, and no matter where you are on the website, you are only one click away from viewing program information.
What is the message?
The message of this website is that the digital arts programs at NWTC produce very talented students and appealing designs, as well as offering information about different digital arts programs to people who may be interested in learning more about them. The design supports this by presenting all relevant information clearly and accessibly. Users visiting the page receive all the necessary information about the showcase right away, and can easily discover program-relevant information by browsing through the rest of the website. I made the layout very straightforward and consistent so anyone visiting the site for the first time will quickly understand its purpose and will not become lost or confused.
What is the goal?
The goal of this site is to get people interested in digital arts and to come visit the digital arts showcase in person. The design supports this by being very inviting and making it abundantly clear when and where this event is taking place. Each program page displays a sample of work from each program and basic information about said program. Anyone visiting the site out of curiosity about digital arts gets a sample of what each program entails, and hopefully will be inspired to come view the event and gain more information for themselves.
What are the CTAs?
The CTAs are the cards for each program that lead users to their respective information pages. The design supports the CTAs by displaying them at the bottom of almost every page, so a user can always navigate to the information page of their choosing. They are sized larger than elements around them, and they scale up when hovered over so a user will feel tempted to click on them. The error page also acts as a CTA in its own right, inviting the user to click on a program page link in case they accidentally navigate to a page that doesn't exist.
Design Summary
Layout: I chose a 2 column-layout for most sections of the website, so there is a distinction between information and images on interior pages. Breaking up the content into 2 columns helps with line-length and also delineates different sections of information. For mobile devices, the page layout is only a single column so as to not crowd the page. I kept the program information near the footer so a user will see it once taking in the rest of the page's content and can navigate back to it if they choose.
Colors: I selected a blue color scheme that has good contrast between the darkest and lightest colors. I replaced any instances of black with a dark blue, and any instances of white with a light blue. I chose blue because NWTC uses similar shades of blue in all of their branding, as well as inside the school buildings themselves. Using blue helps my site feel connected to the school's site.
Typography: I selected the font Federant for the header font, as it is a serif font that still has a sleek, modern look to it. Though is it a modern adaptation of a much older font (Feder Antiqua by Otto Ludwig Nägele, 1911), its almost rectangular shape reminded me of numbers on a digital clock or digital display. Therefore, I thought it was a great font to use for a header across the site. The font I selected for h2 elements is Madimi One, a sans font that combines geometric and organic design. I felt it was a good secondary heading font, as its rounded edges match the rounded borders I gave many elements throughout the site. I set a max-width of 65ch for body text so that the line-length doesn't get too big, and I set the line-height and font size larger as well to make it easier to read.