Do you use a grid for your web designs? Do you use the 960 Grid System? Well if you do, I have provided a set of Photoshop actions for you to download.

These actions will create a Photoshop document ideal for laying websites out in 12, 10, 8, 6 and 4 columns.

Key Features of the Actions:

• Creates a new Photoshop document from scratch.
• Creates guides to determine grid columns and gutters with transparent layer to show gutter space
• Creates Layer Groups for Header, Content, Footer and Backgrounds making it easier to lay your sites out in a orderly manner.
• Compatible with Photoshop CS3 and higher
• Works on Mac and PC

To install simply download the file below, then unzip and place the “j9s-960-columns.atn” into your Photoshop Actions folder. Open up Photoshop and navigate to your actions palette, select “Load Actions” from the palette options and enjoy.

Download 960 Grid Actions

As a designer of interfaces I have to create wireframes in order to get a good idea of how all the elements of an app or website will fit into a defined pixel space. As I repetitively use the same elements like scroll bars, lists, buttons, tables, tabs, etc. it was natural that I would create Illustrator symbols to drag and drop into my wireframes. Over the past few projects I have tried my best to compile a decent library of elements that any designer, or user interface designer can use in their wireframes.

This download contains the symbol library and a full Adobe Illustrator file with all of the elements spread out on the art board. To install this library just drag and drop the file named “Wireframe Symbols.ai” into your Adobe Illustrator Symbols directory. Once you are in Illustrator go to your Symbols Palette and load the library.

This file is compatible on both Mac and PC. If you know others that would benefit from this file by all means send it along to them. I hope you enjoy the file and happy designing!

Download the File Here

Tomorrow I will wrap up my Web Design I class, and this article from PSDTuts is such a great example for my students as they continue their studies in design and coding. The article focuses on the many faces of a decent web design template, exploring the diversity of a well prepared layout. It shows how one simple, clean structure of information can be used in an abundance of designs. It is a must read for any budding web designer and the detail the author places on his topic are second to none. Check it out here.

I have no excuses. I should be incorporating blog posts in my week just like I incorporate Tweeting. So I am going to give it a real effort. There have been a lot of resources and other things going on that I want to share with the community and my students.

The abundance of requests for Wallpaper Wednesday’s return has sparked this desire to post more. There has also been a lot of progress on the projects being worked on through IndyHall Labs and it is about time we got some more word out there to the masses.

I am really hoping I can get at least a post here a week in Wallpaper Wednesday. So keep hounding me folks. I hear the squeaky wheel and I am trying to fix it.

http://cameronmoll.com/portfolio/

http://www.fullyillustrated.com/

http://www.mindnever.com/

http://emotionslive.co.uk/

http://www.karaburke.net/prints.php

Enjoy!

You can download the Syllabus here.

This has been a long time coming and as a designer I must say, the hardest design to do, is for yourself. Although I am sure I will get compliments on the new look and feel, I believe I will never be happy with what it all looks like. I am a perfectionist, what can I say?

The site has taken a similar look to the former jbiljr.com site that is now defunct. Johnny Nines is now the place to find my personal blog and designs on the web. i am following up the launch of this site with the launch of JohnnyBackgrounds, which will be coming by end of next week. JohnnyBackgrounds will be the new home of Wallpaper Wednesday and other tasty goodies I have whipped up.

There are a ton of bugs to iron out on JohnnyNines.com but the list is getting shorter. With all the work that has been coming in it gets increasingly difficult to maintain your own web presence. I am sure there are some questions as to the name of the site so here is an explanation:

First, the former jbiljr.com was just a hard domain to remember. It did not quite roll of the tongue, if you know what I mean. It was a Geoff DiMasi that expressed the concern that JBILJR was just not a good moniker and I was in total agreement. With that advice in hand I went in the search of a new name.

So why JohnnyNines?

Well the truth is the number nine plays a bit of a roll in my life. My football (soccer) number has been 9 since high-school except for the short stint that I played with Mantua United. Also I am a craps player, and the “Nina” or 9 is a bet I use dominantly in my system. The name JohnnyNines also is a good tag for that devious looking logo I have created for myself. He looks like he belongs in a casino lounge, sipping a Makers Mark Manhattan, too cool to worry about the small stuff in life. The character also represents the Cheshire Cat persona that I walk around with. It is rare to see me with out a smile or giggling out loud as I humor myself with my reality. With all this in consideration, JohnnyNines was born.

I hope you all enjoy the new site and some of the new work that I have put up here. There is still a lot to do so you should be seeing much more here in the weeks to come.

To achieve this, web designers must be able to at least understand the ins and outs of CSS/XHTML and understand the basics of most web development languages like PHP and Ruby. The days of passing off a sliced up Photoshop file are far behind, we now need to consider typography, information structure and usability in web design. These items cannot be addressed with just a pretty Photoshop file; they must be addressed within the code, as we work side by side with a developer.

Understanding the language and methodology of our developer friends augments our ability to assist them in delivering a more usable, more beautiful web. My insistence in writing my own CSS, forces me to work closely with the developer, and get a good understanding of the site or application they are building. This becomes a winning relationship because now we are co-working, not handing off responsibility until it is the other one’s turn. It gives the developer a better premonition of the final product, allowing him to catch flaws and make adjustments to his app more efficiently than before. In return the designer gains a familiarity with the overall workings of a site, and how it performs the requests of the users, therefore allowing us to compensate for confusing design, and poor user experience. It just works better this way.

