1. How much will my website cost?

Yes, this one is a no-brainer and you’d think there was something seriously wrong if a potential client didn’t ask you this. Often, this question comes loaded with a long list of thoughts/ideas/goals a potential client has in mind. So the question goes something like this: “…I want x,y,z done with a bit of a,b and c and I’d really love it if we could throw in d, e and f…is this doable and within a reasonable price range…” Once I hit them with the budget question (“do you have a budget?”) and get replies like “…a couple hundred bucks…I have no idea…several thousand…” I get a better handle on a) how important the work is to them and b) how realistic they are willing to be. Well usually, anyway.

2. How soon can this be done?

How many times have I had a potential client come to me wanting the sun, moon and stars within three weeks? It’s amazing how many people think they understand the importance of planning for branding, content development, website design, etc. but they fail to understand that it takes time to do these things well. On the flip side, I occasionally get clients who want to pay a retainer to start a project but they specify an overly long turn around that doesn’t fit with the scope—like 6 or 8 months. There’s nothing more frustrating to a website developer than a project that has more time than it requires, and often when this happens it can be considered a red flag.

3. I love this site…can you make mine look like this?

Even though I get this question on a regular basis it doesn’t typically lead to a problem. Once I explain to clients about the reasons why we (speaking for all Professional Developers here) don’t copy a design, they usually understand and go for a compromise or even better – something totally new and unique. I have actually lost a job because I wouldn’t copy another design, but that’s ok by me—I’d rather not do the work at all than feel wrong about doing it in the first place.

4. How soon will my site be found on Google?

I really don’t like getting asked this question because I’m not an SEO expert, but I do get asked this quite often (and understandably so – achieving good SEO can make or break a business). Clients can be surprised when I tell them it may cost a lot more to guarantee a top 20 ranking – and it won’t come from me. I see a lot of people who have no idea about what’s involved with good, effective search engine optimization, and if they don’t want to work at achieving the results themselves, they’d better be prepared to spend hundreds or thousands to get the work done right. I’ve even lost jobs because I’m not an SEO expert. Many people just don’t realize that professional website development and search engine optimization are often offered by separate companies (and for good reason).

5. Can you fancy it up a bit?

I really don’t like getting vague requests, and as a website developer I see my share of them. My preference is to design clean, often minimalistic websites. Usually, a client will gather this when they look at my portfolio, but not always. That’s when I get the “…make this more colorful…can you fancy this up a bit…make it more feminine…I’d like to see more…” type questions. On the up side, working outside my comfort zone from time to time is probably a good thing, and I admit that I do like a creative challenge.  I never shy away from working with a client’s vision—even if they have poor taste—and I never shy away from giving them my professional opinion either.

6. Can you add e-commerce to my site?

I get asked this question on a regular basis. Usually it means the project scope just changed and I may have to explain this to the client. Depending on what they have in mind, adding the e-commerce functionality can be pretty simple or it can end up being a whole new project aside from the current project. Sometimes once they realize what’s involved with adding e-commerce they scrap the idea or they wait until the business is more established and plan for it as a future expense.  I see a lot of clients who assume adding e-commerce functionality to a website is an easy task (and it may be, but not always).

7. Can you develop my site in Flash?

I’m not a flash developer (it’s on my wish list of things to learn…so for now I outsource), so there’s nothing more disappointing than to have a very cool project turn into a 99% flash development project. It probably means I’ve just lost the job, and not for reasons that I’d necessarily agree with. Too much Flash is never a good thing for your server, for a visitor’s patience, for many browsers, for the search engines, for usability or for accessibility.

8. Can you write my site content for me?

I get this request a lot…I actually have clients from all walks of life expecting me to develop their website content for them. They either forget that they are the experts in their own fields, or perhaps they just don’t want the hassle of having to sit down and actually write something meaningful for the website. So I get dozens of requests to write content for plumbers, carpenters, artists, authors (believe it or not!), coaches…you name it! My response to every one of them is the same: if it’s going to be a big problem give me your content in point format and I’ll refine it for you. That usually solves the problem.

9. Do I need to have a photo of myself on my site?

It’s amazing how often I still get asked this question. I always tell clients the same thing: it depends on the business. So for a Professional Coach I say “yes, definitely…” but for a Finish Carpenter I say “…it’s not absolutely necessary…professional photos of your work are much more relevant…” I am still surprised at how many people aren’t sure about what’s expected here.

10. Can I maintain my site myself?

