Best Web Practices

RCM desktop Wallpaper

2009-01-12T06:29:00.001-08:00

1920x1200

1600x1200

Kinetic IG Wallpaper #2

2008-12-02T12:24:00.000-08:00

For those of you looking for a cleaner look, give this one a shot.

CSS/HTML Templates, are they worth anything?

2008-12-02T11:30:00.000-08:00

The bottom line is that anytime something is given away for free, or next to nothing, it's very likely to have no dollar value or be something that has become expected to be free of charge. But, does a lack of dollar value mean there is no real value? I would argue, no.

There are a growing number of free css/html template sites sprouting up around the web, ranging in quality from exteremely poor, to how can that possibly be free. Most of the time, from what I've found, a website template is free when it is 1 page and has no unique ownership. Templates will sell for anywhere from a few dollars, to a flat monthly charge for access to thousands of templates, to hundreds or more dollars for unique ownership of a multipage site. The problem is that even with unique ownership, the design is still not unique. It was based on company "ABC" and no company is company "ABC." Every company/business has it's own unique voice, message, content and audience.

So what value, if any, can we say a template has to offer? As a designer, I think templates are an OK judge of current design trends and stand as a simple base of what organization and simple content heirarchy could look like. Basically, if I designed a site with a specific purpose for a specific company and it wasn't even as good as template site for "ABC" company, I would know something was wrong! In such a horrible, horrible rut, (if such a thing exists..) a QUICK browse through a template site may spark an idea, whether it be for a header or footer design, navigation design & CSS techniques, or simple content organization. And the key to a free template, is that you can download it, pick it apart, and see exactly what choices the front-end developers made when building the template, then decide whether or not that was the best choice. The advantage here, compared to picking apart say.. apple.com, is that a template is barebones and thus far easier to disect.

It's sort of like stock photography sites, like istockphoto.com and gettyimages.com. They are useful for sure, but they're generic. They're also useful for photographers to see what style of images are getting users attention and which styles have become a thing of the past. But keep in mind that most "stock" anything is already on the verge of becoming outdated.

Doing a google search for "website templates" turns up over 5 million hits. Check with the guys at Smashing Magazine and go from there..

So here's the list of template sites I've come across:
1. http://www.smashingmagazine.com/ - free templates**
2. http://www.templateworld.com/ - free templates
3. http://www.templatemonster.com/ - example of more expensive templates
4. http://www.templates.com/
5. http://www.top1000templates.com/
6. http://www.templatesweb.com

edit: this is the one I couldn't remember!
http://themeforest.net/

and many many more..

Kinetic IG Wallpaper

2008-11-28T17:09:00.000-08:00

I decided to do an "in-house promotion" piece, in the form of a desktop background for the company at work at and love. The company is Kinetic IG at RCM Technologies. We like to think of ourselves as "... a collective of technologists and designers focused on creating intuitive and engaging work that transcends websites, applications and devices." Click on the image to view the full size and use it as your desktop background. Maybe an iphone version is next?

Google Analytics

2008-11-24T07:43:00.000-08:00

First off, I'm impressed. When it comes to site statistics, Google Analytics goes miles beyond the competition in terms of quality, thoroughness, precision, value of stats, not to mention it's FREE. Before Google Analytics, I used the free stats provided by godaddy.com, whom all of my sites are registered through. Although I've never had any real reason to worry about stats on my sites, it's always good to know. Now that I've jumped into Google Analytics, I see the value of site statistics and how it relates to web DESIGN, not just development. Their click counter, a statistics page that counts and displays the number of times a user clicks on each link on your site, is extremely useful information when it comes to design. If a designer creates a fancy looking button but nobody clicks on it because they weren't aware it was a button, the designer better reconsider the design. Design needs to aid in the simplicity of the user's experience, not make it more complicated or confusing.

As you can see, from the screen shot above, on November 17 so-ridiculous.com received 103 visits. At first, I thought this was a mistake! haha But, after chatting with a friend, I found out he had added the site into StumbleUpon.com, which generated 73 visits in a single day. As the site has no real content yet, I can't really expect a lot of return visitors, so the stats show the immediate drop in visitors after the launch day.

The browser and operating system information is also extremely valuable. Until the world wises up and goes 100% mac (yea! someday maybe...) I will be forced to test sites in multiple browsers and operating systems. From the stats gathered for so-ridiculous.com, I can see that my #1 user is on Windows using Firefox. I also see that there will always be other users out there to account for, such as Internet Explorer, Safari, Linux and even iPhone.

So-Ridiculous!

2008-11-17T12:31:00.000-08:00

