Narrative Site Update #6: The "About" Page

With just two days left before our exam time, the About page has been completed! I had to figure out a few new HTML tricks for this one; namely, getting the links in light-blue to open in new tabs.  The reason I wanted to do this is because all of these links take you off of my website and onto external places on the Web, so I thought opening the links in a new tab rather than users having to hit the "Back" button on their browser to return to my site was a much better fit.

There's just one thing left to do now: the actual scene pages! I should be able to get those done in time no sweat. Perfectly on schedule for what I'm wanting to get done! As such my next (and final) update should be me guiding you to where you can find my site when it goes live. I hope you've enjoyed joining me on my journey of web page creation, and are excited to see what I'm able to put out with the skills I've acquired since August!

Narrative Site Update #5: Character Biographies

After a lot of trial and error with a combined use of Dreamweaver and Photoshop, another page has been successfully completed: character biographies.

This gives the user more information about the three characters whose story they'll follow. As you can see in the screenshot above, the three images are greyscale in the non-hover state. However, when you mouse over the image, they appear in full color! This proved to be difficult to capture in a screenshot, so you'll have to wait until the website goes live to check that out.

Not only that, but the images themselves are actually links to a larger image, with a full-body portrait of the character as well as their name, age, height, strengths & weaknesses, and general role. By installing the FancyBox javascript tool to this page, the user is taken to this image without having to leave the character page for a new tab. What this looks like is shown in the following screenshot:

At this point in time, I'm unsure whether I will start work on the actual story pages or the About page. I'm leaning towards starting with the latter, as story pages will be more of a simple plug-and-chug since I've already got all the HTML and CSS for them in place. Our final exam is in one week, so here's hoping for a successful crossing of the finish line!

Narrative Site: ART APPRECIATION #1

I've said it before and I'll say it again: I'm incredibly grateful to have such a talented artist on my team! Here's a sneak peak at what Amanda has created so far for the story (scenes 1A, 1F, 2A, and 2F).

Narrative Site Update #4: The Homepage is Complete (Almost!)

The homepage is finally complete! (Almost!)

So far, the bottom of my homepage has been a work in progress, looking a bit rough around the edges. Now, I'm happy to present what the bottom of the page will look like, for this page as well as story-driven pages.  The text, which will be shown right below the image on each page, will give a description of what is going on in the story, and will always end with two options.  This is my introduction to the site, fitting for the home page.

Also shown is a functioning bottom navigation! No fancy images this time, just pure HTML/CSS text. The links all have rollover features as well, so they'll change color when your mouse hovers over them.

The homepage only needs one more thing: an introductory image! The image will be of the main characters' ship flying through space. My artist, Amanda, will be getting this to me as soon as possible, but we've both just been incredibly busy with other finals work, which is no surprise; college is a lot of work! I'd rather get half of the images by the end of finals from her, all fantastic quality, than all the images with rushed quality. I plan to update the site with the rest of the images beyond the time limit of this course, likely during winter break. So even after the site goes live, keep an eye out for updates!

The next portion of the site I plan to work on is character biographies - I'll be covering that in my next blog post.

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