In the past couple of years I’ve been getting asked this question more often. Clients are definitely becoming more confident in their ability to maintain their own website. I’d assume that’s partly to do with blogging software like WordPress or TypePad, and probably because of social media applications like FaceBook and Twitter. Now clients come to me with some experience under their belts already in adding or updating pages on a blog or maintaining a Twitter page, so now they naturally want this level of functionality with their website. The good news is I always tell them “yes…no problem!”

What other questions have you heard? And how do you answer them?

We’d love to hear your input on frequent questions that your clients have asked you as you have been working as a designer. Share them with us by leaving a comment.

In the past I’ve coded my clients sites only to run into a number of bugs after going live. This is a common thing for any developer, and we all fall prey to it. It could something be as simple as a missing semicolon in your CSS or forgetting to close a tag in your HTML and PHP. This portable method of development has become a life saver for me in me, not just to debug code, but to develop my work off-line from anywhere I have access to a capable workstation. Whether you are on the road, in the air, at the office, or on vacation you can debug your site completely before launch. You also won’t need to spend money to host this development environment since everything will be able to fit on a portable thumb-drive and tested completely offline!

Didn’t you just say I wouldn’t have to spend any money?

One thing you might have to spend money on will be a USB thumb-drive or some form of portable media (SDHC card, portable HDD, etc). Remember, we are going for ìPortable WordPress Development on the go!î and that means some way to carry it with us while on the road. A thumb-drive of at least 4gigabytes will be needed for this project, but if you need multple installs of windows for each version of IE, then you will probably need at least a 16gibabyte thumb-drive. (XP Installs can be stripped down to about 4GB per install with the latest SP3) You can find deals at places like Wal-Mart and Staples for around $30-40 US Dollars on 16GB thumb-drives. If buying on-line, you might even be able to get them for half that price with shipping. Either way, its a good investment but not a requirement. If you have a laptop, then you can skip the thumb-drive, and just keep everything on your laptop.

Place all your eggs in one basket

Most of the design process can be done with a minimal amount of tools. The first tool you will need is your text editor. Regardless of the operating system you use, having a text editor that can do syntax highlighting as well as line numbering is a must for any serious designer. Especially if you want to be able to track down PHP bugs, or JavaScript code when the browser gives you something like ìerror on line 127 column 25î. If you aren’t already using one, I suggest you start now. It not only makes debugging your code easier, it will help you visually see your code in a cleaner format, keeping the work flow organized and easy to read.

For Windows users, Notepad++ is my personal favorite. Highly customizable, plug-ins, portable, OpenSource and above all else its free. For everyone else, you should have a look at jEdit. jEedit is available for many platforms including Windows, MAC, Unix/Linux and even VMS (although I don’t think you will be designing your WordPress sites using a VMS system).

What browsers do your visitors use?

The next tool you will need is simply your browser. One thing to remember when designing your site is that not all browsers render the same. For this reason, I suggest the use of portable browsers during the design process. Most of the major browsers have portable versions you can put on your thumb-drive, allowing you to take them with you on the go. They also run without needed to install.

I try to develop my sites for the top 4 browsers since they hold the greatest market share. Those would be Opera, FireFox (Gecko based), Safari/Chrome (Webkit based) and Internet Explorer (IE).

Microsoft Windows comes with Internet Explorer built in to the operating system, and as far as I know, there are no portable versions of IE short of specialized Thin-apps or third party clones. What you can do is test multiple versions of IE through the use of a Virtual Machine (more on that later). Another thing to remember is that each version of IE seems to render differently from the other. This is one of the most common complaints by web developers. Coding a site for IE alone requires extra steps to make it look the same as it does for everyone else. The downfall with IE is you cant install them all side by side (You can install version 6 along side version 7, but that is for a different article). In order to test in multiple versions of Internet Explorer you would be forced to install Windows multiple times, on different machines so each OS install can run a different version of the IE browser.

This sounds a bit silly and at the same time redundant, but in order to see how your site displays in say IE5, 6, 7 and 8, and be able to debug in real time, its a necessary evil. You could try a service like Browser Shots, but 90% of the time their site times out, and you also wont get key information on errors in order to track them down when something is broken. Thus, the easiest way to solve this, install it in a Virtual Machine (VM)!

You can download portable versions of FireFox and Chrome from:

http://portableapps.com/apps/internet

Chrome and Safari will render almost identical since they use the same rendering engine of Webkit, so you don’t really need Safari installed as well but that is up to you. As far as I know, there are no portable versions of Safari, but you could install it in one of your VM’s along side IE.