My "test" website is coming along great. For those of you not following along, I am referring to a site I'm creating that relates to a tutorial I found on NetTuts.com. You can check out it's current state at www.so-ridiculous.com I did run into some issues with the Twitter feed. It seems to work fine in IE 6, but not so well in IE 7 and Firefox. There also seems to be quite a few hours delay, which may be the reason Firefox and IE 7 are not handling the Javascript well. I successfully implemented Google Analytics as well as CushyCMS. Despite there being only one text field, it is still in fact editable through Cushy CMS (see below).

Overall, this test site has been a success. I refreshed my CSS/HTML skills, learned how simple it is to add Google Analytics, as well as the simplicities of making the content editable through Cushy CMS.

Forced Miniature Photos

2008-11-14T08:29:00.000-08:00

I have seen this effect around lately and really had to know how they were doing it. So of course I went tutorial hunting and this is what I found. The tutorial is short and sweet, but could use some comparison to the actually tilt shift photography , which the effect comes from. Well I didn't have great luck coming up with sample photos, but if you hit google searching images for "aerial" or "aerial city," for example, you'll come up with something. Above & below are my results, check 'em out then hit Photoshop and give it a try.

Time to live up to the "Front-End Developer" on my business card ...

2008-11-13T12:19:00.000-08:00

I've noticed I have been focusing a lot on design lately and forgetting about my good friend front-end development. Luckily, I came across a super tutorial on building a site featuring Cushy CMS and a Twitter feed on NetTuts. The tutorial also covers great techniques for producing the CSS and HTML. It seems to be a very informative tutorial that will take a while to follow, but the end result will be well worth it given the learning experience. I registered a domain a while back just for the heck of it at www.so-ridiculous.com. I'm not sure what my initial thought was on that, but it's been sitting stagnant for quite some time now. So, it'll serve as the location for this tutorial based site. I plan to have something up early next week, so check back!

I'm not saying this design will be what I go with.. but for now, it was my first thought and will fit fine for a teaser image.

The Skies Revolt

2008-11-12T11:19:00.001-08:00

In a galaxy far far away, I was the guitarist turned drummer for The Skies Revolt, a local Grand Rapids band. A truly gifted designer and best friend of mine, Dan Tobolic, designed them a sick cd cover. I came across a great tutorial on light effects and perspective and jumped on the opportunity to use his cd cover design.

Political Button

2008-11-12T08:49:00.000-08:00

This is a super useful tutorial. The idea here is to create the button look and feel by using only one layer with styles applied to it. This Photoshop skill can easily be transferred to tons of uses in web design. After all, what's a web page without some buttons?

Wordle!

2008-11-12T07:53:00.000-08:00

This is awesome! If you're a designer, you understand the value of filler text. Everyone knows about Lorem Ipsum, and some of you may even know about this, but it's still worth sharing. The site is called wordle. What you do is, hop over to lipsum.com and grab some text. Then, go to wordle.net, click create, and paste it into the text field. Once you have text, you can manipulate language, font, layout & color to create your own personalized random text. Make sure you read the terms of use, which most importantly state "You may not use the text or design of the Wordle web site itself in any commercial enterprise, nor may you create a derivative work." Basically, you can use personally or to aid in the design process of a commercial piece, just make sure it doesn't end up in the final design. Just think of it as Lorem Ipsum and you'll never have a problem. Happy wordle-ing!

Photoshop Brushes 2

2008-11-11T06:44:00.000-08:00

I know I just posted about Photoshop brushes, but Smashing Magazine must have been thinking what I was thinking, and I think it's worth linking to their post "50 Must-Have Photoshop Brushes." They put together truly smashing cocktail of delicious brushes, so be sure to check them out. I especially liked the spray paint brushes and hand drawn elements brushes. And don't forget, if you can't find a brush you're looking for, it's not that hard to create your own!

3-D in Photoshop

2008-11-11T06:23:00.000-08:00

Ok, so it's not really 3-D, but it's the next best thing. I came across this really well written tutorial from psdtuts.com a little over a month ago but didn't try it out for myself. So yesterday I dove head first into it, and like I said, it's well written and easy to follow. The above image is the result but I also wanted to take a little time to create my own personalized version, which you can see below. Click either image to view it larger.

You might be thinking, if you came across this great tutorial a month ago, why did you wait 'til now to do it? Well, the tutorial didn't really apply directly to anything I was currently involved in so I let it slip by. But, after recently being asked to design an icon to be used on Blackberry, I had an excuse to tackle "3-D modeling" in Photoshop. Three dimensional icons are definitely all the rage right now. Many platforms offer scalable icons, so starting a little over sized is not a bad idea; just make sure the icon looks good when it's scaled down to the default size for the platform it will be used on (in my case it's 28x28 pixels).

