Headers from the Web

http://zenhabits.net/
I like the simplicity of it. It fits the theme of the site. It's uncluttered and it's perfect.

http://www.boingboing.net/
The header for Boing Boing is bright red on a black background. It's not huge on the page but it stands out. It's playful and makes a statement. It doesn't take itself seriously but manages to be elegant.

http://www.physorg.com/
I like the header on this page but I wish it was a little bigger. I don't remember the site being so cluttered last time I visited but the header seems a little lost in all that text. Still, it's a good header with a strong identity.

Header Design

For this header, I used the font Rosewood Std which came with my Mac. I made it grey and gave it an inner bevel and an inner shadow. The blend mode is normal, since the other ones made the text either hard to read, not as sharp or invisible. I exported it as a PNG as that was the sharpest looking and had the smallest file size.

A GIF, a PNG, and a JPEG

This GIF comes from http://chameleon.simplebits.com/. It's a GIF but it really could have been a PNG, although I suspect there's more than 8 colors in that logo. The simplicity of the design means that either a GIF or a PNG would be best when it came down to optimizing.




This PNG is from http://powazek.com/
Since it's just a line drawing, a PNG is capable of preserving the right amount of detail. If it was in color using a PNG might depend on how many colors the original file uses. This was used as part of the welcome screen.



http://borski.pl/

This JPEG has a lot of color and detail that would be lost in the other file formats yet it remains a rather small 41.31 kb. It's eye catching and fits the color scheme of the site.

Japantown

Even though this photo is very detailed, I made this one a GIF to see if it would look alright. It lost a lot of detail and it doesn't look great in comparison to the original. I would probably do this one again as a JPEG High Quality.

Stop Sign

This one I cropped close and made it a GIF. I dropped the colors low because after cropping it, it was a lot of solid colors. Even though it has less colors, it still looks good.

Black and White - Abandoned Shop

This is what I did to this image. It's was a fairly big one, so I used the JPEG smaller file setting. Didn't crop this one too much because I wanted to keep it the way it was.

Color Scheme Samples

Media Decoder
Monochromatic - This blog is very simple, it's mostly white with some black. If there's any color, it comes from the photos in the posts. It's a New York Times blog, so it's not surprising that the color scheme is so simple. The content, in this case, the writing, is the star.

Charcoal Template for Blogger
Analogous - The colors in this blog are close to each other in value while remaining different enough to provide contrast. It's a very dark template and the colors are, in my opinion, too close to each other. The colors seems very unsaturated.

Cuteoverload
Saturated - Considering this is a site about cute animals, it's no surprise the colors are saturated. "Cute" things usually revolve around bright colors. It matches the content well, all the posts feature brightly colored photos.

Integral Template
Complementary - It uses blue and green to good effect. They work well together and do not distract from the content.

Forum Template: Salsa
Unsaturated - This one uses lighter shades of red and yellow. Both colors, fully saturated, would be too much for one page to deal with. They probably could have desaturated the colors a little more as it's still a bit much.

Color Scheme

I actually used this scheme because, on this template. You can't change the color of the post title text. I used that post title text color, a blue/green color as the base color. I used a split complementary scheme and the light pastel preset. The blue/green color is a little cool but the yellow brings in some warmth. The yellow also contrasts out the blue/green to make the text easy to read. I also used the blue/green color on the title of the blog and the tabs to match the post titles for a little repetition. I used the second split complementary color only in the footer at the end of the posts. It denotes the end of a post really well, I think, and because it's the only place it's used, it stands out more.

New Layout

Wow, not liking this one at all despite it doing some things that I love.

This is also a two column layout with the post area taking up 2/3 of the area and the sidebar taking the last 1/3. It uses black text on on a white background. The white background rests on top of a grey background. The sidebar is yellow, which stands out, but entirely too big. There is a great amount of space between the posts (better than the last template). I like how it keeps the posts, post titles, and the post footer together, making them a little unit. Combined with the space between posts, this template does a good job of making the posts noticeable and distinct from each other despite the simplicity of the color scheme.

I'm going to switch back to the previous template because this one doesn't let you customize it much. Plus it added a bunch of widgets you can't remove and moved content from the sidebar to the bottom and does not let me move it back. Shame, I liked a lot of what it did.

I got it from http://www.bloggerblogtemplates.com

Original Layout

This is a two column layout with the main text taking up 2/3 of the left and the sidebar taking over the last 1/3.

For contrast, the layout uses white or light colored fonts on a opaque background. This opaque background goes over the image background or texture, keeping the text easy to read no matter how busy the image background is.

The post header text is a great deal bigger than the post text, creating a definite separation between posts. The bar at the top used to have bigger text which made the links go to two lines. That made the links not look like a unit. I lowered the text size on the links to make it one line. Now it has proximity and looks good as a unit.

The size of the post header text creates repetition and lets the reader scan the page quickly to see the posts.

Favorite Site - Lifehacker

It's fairly obvious to people that know me that Lifehacker is my favorite site on the internet. Even after the horrible site redesign, I still love it.

Lifehacker gives advice on most every topic. From building a computer from scratch, to making better coffee, useful software or sites you may not know about, how to improve your photos, etc. I know there's sites like wikiHow or eHow that have tutorials for things, but the difference is: when you go to those sites, you're looking for a particular piece of advice. Lifehacker shows you things you didn't know you didn't know you could do. Or they'll show you how to do something more efficiently. Either way it's taught me a lot.

Introductions are in Order

Hiya! My name's Jose Jovel.

Taking this website design course because I love to learn new skills and making websites has intrigued me for a long time. I also love photography and film. Very excited about this course. Looks like a lot of work but I'll do my best.

Thanks!