For a portable version of Opera, see:

http://www.opera-usb.com/operausben.htm

The nice thing about portable apps, are that they can be loaded to a thumb-drive and taken with you anywhere you go, so you can always take your WordPress development studio with you while on the road. There are also portable FTP programs, like FileZilla which will come in handy when you are ready to upload your final theme to your live site.

So what is all this talk about Virtualization?

Another tool you should have in your arsenal is a Virtual Machine Hyper Visor. Virtual Machines let you install a number of different operating systems into a virtual environment that will look and act identical to your host system. This lets you install all sorts of software without making changes directly to your computer itself, but instead only to the Virtual OS. This is not only great for production development, but also safe in the event your code causes a problem with the OS itself. Through the use of a VM, you can also save snapshots each time you modify the OS itself, so if a change you made or software you installed cause the VM not to boot or constantly crash, you can revert to a save snapshot before all your changes.

Given the affordability and size of thumb-drives, this also makes it easier to take your VM’s with you on the go. You might already own a thumb-drive, in which case you won’t have to spend any money at all. In order to run your VM, you will need one of a few tools though.

I’m not going to cover all of them, but understand there are many types of Virtualization packages available to you. Some are free, and some are commercial, all with varying degree of usability and each with their good and bad points. For me personally, I chose Vmware.

One the the reasons I use Vmware is because there are many pre-made Virtual Machines that serve specific purposes. They call them ìVirtual Appliancesî, since they act in a similar manner as you would to use a home appliance such as a toaster or a blender. One VM might be specifically for WordPress, while another for Joomla, Droopal, or just a straight forward Apache Web Server with PHP and MySql, where you can add or develop your own CMS later. The point is, these are highly available tools and free for personal use! Are you seeing a theme here?

One important thing to understand is, while your Virtual Machine itself can live on your thumb-drive or portable media, the software to launch and run the virtual machine itself requires an installation of the Hyper Visor within an existing computer. The term Hyper Visor just refers to the software that allows the VM to run, and gives it the ability to access your computers hardware, such as the CPU and GPU. In order to do this, you will want the Vmware Player.

Vmware Player is also free and you can download a copy here:

http://www.vmware.com/products/player/

(There are also Virtual Machine Hyper Visors for different operating systems by different companies. Vmware is just one of many that make VM software for Windows, MAC and Linux)

Once you have your portable browsers, text editors, and the Vmware Player installer copied to your thumb drive, you will then need that final piece of magic that brings it all together. In order to develop and debug your site in a true Web Server environment, with the ability to execute the native PHP code of your WordPress themes, you need WordPress itself. Now, you could install Apache, PHP, and MySql on your system natively, but this also poses a risk for your desktop itself, since each of these will be making changes to your OS, while also being permanent on the machine you install it on. Through the use of a VM, your workstation remains unaffected by any issues related to the use of the additional software, and also makes it easier to take it with you on the road. Again, portability is the whole point of this article.

You can download a free, portable version of WordPress in an already configured VM from Turnkey Linux. This takes removed the install process and trying to set up all the requirements for WordPress, as well as keeping it in a nice small package:
http://www.turnkeylinux.org/download?file=turnkey-wordpress-2009.10-2-hardy- x86.zip

Once you download the zip file, you can uncompress it to your thumb-drive or portable media. Uncompressed it will take up approximately 2.5 gigabytes of space and still leaves room to add your browsers and text editor, as well as any images or programs you would like to add to this portable toolbox.

Configuring our WordPress Installation

Now that you have all your tools in one place, you will want to setup your WordPress server itself. First, install Wmware player on your computer from the installer we put on your thumb-drive. Having the installer on your thumb-drive means you can work at nearly any computer you move to, so long as the hardware supports virtualization and your Hyper Visor.

After the installation, start Vmware player and select ìOpen a Virtual Machineî from the menu. Point this to our unzipped VM on the thumb-drive, and then it will show you which file to open. After you open the machine it will show up in your players menu. Then we will want to edit out VM. Click ìEdit Virtual Machine Settingsî and you are presented with a menu of options. Go down to USB controller and remove it. Since we will be running this from our thumb-drive and the machine itself will not be changed or modified in any way, we wont need access to USB ports on our host system. We also won’t need the CD/DVD drive features so we can remove them as well. Click on the network adapter and change it from Bridged to NAT. Click ok when done, and then ìPlay Virtual Machineî.