Photoshop Brushes

2008-11-06T07:26:00.000-08:00

Photoshop is no doubt the most powerful design application ever created, and one of its many powerful features is the Brush Tool.
I think it's safe to say, I use the Brush Tool every time I open Photoshop. The problem with the Brush Tool, is that the "out of the box" variety of brushes are not only boring, but also easily spotted and overused.

Here's how to create your own brushes (CS3). It's simple!
1. File>New - Create a new document in Photoshop. (note that if you want a high-res brush, create a high-res document 300 dpi+)
2. File>Place - to place a brush resource image in the document. Choose an image containing the graphic or texture you would like to make into a brush.
3. Now select the are that will become the brush by using the Lasso or Marqee Tools. You could also Erase the are of the image you are not using and Command+Click the layer's icon in the Layer Pallette to select the pixels on that layer.
4. Edit>Define Brush Preset... - Give the brush a name, click ok and it will be immediately available in your Brush's Pallette or Brush Tool drop-down. You can also save brushes for later use or sharing with other Photoshop users.

Which brings me to the real reason for this post, Brusheezy! This site is by far the best brush resource site on the web. There's tons of great brushes available, totally free to use on anything and everything you please. You can also submit your own brushes for other people to use if you feel so inclined.

Also, check out the great pattern section on Brusheezy. Patterns are especially useful for website background images and even texture overlays. You can create your own patterns in Photoshop much like the brush creation process, except you must use the Rectangle Marqee Tool and select Edit>Definte Pattern...

Thousands of Quality FREE Stock Images

2008-10-31T11:32:00.000-07:00

Happy Halloween!
I was searching the web for some free stock images to use in my never ending quest to conquer Photoshop and I came across a great resource. The site, stock.xchng claims to be "the leading free stock photography site," and I believe it. They're an off-shoot of STOCKXPERT, a site that charges anywhere from $1-$10, depending on the size of the image. There's truly an expansive variety of images for free. Be sure to check out the fine print on the image download page, which states "standard restrictions apply," which basically says "The work You create with the Image must be used either by yourself or by your client. You warrant that You do your best to prevent third parties from duplicating the Image." You will need to join stock.xchng and create a login, but don't worry there's no membership fee.

Retro & Vintage

2008-10-30T12:39:00.000-07:00

I love retro/vintage/grungy stuff. There's something about worn out images and retro styling that gives modern design a more approachable and alive feel. The kind of stuff that makes you almost reach out and touch your screen in hopes of actually feeling that roughed up texture or smudged background. Smashing Magazine does it again and pulls together a fantastic collection of retro & vintage sites. A few of my favorites http://www.macsbeer.com/ , http://bigcartel.com/, http://blog.iso50.com/ , http://www.level2d.com/ , http://www.thelippincott.net/ , http://thefirsttwenty.com/

I have to admit. A Lot of times, sites that try to utilize retro or vintage styling can be a little overkill. The key, just like any design element, especially a trendy one, is to use it sparingly. I think http://thefirsttwenty.com/ really does a great job keeping content organized and simple in a way that keeps up with current design trends.

If you're looking for some pointers on how to accomplish some of these techniques, hit this link for some great Photoshop tutorials. There's a little something for everyone. I'm really into the color bars right now for some reason, especially with a more modern approach.

40+ Free Fonts for Professional Use

2008-10-30T11:40:00.000-07:00

First off, here's the link coming from Smashing Magazine. Just because a font is free and recommended by a well trusted source, Smashing Magazine, doesn't mean it's the best thing to hit your mac since 1984. Pick and choose fonts like you do ice cream flavors. Sure tons of flavors are delicious, but only a few really tantalize your taste buds, and even fewer are the industry standards, chocolate... and vanilla.

PostScript, TrueType, OpenType

2008-10-30T10:20:00.000-07:00

It's a fairly simple question, but it can still confuse a lot of designers out there. I found this link that explains the differences. They suggest that most people should choose TrueType fonts because they are the easiest to install and use, and have the most operating and program support. I would suggest going for the OpenType font whenever available, then falling back to the TrueType if OpenType is not available. OpenType fonts are the latest and greatest in the font world from the brains of Microsoft and Adobe. This newer font type supports multiple platforms, contains the screen font and printer font in one file and, most importantly, has the ability to contain up to 65,000 characters, making it an extremely versatile choice.

