Assignment 5: Responsive Microsite

Design and code a 4-page microsite in connection to the Open House Chicago festival. Each year several Chicago buildings are selected and open to the public for a certain time. 3 buildings from the UIC campus had been featured in this year's festival. The Microsite you'll create will introduce this event taking place at UIC and shows information about each building, visiting dates and hours, location, architect etc.

Microsite definition:

"Also called a minisite, a microsite is a separate page of a Web site that has a separate URL and is used to provide information about and/or promote something that is related to the main site. For example, a museum's Web site may have a link to a microsite with information about a special exhibition the museum is running, or a computer manufacturer may create a microsite to give the user information about a new product design."

In our case UIC is the main site and the event/festival information is the microsite. Although a microsite doesn't need to follow design guide lines of the main site closely, we'll use design elements from UIC's visual guide such as fonts and colors.

For this project we start sketching ideas/wireframes, create designs in Illustrator and finally code the site in HTML and CSS. The site has to be responsive, so you'll need to find design solutions for small, medium and big screens.

Consider design elements from our previous assignments. Think of ways to incorporate lines (borders and patterns), shapes (background color), image and color to create visual hierarchy/contrast and a coherent, unique design throughout all 4 pages.

The 4 pages are:
– The landing/home page provides an intro/overview with links to the 3 building pages
– A page for the Behavioral Sciences Building
– A page for the College of Medicine West
– A page for University Hall

The Layout Grid

You'll be using a 6 column layout grid. For tablet and smartphone screens it's likely that you need to adjust this grid because the columns get too narrow to contain legible text or big enough images. The example below has a 6 column grid for the desktop screen, it responds to tablet sized screens by turning into a 3 column grid, and a one column layout for smartphones. Such adjustments can be done using Media Queries.

The image below shows possible proportions in this grid (for the desktop layout in this case).

Click here to open the coded version of this grid in another browser window. Reduce the width of your browser in order to see how this grid responses to smaller screens.

Page Sections

The image below shows how a page can be divided into sections. Since HTML 5 there are tags available that describe those sections the best way (before that you needed to you div elements in combination with IDs or classes). Div elements should be used to divide these sections into vertical columns.

Header

The Header section should contain UIC and Open House Chicago logos. The header can also contain the navigation (you can nest the navigation tags inside the header tags).

Navigation

The navigation can be it's separate section or can be combined with the header. Navigation links should be the 3 names of the buildings.
– Behavioral Sciences Building (needs to link to Page 2)
– College of Medicine West (needs to link to Page 3)
– University Hall (needs to link to Page 4)

Main Section

This section contains all the copy and building images.

Footer Section

Should include the UIC logo again and social media icons (facebood, twitter, instagram, youtube and tumblr) .

Text

Header and Navigation (on all pages, they may be more important/bigger on landing page):

UIC logo and Open House Chicago logo (need to link to Page 1)
Behavioral Sciences Building (needs to link to Page 2)
College of Medicine West (needs to link to Page 3)
University Hall (needs to link to Page 4)

Landing Page:

UIC buildings at Open House Chicago
Date: Sat, Oct 15, Sun, Oct 16

The Chicago Architecture Foundation’s Open House Chicago is a free public festival that offers behind-the-scenes access to more than 200 buildings across Chicago.

Explore the hidden gems and architectural treasures of Chicago’s diverse neighborhoods—all for free.

3 UIC buildings are featured in this year's festival:
Behavioral Sciences Building
College of Medicine West
University Hall

Page 2: Behavioral Sciences Building

DESCRIPTION:
Walter Netsch considered the Behavioral Sciences Building to be his most sophisticated “Field Theory” design. Offices, classrooms, lecture halls and a large cafeteria interlock within the geometrically complicated mass of the building, an organic form grown from the rotation of overlapping squares. Navigating the maze-like interior is a challenge, but unexpected delights pop up at key junctures. Striking multi-story spaces are defined by massive sculptural concrete stairs.

ARCHITECT:
Walter Netsch (SOM), 1967

BEHIND THE SCENES:
Get lost in this masterpiece of Walter Netsch’s “Field Theory.”

ADDRESS:
1007 W. Harrison St.
Enter from Harrison Street side

NEIGHBORHOOD:
Near West Side

HOURS:
Sat, Oct 15: 9am - 5pm
Sun, Oct 16: 9am - 5pm

Page 3: College of Medicine West

DESCRIPTION:
This picturesque Art Deco-inflected Neo-Gothic complex was master-planned in 1920 to serve what was then the University of Illinois College of Medicine, now part of University of Illinois at Chicago (UIC). Under the soaring red brick tower is a vaulted passageway leading to an intimate enclosed courtyard with thematic mosaics and sculptures. The "Faculty, Student and Alumni Lounge" is a beautiful wood-paneled space with high ceilings, elegant leaded windows, and a massive fireplace. The space is typically only accessible to members of the university community.

ARCHITECT:
Schmidt, Garden & Martin, 1924

BEHIND THE SCENES:
See the unexpected "Faculty, Student and Alumni Lounge" and pleasant courtyard in this historic Collegiate Gothic building. It's typically only open to students, faculty, and staff.

ADDRESS:
1819 W. Polk St.
Enter through archway

NEIGHBORHOOD:
Near West Side

HOURS:
Sat, Oct 15: 9am - 5pm
Sun, Oct 16: 9am - 5pm

Page 4: University Hall

DESCRIPTION:
The 28-story administrative tower is the tallest structure on Chicago's west side. It's also a symbol of architect Walter Netsch’s revolutionary design for UIC's "Circle Campus." At 338 feet tall, the building is 20 feet wider at its top than at its base due to a series of cantilevers giving the appearance of "broad shoulders." The Brutalist icon's exposed reinforced concrete skeleton and narrow recessed windows match classroom buildings across UIC's campus. It contains offices, meeting rooms and a student center. It serves as the seat of the university's administration.

ARCHITECT:
Walter Netsch (SOM), 1965

BEHIND THE SCENES:
Climb up to the 28th floor to see stunning 360-degree views from the Office of the University Chancellor.

ADDRESS:
601 S. Morgan St.

NEIGHBORHOOD:
Near West Side

HOURS:
Sat, Oct 15: 9am - 5pm
Sun, Oct 16: 9am - 5pm

Course

Assignments

Articles/Lectures