Hawaii — Island Insider

6 min readMay 1, 2020

This project was created with the goal to be somewhat like TripAdvisor. You can come to this publication to discover great beaches to visit, beautiful hikes to go on and exhilarating excursions to experience!

Once I decided on what I wanted my publication to be on I drew out some sketches and created wireframes for what I wanted the different verticals to look like for Beaches, Hikes and Excursions. For each island the verticals have the same layout. When beginning on this project I was going to combine National Parks with Hikes. I decided to simplify and just go with hikes. Having ‘National Parks’ in the title kind of killed the aesthetic as well. On the Excursion verticals I put three different categories: water, adventure and cultural/historical.

Landing Page

For the opening vertical I found a video of waves that I thought was cool and then I had my sister play ‘Somewhere Over the Rainbow’ on the ukulele to put as the audio for the waves. I like that it gives you island vibes. I added the text and put this video together in iMovie.

The table of contents is displayed on a map of the Hawaiian islands. When you click on the island or the name a popup appears in the center of your screen. The popup gives you the option to select beaches, hikes or excursions. Then of course once you select one of those you will be taken to the page you selected on the popup of the island you clicked on.

I had an idea for what I wanted the popup to look like in my head but when I created it, I wasn’t a huge fan. It wasn’t anything overly exciting. I tried dropping the opacity (which obviously did not look good), I took the ‘close’ option off and I tried coloring the text.

For each section I did the same background image on each island. I ended up taking those images and putting them as the background for the popup’s.

Beaches

Like mentioned previously, each island has the same background image. Both on the ‘B’ layer and the ‘A’ layer. The image I picked for the ‘B’ layer background was a little dark and I wanted to brighten it up so I did a little editing. Displayed below are the two images I was choosing between for the ‘A’ layer. I went with the image on the right.

‘B’ Layer image. Original is on the left.

Each of these pages has a write-up about beaches on the different islands and displays 5 different beaches with a description and popup image(s).

Hikes

The hike background images for the ‘B’ layer and ‘A’ layer are displayed below. The background image for the ‘A’ layer that I initially picked turned out pretty pixelated when I put it on my iPad. The image I ended up going with is pretty similar to the original and is displayed on the right side.

On the hike verticals you will again see a description about hikes on each island. Below the description there is a couple of different hikes listed with the following information listed: distance, time and level of difficulty. There is a link below that information that will open up a Google maps page for you. Then there is a photo gallery or just a single image as well as a pano image below.

Excursions

Again, the ‘A’ and ‘B’ layer background images are below. For the ‘B’ layer I have included other images that I was looking at using. The image that I did use is displayed on the top. For the ‘A’ layer I have also included the images I was deciding between and the final image is displayed on the right.

On the excursions page you will again see a description of excursions on each island. On this vertical there are three different categories: water, adventure and historical/cultural. For each excursion there is the activity listed with a description below. There is also a photo gallery or a single image as well as reviews for that excursion listed below.

Font, Icons and Buttons

I was looking online for island fonts and found three that I liked. I asked family members what they thought and ended up with the font Papaya Sunrise for the headings, etc. The issue with this font is there was hardly, if any, symbols available. For the apostrophe on the different islands and some of the words I had to type it separate and then group it to the word.

When I was showing my dad something in my project he didn’t know to scroll down when just looking at the ‘B’ layer. I ended up adding an arrow there so people know to scroll down.

On each island vertical there is a jump link to pop the user back to the top of the ‘A’ layer. I think this is nice so users don’t have to scroll back up, especially on some of the longer pages.