Those looking to make the leap between print and web design can find nothing but advantage in learning how to code CSS / XHTML. Resources are abundant and in most cases you can be designing CSS based sites in one night. Like everything, practice will help you improve your coding and eventually change the way you design web sites — for the better I promise you.

On the other hand, if you have been a so-called “web” designer that turns their nose up at web code, you may want to seriously reconsider. I am not saying that every designer should run out and learn every web language they can, but it cannot hurt. CSS/XHTML should be second nature for any web designer and if you don’t know it…well…you really cannot say you are a web designer. Calling yourself a web designer and not knowing how to code CSS is as bad as calling yourself a graphic designer and only using CorelDRAW!

This post is pretty much a rant, a call to arms if you will. I am hoping to promote a better coworking relationship between designers, and developers. There is no O’Reilly book for color theory, or typography or even for layout. We need to be that for our dev colleagues, we need to direct them visually as much as they direct us functionality. This leads us all to the same goal, designing the best experience for our audience.

[tags]independents hall, coworking, CSS, XHTML, web design[/tags]

So instead of going back out and making sweet love to a few pints of Guinness, I decided to take a little stroll in the Vector Park!

The site is a creative use of various Flash animations and algorithms that create an artistic world of interaction. There are three sections of the park each with its own interactive environments, and quips. The second section kept me occupied for at least 45 minutes!

Although it seems like some of the interactions are over, there is much more to them, so do not be so quick to move on if one of them seems boring.

This one is definitely in the bookmarks and may just become one of my regular walks in the Park!

The following is a list of those resources that I cannot do with out. Hope you find it useful.

Inspiration:

DFCKR – a daily stop in my routine. This site is one of my ultimate inspiration resources. DFKR is a web publication created by design aficionado Alex Giron, who is the creative director of the DC based agency called nclude. The site itself is an aggregate of design news and info from all over the web. In addition to its extremely encompassing topics on design, it is a showcase for illustration and creative ads which would be hard to come across all by your lonesome.

PhireBrush – online design rag and showcase. Phirebrush is similar to DeviantArt in some ways, like being able to submit writings as well as artistic subjects. Submissions are driven by users mostly comprised of illustrative art, photography, music, desktop wallpapers and writings of various styles. These submissions are compiled into monthly “Issues”, with “Best Of” annuals showcasing the best submissions of the year.

LogoPond – LogoPond is a community based site driven by logo submissions contributed by its users. If you love to design logos and are looking for a great place to get some direction this is a hot spot. LogoPond also acts as a showcase for your logos where you can receive and deliver feedback on other’s submissions.

CSS Remix – this is more geared for web designers, most notable those designing with CSS/XHTML based layouts.

Resources

Adobe Studio Exchange – Ahh, the Adobe Studio Exchange. If you do not know about this resource and you are a regular Adobe CS user, shame on you! The Studio Exchange is a place to trade, upload, and download all kinds of Adobe related materials, like brushes, custom shapes, styles and patterns for Photoshop and Illustrator; templates and scripts for InDesign, as well as other plug-ins and add-ons for almost every Adobe product.

BitBox – A fantastic Photoshop/Illustrator blog, heavy on the Illustrator. Tons of free resources and techniques for all you pixel pushing addicts; including brushes, and details into Photoshop and Illustrator’s more underused, sometimes intimidating tools. Articles are informative for even the most novice of CS users.

Wikimedia Commons – Hands down one of the most underused resource for designers and artists. The Wikimedia Commons site is a vast library of various media formats. You can search the site by medium, copyright status, topics and categories. Since the site is operated by the boys over at Wikipedia, (one of many daily stops in my day!) it operates the same way. Think of it as an encyclopedia of Media, you can find such interesting stuff on here to use in your designs, blog entries, news stories, etc. There is so much just in the “public domain” Copyright Statuses, that you tend to get lost in the site for an hour or more. Kudos to the collaborative information movement, this is one of the fruits of that labor, and a must have for any creative.

Open ClipArt – This is the OpenSource communities answer to clipart. The site is not the most efficient in its display of the information, it uses a tag system which is nice but the tag cloud is a little hard to navigate. There are also limited thumbnails, once you drill down to them; and that really makes the site a bit unfriendly for the user. I am sure there are chaps out there working to improve the usability of the site, however you can find some interesting public domain and creative commons clip art on here.

OpenDesigns – I love designing a whole site from scratch, but tweaking a template can really save you on work and time. Most of the templates on the site are fantastic starting points.

Pixel 2 Life – has to be one of the most comprehensive tutorial sites on the web. You can find tutorials dealing with almost every major graphics program, and tutorials for web development as well. All of the tutorials are aggregated from other sites, but Pixel2Life acts as the front end. It incorporates an easy to use navigation system, organized by category, then software package. This should definitely be one of your bookmarks if you want to constantly brush up on your graphic skills.

Fonts

DaFont – My first stop when I am looking for great free fonts. The items on the site are categorized by type styles, or listed alphabetically. There are a ton of fonts on here for every range of graphic design, specifically the bitmap and pixel fonts.

Wanted Fonts – another good font site with easy to use navigation, however it follows in line with many free font sites, in its love of using pop-ups. Even if you have pop-ups blocked it is a bit annoying, still a lot of great fonts.

Many more, I am sure.
I realize that this list can be augmented, and would welcome anybody to leave a comment about resources they believe are just as beneficial. I hope that this list is helpful to my fellow designers, and I look forward to all of your input.