Design and code a responsive web page for an event using a grid layout as a base.
This assignment focuses on applying CSS styles. You'll be coding and designing an event schedule following a given process. I setup the basic HTML and CSS so that we can focus on the design rather than building everything from scratch (which we'll be doing in the last assignment). The prepared setup is a grid based layout built with the CSS flexbox model.
The idea here is to work directly in CSS code to learn what the limits and possibilities are and to make design decisions within those restraints. Goal is to create structure, hierarchy and visual interest to make the given content easy to understand and engaging.
The Event is a 3-day electronic music festival called ARC 2023. The page we'll be designing is the lineup over 3 days and 4 stages with artist names and set times.
Template (download here)
Learn more about the template and it's folder and file setup towards the bottom of this page.
The template you'll be working with is a grid layout with 4 columns for each stage. Each grid item/unit contains the artist names and set times. The height of these items corresponds directly with the length of each set. There are 6 sets each day that happen simultaneously divided into the 4 stages.
Below is the template how it appears in the browser
As you can see there are hardly any styles applied that relate to overall design/typography and hierarchy. What's given is the grid and some spacing to separate the days, stages and individual set times.
Here's the responsive behavior
On a phone it's a one-column layout, on a tablet it becomes two-columns and on bigger screen it's a 4-column layout.
Process
The example below shows the overall design process. We start with a layout on a grid using text only (2_1). Then we add lines (2_2), lines and shapes (2_3) and then lines, shapes and color (2_4). Note that this example only shows the behavior on a big screen. All the layouts need to be designed and coded responsive for all screen sizes.
- 2_1 / Work with font size and/or weights as well as spacing and alignments to enhance legibility and hierarchy.
- 2_2 / Pick a design form 2_1 and add line elements to further enhance legibility, structure and hierarchy.
- 2_3 / Pick a design form 2_2 and add line shapes (background colors) to further enhance legibility, structure and hierarchy.
- 2_4 / Pick a design form 2_3 and add line elements to further enhance legibility, structure and hierarchy.
Organization: Folders and Files
You'll be creating 3 design variations (a - c) for each process phase (2_1 - 2_4). The following image shows the folder and file structure you should follow. We'll be separating HTML and CSS code for this assignment so each variation/version will have its own HTML+CSS.
I prepared this setup and added the templates HTML+CSS to the "lineup-2_1 "/ version folders. Please download the setup be clicking here, rename the "last name" folder and add this folder to the synced BOX DRIVE. Read the post "Working with Box Drive" here.
