Fave Five

Monday, September 29, 2008
Monochromatic:  This blog Lifehacker is monochromatic, and one of technorati's top 100 - so it does quite well.  

This is a nice analogous color scheme and seems popular right now - green and blue.














Here is a good example of using a complimentary color scheme:  Plantilla-blogy-columnas.  It is using orange and blue.














Bright and pretty saturated colors in the flowers found here and called Colibri.








And last, probably my favorite look, the unsaturated colors.  Dark Ritual
 

Take 2 - A color experiment


I went with a tetrad color scheme of green, blue, orange and purple but in dark pastel - I chose it by playing around and I liked it.  

I think it is a complementary color scheme.    It looked better on the color wheel then on the blog.  I think it was a good experiment to see that it isn't easy. 

The base color is #E6CFEO, I did use tints and shades.  There are both cool and warm colors used here.  

Color is used to create contrast as I ensured that the text was readable against the colors it was on.  Color is used to create repetition because the titles of all the posts, the text in the posts, and the other common texts (links, dates etc) are always the same color.  If that weren't the case, this thing would really be crazy.

Monochromatic Failure Turned Green


I finally got it.   I had to go into the html and update the color.  I didn't know what I was doing, so it was a surprise to see it worked!


I tried to go w/ a green monochromatic color scheme, and I tried lots of ways to update the template and many templates.  It seemed that every time I changed one, the last one that I changed when back to the original.  

I changed it again...

Friday, September 26, 2008
Ooops, I did it again....

I just wanted to do a bit more experimenting. I have had good success with this one... but might play some more later. However, I prefer this layout....

New Template Design (Free)

Thursday, September 25, 2008
It might be free, but I am not sure this one is worth the price.... The first one that I downloaded and tried to apply I couldn't get to work. So, this was my second choice, and I sort of went for a simple one so that the chances of it working would be better. So, it did work, but not without a few glitches. At quick inspection, they included a completely blank left link column (it ended up below and to the right), no blogger icon on the page making it difficult for me to find the "add new post" page, and the subtitle is just gone. I downloaded this free blogger template from:

http://mashable.com/2008/05/17/70-plus-new-and-beautiful-blogger-templates/

Now for the design low down:

Columns: I think this is a three column design, where the two right hand columns are merged into one. Leaving the layout with 1/3 for links on the left and 2/3 for blog posts on the right.

Grid: In terms of a grid - I don't know that they used a grid....?

Design principles:
Contrast: The contrast is strong from the white background to the dark post and title fonts. In the header, they used white font contrasting with the saturated blue.

Size: The size of the text definitely corresponds to each specific element. Of course they are all the same for each element - all the post titles are the same size, the post text is the same size etc. The title of the blog "Grafik Grl" is the largest font as it is the brand for the blog.

Space: There is extra space around the title of the blog, separating it from the rest of the page. As a result, they are highlighted by the space around them. There is also nice space to separate the columns and the posts without using big lines or distracting marks.

Proximity: The post tile and the post text are in close proximity, illustrating which title goes with which post. The date of the post is less important, so it is in a low contrast and small, however it is in close proximity to the post of each day.

Repetition: The use of the blue color from the background is faded in and around each posting.

Screenshot:


Template Design

So, this particular template seems to be one of the cleanest provided by blogger. Very simple, lots of white space and clean lines. I like it. The edits that I made were small. I placed the "about me" section at the bottom, and used bold on the post fonts. I also changed the colors of the links and text to colors within the same family. I have been using blogger for years, but I was completely unaware of the huge upgrades that they have done the to system - it is amazing what you can do to edit the templates now with such little knowledge of code. Thanks for showing me, as I was clueless.

Columns: I think this is a three column design, where the two right hand columns are merged into one. Leaving the layout with 1/3 for links on the left and 2/3 for blog posts on the right.

Grid: In terms of a grid - It is very simple, with a basic 4 quadrant grid and the layout is evenly spaced.

Design principles:
Contrast: The contrast is strong from the white background to the dark post and title fonts. The contrast is lighter on the dates and miscellaneous and less important information such as the "posted by" info.

Size: The size of the text definitely corresponds to each specific element. Of course they are all the same for each element - all the post titles are the same size, the post text is the same size etc. The title of the blog "Grafik Grl" is the largest font as it is the brand for the blog.

Space: There is extra space around the title of the blog and the subtitle, separating it from the rest of the page. As a result, they are highlighted by the space around them. There is also nice space to separate the columns and the posts without using big lines or distracting marks.

Proximity: The proximity of the title to the subtitle, indicate that they should be read together. The post tile and the post text are also in close proximity, illustrating which title goes with which post. The date of the post is less important, so it is in a low contrast and small, however it is in close proximity to the post of each day.

Repetition: The use of clean lines is repeated throughout this design. The title and subtitle, as well as the "about me" image is outlined or "framed" in a clean lined box. Thin lines are also repeated in the same color separating the different sections of links and posts.

Screenshot:

My Favorite Web Site

Tuesday, September 23, 2008
Dooce.

Dooce makes me laugh. Sometimes she pisses me off. But either way, I find her entertaining. Furthermore, she is probably the most famous blogger and so she is one of the first that I found and read. Honestly, I don't read her daily but I used to. I love that she changes her banner every month to a new, fun design - and I love her daily photos. I dig that she supports her family with her work with this site. Go Dooce.

www.dooce.com

Posto Numero Uno

Nice to meet you. I am Crystal Young and this is my blog for Web Design and Graphics class. Kind of scares me to post my work because I also have a personal blog where all my friends and family read and I guess if they find this one, they will be able to see my student projects as well. Better not slack off too badly.

I am very interested in web design. There have been many times in my career where my inability to do what I wanted to do with my own site or sites that I have been part of has hindered to me. I don't have a ton of experience, but I have worked in the online marketing field off and on and would like to be able to really improve my skills. Furthermore, I have a site that I am working on for a friend as a trade, and I hope that I can use what I learn here to improve my design both in usability and aesthetics. what u r interested in and why you want to learn.