Here’s a few things that need to be completed (still) : (A) I need to finish page structure for chronology, portfolio and social; (B) I need to decide on an accent color scheme. I’m currently debating between reds, yellows or oranges (possibly all three? gasp!); (C) Update the text for several pages; (D) Re-create portfolio entries to be more uniformed; (E) Add new pieces to the portfolio section; (F) Integrate a twitter / tweet system as well as last.fm for social; (G) Create header banners to rotate; (H) Add a contact form; . . . (Z) Progressive Enhancements: (1) Incorporate AJAX and (2) Add lightbox.

In other news, my third year at Parsons started August 31st, 2009 (a weird start date) and things are going incredibly well. I’m getting my ass handed to me a little and I’m definitely feeling the pressure, but it’s what I’ve been hoping for! I’m still interning at Pando as a design consultant / psuedo web-developer until they find a replacement. A few major changes that I want to dedicate real posts, so expect them!

As the title suggests, I’ve been a bit starved for creativity. It’s led to a slight lack of motivation which has caused me to be a little more lazy than one should be. Hopefully with a new website release and the gain of an internship (perhaps I’m counting my chicks too soon), I’ll be a bit more productive. Not to mention, I’m a bit broke for the summer at the moment.

More details on the site soon…though I’m thinking of something a bit more over the edge and crazy than reserved like the last three versions =]

All that print work from the school kept me a bit occupied from doing digital work, so I’ve missed out a lot! In order to prevent myself from becoming restless I’ve decided to make a checlist for the summer. Things I must do!

The Summer Checklist

1. Play catch up in the digital world
2. Understand the basics of PHP (that isn’t related to just wordpress) and AJAX
3. Re-design the website
4. Update the portfolio & resumé
5. Land myself an internship and/or freelance gig
6. Keep up in appearances
7. Take the chance to read a novel that isn’t related to design

I received better grades than I thought from all my classes, but still was a bit disappointed with my overall work produced from the semester. That just means I need to work my ass off a lot more. Also, after speaking with some other designers from other schools, I’ve realized that Parsons hasn’t updated my department’s curriculum in a while. Which has led me to fill out transfer applications. Who knows where I’ll be next year?

Now I hate to say I was busy, but I was, and pretty much why this site fell through the cracks. Well I’m trying to work on that, so I hope with this theme which I entitled, in an ever so cheesy attempt to be clever, “Rezolutions”.

What’s new with ‘Rezolutions’? It’s a column-based design surrounding columns of 320px to add to a maximum width of 960px. I feel it falls very much in line with other grid-system layouts, with a few variations for different features, sections, etc. Another noticeable difference is color, or the lack thereof. I wanted something very clean cut and mature-looking. A lot of times I tried to incorporate colors that were in my mood, but I found myself quickly bored with those layouts. It seems counterproductive to not use color in that sense, but I think I accomplished a layout that I generally like more than the others. I will note that I did add a little color, Pantone 295C for link hovers. There might be a few more accent colors coming, but for now I’m going to keep it sweet and simple. Also, as part of one of my new resolutions, there shouldn’t be an ounce of Helvetica or Helvetica Neue on this site, at all. I’ve used Century for the header and headlines and Georgia for the content / body of the site. Most of my layouts featured the use of both serif and sans-serif, or mostly sans-serif, but over the years as a designer I’ve come to love serif a lot more. There’s just more character.

The most noticeable change, in my opinion, is the fact that there’s an actual portfolio page. What does that mean? It means I’m going to work my ass off to actually have a portfolio section up and running.

And with that said, I hope everyone had a great New Years, and that 2009 has started off in a good light. Everyone’s been asking what resolutions I’ve made, so here are mine:

1. Be more diligent and productive in 2009.
2. Learn jQuery and AJAX (2a. And become adept with at least one of them).
3. Refrain from using ‘Helvetica’ and ‘Helvetiva Neue’ for any and all designs.
4. Conform to the use of grid systems using rational and irrationals proportions.
5. Be a better friend and lover.

What are your resolutions for the new year?

With this article, I want to share with you the resources I discovered and hopefully provide a better understanding of the blog design principles. As a note for readers, this article is about blogs that use WordPress. In this article we’ll be covering Design Standards and Validation, the Header and the Navigation. The following article(s) will cover the Content area (including the Header, Post, Post Footer, Comments and Trackbacks), the Sidebar and the Footer. Eventually forming a complete and solid guide.

Design Standards and Validation

When I started out using WordPress, I taught myself how to use the CMS by downloading pre-made themes and reading the code. Some would say that the way I learned how to design and developr is wrong and some would say it’s right. There are pros and cons to this method.

