Week 11 - Continuing Work

I had mentioned before that the previous screenshot would probably not be the final form, and sure enough, I’ve changed it up a little bit. I wanted to be sure the content really had a form to stay in rather than the title and body backgrounds extending nebulously off to the right. Now there’s a gradient background behind the whole body which is kept at a fixed width. The fixed width really helps the site keep its look and feel no matter which resolution you’re looking at the site.

Based on comments from the review, I’ve removed the “Resume” page and including a small “About me” on the main page. In the screenshot I’ve included, you’ll still see those original links since the picture is actually a Photoshopped image, but those are purely text links and don’t reflect the site in its current state.

I’ve been working on the site locally, so as soon as it’s presentable in its new form, I’ll get it uploaded to http://www.cypheye.com/twc421 (which is where you’ll find the original design, if I haven’t updated it yet).

Project Report, Week 10 – Editorial Incorporation

This week I came back from Spring break and took a look at my portfolio. Something wasn’t right. It just didn’t have the look I was looking for. I spent a good chunk of time playing with the location of elements and incorporating the suggestions of fellow students.

I finally came to a design that I am mostly satisfied with. I suspect the design may change slightly, especially as I find some nuances of this site in its conversion to HTML/CSS. It will take a little more work to get this into web form as it uses some transparency images that I’ll need to be sure work and line up in all modern browsers.

I’ve begun work splitting up the design and getting the current site modified to accommodate the new skin. This week I will need to focus on getting the HTML in line in IE, FireFox, and Safari. Once that is in line, I can really knock out getting the rest of my content squared away.

Project Report, Week 8 – Copyright and Fair Use

I’d like to focus my blog this week on the subject that we are discussing in the class boards: Copyright and Fair Use.

The project I am working on is a personal portfolio containing work that I have produced for myself, my personal businesses, and other people/businesses. I will need to be sure that any work I display that was created under commission is authorized to be displayed freely. Even though I may have created the design, I may not be at liberty to re-create that design from its actual owner.

This is a very interesting aspect of copyright law. It is along the same lines as a musical artist not owning the rights to their voice recordings and lyrics since they may have been commissioned and under contract to produce such recordings.

Along with ensuring my work is not blatantly infringing on any copyright issues, I will be continuing to develop and improve the design and content of my portfolio this week.

Project Report, Week 7 – HTML

Well, I’ve begun getting the site together. You can check out the work at http://www.cypheye.com/twc421. Right now, it works best in IE7+ and I’m working on getting it working right in Firefox.

Unfortunately, IE and Firefox have some subtle differences that present themselves when creating precision HTML/CSS that require goofy hacks to make it work in both. In this case, I’m adding “padding” to the element. This sets the content a certain pixel depth from the edge of that element. IE does this by adding that padded edge to the inside of the element. Firefox expands the element by the pixels defined to create that padding. If you’re familiar with Photoshop, you can think of it like adding a stroke to the element. IE places the stroke on the inside, which Firefox places it on the outside. It is just slightly difficult to make it all behave properly.

The hack you can use is kind of clever. IE has a habit of silently throwing away CSS values it doesn’t recognize. CSS principles stipulate that the last element gets used in a list of two or more keys that are the same. Example:

BODY {
color: #FFF;
color: #000;
}

In IE, the text color will be set to black (#000) even though white (#FFF) was set first, the last one listed takes precedence. But in Firefox, you can add a flag (!important) to the end of an element to ensure it is used no matter when it’s listed:

BODY {
color: #FFF!important;
color: #000;
}

Here, even though black is listed second, the white text color takes precedence (in Firefox only). If you visited a site with this code, in IE, the text would appear black, but in Firefox, it would be white. This works really nicely when I need the width set to one amount in IE and another in Firefox.

This week, I’ll need to nail down all the places this is affected. I’ll also want to take a look at the site in Safari or Google Chrome to make sure it’s working there as well. In addition to getting the site looking right on all reasonable platforms, I need to work on getting some good text into the “software” page.

Project Report, Week 6 – Prototype

After gathering my work from last week, I needed to come up with a decent way to represent all the work I’ve done. I knew I wanted to highlight my artistic web design skills, but I also didn’t want it to be so “loud” that it detracted from my work. First, I thought I would develop a “business” style site. Unfortunately, to me, “business” style is usually quite bland. It might have a flashy logo, but it’s otherwise set in a simple layout.

Next, I thought I’d take more of a designer approach. I started with a cross-hatched background with a slight gradient. On that, I added my name with some “low” lights as well as the expanded, faded, larger name behind. The organic “pin-striping” was the last touch that added a nice flare to the title.

On my first pass at the body, I had the entire content confined in a box with a large page title at the top and the portfolio entries below. After looking at that for a bit though, I wasn’t quite pleased. I got rid of the bounding box and expanded the title. You don’t see page titles large than the site titles real often and there is probably a good reason for it. However, I made “WEB DESIGN” a little faded to cut back a little on its “grabbyness”. With these changes, the larger page title and the now-free portfolio entries really enhanced the flow of the site.

My next step is to actually turn it into an HTML/CSS website. I expect this to take a few hours and the code/CSS complexity should be minimal. I frequently struggle in getting a really slick looking design, so I like it when that’s nailed down and I can get into the code.

Project Report, Week 5 – Gathering My Work

This was an interesting week. I got to juggle some school with a business trip. Luckily, there was lots of time to sit around in an airport to get some homework done.

So, for this weeks work, I needed to gather up my work that is worth showing off. Finding websites and art to show off isn’t hard for me. The hard part was that last part from two sentences ago, “worth showing off”. I’ve had years of messing around with websites and playing in Photoshop, but rarely did it result in something worth displaying to a prospective client.

I began by selecting the websites I’m proud to say I designed them. Next, I searched for some school assignments that I really enjoyed, as those are the ones I spent the most time on and can give glowing descriptions of. Finally, I am still searching through Photoshop work. Of which, there are many sites that I thought about making, did make and now they’re no longer hosted, or were just too difficult to create (at my then level of code mastery).

I’m always tinkering around and I also have a few classes that may produce some noteworthy work this semester. This portfolio will need to be an ever changing portal of my work so I can continue to draw in clients. Tastes in websites change and as they do, I’ll need to update, not just the design of the portfolio site, but of the items I display as well.

Project Report, Week 4

This week I created my portfolio proposal. It contained a lot of information on how I’ll be developing the web page housing the portfolio. One thing it lacked, though, was any hint on how the site might actually be laid out. I figured what the proposal needed to contain was the content that will in the portfolio itself.

Next week, I’ll be focusing my efforts on creating an initial mockup of the website. This will be created in Photoshop and I may even be so bold as to create an initial HTML representation of the site.

I am still a little hazy on how exactly the portfolio will look and what it will display. I have a lot of professional and school work, but not a lot of it is worth displaying. I suppose I will focus on those projects (both educational and profession) that I have really put a lot of time into and have turned out fantastic.