Working with a team

In the past my experience working with other designers/developers has been limited. I now work directly with programmers as well as a few graphic designers from time to time. Having like minded people to bounce ideas off of has helped me think differently about how and why I do things as I’m designing.

As a freelancer my only source of feedback was from the client and anyone in my Twitter feed who took notice of my project. Feedback is crucial in this line of work because it’s very easy to get lost in what your doing and lose sight of the big picture.

Designing with less restraints

During my first big project with the company one of my interviewers had commented that my work was looking better than what I had in my portfolio. The reason for this is that a majority of my clients were interested in web design packages that were competitively priced.  With keeping things competitive I could only produce a limited number concepts. I’m now in an environment where I am free to conceptualize my ideas.

In conclusion

Making the switch from freelancer to full time employee has been a great move for me personally. It’s shown me that on my previous career path that I could not have gotten as far on my own as I have now. I feel more challenged now than I have in the past six months and I feel this is where I need to be. If I were to have chosen full time freelancer over taking a position I think I would have had to work even harder to keep from becoming stagnant. I see how important it is for freelancers to network and take on bigger fish than they’re used to.

I’d love to hear your comments or questions, thanks.


body {
     background-color: #000;
     color: #fff;
}
 
#container {
     height: auto;
     width: 960px;
     margin: 0 auto;
}


If using Adobe Dreamweaver’s Source Formatting it will appear like the above. Now when I started getting into WordPress style sheets I found that some authors would code a little different.