Now the machine will boot. During this process it will setup an IP address in which you can administrate the VM through your Host’s web browser. Write down the IP address for WEB option and type it into your web browser. You should now see your default WordPress site! Give yourself a pat on the back if you’ve made it this far. Welcome to the world of Virtualization!

Once you see the WordPress page, you will want to login to your WordPress dashboard. If you read the default post, you will see a link to login to your site. It also tells you the default account and password: Login as admin with password turnkey and get blogging!

At this point you don’t have to do anything with the VM itself but minimize it. You are now ready to build your new WordPress site and test your own custom themes, all while working in a non-destructive environment that won’t affect your Host’s workstation or interrupt your live website.

When you are done with your coding session, click inside your VM, and then select and press enter on ìadvanced menuî. Use the arrow keys to select shutdown and click yes and it will unload the VM. Close the player and your done!

Note: To switch in and out of the VM once you click inside its window, click both ìctrl + altî at the same time to return the mouse to your desktop environment.

Your turn to share!

I hope you find this article both informative and useful for your own WordPress development process. Please share your thoughts in the comments below.

Sliding Door Effect

Another option for your portfolio is to have thumbnails of the images with a sliding-door effect to reveal more information about the project. This method can be used to achieve that task in a beautiful and effective way. (Also, take note that there are many CSS3 and HTML5 effects that can achieve these same results. Depending on your target audience, you may want to consider using a few more modern techniques. Perhaps we can explore some of those options on a later post here at GDB.)

VIEW TUTORIAL – VIEW DEMO

Fancy Navigation Menu

This simple yet attractive navigation menu provided by NetTuts+ offers a sleek, non-distracting look for any sidebar navigation. Perhaps using this menu with a fixed position in CSS would make for a beautiful portfolio style.

VIEW TUTORIAL – VIEW DEMO

Simple Dropdown Menu

This jQuery tutorial is extremely simple-looking. There’s not really anything too fancy about it, but it offers one solution to a more attractive dropdown menu and it’s easy to execute. Perhaps it’s the space-saver your one-page portfolio needs.

VIEW TUTORIAL – VIEW DEMO

Content Slider

There are millions of content sliders available out there. If you are pressed for space, but have a lot of content you want to display, a content slider is an excellent solution. They allow you to have multiple panes of content and a navigation that lets you scroll through that content. The following slider is easy to use and quite effective.

VIEW TUTORIAL – VIEW DEMO

The only problem is… the contact form rarely, if ever, gets used. Your bounce rate is higher than a super-inflated basketball.

And it’s just not doing the one thing it needs to: Bringing you more business.

This article will help get you on track to having a web site that serves as an automated-client-grabbing machine. It’ll bring you business day and night. That way you can do what you do best: create amazing designs for people. And you won’t have to spend your time and energy scouring the Internet and your local area for clients. So, without further ado…

2. Credibility

Credibility is great for a couple of reasons. First off, it makes it much easier to charge higher prices. Second, it lowers buyer resistance because prospects will trust you more. You can quickly establish credibility in a few ways. One of the most pertinent, and obvious, is through testimonials. When people see how your designs have effected others in a positive light – they’ll be much more open to trusting you with their project, too.

You’ll want to feature your testimonials in the best light possible. And when asking for testimonials (which you do frequently of course… right?) it’s okay to guide your client to give certain answers.

Now, before you think I’m talking about manipulation or anything like that, let me explain. See, without knowing it, clients often give us amazing compliments that could turn into brilliant testimonials. But sit them down in front of a computer, and ask them to type one, and they’ll come out with something dull, lifeless, and fake-sounding. So you could even ask your client to include what they told you the other day about how perfect the logo is for the personality of his company. Or how using your post card design tripled the response rate. Stuff like that.

But it doesn’t stop with testimonials. There’s an even more powerful way of establishing credibility…

It’s called understanding.

If the copy on your site shows your potential client that you really understand their problems, and that you truly want to help, they’ll want to work with you before they even see a single testimonial.

But understanding requires research. And to do that research, you’re going to have to talk to your past and current clients and find out what makes them tick. Find out why they came to you in the first place… What frustrations they were experiencing… What they wanted to get out of a designer… The benefits they received in working with you… And how the design you created for them changed their businesses / lives in other ways.

Finding Patterns

Get enough answers, and you’ll start to notice some patterns. A lot of people will express the same kinds of frustrations, and the same kinds of benefits. This is good. The more similarities you find – the more you’re beginning to understand what makes your target market tick.