Now that we know what types of fonts we should look for and collect, how do we keep it all organized and accessable? A few years ago I started using Linotype FontExplorer. I love it. If you love iTunes, you'll love this piece of software, as it looks eirily similar. It allows you to install your fonts, turn them on and off with a single click, create sets of fonts for different uses or styles, preview and compare multiple fonts. I suggest making at least a set of your favorite fonts. Oh, and did I mention it's free?

28 Ways To Be a Better Designer

2008-10-29T11:53:00.000-07:00

5. Know your style.
Some people like to create a different style all the time, some like to stick with the tried and tested. A signature style helps a lot in attracting new clientele. Make sure you know your ground and evolve from there. - source

How true. Every designer needs to develop their own style. Whether it's clean and minimal, or corporate, or playful, or whatever. It just needs to be your own. Follow this link to read some intelligent words from working professionals.

I'm still working on fine tuning my own style, but I believe every designer is. It's what makes us designers. Constantly evolving. Constantly striving to be better, while always realizing we CAN be better.

em or px? what's up?

2008-10-29T08:40:00.000-07:00

On a recent KineticIG project, the team got to tackle a font increase button as a user enhancement feature to a already existing site.

To produce a "font-increase button" we would be using a style switcher technique in javascript. The idea is that you produce multiple style sheets for the same divs and classes, then when you click a button to increase the font, the style switcher swaps in the style sheet which has larger font values for the divs and classes. The problem is, if all the font-size attributes had been given em values instead of pixels, then they would have been able to "grow" when given a larger pixel definition to their parent. Since they were in fact pixels, every font-size attribute needed to be addressed directly and given new values for each style sheet.

So, what's the difference?

An em is a unit of measurement in the field of typography, equal to the point size of the current font. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size.^[1] So, 1 em in a 16 point typeface is 16 points. - Wikipedia

In digital imaging, a pixel (picture element^[1]) is the smallest piece of information in an image. - Wikipedia

Given these definitions, a font given a pixel value will have an exact size, and a font given an em value will have a relative size. The relative size of a font given an em value will be based off the closest parent. If no parent has a pixel definition, the value will be based off the browser default.

Let's take a look at an example.

The css/html above produces:

In the above example, a div named "hello" is given a pixel value of 18px. Inside this div are two classes ("hello" is their parent) given the values of smaller (.8em) and bigger (2em). In this situation, the smaller text would be 14.4px (80%) and the bigger class would be 36px (200%). If the value for "hello" had been 100px, the em values for smaller and bigger would give them a size of 80px and 200px respectively.

Nowadays ems are becoming more and more unnecessary and a bit outdated as a font-size value. Browsers used to increase and decrease the font size when the users pressed the plus or minus key while holding the command or ctrl key. Now, modern browsers have adapted a new reaction to this key command; they zoom, making a relative font-size value irrelevant.

Web Design Trends and Cliches

2008-10-29T07:48:00.001-07:00

Wow. This is exactly what I'm talking about. The web is packed with ever changing trends, and this link nails 6 of them right on the head. Although posted December of '07, I think it's still relevant. I'll be taking a look at current trends in an upcoming post.

As long as I'm talking about fonts.

2008-10-29T07:43:00.001-07:00

Check out this url for popular trends in web 2.0 fonts in branding. I have always been a big fan of DIN since being introduced to it by a great friend and inspiration.

Fonts on the web, what's the deal?

2008-10-29T07:15:00.000-07:00

First off, if you are not aware, you cannot use whatever font you so choose to use on the web, unless you plan on using it as an image or using sIFR. Second, the few fonts available for web-safe use look quite a bit different depending on which browser and operating system you are on. How or where do you begin to control what the user sees? The answer, you can really only control a portion of what the end user sees.

The simple chart below shows some of the visual differences which can be expected between windows and mac operating systems and also functions as a guide to web-safe fonts. Some would argue this list to be a bit exaggerated for what are truly web-safe fonts. Whatever font you choose, you must always note a second choice. (Example: font-family: Arial, Helvetica, sans-serif;)

My personal favorite fonts on the web: Verdana, Lucida Grande, Georgia, and Trebuchet MS.

Why install an XP Virtual Machine on your Mac?

2008-10-29T06:31:00.000-07:00

I have the privilege of using a fancy pants 17" mac book pro, so, as a designer using adobe CS3 strictly on the mac, why would I want (or need) to use VMware to virtualize any other operating system, when we all know, that Mac OS X is far superior to anything out there? Well, the short answer is IE6. The long answer is something along the lines of, either own a PC to keep XP's filthy hands off your Intel powered mac, or you can sell your soul and install a Virtual Machine.

