Click on the image for the full-size version

(MJ cutout from http://www.mjjpictures.com/main.html)

I have been working on some generic website templates and wanted to make one of them available, FOR FREE!

Here is a preview of the design…

If you like the design and are interested in downloading the source psd file, you can download it here

Hope you enjoy!

The more I started playing around in wordpress, the more I tried to create new things and challenge myself in new ways. I also ran across several great resources for creating wordpress themes. In the future I will be releasing some free themes and some tutorials of my own on detailed sections and features of wordpress, but for right now I am going to give you my top three favorite resources for wordpress.

1. http://wpinspiration.com/ This is my go to site for inspiration. This is a gallery dedicated to wordpress sites. They always have great sites posted on there. The site is under http://wpcandy.com/ (a site with all kinds of wordpress plugins, articles and miscellaneous resources). Anyways, this is just one of many sites that I frequent to see what people are doing with wordpress.

2. http://css-tricks.com/designing-for-wordpress-complete-series-downloads/ These tutorials by Chris Coyier greatly benefited me in the early stages of theme development. Chris does a great job of explaining the necessities and showing you how to accomplish tons of great tricks in wordpress via several screencasts.

3. http://blog.themeforest.net/category/wordpress/ ThemeForest just recently did a highlight of Wordpress, highlighting a different tutorial about wordpress each day. All of the tutorials they posted are awesome! Some cover the basics and others get much more in-depth into some of the more advanced features of wordpress.

There are tons of resources out there to help you with wordpress theme development, these are just the few that have helped me out the most of late and I wanted to share them! Hopefully they are beneficial to you as well.

One of the main reasons why I am redesigning my site is because I wanted to run my site off of a blog engine (wordpress). This will offer me a lot more flexibility to move forward with some ideas (personal blog, pimped out portfolio section - just to name a couple) that I have for the future.

I also want my site to be more of a reflection of my style and capabilities.

I’m pretty set with the design and have already written the markup and about 70% of the CSS, now I am pretty much at the point to create the wordpress theme.

I already have a pretty solid understanding of Wordpress, so it shouldn’t take me too long to get the new version up and running. Anyways, I have a screen capture below of what the site will look like, let me know what you think!

One of the ways to help you refine and modify your site to accomplish those goals is by utilizing web analytics. There are several tools and solutions that you can use to have analytics on your site. The one that I use for both my personal site and TheWebGoods.com is google analytics and it is this particular tool that I will be referencing for the remainder of this post.

Google analytics is FREE to sign up and use. It is also a simple and intuitive tool to work with. You don’t have to have expert knowledge of analytical tools to be able to just jump in and use some its robust capabilities.

Some of the benefits of using an analytics tool is you can see how many visitors you are getting, where they are coming from, how long they are staying on your site and tons of other great information. You are also able to setup analytics for multiple sites under one account, making it super simple to jump around from site to site and see their different statistics.

Some of the benefits of these tools are that you are able to see who your visitors are, where they are going and also where they are exiting your site from. This allows you to execute an iterative design style to your site: meaning that as you notice certain trends and patterns from your analytics, you make design changes to make your site more usable and/or efficient. (For example moving a button that isn’t getting much traffic from your footer into your right column).

Analytics helps us to be more aware of what our users are doing and allows to efficiently make subtle changes that will make it even easier for them to accomplish the tasks that they desire to.

This post isn’t meant to endorse google analytics, that is just the tool that I use. This post rather, is meant to encourage the use of any analytical data that you can gather for your site. It makes us more aware of our user behavior, thus enabling us to be more effective and efficient.

Knowledge (or data in this case) is Power, ROCK ON!

http://www.thedesigncubicle.com/2009/02/how-to-drive-traffic-to-your-new-design-blog

First we will start with the html code… create an unordered list with a few list items, like so…

<ul>
<li>This is your list item</li>
<li>and another</li>
<li>One more for giggles</li>
</ul>

I have already created our custom icon in photoshop that we are going to use..

Now, what you will want to do is setup some basic css for the li, like so…

li {
list-style-image:url(customLI.gif);
}

Make sure that your image url for the list style is setup as the correct path… since my html file and image file are on the same level, I just need to reference the name of the image. It is standard practice to create an images folder for all of your graphics, if you did that, your url would look like url(images/customLI.gif

Without any other styling applied to your UL or LI the result would be something like this…

If you would like the source files, you can grab them here

I hope you enjoyed this quick CSS tutorial! Be on the lookout for more to come!

Now some may disagree with me, but I view the skill level of web designers akin to the structure of Jedi. What I mean by this is just as there are varied skill levels and titles associated with those levels for Jedi, the same applies for Web Designers. So without any further delay, I will detail out those levels and their similarities.

Jedi Padawan: This is where it all starts, a Padawan is a Jedi-in-Training. Usually works directly beneath a Jedi Knight for supervision and guidance. The Padawan has some self-sufficient abilities but often requires some type of supervision. The Padawan would be akin to an entry-level Web Designer, someone who has some skills in all of the essential tools (photoshop, dreamweaver, etc.), just as a Padawan would be able to handle a lightsaber without hacking their own limbs off. Usually this person serves a couple years doing the grunt work involved on web projects until they get their feet wet enough to jump to the next level…

Jedi Knight: Once a padawan has proved themselves capable, they are induced as a Jedi Knight. The Jedi Knight is fully capable of operating solo and making key judgment decisions on numerous tasks, but sometimes even they require some direction from a Jedi Master. A Jedi Knight has the ability to think at a higher level of strategy and planning then a Padawan and also provide direction to its Knight in training. The Jedi Knight would be similar to a mid-level Web Designer… someone who has 3-5 years of experience in front-end design/development, able to complete more advanced tasks then an entry level person and able to operate on a higher and more independent level. One of the requirements of a Jedi Knight seeking to become a Jedi Master is to take on a Jedi Padawan and successfully train them into a Jedi Knight before they can reach the level of Master.

Jedi Master: Once a Knight has the proper amount of experience, trains a Padawan to the level of Knight and passes the required tests - they reach the pinnacle of their journey: Jedi Master! The Jedi Master is fully able to handle any task solo or by leading a team of Knights and Padawans. They are able to make decisions at a faster pace and higher level and also have a more extensive skillset and knowledge then their underlings. The Jedi Master would fall in the realm of a Senior-Level Web Designer: A Designer who is able to lead a small team, fully capable of taking a project from inception to completion without much input by superiors. One who has worked in their field for 5+ years and has a grasp of the advanced tricks and techniques involved in
web design. These Masters of their craft are almost a walking Google, so high and respected is their ability and knowledge in their craft.

Well, that is just my thoughts on the similarities between the Jedi Order and the Designers of the Web. I consider myself to be a Jedi Knight & am aspiring to reach the level of Master everyday. A good way to do that is to always challenge yourself and learn as much as you can, as often as you can. Knowledge is Power!

What kind of Digital Jedi are you? What kind of Digital Jedi do you want to be?

The book itself is “Transcending CSS, The Fine Art of Web Design” by Andy Clark The content of the book falls under 4 main parts: Discovery, Process, Inspiration and Transcendence. This particular book isn’t really aimed at the novice or casual css user, but is more focused to the intermediate to advanced users.

The book doesn’t just cover CSS practices, it in Andy Clarke’s own words “It’s about design and code playing nicely together. It’s about the way code is meant to support design considerations. It’s about breaking the chains that sometimes keep us too far grounded in reality.”

It covers so much excellent content that I find myself looking back at sticky-noted pages for reference quite often. One of my favorite portions that he explains is how the ‘content-out’ approach enables to to create a new type of workflow. He lists the work flow as follows:

1. Gather the content

2. Work with wireframes to organize and present that content

3. Creat static designs to demonstrate creative concepts and layout ideas

4. Write meaningful markup that structures the content

5. Work with CSS to implement the design

These are just a few portions of the book that really stuck out to me, but I would encourage you to get a copy of it and read through it, there is too much valuable information in it to not do so!

I also had the pleasure seeing Andy Clarke speak at An Event Apart in 2008. His keynote presentation was just as loaded with insightful information as his book was. So, if you ever have the chance to listen to him or read his work, do it! This guy rocks!

Seeing how every designer has their own way of doing things… I just wanted to list the majority of sites that I subscribe to via newsfire. That is the tool that I use to subscribe to and read all of my rss feeds. By no means is that the only way to view your feeds, it is just my personal favorite.

I will just dive right in and list my top 5 with a brief synopsis and then make the rest available via a .opml download.

1. CSS Mania This site rocks! It has a daily list of new, top-notch CSS websites. I usually like to check this one out on a daily basis and see what the gurus of our industry our churnin’ & burnin’

2. NETTuts Web Design/Dev based tutorials that include turning psds into xhtml/css, tons of wordpress tips & tutorials, php, jquery… pretty much anything and everything that has to do with front-end web develpment & some back-end stuff as well. Awesome resource for any web designer!

3. PSDTuts Anything and everything that has to do with photoshop! There are tons and tons of awesome tutorials on this site. Designing, drawing, interface, photo effects… just to name a few. All of the authors produce top-notch work. They also have a plus membership for a monthly fee that gives you access to special tutorials and source files.

4. CSS Globe Just like their tagline says ‘Welcome to Css Globe, your daily source of css news’ tons and tons of awesome css articles, tutorials and resources are funneled through this awesome site!

5. Smashing Magazine Wow. Inspiration sites, galleries, tutorials, latest trends… those are all some of the things you can expect to fine here, amongst tons of other web resources!

If you would like to see the rest of my feeds, feel free to download the .opml file

These are the feeds that I frequently follow, what are some that you recommend?