Crystal's Adventures in Webdev Land » Sites I’ve done

Site Redesign Part 3

Crys — Sat, 26 Feb 2011 06:04:50 +0000

Site Redesign Part 3

I was really happy with the watercolor and the basic idea of the design I was working on but it really didn’t feel like _me_. So out comes the Wacom. I think I like this direction better. The watercolor with paper is the base, with some knotwork and hand-drawn accents to really make it MY site instead of “generic artist-style site number 392″. Now the trick will be adding enough drawing to be balanced and personalized without adding so much (or making it so heavy) that that it detracts from the content.

Site Redesign Part 2

Crys — Fri, 04 Feb 2011 05:59:30 +0000

Site Redesign Part 2

alright here’s where I leave it for tonight. I’m thinking my site really needs a layout overhaul and that includes a nice big “featured” article section at the top of the index. Not sure whether to make it a featured slideshow with “non-featured” articles under it or just put the three most recent articles (minus the top feature of course) under it in their own columns with just the one most recent feature article in the big photo area. Thinking three columns, which means individual article pages and the blog page will have more or less the same layout as now but with slightly different widths to comply with the columns. The main paper background is 980px wide which, once you remove the decoration and balance it so the left and right white space is the same, leaves a width of about 860px for the content…not sure if that’s too wide… most of my target audience are likely to be on higher end monitors, but I want to keep mobile in mind…

Site Redesign Part 1

Crys — Fri, 04 Feb 2011 05:46:00 +0000

Mockup 1, Crysodenkirk.com

Websites are hard. It’s about time to redesign my site again and this time clear out all the old code that’s hiding under the hood. Moving up to html5 and css3 but damn, the design’s the hard part. Here’s how far I’ve gotten this evening on a mockup. Long way to go before I can start putting it together in code. The background watercolor though is going to be a series of transparent layers aligned differently so each page has its own slightly different background based on how long the page is. I love the basic colors on my current site but I feel like I need something lighter and a hell of a lot more modern. The current color scheme pulls the focus away from the content because it’s so saturated, and the current layout is pretty dated too.

RHH Foam Systems

Crys — Tue, 11 Apr 2006 17:54:56 +0000

Here’s a fun one.

RHH Foam Systems – spray foam insulation

The spray nozzle at the top of this site is animated, but on a long delay to avoid annoying users. I created the animation using frame-by-frame cel-style techniques in Photoshop and ImageReady entirely through photo manipulation. The spray foam behind the navigation is entirely a digital creation with a photo used only to enhance the texture.

Associated Surgical & Medical Specialists, LLC

Crys — Fri, 07 Apr 2006 17:40:33 +0000

Associated Surgical & Medical Specialists, LLC

Liquid layout, javascript enhancement, dynamically generated menu items

Code3Co Animated Banners

Crys — Wed, 31 Aug 2005 00:12:58 +0000

I used traditional (some would say “old-fashioned”) frame-by-frame animation to create these banners, in Photoshop and ImageReady, rather than relying on ‘tweening or simple program-created fades and slides. That gave me a lot of freedom with how the individual elements of the ad interacted with each other.

When I created these, I didn’t intend them to be a display of different types of cartoon physics. Nonetheless, they each typify a different aspect of animation that is a pitfall for many new animators, and that can cause your viewers to feel uneasy looking at your animation if you aren’t careful.

Object Resistance: Watch the logo as the slogan moves left in the banner above. For three frames, the logo compresses and then releases. This slight compression tells the viewer that these two elements are on the same plane, next to each other, that one is pushing the other. You have to spell out this kind of contact in your animations if you want to avoid a feeling of unconnected elements randomly floating in space. Viewers can tell instinctually when an object behaves in a way they’re not expecting even if they can’t pinpoint what exactly is wrong with it.

Bouncing: The number one unconscious expectation of a bounce is bounceback. The element needs to overshoot its original position. Watch the logo to the left. See how it goes up a few pixels above its original position, with compression, and then comes back down? Most objects in real space have this characteristic. If you leave it out, your object will look like it’s somehow connected to the space it bounced into (in this case, the bottom of the ad).

Spinning: I could write a book on spinning graphics and what to watch out for if you are using them.I’ll just list a couple things here. First off, remember that your element has a back. When the object spins, you should not see two copies of the front or you will break the 3D illusion. You can remedy this quickly by flipping the element and performing the same steps as you did with the unflipped element to account for the back. Second, lighting. If you are using a 3D program to create your spinning element, you don’t need to worry about this if you set the light source, but all flat animations require you to pay strict attention to propagating your light sources.

RHH Foam Systems

Twilight Games

Crys — Tue, 09 Sep 2003 19:26:21 +0000

This site is no longer available, but here’s a screenshot and one of the animated banners I did for the site.