the life catatonic

Created originally as a final project in "Writing for the Web," the purpose of this website is to function as a window into my persona both personally and professionally. As I'll be graduating in... about four days, I think a website can be a very useful tool to create contact points with potential employers. As such, I aimed to create a mix of elements in the content that will both describe my personality and showcase some of my talents.

Platform Choices

For the website, I had the option of creating my own site from scratch in HTML and CSS, using a free CSS template as a foundation, or creating a flash-based site using Wix. I chose to use a free CSS template for several reasons:

• Learning curve. I hadn't had any experience with CSS before this class, so I thought I would benefit from having a template to work from. In doing so, I've been able to explore this framework and understand more about how certain commands have the effect that they do. If I created a site from scratch it would have been much more difficult and I would have been working within my own constraints.
• Professionalism. Personally, I decided against Wix because I think most Flash-based websites don't look very professional. Too many moving parts and clashing font and color choices. I also wanted to work in CSS because layout design interests me, and I think I got a lot more from working with the code than just dragging and dropping elements onto a page.

The free layout I decided to use is called Component, and I really like the design. I think the dark backdrop works really well, and I was able to work up a more abstract splash image in Photoshop that helps pull people in.

Layout Choices

The original layout I found had two navigation bars--one in the sidebar and one along the top--but I thought I would only need one. Instead of using the sidebar for in-site navigation, I turned it into a contact box, making it so, on any page within the site, viewers can jump immediately to contact me through a variety of different channels.

The navigation bar running along the top of the page holds links to six pages and my resume. One aspect of the layout I really like is that the navigation bar is set up so that active links (the ones for the page the user is currently viewing) are differentiated from the others. This makes it so viewers can quickly tell if they're looking at the right page. I just used short, one-word labels for the links in that bar to keep it clean and simple, and the white-on-black design matches the rest of the site.

Though I didn't make any massive changes to the original layout, I dove into the code and made a lot of small design changes to familiarize myself with more of the different commands. These are just a few of the small edits I made:

• Changed color scheme from orange to blue.
• Brightened font color to make it more visible.
• Decreased margins and padding in a few places, as I felt like there was a lot of extra, unnecessary space.
• Condensed lists in the sidebar.
• Removed extraneous information from body content.

After working within the CSS of this layout, I feel like I have a much better understanding on how to manipulate it.

Content Choices

When choosing which pages to create, I wanted to give potential employers an idea, as I said earlier, of who I am both professionally and personally. To do this, I decided on five pages (not counting the home page or my resume):

• About. This page was relatively straightforward, and primarily covers my personality. The copy is focused on my school career, family and basic interests. I also used images here, and starting to run into a little bit of trouble. I was having some issues working with the float code, so I ended up placing images and text in different divs so I could manipulate them a little more easily. Working on this site more, this is something I'd like to experiment with so the textual and visual elements are integrated more fluidly.
• Writing. By displaying both creative and professional writing on this page, I'm hoping to give potential employers a view of different aspects of my writing style. This didn't take much coding; all I really did was set up a separate div style for the writing pieces so I could create borders around them, separating that copy from the rest of the page. I also ran into a weird error in which my apostrophes from Word turned into weird symbols, and I noticed that punctuation looked different from the apostrophes I created in Notepad. I tried retyping them in Notepad but it's still off.
• Design. Here I just wanted to showcase a little of my work in Photoshop. It was pretty easy to insert images, and I ran into a great tutorial for creating a gallery of thumbnails using lists. After doing that, I noticed image links, by default, have this terrible border around them, so I had to do a little searching to find the "a img {border:none; }" line of code to clean that up. I'd always used tables to create galleries before, so I'm really glad I was able to find an easier, neater way to work with them.
• Audio. In addition to talking a little about music here, which gets into more of my personality, I wanted to show people a few of the ads I'd worked on during my radio internship. I found another tutorial that described how to do this by using an flash application traditionally developed for Wordpress. I really like it because it's minimalistic and fits easily into the framework of the page.
• Links. I used this page to try and highlight sites that I think a lot of people probably haven't seen before, as opposed to just throwing a few traditional links at users. By pointing out my awareness of figures like Ze Frank, hopefully potential employers can see that I follow industry trends and stay connected to developments in social networking, and a few of the other links reinforce that idea. The two fastest-growing areas in media are mobile and social networking, so I'd like to emphasize my awareness of those.

Final Thoughts

I think working on this site was a great experience for me. I've learned a lot more about how to work in HTML and CSS, and by using a free layout I've been able to reverse engineer many aspects as opposed to going in blind and working from scratch. I'm going to keep working on coding in the future, and I'm also refamiliarizing myself with Adobe products so I can become more fluent in all aspects of design.