EvoBloggito

Free 4-column Grid Photoshop Templates for Better Web Design

Author: Ray Gulick; Published: May 30, 2009; Category: CSS, Design/Development; Tags: Design/Development, Download, Grid, Templates; 14 Comments

UPDATE 9/29/09: If you’re looking for a 4-column grid-based WordPress theme, take a look at Evo4 CMS.

Most of us who design custom websites start with Photoshop. I currently use base template files that assume a 1024×768 screen resolution as the lowest common denominator (according to W3Schools, as of January, 2009, only 4% of identifiable browsers were operating at a screen resolution below 1024×768).

In the last 18 months or so, I’ve gone almost completely to the use of 4-column grids. They give me as much flexibility as I know what to do with, and allow for more sophisticated layouts than 2- or 3-column grids. And when it comes to being sophisticated, I need all the help I can get.

Over time, I’ve developed some variations of the basic 4-column template, varying the column widths and outside margins. Three of the ones I use most are available below as zipped files for download. They’re licensed under Creative Commons: you’re free to utilize them however you like for your own use, and share them with attribution. I encourage you to play with the column widths and spacing to make them work for your own purposes. If you feel like it, shoot me a link to a website you’ve designed using one of the grids (or a variation), or a note telling me if you found them helpful.

Zipped files are approximately 288k each.

Download: 4-column, 960 Template
Download: 4-column, 960 Uneven Columns Template
Download: 4-column, 996 Template

ALSO, download the Free XHTML/CSS template that goes with the first Photoshop template!

What? Twitter has Search?

Author: Ray Gulick; Published: May 26, 2009; Category: Communication, Search/SEO, Zeitgeist; Tags: None; No Comments

I don’t know if I should be concerned about this, but Twitter is starting to make sense to me. I just spent an hour listening to Gary Vaynerchuk talking about Twitter (and a lot of other stuff in the keynote of Michael Stelzner’s Social Media Success Summit 2009). Gary talked about how you can use Twitter to find people who are talking about what you’re interested in, starting with Twitter search. Holy crap! When did they put that there!

Actually, I’m pretty sure it’s always been there, but I’m like most people: we have to be told EXACTLY how to use something. So here, exactly, is the piece about Twitter I was missing and did not have the imagination to figure out on my own (actually, I might have had the imagination, but the noise in Twitter made me want to write it off and ignore it: don’t know about you, but I rarely use my imagination on stuff I’m ignoring).

1. Type a word or phrase you’d like to talk about into the search box and click on the little magnifying glass icon.
2. Scroll through the results until you see something interesting.
3. Make a comment: agree, offer something additional, etc.
4. If a decent conversation develops, follow that person. They will probably follow you. Now you have a connection with someone with whom you have a common interest.

Search!?! Who knew!?!

Design Team Roles for Best Results

Author: Ray Gulick; Published: May 22, 2009; Category: Business, Design/Development, Information Architecture, Marketing; Tags: Communication, Design/Development; 2 Comments

DOH! We recently had a glitch on a logo/web design project for which I take complete responsibility. Knowing the client was anxious to get the website completed, I tried to shortcut the logo design phase. Oh sure, we gathered all the information, took careful notes about the company, its competitors, its products, and its markets and market challenges. But we skipped the part where we crystallize those notes into a Design Specification document, and get agreement that the design spec represents an accurate assessment of the client’s needs. And we skipped talking about the roles we all play in the design process.

As a result, we soon had a client who was directing us to make the font bigger, and make it skinny, and…you get the idea. Fortunately, I work with a writer who has a talent for telling everyone how things are going to be, and we all got squared away and went back to work in our proper roles, working from a design spec she pulled together in record time. And we’re all still friends. Totally dodged a bullet.

So what are the roles that make for a productive design team? In this case, there were 3 roles: the client, the copywriter, and the designer.

The client

The client’s role is pretty straightforward, really. They need to tell us what we need to know about their business and markets. When we come back with a design spec, they need to tell us where we got it right and where and how we got it wrong, and help clear up any misunderstanding or miscommunication revealed in the spec. Before we can design a logo that represents their company, we all need to feel comfortable that we understand what the logo should communicate. The design spec serves as a "communication blueprint," identifying critical messages and priorities. When we return with logo options, the client uses the design spec as a basis for evaluating them. That nearly always elevates the conversation above the "can you make the font bigger" discussions. If it doesn’t avoid them altogether, it at least gives you something to pull the discussion back to.

The copywriter

Copywriters are not always included on a design team, but whenever possible, I like to work with a copywriter from the beginning of a design project. We can coordinate written and visual messages better, and it gives me someone to bounce design ideas off. I’ve learned to welcome criticism from writers at this stage, because it often saves me from going down a design path that doesn’t stick to the design spec. As "word people," writers can discuss concepts and represent their perspectives in ways that can give a designer new insight. And when it comes to client presentations, knowing you’ve been held to agreed upon messages is invaluable. If you’re fortunate, you will also (like me) get to work with a writer who can fix any mistakes you make in working with clients.

The designer

The designer’s role is to take all the words—questions and answers, explanations, conceptualizations, confusion, clarifications, technical info, artsy-fartsy hyperbole and half-baked ideas—and spin them into visual gold. Something from which people in a client’s market can derive some useful information about the company; something that gives them the assurance that this is a company they should get to know more about. I wish I could explain how that happens.

The Easiest, Quickest Way to Share Webpages on Twitter

Author: Ray Gulick; Published: May 20, 2009; Category: Communication; Tags: TBUZZ, Twitter; No Comments

I’m not a huge fan of Twitter*, but I recognize its importance in marketing, if a significant portion of your market uses it. One of the best ways to use Twitter is to share interesting or useful webpages as you run across them. Finally, someone pointed me to an application that makes it incredibly quick and easy to do that. And when it comes to Twitter, if it isn’t quick and easy, I’m not doing it.

TBUZZ is an application from arc90. From the TBUZZ webpage, simply drag an icon onto your browser’s toolbar (photo above, right). Then, anytime you are on a webpage you want to share, click on it to open a dialog box that includes a shortened URL in a box in which you compose your tweet, and information about any other tweets about the page. That’s it. Short. Sweet. Simple. Nothing you don’t need, and it works beautifully. Almost makes Twitter fun.

UPDATE: May 2010, Firefox 3.6 seems to break TBUZZ. Partly as a result of that (and the fact that FF3.6 is so slow, I’m switching to Chrome, which is fast, and still allows TBUZZ to do it’s thing.

*I don’t dislike the Twitter application. I’m just not fond of the Twitter experience: all the noise.

Seth Godin Clip: No One Cares About You

Author: Ray Gulick; Published: May 19, 2009; Category: Blogging, Business, Communication, Marketing, Video; Tags: Entrepreneurs, Marketing, Seth Godin; No Comments

Time for another (nearly) regular Seth Godin feature video. This one is short and simple, and addresses a really important concept for bloggers (and really, all business owners) to understand: people are looking for solutions to their problems and answers to their questions. Provide them and you will have an audience (or customers). Provide them often enough and you will have fans, who then will care about you…as long as you keep delivering answers and solutions to their problems.

That’s the difference between online relationships and personal relationships. Online relationships are much simpler. They’re based on a real or perceived value exchange: "You give me useful or interesting information, I’ll give you my attention. If you become tedious (such as devoting a lot of attention to stuff that’s about you), I’m gone." Come to think of it, there’s a bit of that in personal relationships, too. Hopefully, to a much lesser degree.