pro series

a look at my more professional side

my friend Shadow got me hooked on a philosophy a long time ago - that an artist isn’t really an artist until they know how to do things on their own. that means that they shouldn’t have to mooch off of the rest of the world’s brushes or depend on external resources to make a decent layout. and i believe he’s right.

not like i don’t use other people’s brushes, i’m not that good an artist. but he did have a point. and because of that, he made me really want to explore making layouts using as little outer help as possible, and maybe make things from scratch.

at the same time, i was actually getting requests for more professional layouts, which scared the crap out of me because i had no idea how to go about it. i told myself i would practice making something more professional, and here is a look, chronologically, at my attempts to do so:

scripttease version 3

This was my first attempt at making something completely from photoshop for a professional layout, which was appropriate because scripttease isn’t one of those frilly blog sites. i was very proud of myself for it, i loved all the drop shadows, gradients, and headers that were made. There were a few errors in the coding, which made the layout load funny at times, and there were a lot of header and footer classes to create shadows that eventually became a pain for me. The top bar was empty, which was also a problem for waste of space.

The layout was made using paths and a gradient swooping the green into a darker green on top. the background of the main image had a metallic gradient as well. The entire layout was outlined in a light border to give dimension.

Overall, the layout was a bit dark and inefficient because of loading issues, and there was quite a bit of room for improvement.

aquamarine

i really admired the wordpress themes that were everywhere. people made layouts so beautifully using very minimal CSS and images. I was so impressed and I wanted to try my hand at the same for my blog.

Aquamarine was my second attempt at a professional layout. i believe this one turned out far better, mostly because I work much better in light colors rather than dark. I thought the header image on this one was way cooler, there were so many different curves and opacities inside of it that made it look like water. This time, I fixed my former error of having no content in the nav bar, to putting my first header and site title inside.

i really liked the first navbox overlapping the navbar on top, it was probably my favorite part of the entire layout even if it was a small detail. there were drop shadows on the navigation in this layout as well, which loaded more efficiently than the last. the content headers in this edition were also more efficient and space conservative.

ron mueck

a few months later, I would try again for an art final in class. the header graphic on this one was a bit larger than the other two, but it wasn’t a big deal since the header seemed to illuminate the rest of the design

the headers on this one were very very similar to those of aquamarine, only this time they featured a dropshadow which added effects to the content itself, giving it a huge amount of dimension. for the first time, i explored navigational tabs on top since the site was small enough to go sans sidebar. the opacity was lowered on each tab so you can see the navbar lying underneath. i thought that was a nice touch.

and even though this layout was much darker than that of scripttease, the contrast of the yellow handmade graphic on top offset the darkness. the entire layout featured a dropshadow, and the header graphic had layers and layers of low opacity paths laying on top of each other to create a new world of overlapping colors.

virulence

Even though Virulence is a portfolio, and should depict my finest and most original work, reflecting my usual work, I had no choice but to make the layout a more professional design to provide a large workspace for portfolio images and larger articles. once again, i implemented the see-through nav tabs on top of a striped navbar. the layout again featured overlapping paths, this time crossing each other instead of going in one direction, with the use of more than one color for the first time.

the midpoint where all the paths reach eachother was quite amazing, it formed a diamond of many different colors which was quite impressive. a pattern was gradiented into the top, and a content box welcome message was added to accent the huge area of yellow that was left. the title had a sunburst in the background for theme purposes.

someone is getting better at this.

scripttease beta

I barely even recognize my work here. After being heavily inspired by Webstood.com, I revamped scripttease.net with a brighter layout. I used an actual image with professional accents such as lightened stripes and a site description bar on top. i again overlapped the sidebar over the nav bar to create a light effect and gradiented the sidebar down into the rest of the layout. tabs were once again used, this time using a screen effect instead of lower-opacity.

national honor society

My school requested that I make a website for National Honor Society. It would be the first time that my school would see my talents put to work. I made this design for it. Though the colors are a bit vivid (the original image used for the design matched the scheme more, but i later changed this image), the body was very complex with millions of beautiful text decorations and classes, including drop caps and low opacity titles. It was also my first widgetized theme, which I’m quite proud of.

flight club kc

for a class, i was supposed to build a small website for a made up store. i made a fictional shoe store, and this was the incredibly simple design behind it. i implemented a javascript scrolling shoe selector in other pages, but the front page was the most attractive part, with the very simple rollover intro. looking at the layout now, i have no idea how i had sliced it.

scripttease 3

Originally a custom design for a friend, “Fresh” for Scripttease 3 was released. My biggest challenge with this particular design was getting all of the navigation links to have exactly equally sized nav blocks. I did this by splitting tables and classing them to have different hover colors. The design turned out to be very very nice and simple, and much more modern and less busy than many of my other attempts.