Then, when you’ve collected enough data – include your findings in your web copy. Write about how you can help them solve these problems. Write about how you’ve helped others in their shoes. Before you know it, your site will be filled with irresistible copy. And when your target market comes across your site – you’ll show them the most powerful form of credibility: a true connection.

Share your thoughts

I’m sure you can think of other things that go into a successful website design too, but I think you’ll find that all of those other things circulate around these core three.

Think I’m way off here? Agree with me completely? Have any cool insights or revelations as you were reading? Have any questions? Share’em! Let us know! You never know who else might have your question, or who could benefit from your comment.

Dig deeper, don’t be superficial

There is nothing more disappointing than reading a great headline on twitter, digg, or another site, clicking the link and then finding out the article contains nothing of great significance or deep value.

When approaching a topic, take time to consider opposing views, unique methods, distinct opinions, and more. This will allow you to fully explore a topic. If you need to take more than one blog post to explore a particular subject, do it. There is nothing wrong with digging deeper on any particular subject. It’s the shallow articles that leave readers asking for more and usually cause them to leave your site.

Get into the minds of your readers

One of the best ways I have found to develop new topics to write about is by being heavily involved in the comment areas of GDB. If you frequently post a comment on Graphic Design Blender, you have more than likely had a conversation with me. I love getting ideas and suggestions from those that most frequently read the blog and interact with other designers here.

Another way to know what designers are thinking is to simply ask them. Pose questions in popular design blog comment areas. Ask designers on twitter or other social media, email your close friends, etc. I have found that people are more than willing to give you ideas about what to write about if you just ask.

Why? They would rather have you solve their problems than try to do it themselves. This creates a perfect opportunity for you to write a new article.

Don’t overinflate your content

Nothing is worse than lying to your audience. Don’t write headlines that promise outrageous things like “Designing an entire web site in less than an hour” or “Mastering logo design with this one blog post”. While this may drive a substantial amount of traffic to your blog, you will pay the price for such traffic in lost trust with your readership community.

Be honest in your writing. Let readers know exactly what they are going to get when they read your post.

Be Genuine

First, be genuine. When you leave comments on a popular design blog, don’t leave the comment just to promote your content or share your business information. Genuinely contribute to the conversation. Offer your view on the subject: if you agree, tell why and then add more insight. If you disagree, explain the opposing view and defend it well.

In addition to being genuine when commenting on other design blogs and content, be genuine in what you write about. If you are genuinely passionate about “75 egg beater designs that will blow your mind”, then blog about it. If you’re just doing it, however, to grow traffic on your site, perhaps you want to rethink your strategy. People are more likely to remember you and contribute to your conversation if you blog about issues that actually mean something to people.

The key to being genuine is to invest your emotions in your content.

It’s okay to be the little guy

Sometimes I see designers get really worked up because they aren’t generating traffic to their blog or they aren’t popular in the community. The fact of the matter is, it’s okay to be the little guy every once and a while. You most likely got into design in the first place because you like to be a little different: creative and unique. So why are you worried so much about fitting in with all the other designers on the internet? Enjoy what you do and try to realize that blogging about design and being a major player in the design community may not be for everyone. Find your niche and sit back and enjoy it.

What else have you found to be successful?

Before leaving, share with us your opinion on the matter. What have you done to successfully find your voice in the design industry?

Have a unique business card

Every design professional should carry around a business card. You never know when you might meet somebody that needs your services. With that in mind, here’s how to use that business card to your advantage:

• Don’t use a premade template – You can use a boring premade template or you can create an exciting business card yourself. Both options are easy, but which one do you think will attract attention? The boring, unoriginal business card or the exciting business card created by you? The answer is the exciting business card because it shows your style to prospective clients and helps you stand out.
• Design it with your personality – Your business card is a representation of you and your services, so design it with your personality. Design it with your tone of voice and with your creativity. If you show your personality to the prospective client, you become memorable in their minds and they will most likely pick you to lead their project.

Go the extra mile for your clients

This may sound tedious and not worth it, but it goes a long way. Clients love when somebody goes the extra mile for them. Whether it is giving a free service away or putting more effort into their project, it really shows a difference between you and other designers they could have hired. Here’s a couple of things you might consider doing:

• Offer a free service – Suppose you’re designing a small business’ website that is just starting up. Go the extra mile and offer to design a free business card for them. Offering a small service for free leaves a great impression on a client. It shows that you care about the client and you want to help them as much as you can.
• Send a holiday card – Whether it is through email or an actual letter, send your clients a card during major holidays. It shows that you’re still thinking of the client and it will remind them of you and your services. Be careful what you send them though. Make sure your holiday cards are general and never specific. You don’t want to end up sending a Christmas card to a client who celebrates Hanukah.