body {background-color: #000; color: #fff;}
 
#container {height: auto; width: 960px; margin: 0 auto;}


This code writing style is a result of the WordPress coding environment. Since your probably at some time or another going to be modifying your style sheet through the WordPress Admin you won’t be able to use the Tab key in order to space your properties below your selectors. Even though this is a coding style that is a result of problem solving around the Tab key function, it also has some things I find attractive about it. This technique significantly reduces your lines of code. Since the code is being entered in a horizontal orientation you also benefit from heavy vertical scrolling. The first example I find much easier to scan through to find the desired selector.

The last thing I want to touch on is order of the properties. When I first start writing a style sheet I try to organize them but I sometimes end up breaking that order. I always try to keep related things together like dimensions, visual elements, sorting functions etc. In some of the books I read they recommend having multiple style sheets like one for appearances, fonts etc but I just don’t find that to be very efficient sometimes.

In conclusion I use a combination of these two methods. If a selector only has one property below it for example…

p {
     padding: 10px 5px;
}

I will sometimes make it one line like this

p {padding: 10px 5px;}

There is no confusion for me to find that property because it’s singular. Only thing I don’t like about making it one line is that it sticks out and is not consistent but I do like that it takes up less space. I am pretty particular and always striving to do things that make the most sense. Of course it’s going to work either way but I like to have a higher standard and good reason for doing anything.

I’d love to hear your thoughts on this, please leave a comment if you have something to contribute. Do you use the first or second example?

The site is built on a WordPress install and I modified a free theme called ComicPress to my likings. Now that I’ve had a few months to see how this is going to shape out I’ve come to the conclusion that this blog style format is really not the best solution. Since these comics are not sensitive to time I can use them out of order without it making a difference. Recycling content is going to be a key factor because those unfamiliar with the site aren’t going to dig three pages back unless they’re really seeking it out.

So after finding some sources of inspiration I have created a new concept which I am hoping to improve upon some of the things I have mentioned. We (The other authors and myself) have also talked about expanding the site to include videos, store front and possibly a blog. So below you can see that we have the current design (top) and the new concept design (bottom).

Header

The old design is dark and doesn’t reproduce well between monitor settings, so in this new design I made improvements to the look and play of the navigation. The site will grow by two pages and I think this works well.

Content Area

One thing I’m not happy with in this new design is that the comics are roughly 40 pixels smaller in width. Not a huge loss but a reduction is a reduction. The content to the right of the comic is going to go through some changes as I’m not happy with it at the moment. I’ve thought about putting the comic title above everything else and running the width of the content area. I do like the new look of the highly visible social media button which will illuminate into their respective colors upon hover. The images below the main comic will be a gallery of old comics that scroll to the right.

Footer

The footer will be the new home of the twitter feed. Some other ideas could be to post a user submited #pissmeoffand tag line and possibly have the users vote on it they like it or and maybe award the winner with a prize. The new blog post section at the moment works for me and helps get the new content up front.

So in conclusion I think this new design is going perform better and improve the look of the site. If you have any comments or suggestions I would love to hear them. I also might be creating a VLog of this process because I’d really like to share more of what I am doing for others to benefit from. Thanks!

Click here for a screen shot (Opens in new tab)

Description:

WP FollowMe is a wordpress plugin that allows you to add a twitter “Follow me” badge on your wordpress blog.

What is nice?

This plugin is very easy to install. Setup is as simple as going to the plugins setting and entering the path to your Twitter URL. You have a decent amount of icons to chose from though at this moment it doesn’t appear you can use your own. Changing the color is simple by using Hexadecimal code under settings. Your also give the option of size and position on the page.

What is NOT so nice?

I don’t agree that what you have in the end is a “badge” on your page. It’s much more a tab that is fixed to the side of the browser. A rollover effect would help to give it more user feedback. Seeing that it already uses CSS, a rollover effect would be utilized quite easily.

In conclusion

Because this plugin is so easy to install and setup I would suggest it to anyone with limited CSS knowledge looking to achieve this look. This author is a young freelance designer and I think this plugin will get better as they continue to develop. I installed this plugin hoping it would allow you to display your followers as well.

My Rating: 2.5/5

Plugin Homepage: http://wpburn.com/wordpress-plugins/wp-followme-plugin

Now you can see “Jen” has a nice personal image of herself that is associated with the email she used to leave a comment with. A well chosen image will add a bit of depth to a comment and give you more of a human element. Below is my comment I left for Jen, see the difference? My comment looks cold and generic, like the persona you would associate with spam or some other faceless brand. Below I will show you how to fix this by updating your “Gravatar”.

What the heck is a Gravatar?

Good question, I found myself asking the same thing. If you use online forums or certain social media sites then you may already be familiar with an Avatar. An Avatar is an image that you (most times) are allowed to chose that is associated with your account. If you use multiple login accounts for Windows XP or Leopard then you might be familiar with these and not even know it. What makes a Gravatar special is that it allows you to associate an email address with an image that is globally recognized. So no matter whose blogging website you are commenting on you will see the image you setup at Gravatar.com

Steps to fix your “gray man” blues

1. Go to Gravatar.com in your browser
2. Sign up/Login (If your not already a WordPress user)
3. Click “Get your Gravatar today”
4. Use “Select an email address (below) to modify or add a new email”
5. Upload your image

Now no matter whose website you leave a comment with, your image you uploaded will appear next to your comment (Assuming the blog has comment images enabled).

Decided today to look up my blood type out of curiosity and came across the American Red Cross website and while nosing around I noticed that they had a height requirement for donating blood. I thought this was pretty silly until I did a little research.

I found it even more comical that they would take blood donation from a taller female. Could you imagine being a 5′ tall man doing a noble thing like donating blood and being denied? Or better yet being asked to step aside while they take a donation from the 5’5″ female behind you.

and the reason for this is…

In 2009 a new set of precautions were taken to protect young donors who have a blood volume of less than 3500 mL. These donors can have adverse reactions like fainting or bruising. Even if you have a history of donating blood and do not meet these new requirements you will not be allowed to participate until you meet these requirements.

I won’t be having this problem but if you are serious about donating blood and don’t take “No” for an answer may I suggest finding one of these?

Source Material: East Carolina University’s Volunteer Blood Donation (PDF)

It’s very odd the way a number of these high profile political types handle themselves when confronted face-to-face. It’s very uncommon for these types to give any satisfaction by defending themselves or taking charge of the situation. When your surrounded by “handlers” you simply don’t have to acknowledge confrontational opposition. If I were Al Gore in this situation (time permitting of course) I would have taken charge and requested that these obviously concerned citizens stay and wait till people are done with the meet and greet. Handling a situation in that matter would show the other guests that you are not afraid to stand up for what you believe in. To ignore opposition is cowardice and to throw someone out for calling you out on something is anti-American in my opinion.

How would you have handled this situation? Leave me a comment below…

Band: Crossbreed
Album: KE 101
Release Date: 9.15.09

I was super excited when I found out Crossbreed was releasing a new album. I first heard Crossbreed when I was in High school and immediately became a fan. I remember cranking their album “Synthetic Division” in my 90′ Cutlass Supreme. Good times, definitely a band I have always want to see live. I heard a few of the new tracks and right now “TBnot” and “Kill Everything” are my favorite tracks on the new album “KE 101″. The full album is to be released on 9.15.09 and if you pre-order their album now you get a free t-shirt which has a cool design on it for $13.99. I really hope they do well with this album, so if you like what you hear on this player I would suggest taking advantage of the pre-order and getting the free shirt.

Quality vs Quantity

Hands down Apple makes a better designed computer, components and operating system. I remember how impressed I was when I first got “my” 24″ iMac at work. Just by the way they package their products you get a feeling that they put some thought into it. Nice small manual, terry cloth for the screen and really a modest amount of packaging materials. PCs come in a variety of different levels of craftsmanship and materials. For instance I use a Dell Desktop at home and while it’s not an ugly system it definitely doesn’t scream quality like I feel with the Mac. PC cases are made by every Tom, Dick and Harry out there and in most cases it’s “Cheaper the Better” materials mixed with a modest design. These same “Tom, Dick and Harries” are also pumping out plenty of low quality drives, boards and cards. I’ve had pretty good luck with these “low quality” parts in the past with only a couple failed hard drives and cards. Wait-what? Who cares what it looks like, you say? I see you rolling your eyes. Not everyone cares! But being a person of detail I take notice of these things, just as when you buy a car some people like to look at the engine and other components so it’s no different. Now lets go inside of a Mac and a PC. Since I referenced an iMac earlier let’s take a look at the inside of one.

That! Is a very nicely designed system. I have been inside many PCs cases and never have I seen such a well designed inside. Apple unlike most PC carriers does not neglect the inside of the case assuming that most users will not ever be opening their cases.

This is a tower from a dell and to me it looks very similar to mine… spaghetti. Now maybe it’s “wrong” of me to compare an All-In-One system like the iMac and compared it to a tower. So here we go…

Same nice injection molded parts, branding and cleanliness. I rest my “case” bwahahaha.

What changed me?

I like many people my age grew up using a Windows PC in schools, libraries and eventually in my own home since I was 11 years old. It was all I knew existed and had a pretty good relationship with the components and software besides from all the normal frustrations that we learned to write off as the nature of computers or what ever you call it. Macs were pretty taboo to me, I didn’t take anyone serious who used them. I again like many others were given the impression that Macs were for video production and artists. Almost like an idiot savant of the computer world. In college we have two rooms out of maybe a dozen that had Macs in them. Sometimes when the PC labs were full I would be forced to use these very foreign computers. I was so stuck in my ways (normal for those who know me) that I never gave it the chance it deserved and would get frustrated and leave.

This “frustration” was really my years and years of conditioning to PCs. I got my first real opportunity to learn a Mac when I started my job with Bunting Graphics. Their marketing guy was well educated about Apple and when I started working with him he set me up on his old G4. I remember the first few weeks I would get so frustrated at how I couldn’t figure out how to shut it down on my own or how to use finder to find network drives or how to close a program and have it not just minimize into itself. After a few weeks I realized that I was simply over thinking everything.

Now after a year I have used Tiger, Leopard and now Snow Leopard and I absolutely LOVE this operating system. When I turn that machine on from a cold boot I am up and running in less than 30 seconds. Maybe my favorite thing about this OS is the consistency and stability of how it runs, I get the same performance out of this machine every day I use it. Out of any computer I have ever used I have to say that I have never had such a love for a computer system like I do “my” iMac.

In Summary

I am pretty sure it’s going to take another post to cover the rest of why I think Macs are better than PCs. I have barely skimmed the surface. Earlier today on Twitter I wrote something that basically sums up this Mac Vs. PC feud.

“Mac is to Corvette as PC is to Camaro”

Being a car guy I have heard many guys say “Why would I pay X amount of dollars for a Corvette when I could buy a Camaro and put X amount of dollars into it and have the same thing” and just like in that situation you will never get a Camaro to out perform a Corvette (of similair years) without heavy modification. There will always be those “Camaro” PC guys out there with their proverbial mullets thinking they’re better than a Corvette. Right now I have a PC at home only because when I made the investment I wasn’t into Macs at the time. When the time rolls around for me to drop this system you can bet that I am going to spend the money on a Mac.

Also I’d like to note this… people who go around bad mouthing Macs because of their price are dumb because they aren’t seeing the big picture. PCs are less expensive because their components are made by many manufacturers (Samsung, Western Digital, Hitachi etc) therefore creating a competitive market for pricing whereas Apple chooses to control the quality by being the only manufacturer. I’d rather pay extra for quality than spend my time researching to see if X companies ram is going to burn up in week or if X companies hard drive is going to take a dump in a couple months because of poor design or craftsmanship. “I’m a Graphic Designer and I’m a PC” …. spare me, PLEASE lol

• Image Editing Software (ie: Adobe Photoshop)
• An average understanding your editing software
• Notepad or other code editing software

I believe this is the best way to create any type of image rollover. Other ways are to use JavaScript but I find this unnecessary because the CSS way is very straight forward and easy to do. A example of this would be my “Portfolio” button I have on the front of my website. You’ll see when you roll your mouse over the button (On the main page) changes from a shade of green to a shade of blue.

Now let’s open your image editing software. I prefer to use Adobe Photoshop because it is the most common editing software available. For this tutorial I am going to be using a button I made when I designed this website.

This image is 222 pixels wide and 57 pixels in height. With the image opened in you edit software we’re going to change the “Canvas Size”. You can find “Canvas Size” in Photoshop under “Image” in the overhead menu.

Now the way I’ve learned to do a proper CSS Image Rollover is to use 1 image for both actions (normal position and hover position). This makes the loading of the images smoother and requires 1 less image. Let’s double the height of the “Canvas” and make it 114 pixels (Original height of 57 pixels X2). Note: Make sure you select the top center box for “Anchor:” so that we are adding the extra 57 pixels of canvas BELOW our existing image.

Make sure this image above looks like what your looking at. Next under “File” in the above menu you want to select “Place” and select the same image you’ve started with but place it underneath using snaps to ensure that it is exactly under neath.

From this point we need to alter the bottom image so that it differs from the image above. I’ve chosen to just make my button green using my original files. You can use some form of “Blending Options” to achieve a different look.

Save your file and put away your image editing software. Now open the page you want to add your button to in your favorite code writing software (ie: Notepad, Coda, Dreamweaver etc). Now lets go to your style sheet or inline styling section and add the few lines of code we need to make this work.

Ok, I’m calling this “.button_folio”, name it whatever you want just remember it so when you write your code you don’t confuse yourself. The height and width are what we want to be visible and since we are telling this to display as a block we wont see anything below 57px of the height. With the background we will be linking to our single image that we created earlier. Note that in background we have “0 -57″ this very important because we’re telling the browser to start this background 57 pixels below what it normally would.

.button_folio {
width:222px;
height:57px;
display:block;
background:url(images/button_folio.gif) 0 -57px no-repeat;
}

This is the final CSS that will tell the browser to move the background position to “0 0″ (which is 57 pixels higher) when you “hover” your mouse over it.

.button_folio:hover {
background-position:0 0;
}

Now to use this new “Class” on your page. Since this is a button and we’re using it to link to a page it only make sense to use this class on a link. Just add the code below to a link before “href” or after the URL.

class="button_folio"

Pow there you go! We made two new classes in a style sheet and called it out on the page. I believe this to be the best way to do this. I’m sure if you are a “text replacement nut” you can add text within the link instead of leaving nothing in between the tag and use a span to indent the text off the screen but I don’t really understand catering to people who don’t use style sheets.

I hope I did a good job of explaining this, this is my first tutorial on here so any feedback would appreciated.