My job for the final project was to design a website that our Linn anthology could live on. Many of my peers went out and did some excellent analysis of Linn’s writings. However, if we keep doing what we have done in the past with our studies on Linn, these works are going to be loosely connected with no real description of what they are or why our study of James Merrill Linn is important. I wanted to make sure that our work could be published in a way that makes it understandable by people outside of our classes.
Before I could do any coding, I needed to generate a diagram of what our site would look like, both at a high-level map view, and a specific page-by-page view. I did this the old-fashioned way, by creating some pencil-and-paper sketches of what elements I thought needed to be included in the site, and how different pages were going to connect to each other. At this stage, I decided that a navigation bar would be the best way to organize all of the sections of our site, providing easy-to-find links to both our editorial comments and content.
As I was beginning development of the site, I discovered that color is a very important consideration when doing web design. In the computer science curriculum here at Bucknell, I’ve learned that identifying a bad interface is quite easy, but picking out what’s wrong with it is much more challenging. As someone without much artistic skill, I needed some help when it came to making the website visually pleasing. Thankfully, there are plenty of tools out on the web that provide a number of different services for web developers. The site I primarily used, palleton.com, helps designers generate aesthetic color schemes. I fiddled with the available settings for quite a while until I managed to find a palette that I thought fit our historical research quite well.
Another major part of my work was creating the navigation bar that would link all the parts of our site together. To do this, I followed a standard method of turning an HTML list of links into a functioning navigation bar using CSS. In order to create elements that respond to a user’s cursor, I had to use the CSS :hover selector to change the properties of elements whenever the cursor was hovering over it. The most challenging thing to implement was the dropdown menu when navigating to our editorial content. CSS can recognize some classes, such as “dropdown-content,” and automatically apply certain properties to elements of that class without the designer needing to explicitly code it in the stylesheet. Learning to use this built-in dropdown feature, and modify it to work the way I wanted it to, took quite some time. But, the end result greatly benefits the layout of the navigation bar.
Overall, I’m quite happy with what I’ve managed to accomplish in this final project. If I had a bit more time, my next step would probably be to spend time setting up a genuine image gallery, with the ability to scroll through images and open them up in an overlay screen. Using Javascript, I could also automatically populate this gallery with every image in a folder, without needing to explicitly code each one of them in the HTML file. After working on this project, I feel more comfortable with web design, and I look forward for the opportunity to do more work in this field in the future.