The unchanging

The truth of the matter is, the basic principles of design are never likely to change. Alignment, Proximity, effective color schemes, repetition, and more will rule the design world regardless of the technologies that we, as designers, have to adapt to. The real question is, what methodologies and techniques might we have to adopt when new technologies emerge. The internet, for example, is completely revolutionizing the graphic design industry. Designer have had to adapt, learn new skills, and continue to work across all popular media. Let’s examine a few changes that might need to be made for devices like the iPad and its successors.

Usability – namely links and buttons

It’s important to understand that new devices like the iPhone and the iPad are not navigated using a mouse. They’re controlled with human fingers, many which are much fatter than your typical mouse pointer. This might bring into play, as a result, the need for more “finger-friendly” links. As touch-sensitive devices become more and more popular, we will begin to see less of the traditional hyperlinks and more big, touchable buttons.

Horizontal vs. Vertical styling

This is more a question on my part. Do you think that, due to the ability to easily switch between horizontal and vertical orientation, as web designers, we will need to create a vertical stylesheet and a horizontal one? I ask, because I recently watched a video about how Sports Illustrated will begin to implement their magazine on the iPad and the styling completely changed when the orientation did.

Your thoughts?

I honestly have no idea what is going to happen because of the new iPad. Perhaps design as we know it will change forever. Perhaps nothing will change. What are your thoughts on the matter? Share them with us.

It is my firm belief that user-experience design is important in any design setting and your future success in the design industry depends on how well you can design an experience.

User-experience design on the internet

Also known as web usability the study and art of perfecting UX design on the internet is constantly evolving. Studies are constantly done to assess how people interact on the web–both with each other and with other content, and how to make accessing information easier for the end consumer.

Recently, Smashing magazine redesigned their web site and asked for critiques on the design. Smashing Magazine Realigned, an article featured on A way back, uses basic principles of web usability or UX design to analyze the strengths and weaknesses of the site redesign.

If you would like to learn more about the basic principles of web usability I would suggest reading “Don’t Make Me Think: A Common Sense Approach to Web Usability”, by Steve Krug. It will change the way you look at web design and make you a far better experience designer over all.

1. Hierarchy in print

Hierarchy in print design is the way we organize information on a page. I love the way webstyleguide.com puts it: “The primary task of graphic design is to create a strong, consistent visual hierarchy in which important elements are emphasized and content is organized logically and predictably.” In other words, the purpose of hierarchy is to make it easy for a reader to USE the printed material. It’s user experience design.

I recently attended a seminar given by Cameron Moll, web designer, author, speaker, and board member of HOW board of advisors. He focused heavily on the importance of hierarchy in design and how it effects the way a user processes information. While Cameron spoke mostly of web design, I would like to emphasize how this applies in print design as well.

Consider this first advertisement I grabbed from a previous post on GDB called “25 Inspiring and Creative Print Ads“. This advertisement utilizes the principle of hierarchy fantastically.

Notice how eye-catching this advertisement is. Due to the extreme contrast in hue and proportion, chances are you have already read the ad and learned what it is about.

Let’s examine why the hierarchy in this ad is so effective.

A simple way to test the effectiveness of the hierarchy in your design is to blur the document and desaturate the colors. This will help you understand how effective the designer of this advertisement helps the user or viewer read and understand the most important details of the piece. Notice how your eye moves from one element to the next–in the order the designer intended. This is great hierarchy.

2. Consistency in print design

What do I mean by consistency? Let’s go back to your first day of Graphic Design 101. Remember when your professor taught you about alignment, repetition and proximity? Remember when he vowed to kill you if you ever used more than two typefaces in a single design piece? The real principle of design he was trying to emphasize was consistency.

Consider the consistency in these infamous iPod advertisements. The similarities across the entire campaign enable the user to better understand and connect the message the designer is trying to send.

To wrap it all up

So what’s the point? The fact of the matter is, most people think web usability when they hear the words usability design. The truth is, usability design comes in all sorts of shapes and sizes. Consider product packaging, environmental design, and more. Each one of these design practices include the art of user experience design.

If you aren’t designing with the user, viewer, or reader in mind, it’s time to change!

What other thoughts or tips can you share with us about usability design on or off the internet?

The Design (overall aesthetics)

Branding

