Footer

I had the theme “Travelsite” installed as well as a plugin for back ups, and a gallery.

I installed WordPress into a folder in my domain called “photo” and began by creating pages for all my categories and setting up the header and footer.

I wanted a footer that looked like what I had on my wireframes:

However, I settled for this:

The main issue lied on the alignment of the text itself. To line my email and copyright info to be flush on the right, I changed the alignment on the text block sitting inside a column. Columns can stack on mobile, but on the mobile view, the text was still aligned to the right. I couldn’t figure out how to get it to align to the left on the mobile view.

This is one of the features I wish WordPress had with the block editor: the ability to change settings to blocks depending on what screen size you’re viewing. For example, if you’re editing a page on the mobile view settings, you can create edits, but when you’ve switched to the larger view, the mobile view settings are left untouched. Basically, a customizable media query would be nice.

Underline

Once the navigation and footer were squared away, I began to work on the home page since photos for the other pages weren’t ready yet. I followed the design on my wireframes and made the category headings links to their pages. However, the hover state had a link and I couldn’t remove it.

Now I know it’s because Travelsite is a child theme that’s inheriting styles from the parent theme, FotaWP.

Navigation

If the navigation links were highlighted, they turned red and I planned to try to fix that, However, to this day, I still don’t know what I did, but on the mobile view, all the navigation links turned white against the white background. Previously, the links were white on a larger screen and red on mobile.

My leading theory was that I changed the text to be white while customizing the page links’ order so it overruled the black on mobile.

Complexity

The theme had a lot of templates to choose from. However, my website had a very simple layout. To not delete anything, I created my own templates and template parts, but sometimes I had scroll to find them or scan to find the category they belonged in. It was very tedious to have to scroll and scan each time I wanted to change a page’s template to something else or edit my templates.

Atmosphere

Below is what I had before I made a critical decision:

I like darker websites because, in my opinion, they look better and they don’t strain my eyes. That is why I decided to make the footer and header gray; so I’d have something dark on every page.

However, that left the content area of the page to have a white background. A different color would be distracting and another shade of gray would make it look like it was dominating the entire website and make the whole page look like it was one entire section.

This entire design didn’t feel like it represented me. So, I made the decision to scrap the entire thing and start over.

---

New Design

Once the background was made dark, I decided to work on the navigation and footer. This time, I made them white to stand out from the background. I created a duplicate of the current theme footer and replaced the paragraphs with my information and added my logo. It now looked like this:

The best part was that the text aligned left on mobile.

After that, I went ahead and began to recreate the design from my wireframes. The quote looked much better, but I didn’t like the .

For some inspiration, I went to a website that showcased different photography portfolios. I clicked on Jesaja Class Photography (by accident—it might’ve been fate) and browsed through their portfolio. Their portfolio page was the following design:

I liked how each category created it’s own section and it was a simple looking layout.

I created my version of this layout using covers and buttons, creating a page looking like this:

This led to making a pattern because I knew I’d be using the same design on other pages.

The helicopter image was a placeholder for me to swap out the images depending on the page.

However, I still used a portion of my original design which was four photos at the top before the subcategories began since I still wanted to showcase photos that belonged to the main category but not any subcategories.

There needed to be some back and forth between the large and mobile versions of the website so I could adjust the focal point of the cover images. Moving the focal point didn’t create much difference on the large view, but it did on mobile since it displayed the image without much zoom or stretch to fit the size of the cover.

I also had to replace the cover images with un-watermarked versions because the watermarks were visible on mobile.

Gallery Pages

Out of all the pages, these ones where the quickest to set up once I had all of the photos uploaded.

The only blocks on these pages are spacers and the Visual Portfolio block (a block from the Visual Portfolio Plugin that allows you to create an entire gallery within the page). Each photo was already categorized within Media and each page focused on only one category so not much was needed to be done with the photos themselves.

A popup model window on click was the default.

However, the hover state evolved a bit. Below is the first version where a sliding animation would play depending on where the cursor came from, displaying the name of the photo.

The rest of the photos only shifted upward upon hover because I hadn’t named them yet. I decided that I liked that better so users could see all of the photos(plus the animation is fun to play with and may take attention away from the photos themselves). Now, on click, the name of the photo was displayed underneath the modal window.

Portfolio Page

This was a page I added last minute before fully zeroing in on Case Studies. I had the idea for a page showcasing all of my photos with a dropdown where the user could categorize them instead of having to navigate to the specific page. However, at the time, it was before I found the gallery plugin so I didn’t know if it was possible and I didn’t want to add something to Info Architecture or a wireframe that I’m not sure I can do.

Thankfully, with the plugin I found, it was very simple. Photos can be categorized within the “Visual Portfolio” block itself which is what shows up on the dropdown. It was an extra step needed for this page.

The hover state was also modified to showcase the category the photo was in since the gallery on this page has all of them.

Case Study Page

Now that the rest of the pages were taken care of, it was time to design the Case Studies page. My original plan was to use WordPress’s query loop instead of my plugin(which can still create a gallery with posts). It originally looked like this:

The Case Studies Page was special in three ways: it was made up of posts, it used a different category system, and it directed the user to other pages instead of keeping them there to browse.

The information shown above is what I still wanted to be shown for each Case Study, but this design was inconsistent with the rest of the website. The category text was very small and there was a lot of space between the title, category, and image.

I decided to try using my Categories Pattern. It ended up making the images too narrow. My next idea was using a preset query loop pattern and rearranging the post template into a cover.

At first, I thought what I wanted wasn’t possible because the cover image would be the same for all six posts—until I discovered the option to use the featured image from the post for the cover. A similar problem applied to the button. The link on the button would be the same for each post, so I had to use the “Read More” text. Thankfully, the text was editable so I changed it to “VIEW CASE STUDY.”

This page was now done.

Case Study Posts

The design of these posts varied depending on the content. However, I did create a pattern specifically for case studies.

While adding some content in posts, I played around with the Details block and discovered that each side of the border could be set to a different pixel size. Around the same time, the subject of anchor links was briefly brought up in class. Together, the first thing they reminded me of were articles that had a collapsible section at the top with a bulleted list of the page’s headings. Each bullet was an anchor link to the portion of the page with that heading.

I had one more color from my Style Tile that I had yet to use and thought that an “In This Page” pattern with a border would be an excellent use for it.