One Chicago

Objective

For a school assignment, create a website using HTML and CSS code on a topic of your choice. Also create an Art Deco style poster based on a current TV show.

Technology

Adobe Illustrator, Text Wrangler and ScreenFlow

Research

I first learned how to create websites by hand, using Notepad and the old fashioned HTML code. I even learned how to use CSS to have more control on my website. I had the choice to create a website on any topic using all code. There are a lot of topics I could have chosen but I also had to have a minimum of five pages. I thought long and hard about the topic I wanted to do and it dawned on me, on a Tuesday night at 10:59 pm. Right after watching my favorite TV show, NBC’s Chicago Fire, the previews to next week’s episode was a crossover event. The crossover would be about #OneChicago, where Chicago Fire, Chicago P.D. and Chicago Med would all come together for a three hour long episode. I knew right away it would only be fitting to create a website featuring all three shows! I knew I would have enough content to meet the five page requirement yet I did more work than was asked for and created almost a ‘fan base website’ for the shows. There is a page for each show’s characters, episodes and crossover events. All which was done using HTML and CSS by hand.
A few weeks later, I was given the task to design a poster featuring a current TV show using an Art Deco style.  Doing some research on Art Deco posters, I saw gold colors, buildings in the background and vehicles as the main object. Again, I was instantly inspired to do my poster on Chicago Fire. The creators and directors love to feature the Chicago Skyline during episodes, and I love those scenes. The Chicago Skyline would be perfect for the background. Since many of the posters I saw would feature high luxury vehicles, a fire truck would be a great feature of the poster.

Sketches

I had many different layout ideas for my website. Did I want to have my navigation on the side or on the top? What would my links look like when the user hovered over? How would I display my images?
For my Art Deco designed poster, I tried to incorporate too much. I wanted to feature my favorite characters in the show but soon realized less is more.

One Chicago Fan Page

 

 


Conclusion

Learning how to code with HTML and CSS was a stepping stone to using Content Management System (CMS). I am able to understand the way the pages work and the way certain things interact with one another. Coding by hand may not be used as much today because of the compatibility CMS’s allowed for different devices but it is used to customize and have more control on those CMS’s.

Creating a poster using an Art Deco style has taught me that less is more. I do not always need to cover every pixel. Simple is the new bold.

One website turned into a ‘fanpage’ for three TV shows. One Art Deco poster turned into three posters. Two different assignments came together to form #OneChicago.

Click here if you need a website or poster made!

**Images used on the website are copyrighted to NBC
**Chicago Skyline image
**Images traced: Police CarAmbulance and Chicago Cityscape