Narrative Site Update #3: Navigation and Image Frame

From the last time I posted an update, I've made quite a few significant changes to the "skeleton" of the site (a.k.a. items that will be on every page).

The first new addition is the top navigation bar.  The text is once again a series of images, due to the fact that I used a font that is not typically on most computers.  The text indicating the page you are on is larger and a dark teal color, while other links are smaller and colored black.  However, when you hover over the links, they will change to the same dark teal color as the larger text. The navigation is sandwiched between what I like to call a caution-tape border - it serves no purpose other than aesthetics, but I really like the way it ended up looking.

The other major addition to the site was including a frame for the story images on the site. For this, I used a CSS custom class to dictate the background for each image, so this background is not a part of the images themselves & can be repeated from page to page. The image I included in the screenshot above will not be the image on the home page in the final product, but will be included in the main story. Of course, I have my artist Amanda to thank for that; she's gotten 2 of the 10 scenes done already, and they look absolutely magnificent! Her art will truly make the story come alive.

Finally, I added a background image to the bottom navigation bar; it's the same image I used in the header, so nothing new there. However, I think it gives the site a rounded-off, more finished feel.

Narrative Site Update #2: Site Header and Character Designs

Finally, a header for the site is born!

I've been working on the index page for my site this week, and this is the end result! Though it doesn't look like much, I've got a basic skeleton set up in my HTML file as well as my CSS style sheet. Making the header was a bigger task than it might seem; I had to find a free-to-use metal texture, download a font, find some minimalistic icons for decoration (the moon icon I made with simple circles in Photoshop) and put it all together. The 3D effect in the title was created using the Bevel & Emboss effect in Photoshop as well. The title text itself (which is actually an image, if you hadn't already guessed) will link back to the index page from any page on the site.

Meanwhile, I'm pleased to present my artist Amanda's character designs!

From left to right we have: Zo, the leader of the group and fearless fighter; Lonnie, intergalactic flora and fauna enthusiast, and Lace, the team's youngest member and technology guru. I'll be making more in-depth character biographies for the three of them; knowing the characters' strengths and weaknesses will surely help the user make better-informed choices during the main story.

Narrative Site Update #1: Humble Beginnings

For my final project, I have chosen to create a Narrative site.  I have always loved to write fiction, so this was a perfect opportunity to put that creativity to use and package it into a interesting website with a unique story within.

The story, which has been my main focus of figuring out this week, will feature a group of three space-traveling heroes, named Lace, Lonnie, and Zo.  Their mission: to explore the galaxy and make new discoveries; that is, until their ship malfunctions and takes them to an unknown planet with danger lurking at every turn. It will be the player's job to lead Lace, Lonnie, and Zo back to safety, so they can resume their original mission!

The site will feature 10 linear "scenarios," each giving the user 2 options. One option will progress the story, while the other will lead to a "failed" scenario, and the user must start over from the beginning (or from a checkpoint).

While I will of course be writing the story and doing the coding for the site, I've enlisted the help of my talented friend Amanda to help me with the artwork for each scenario.  She is currently a student at MIAD working towards her Animation degree, and I am immensely grateful for her willingness to help! I've also entrusted another dear friend of mine, Tara, to help me reach my goal with this project; she will be helping me iron out the details of the story and giving me guidance for how the characters should interact.

Overall, I think this website will truly be my best yet! I hope everyone will be excited to see what my team and I create.

Navigation Map (the general "flow" of the website):

Conceptual Sketch (what the web pages might actually look like):