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):

Final Midterm Project Link

After many weeks of work, our site is finally ready to upload! And what a site it is... this one I am incredibly proud to be part-owner of!

http://artweb.stritch.edu/peruka/MidtermProject/

(Note: For an unknown reason, the North America and South America sidebar buttons seem to have lost their alignment when opened with Firefox. However, opening the site in Safari or Chrome should yield the correct alignment. Thanks for your understanding!)

Another Two Pages Complete!

Over the past few days I have completed adding information to two more pages: Europe and Australia! This leaves only 2 more to be completed, which are being handled by Monique (South America and Africa).  I'd say this is a fantastic success!

As you may have noticed, the "Jump To" link names are a bit different for Australia than any other continent page.  Since Australia is its own country as well as continent, I felt that I should get a little more creative with the names of these links.

Update Extravaganza!

With the map completed, the next step is to actually add content to the pages!

I've been hard at work creating a template for the content pages to follow, as to ensure a consistent look to all of our information.  Shown below in the template in its barest form.

Most of it is a lot of "REPLACE_ME"'s and "DO_THIS_THING_HERE" but I attempted to make it as straightforward as possible. With it, I have currently finished one page of actual content, as shown below.

A few things to note about this big update are:

1. A background! It's hard to tell here, but it's a standard dogtooth pattern.  I thought having the red background looked nicer than the default white.

2. Highlighted buttons! So you know what page you're on simply by looking at the sidebar.

3. The links on each page will correspond with the links in the sidebar and the color of the continent on the map.  Adds a pop of color but still looks refined.
4. The "jump to" links.  I've used a handy tool called Named Anchors to allow users to jump straight to any of the 3 recipes on a given HTML page.

EDIT: Shortly after I posted this update, I was able to finish the North America page as well. This leaves only 4 more continents to go!

Adding the Map

Thanks to Monique, we now have our world map on the home page! It doesn't link up to any other sites just yet, but that will be the next step in our process.  As you may be able to tell, the page looks a little bit different than what you saw in my earlier blog post, but it remains to be said that I am happy with how the page is turning out.  Now we just need to add in all our information to the country pages!