The pros are that you’re seeing the language directly, and hopefully understanding how it works. You also can see how certain PHP / HTML / CSS tricks are executed. The cons are that if you’re not also reading the “codex” provided on the WordPress site, you’re not getting a full understanding of the WordPress language. This method also encourages you to simply take the code and alter the format or css of the theme. This often leads to work that isn’t truly yours, it’s merely just a slightly altered copy of someone else’s theme. I don’t know about you, but that fact would irk the hell out of me as a designer.

Before we begin designing the blog, you should have a grasp of the current web standards. Although there are a lot of blogs that aren’t completely up to date with these standards, and a lot of bloggers would say it’s something very minor, following web standards will help you learn the proper way of coding, leading to a validated blog.

Here is a list of websites and articles discussing web standards and validation:

• Why Web Standards Are Important In Web Design
• Web Standards Group
• The Web Standards Project
• W3Schools
  
• Validating a Website

01 — The Header

The first layout element that I suggest designing is the header. As one of the most important parts of your blog, other than the content itself, this is the area of your blog is what readers see first. So you will want to make it stand out from all the other blogs. As with all designs, the key to making your header, let alone anything, memorable relies on several basics: Color, Contrast, Shape, Size and Texture. By utilizing these five elements of design, you can achieve phenomenal results.

Wondering what a good header looks like? Take a look!

Viget Inspire

Viget Inspire has a beautifully edited photograph with very subtle shades of color which gives a very nice aesthetic. The logo is large and at the top, receiving the most focus in the header.

BCandullo.com

I laughed at Brad Candullo’s header, which isn’t a bad thing. The color scheme of the website is exciting, there’s great texture and the spacing between the three elements is excellent. Not to mention he has a cute and funny description of himself.

WeArenotFreelancers

WeArenotFreelancers’ header draws attention for the simple fact that the majority of it is hand-drawn. The style of the cartoons brings life and humor to the site. Not to mention there are quick bursts of bright colors to lead the eye.

WebDesignerWall

One of the most memorable headers I’ve seen is WebDesignerWall’s. There are so many hand-drawn elements with a lot of vibrant colors that make certain elements pop out. Also the flow of the shapes move the eye from left to right and back again. It’s definitely one of few headers that stick out in my mind.

thethingswemake

As a very simple looking header, it’s the use of color that makes this header great. It’s one of many sites that prove the fact that you don’t need a hyperactive design to be effective and memorable.

02 — Primary Navigation

One of the most frustrating parts of any site to a visitor is its navigation. Most people tend to forget that the navigation is to help the viewer get to what they want quick and painless. But what makes an effective navigation?

Visibility. What’s the point in having a navigation if it’s not easily visible to your readers? As you’ve seen in the header examples, most users are used to having the primary navigation near the header. That doesn’t mean it has to be at the top, but it’s a habit to get into. Next, keep distractions such as advertisements away from the navigation. Web users hate advertisements, and if there’s an advertisement near the primary navigation there’s a chance the people will avoid that area. And the lastly, give it space and color. Nothing draws attention than an area that has been given proper padding (space) and accents (color).

Prioritize. An effective navigation means that the owner has had a good idea of the direction he wants his visitors to go. You’ll have to determine the purpose of your blog and what pages you want your visitors to go to.

Here are some examples of simple, clean and most of all, effective navigations.

SimpleBits

SimpleBits’ navigation is simple, clean and spaced properly. It’s right below the logo, and is in the header of the site. Also note that right below each link is a small description of what each page is. When you rollover the links, a slight gradient illuminates the link. As a primary navigation, it is one of the most effective examples out there.

Matt Brett

What I like about Matt Brett’s navigation is the super clean text against the highly textured background. The font size is also large and all caps which draws attention to the area. Also, he divides the links into two categories: blog and design. When you hover over the links, blog links are given pink and design links are given yellow.

Ma.tt

Another wonderful use of texture to make the navigation stand out. Against the heavily decorative and colorful background of the header, Matt Mullenweg places his navigation against torn paper / fabric, letting users separate the navigation from the chaos in the background but also makes the navigation more legible. To allow people to make sure the links are working, there is a hover effect.

Larissa Meek

Larissa created buttons for each navigation link, giving each one their own shape along the top of the header image. With a crisp and clean font choice, she adds a little jazz with a hover rollover effect.

Freelance Switch

Similar to how SimpleBits’ navigation is, FSW takes it in a slightly different direction. Adding a vibrant color behind the navigation, large fonts for the links and a small font for the description. Also the selected page is at full opacity, while the rest aren’t and when hovered, the links illuminate. Another prime example of a simple but sweet navigation.

So what are some trends that we saw in these navigations?

1. Most navigations were horizontal, and at the top, either in or near the header.
2. Color and texture can play a big role in drawing attention.
3. Hover / rollover effects. I’d like to note that you shouldn’t go over the extreme with these effects, just something that lets your readers know that the links are working / functional.