The bottom line is that since the release of Windows XP in 2001, it has unfortunately been the choice of the majority of the American public. And with Microsoft planning to offer XP through 2010 (2 more years!), the problems plaguing IE6 will continue to be an issue to consider when developing & designing any site. The easiest way to deal with these issues is to experience them first-hand. So, I set up a bare bones install of XP, which I only use for IE6 testing. Sure there are other ways to see what IE6 is doing to your site, but none as simple, straight forward, efficient and accurate as this. I'd recommend a Virtual Machine install of XP to any designer willing to see Windows on their Mac.

VMware Disk Size Increase

2008-10-28T13:44:00.000-07:00

Running a Vista Virtual Machine on a Mac and want to re size the drive? It's a lot easier than you might think. After hours and hours of searching for information on how to do this, I finally came across the answer and had the privilege of sharing it with my closest teammates. Now I would like to share it with you.

1. Visit this website and download the little app called "vdiskmanager GUI."
2. Run this app on the mac, browse to your virtual machine file.
3. Enter in the new size you would like the drive to be under the "expand" tab. Select "Go".

After this processes, you now have a larger drive if you view the drive settings in VMware. But, if you're inside your virtual machine and view the drive size, it remains the same. What gives? You have to expand the drive. This is simple.

4. From inside your Vista virtual machine, go to your Control Panel.
5. Select "System and Maintenance" scroll down to "Administrative Tools" and select "Create and format hard disk partitions." This will bring up a Disk Management dialog, You should see your (C:) drive separated into 2 sections, blue and black. The black portion is labeled "Unallocated" and is the new space we created in step 3.
7. Right click on the Blue section and select "Extend Volume" which will bring up a help wizard for the process. Continue through the few steps in the wizard but clicking next and you're DONE. Congrats.

Photoshop Tutorial: water drops

2008-10-28T13:37:00.000-07:00

I've seen photoshopped water drops around a lot lately. Whether on the side of a sweating ice cold glass of beer or a window on a faked rainy day, or in this case a leaf. There's a few different tutorials out there, but I liked the approch of abduzeedo.

Photoshop Tutorial: Glowing lines

2008-10-28T13:35:00.000-07:00

Here's a great effect I have been seeing more and more and more AND MORE on websites, commercials and print advertisement. Light effects and glowing lines are becoming an ever popular way to catch the attention of consumers. I enjoyed the approach of PSDTUTS.

Photoshop Tutorial: 3-D Blocks

2008-10-28T12:26:00.000-07:00

I find a great way to stay on top of your game is to follow a quick tutorial. Just reading about certain photoshop and design techniques will only get you so far. Sometimes you just need to put your head down and follow an expert's tip from start to finish.

The other day I came across this tutorial and it really caught my eye. They were doing something I hadn't seen before. To see for yourself, click here.

Here's the result I came up with (click to enlarge)

Be Current, Be Inspired, Be Informed.

2008-10-28T11:24:00.000-07:00

With so many great resources, where do you start? Easy.. www.smashingmagazine.com of course. This site is packed full of useful information & resources. Updated daily, the content is always fresh, which gives you a reason to check in every day if you'd like. Be sure to dive into the links across the top. Many of my upcoming entries will reference information gathered from this site.

Other general sites worth visiting (no particular order):

1. http://www.faveup.com/ - inspiration
2. http://www.tutzor.com/ - photoshop tutorials
3. https://www.google.com/adsense/static/en_US/AdFormats.html - standard banner sizes
4. http://logopond.com/ - inspiration for business identity
5. http://www.youthedesigner.com/ - tips from professionals and inspiration
6. http://www.cushycms.com/ - free and easy cms
7. http://designcharts.com/ - inspiration
8. http://www.thefwa.com/ - inspiration
9. http://www.websitegrader.com/ - how SEO friendly is your site?
10. http://designfeedr.com/ - inspiration
11. http://riddle.pl/emcalc - pixels to em calculator
12. http://psdtuts.com/ - fantastic photoshop tutorials
13. http://pshero.com/ - photoshop tutorials
14. http://www.linotype.com/fontexplorerX - font management
15. http://abduzeedo.com/ - design inspiration and tutorials
16. http://www.tutorial9.net - tutorials
17. http://cssremix.com/ - inspiration, example of current design trends as well as CSS techniques
18. http://www.webdesignerwall.com/ - everything.
19. http://www.veer.com/ - inspiration, downloads

Overview

2008-10-28T11:06:00.000-07:00

Over the past few weeks, I have scoured the Internet for the very best in web design and front-end development practices. A number of the links were suggestions of other working professionals in this field. The resources are abundant. There are an endless number of solutions to the same problems, be it design or development. With that said, I have hand-picked my favorite resources for useful, problem solving, information every professional designer should bookmark and reference often.