Now, before I have a whole heap of people give me a hard time about inconsistent branding, let me explain my motives in completely changing the color scheme and appearance of the site. When I created the original theme for this site, it was my first experience creating a custom wordpress theme from scratch. Frankly, I was pretty proud of it, but it was not my best work.

In August of 2009, I began work on my brand new portfolio web site, prestondlee.com. You’ll notice the same color scheme is used on my portfolio site as this blog. This began an entire revolution of my online presence. You’ll notice my new twitter profile now matches the sites as well.

Color

The color scheme also reflects the nature of the site more considering orange is the color of creativity–the fuel that drives the graphic and web design industries. In addition, I would highly recommend reading an article from Web Designer Depot titled “How to get a professional look with color“. It will help you understand the way colors work together on a web page.

Header

Some of you might be gawking at the small header I chose to employ on the site. Honestly, I did it for you. I know you come to Graphic Design Blender for content. You don’t come to see massive amounts of illustration or design before viewing the content. Now don’t get me wrong: I love the headers found on sites like Chris Spooner’s Blog, Web Designer Depot, or Web Designer Wall. I simple wanted to be different and give you, the readers the most help in finding what’s really important to you–the content. What do you think of the new, smaller header?

Vertical Grid Organization

You’ll also notice that Graphic Design Blender is now built on a 960 pixel wide grid system. While I didn’t follow the patter exactly, the grid system was inspired by 960.gs where you can also find resources to help you effectively layout your next web site or blog design.

A little Javascript just for fun

You might also notice a few other elements (like the popular posts menu on the right) that use subtle but sleek javascript plugins to make browsing the site all the more beautiful.

Search Engine Optimization

We all know that a site redesign is never complete until it has been properly optimized for search engines. Just a few things I have done to the site to make it more search engine friendly include:

• more accurate meta data
• H1 tags in post titles instead of web site title
• XHTML Validation and CSS Validation

Usability

My new favorite aspect of web design (or any design for that matter) is usability. I firmly believe that anything we design in the future–whether online, in print, or otherwise, will be “experience design”. After being inspired by “Realigned”, a popular article outlining usability problems in Smashing Magazine’s new site, I decided to rectify some major usability problems here at Graphic Design Blender. Let me illustrate:

1. Each link is the same color. Regardless of where it leads, the location on the page, or the importance of the link, every link is orange with the same text decoration: underlined. If you are looking for a link on Graphic Design Blender, you can expect it to be orange.
2. The sidebar now contains links to some of the most popular posts, most commented posts, and recently published posts–allowing for easy navigation from any page.
3. The main page now has navigation at the bottom which easily allows you to navigate through various pages of articles at once.
4. Each individual article also contains links to the article directly following or directly previous the the article a reader is currently viewing. This allows for simple continuous reading.
5. In addition, each individual article contains links to articles that are related to the current article. This saves readers the trouble in searching by category or returning to the home page to find more articles they might enjoy.

Sociability

Please be sure to let me know what other changes can be made to Graphic Design Blender in order to make it the best it can be.

Web design techniques are turning traditional print design on its head. This post discusses some of the most influential ways that web design is changing the graphic design industry. After reading, please let us know what you think by sharing your thoughts in the comments.

Motion and Interactivity

20 years ago or more, the most interaction with an advertisement or printed material that the user would have is to read or, at most, fill out a form to mail in. Now, designers have to consider not only aesthetics but also user experience. In fact, UX (user experience) has become a science and has opened up a whole new career pathway. UPDATE: Now with the addition of the iPad and other tablet devices, designers have to consider interactivity with a mouse versus fingertips. Do you think the iPad will change the way you design?

Terminology/Name changes

Seasoned graphic designers were trained with terms like leading and kerning. With the addition of web design to our skill set, we now identify the same principles with different names in the CSS: line-height and letter-spacing. They mean the same thing, but we must be able to speak the language from both directions. I believe the difference will one day be erased and graphic design will inherit terms like line-height and letter-spacing. What other soon-to-be-outdated terms can you add?

Font restrictions

While this is getting better, there are still a limited number of fonts available for web designers. Tools like sIFR are making this problem more tolerable, but, generally speaking, typography is much more limited when working on the web than when working in print design.

Template designs

In years past, a printed magazine used to have a unique layout on each page. Now, when designing for the web, we use the same layout on most of our pages. We have even created technologies like PHP which make it extremely easy to create a template web site or blog design. There are some exceptions like Jason Santamaria, a magazine-designer-turned-web-designer who creates a customized stylesheet for each blog post.

Resolution considerations

