Description

Design a web page featuring a poem, which pairs word and image in a dynamic way. This project will allow you to showcase a visually impactful web design project in your portfolio without diving into the coding deep end. Styling a resume in HTML & CSS is a typical beginner web design project. This alternative gives you a bit more creative freedom in terms of layout and presentation, and is a bit more forgiving on the technical side.

Specifications

The short poem should be styled using at least two fonts. You may use multiple weights within each font. Use of some kind of imagery to contrast the text. This can be done using photos, illustration, or background images. Remember, you can easily show organic edges and transparency by using .png images. Since poetry doesn’t always read well on mobile devices because of irregular lines and spacing, we’re only going to design for 1400px “laptop” width. This also keeps the project approachable from a code perspective.

Research and Intent

Search the Poetry Foundation’s website for any poems that seem interesting. Look for particular moods and words that you might be able to bring attention to, both visually and typographically. Be subjective and personal in your choice—this is one of the rare opportunities to do so in a design project. You’ll have a lot more fun if you choose something that resonates with you.

Methodology and Content

A poem that’s between 100–300 words is the perfect length for this exercise. This will allow for some scrolling while keeping it reasonable. Copy the text, poet, and any attribution, and save it as a text file. Begin searching for images that might serve as complementary or counterpoint to the text. Avoid cliché and obvious image associations at all costs. Knowing that metaphor is often used as a poetic device means that you should steer clear of literal interpretation of imagery. Contrast and juxtaposition are often a much better choice for this project.

Sketches

Begin some rough compositions of how blocks of text might be arranged on the page. You can simply use different lengths of horizontal lines to denote text, while writing out some of the individual words you’d like to highlight. Make notes about type styles and imagery as well.

Mock-Up

A quick digital mock-up will ensure that you’re designing with intention when it’s time to build it in code. Design in a 1400px wide composition; the height can vary. Here’s where you’ll have a chance to test out the colors and typefaces you have in mind. Speaking of type, be sure to select GoogleFonts to keep things simple. There are plenty of decent pairings to choose from there.

Markup and Styling

With your mock-up for reference, begin marking up your content with code. Start with a container-classed div just inside your body tag. Add sections within the container and paragraphs within the sections. The <br> tags can be used to break lines, and <span> tags can isolate individual bits of text.

Experimenting and Testing

Make sure that all your HTML tags and CSS rules are properly closed, and test in a browser. Make adjustments as needed. Experiment with different positioning methods, margins, and padding. For a“layered” look, try placing images via both HTML <img> tags and CSS backgrounds. Use different weights of the fonts you’ve chosen for contrast. You can deviate from your mock-up a bit if you feel inspired.

Getting it Online

One of most convenient aspects of sharing and presenting web design projects is that you just need a link to do so. However, getting the files online requires a few things—namely, hosting. If you’re a student, your school may provide hosting free of charge. Otherwise, commercial hosting can be purchased for a nominal fee (a few dollars a month). You’ll also need an FTP (file transfer protocol) application. Cyberduck is free and works with both Mac and PC. I’m not going to get into detail about how to transfer files via FTP (there area lot of tutorials available), but it involves connecting to your hosting, copying from your local computer to your remote (online) folder, and testing it by typing the link in your browser. Keep all files (HTML, CSS, images) in a single folder; use an intuitive name to keep the link short, for example: mywebsite.com/web-poem.

Reflection and Revision

Now that your files are online, test them in a few browsers to make sure there aren’t drastic differences. Compare it to the mock-up you designed. Is the final product close to what you had imagined? Did you make any changes along the way that embraced the spirit or mood of the poem? That’s great. Did you settle for something because you struggled with the code? If so, that’s something to resolve while the project is fresh in your mind. If you need to troubleshoot, start with the most basic elements (body, container) and work your way down to more specific ones. Once any challenges are dealt with, compare this to your other design work. Does it visually compliment the poem you chose? Is it dynamic enough? If not, dive back in and push the contrast a bit.

Goals and Outcomes

A notable project will be visually adventurous with all text styled as CSS. It may be tempting to design some text with other software and export it as an image, but resist this. Being able to control the typography natively is one of the challenges of this assignment. The images that you chose to complement the poem should add visual impact. The finished product should standup to any other design work in your portfolio. In the end, this exercise should allow you to experiment with basic markup and create something worth showing. Since it’s just a single page with one layout width, it should be achievable in a few days instead of weeks.