This was the original idea…

And here is the revision…

The Assignment: Build words out of modules, in other words: build letters out of units.

Display 1

Display 2

Display 3

Display 2

Display 3

Display 1

Display 2

Display 3

Display 4

Display 1

Display 2

Display 3

Display 4

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?

Out of the list of speakers are a few icons / idols of mine (they’re italicized), and getting to listen, speak and even just shake hands with them was exciting. I definitely felt like a groupie next to some of them. For the most part, the presentations were great. There were one or two that I thought fell behind in quality in comparison to others. But overall it was an excellent conference, and I was disappointed to find out that there weren’t a lot of college students there (at least, undergraduates).

There were a few highlights I wante to share with everyone:

• Designers and Developers must work together. Instead of designers handing off a photoshop’d design and hoping that the developers will keep the design intact, developers and designers should collaborate together. (Ryan Singer states that the “waterfall” hand-off effect should be replaced by designers and developers having a shared iteration of the source code.)
• Designers need to explain their choices. A lot of times, designers make choices in their design that aren’t made for a specific reason other than the fact that it looks pretty. Designers need to ask themselves “Why?” when adding an element, choosing a color, etc.
• Progressive Enhancement. Designs should start off simple and be able to support everyone. Once that’s achieved, elements that will enhance the user’s experience should be added.
• Designers need to step away from the computer more often. The longer we are at the computer, the small the rest of the world becomes to us. To quote Nick La, “The internet is smaller than your environment.”

At the end of the conference I found out I won the ThinkVitamin contest =) We were asked to submit tips that would help other designers and developers. I was shocked that I won! I wonder how many people entered. The cool thing is that my tip is going to be featured on their new feature “Daily Dose”. As Ryan Carson said, “It’s good PR!”

Also, the next article fo the Blog series is being written!

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.

I’m entitling this design Fresh & Me which might sound a little…lame to some, but I thought it was appropriate. It’s my second entirely hand-made WP theme, using some advanced techniques that I’ve learned along the way. I tried to keep it very simple, and then I was running into a ‘I really don’t like it’ so I changed it up some and this was the final concept.

The main color of choice is Pantone 380 C and the three fonts presented are Violation Script (logo), Gill Sans (headlines) and Helvetiva Neue (content). I was original going to use SRG Clean Archives but then stumbled upon an old post from DevLounge “Custom Archive Queries For WordPress” which came as a blessing, and now my Archives page will be simple and clean. Something that I’m looking forward to updating is my directory page. Other than linking to friends and designers that I admire, I’m hoping to compile a large list of resourceful sites for designers, old and new. Unfortunately I haven’t touched the portfolio section, but rest assured it’ll be there in the near future. I promise.

I thought I was finished with this theme a little over a week ago, but while reading digg and reading articles on design, I landed on an old article that made me realize that I had a lot of flaws. If you haven’t read RA Project’s “Things to Avoid: What Makes Me Nervous When Reading Your Blog” then you might want to read and double-check (followup with DevLounge’s “15 Design Decisions That Annoy People“).

With earlier designs, people had told me that my earlier designs had font sizes that were too large, so I returned to the  font-size of 12. One of the things that I agree with Simonne is the fact that a lot of sites do have small font sizes, and to me I kind of feel like 12 is small on the screen. I increased the font-size to 14 and I feel somewhat comfortable with that size.

The next object on the list was the RSS feed. I didn’t forget it, I had it on the sidebar as just a text-link. While digging for inspiration few months back, I had seen a lot of sites with kickass RSS feed buttons, and so I figured that I’d try creating my own and it might not be the best button ever created but it works, and it’s there!

I spent the a few hours Labor Day weekend configuring my comments section so that they appeared cleaner, and then I learned that I was one, of many, that did not have a “subscribe to comments” feature. I was getting frustrated when I couldn’t find out how to do this on my own via wordpress.org, but luckily I found Mark Jaquith’s Subscribe to Comments plugin.

And the last thing that I never really used was “Related Posts”. For something that doesn’t take a lot of effort (it’s a plugin for christ sakes), I really don’t know why I never bothered with it. I guess my reason was being lazy, and that’s not a good reason.

And with that said, I am planning to write an article on (Re-)Designing a Blog. It’ll be my first real article! Also, my previous readers of my personal blog faraway words, you’ll have to register in order to view my daily rants. I apologize for the inconvenience, however I want to make my blog more professional.