In the world of print design, an inch is an inch. While some would argue that on the internet, a pixel is a pixel but the problem comes when screen resolutions change. Web designers have to constantly deal with changes in technology. It’s not enough to design a web site any more–you now have to consider what the site will look like on large, high resolution screens, medium-size laptops, cell-phone screens, and more.

When printing, you can go to the printer’s and assure your design turns out just like you had intended. When designing for the web, you cannot be present every time a visitor opens your web page.

You also have to have the ability to design a piece as small as 16px by 16px (favicon size) or smaller. These minuscule sizes weren’t even dreamed of by print designers in years past.

Nearly unlimited resources

Getting a degree in graphic design is a great asset to any designer. When it comes to staying up to date on techniques, the web has nearly unlimited resources: articles, free images, tutorials, etc. Top designers now blog about their work and share with the rest of us–which helps us all improve together.

File sizes and loading times

If you posted a printed piece online, it would take forever to download. Graphic designers who strive to become web designers, therefore, have to learn good principles of optimization, file size, page-load times, etc. If a page doesn’t load quickly, it doesn’t matter how beautiful it is, people won’t stick around to see it.

Coding

Here’s an obvious one. Once you design a page in photoshop your work isn’t even halfway finished. You then have to excercise your left brain and code the site to make it readable. Oh and on top of that, it should validate. It’s also possible you have to build a wordpress theme or use other technologies to give your client what they want.

What else would you add?

These are a few differences I have noticed the web design world has brought to the graphic design industry. What other differences have you noticed? Please share in the comments.

1. Design and Code Your First Website in Easy to Understand Steps

2. Building Custom WordPress Theme

3. Adding Extra Sidebar to your WordPress Theme

4. How To: Making a Categories Drop-Down Menu

What other articles and tutorials would you suggest when building your first wordpress theme?

1. Organize:

Make it easy for visitors to find what they are looking for.
The first step in designing a less cluttered web site is to create a site map.  This will help you (and you client) to understand what content needs to be included, where it will be stored, and how it will be accessed.  Creating a site map also helps you learn where you may have duplicate or unnecessary content. This will help you reduce the amount of clutter.

Continue to use your site map as you develop the site.  If you already have a web site and are trying now to organize it more, create a site map of existing content. Decide what you can live without or ways the content can be better organized.

You should also ensure there is a contrast between headings, body copy, links, buttons, ads, and other content. This will allow for quick navigation for your visitors.

2. Prioritize:

Decide what the most important content is and sell it well.
Many times you may be tempted (or influenced by your client) to include as many links on the home page as possible.  This temptation is based on the thought that if a site visitor doesn’t see a particular link, they will never find the content they are looking for.  The fallacy in this method of web design is that many times visitors can be so overwhelmed with home-page content that they leave the site all together.

Some solutions to help reduce the overwhelming number of links on the home page are as follows:

• Create easy-to-navigate drop-down menus.
• Use a refined search option on your home page where visitors can search for specific terms.
• Divide the site by category and create category pages where links for a particular category can be stored and easily accessed.
• Create a visitor-friendly site map or site index where visitors can choose to view all site content in an organized list.
• What other solutions would you add to the list?

3. Minimize:

Decide what you can live without.
Chances are, there is content on the web site that may not be necessary.  Maybe you need to include the last 3 posts from the blog instead of 10.  Consider hiring a copy editor to eliminate unnecessary body copy. You could also use images instead of words in some instances: remember “a picture’s worth a thousand words”.

4. Analyze:

Learn what works well for site users and what makes them leave.
It is also a good idea to analyze your site statistics and adjust the organization and structure of the site around your findings.  Analyze your top entrance pages. Are they clean and organized? Do they convey the messages you’d hoped for?  Also analyze top exit pages. Learn what makes visitors leave your page and adjust it to assure they stay longer on your site.

Some other ways to effectively analyze your site are found below:

• Use a service like fivesecondtest.com or others to learn what visitors think of your site.
• Ask friends or family (or even your client) to navigate the site while you watch. Don’t say anything. Just observe their reaction to particular content.
• Review the structure of some of your favorite sites. How do they organize their content? Emulate what you like.

Why?

So what’s the big deal?
Why reduce clutter on your web site? The hard and true answer is that more visitors means you accomplish your goals more fully. Whether those goals include making money, satisfying a client, getting your thoughts and opinions out there, or anything else, reducing clutter on your site will help it stand out in a world where clutter is beginning to become the norm.

What other tips can you share with us to help reduce clutter in web design?