Somnium

Skills: Photography, photo processing and editing, design process, paper and digital wireframing, HTML and CSS, GitHub

Project Description

This project was an attempt to combine multiple skills, primarily photography, visual layout, and building a web page in HTML and CSS. I am completely comfortable as a photographer, confident as a designer, but I need a few more scrimmages when it comes to CSS. I also really liked the idea of putting all these skills into a project so that they enhance each other.

An image of the Somnium webpage.
Screenshot of Somnium webpage open in Google Chrome browser.

I’m kind of obsessed with the moon, and it always seems to find its ways into my artwork. One night, I got bored taking the same old still photos, so I played around, and the photos in this project (with the exception of the image of the full moon) are the result. I decided to use the images to practice my coding skills and build a webpage from scratch.

I named the project Somnium, Latin for “dream”. I like the word because it’s Latin and the texture is soft, and it has a connection to the moon. In the early 17th century, Johannes Kepler wrote a novel that I haven’t yet read, but he imagines what the Earth might look like when viewed from the moon, and a lot of people consider it one of the very first works of science fiction.

Process

First, I processed the photos in Photoshop and made minimal adjustments for exposure and color. I chose twelve of the images to use in the project.

I sketched a basic paper wireframe, then built a digital wireframe in Adobe XD.

To break up the monotony of the grid, I added an image of the full moon I had previously shot to span the grid columns. Next, I chose how I wanted to arrange the images in the grid.

Once I finished the wireframe, I built the architecture of the site in HTML5, then relied on CSS grid to get the look just right. You can see my code files in GitHub.

I’m mostly happy with the way it turned out. I wasn’t expecting absolute perfection. This was the first time I’ve done a project completely from scratch without any kind of guidance, starting point, or supervision. That being said, this project is unfinished and there are a few things I’m still working on.

  • First, I need to make the site responsive. Right now, it looks weird on mobile, and it looks weird if you are looking at it from any screen other than mine. I’m still working on media query skills and responsiveness.
  • Second, I also struggled with the paragraph text and will probably redo that part. I don’t like it stretched across the width of the screen. I ended up with too much text for my original small, centered paragraph.
  • Third, I might reconsider the font choice. I went back and forth on font choices, and had wanted Didot, but realized later that I don’t own a license for the web font, and wasn’t ready to purchase, so I then fell into a rabbit hole trying to pick a font.
  • Fourth, there is too much space between the grid columns. I plan to readjust that.

My stylistic solution to the text column and font issues were to go with an old-school typewriter look that was somewhat reminiscent of the 1960s and early space exploration. I don’t know that it worked well, but it worked well enough. I’ve been reading Brené Brown and am personally working on not letting perfect be the enemy of the good , and now that I’ve got something to work with, I’ve got something to build on.