Design Notes

This page contains a few reference notes on The Florida Blog‘s layout and design. I do all of the graphics and photography for the site myself. I’m not a graphic designer (or a photographer), but it saves money, time, and I end up with everything exactly the way I want it. In the rare occasion that an image on this site is not my own, I always credit the source. If you were interested in which apps, plugins, programs, or websites I use to create this site, please check out the Resources page. If you were looking for a list of my devices, cameras, etc., you can find that on my Equipment page.

My Inspiration | Tropical Florida

As you may have figured out, I LOVE Florida, this blog is about Florida, so, of course, my inspiration is… Florida!  My colors represent the ocean, the sky, oranges, & palm trees. I also love the aesthetic of the heavy Caribbean influence on the state. I want the reader to picture bright tropical colors, festivals, fruit, and spiced foods. I also love the Mid-Century Modern design with its clean lines and elegance. I tried to strike a balance between that style and the kitschy-cute tourist vibe you get from old ads and travel brochures for the state. I made a little mood board below to give you an idea about the vibe I was going for. Some of the photos are my own and some are royalty free from Pexels.

The Florida Blog inspiration mood board

Base Theme | Florence by Solo Pine

I’ve used Solo Pine Themes before and I love them. I like a clean, crisp layout that has a ton of options to add my own touches. There are a lot of built-in customization options for this theme, plus the general design wasn’t so crowded that I couldn’t make some alterations of my own (below).

  • changed font face
  • changed font sizes
  • increased container width
  • increased the width of posting area inside the container
  • eliminated space between the header and the nav bar
  • increased space between content area and bottom of the header
  • increased the top & bottom image padding in posts
  • changed header area background color
  • adjusted sidebar title decoration color
  • decreased height of footer social area
  • decreased height of footer copyright area
  • replaced FontAwesome LinkedIn icon w/ Map Marker icon to represent Periscope
  • made several code adjustments to eliminate loading speed issues
  • removed Instagram slider in the footer
  • tweaked the code to display the number of comments at the bottom of each post
  • coded ALL of the colors to match my header image

Body Font | Trebuchet

I had originally selected Lato for everything except the headers, but it is a Google web font and it was impacting my loading speed. Trebuchet is similar and doesn’t require an external call.

Trebuchet vs LatoHeader Font | Oswald

I used this font for all of the headers on the site. It just seemed like the perfect step between the font I used for the logo Image (Cubano) and the one I used for everything else (Trebuchet). Oswald is a Google web font, I wish it wasn’t, but it is and it slows things down a tad.

Logo Font | Cubano

This was the first font I picked out and wanted to use it as a focal point in the logo image. I love the way it is mod, rustic and kitsch all at the same time. This is not a free font but can be licensed for a reasonable fee.

Background Color | #FFFFFF

Good old plain bright white. I wanted the site to be light and bright so, I stuck with an old standard.

Main Color | #4EC2E4

I wanted a full, bright blue to be my main color for this page. Something that reminds me of the ocean or the summer sky. I picked this one because it wasn’t too light or too dark, it was just right.

Accent Color | #F7831B

Florida oranges, of course, it seemed like the perfect compliment to the blue.

Detail Color | #5FBF11

I used this as a second accent color because you can’t accent orange with orange, can you? It’s always best to base the design on 3 colors. I liked the way the three colors looked together in the logo, so I used them all on the site itself. The green makes me think of palm trees and all the lush vegetation we have in Florida all-year-round.

Text Color | #000000

I just stuck with simple black for the text.

Link Color | #F7831B

I use the same orange for the links that I do for the accent color.

Hover Color | #F2B93E

I only use the hover color on the social media icons and everything in the top navigation bar, the rest of the links stay the same color when hovered over and display as underlined. This choice came from the highlight spots on the orange in the logo.