When it comes to building a website, it helps to have a process to follow, especially if you are just getting started as a web designer. Good guidelines can help you work better by keeping forgetfulness to a minimum.

Every designer or company will develop unique components to their web design process over time, but the basics remain the same: learn, plan, design, code, launch and maintain.

In this article, I will share my process for designing a website.

Before we get into it, let me first share two parallel processes that should be taking place throughout your design process.

The first thing you should be doing continuously is seeking feedback. You’ll save yourself a lot of wasted time and effort by getting feedback at regular intervals.

The second thing you should do continuously is testing. Test the heck out of everything as you go to avoid mega-headaches down the road.

With that said, let’s get started!

1. Learn

What do you think is the most important step of the web design process? Planning? Designing? Coding?

Guess again.

It shouldn’t surprise you that learning — discovering and understanding what you need to build in the first place — is the most important part of the entire website design process.

Why? It’s simple, really. The more you know about what you need to accomplish, the better your chances will be of creating a successful website.

Think of it like this: If you are an archer, don’t you need to know where to aim your arrow? That’s what the target is for. The little red dot in the middle is the bullseye. Since it’s smaller, it’s harder to hit, but even if you aim for it and miss, you’re sure to get closer than if you aimed your arrow up into the air and hoped for a random direct hit.

So how can you score a bullseye as a web designer? Before you go any further, you need to define what hitting the bullseye in your project means.

As a web designer, hitting the bullseye is giving your clients what they want — it’s what they are paying you for.

What clients want varies widely on a case-by-case basis. Since you aren’t a mind reader (no, you’re not), you need to proactively find out what they want.

In some cases, they may not even know what they want, and in other cases, they may have a hard time verbalizing what they have envisioned because they don’t know industry terms and concepts like CSS, Ajax, or relational databases.

The Creative Brief

Fortunately, there’s a tool web designers can use to easily gather this information. It’s called a creative brief. A creative brief is basically a series of questions that you ask your clients so that you can understand the scope and goals of a project.

You can ask these questions during a face-to-face meeting or a phone call — or you can simply make a web form available on your website that handles the answers of your clients.

You should obtain this information in the way you and your clients are most comfortable with — but whatever you do, don’t skip the creative brief because it will become the lifeblood of your project.

What kind of questions should you ask in your creative brief? At the minimum, find out:

• The client’s target audience
• Their primary and secondary goals for the website
• Current branding characteristics
• Budget
• Deadlines they need to meet

I also like asking clients what websites they like and don’t like to give me a visual idea of where I should be heading and what I should avoid.

You might also want to find out if they need an online store, if they already have a logo (if not, you can make one for them), who will be responsible for maintaining the site once it goes live, and so forth.

You might have unique questions that you will want to include; use them and don’t be afraid to tailor your questions on a per-project basis.

2. Plan

Once you’ve learned what you need to build, it’s time to start planning how you are going to make it happen. Before you can start designing a website, you need to know exactly what, and how, to design it in the first place — and it all starts with creating a design strategy.

Your design strategy for each website you make should be handcrafted to fit the client’s vision (if you are designing a site for yourself, then you would qualify as the client).

So what factors will shape your design strategy? The creative brief will act as the foundation of your plan by providing you with some basic information, such as what your timeframes are and who the target audience of the website is.

It’s especially important to know your audience because it will affect where and how the site gets viewed. For example, will you also need to create a mobile version or an iPad-specific version that works with touch?

Research and Note-Taking

Whatever gaps are left in the overall strategic picture will need to be filled by doing some research of your own. Now is the time to visit competing websites and see what types of designs are already out there in the target market so you will know how to differentiate your own design.

See who comes up first in a Google search and try to find out why. Within 10 minutes, you should be able to start piecing together the beginnings of your design plan.

While you are researching, you’ll also start brainstorming about what colors to use, where to place the call(s)-to-action, what kind of fonts you should use and other similar details.

At this point, you should also be taking notes, snapping screenshots and starting a mood board.

Sketching and Mock-Up

Next, it’s time to create a mock-up and start letting your ideas take on more of a tangible state. I like to start by sketching out my ideas on a regular old piece of paper, as do many other web designers.

Other people prefer to use a wireframing tool like OmniGraffle. During this phase, not only will you want to start thinking seriously about the layout of the site, but also the structure of your site and how the navigation will shape up.

This is your chance to see what works best and a good place to experiment with different ideas before actually hitting Photoshop or Illustrator to create something more concrete.

Pick Your Tools

This part of the process is also the perfect opportunity to assess which tools you will need to use. You absolutely should not fall into a pattern of using a predetermined set of tools for each site you create. It’s a potentially hazardous practice for everyone involved, including the site’s end users and the client (not to mention how monotonous your portfolio would look).

Put some real thought into what content management system would work the best considering the site’s goals, whether or not including Flash at all is a good idea, and so on.

3. Design

Now I know there are many web designers out there who like to skip directly to the design stage without giving a second thought to learning or planning, but design is more than just the act of creating. You want to actually create something good and useful and you just can’t do that without first doing some preliminary work before starting to design.

If you’ve already done the legwork of learning and planning, it makes the actual designing much easier. When you don’t have to worry about the little details, it really opens up a whole new level of effectiveness and productivity because you can focus on more important things.

Once you are ready to start designing, keep in mind that you need to design more than just a home page. You’ll need a design for the sub-pages of your site as well. It can sometimes be easy to design a home page concept, slice it up and start coding only to get to sub-pages and have no direction. You may also need to design a mobile or iPad version of your site as well.

The design phase itself is straightforward. Just open up Photoshop (or your graphics creation tool of choice) and start bringing your mock-up to life. Sweat the details. Make it pixel perfect. Even if you feel like the project you are working on is more boring that staring at a wall for 24 hours straight, put your all into it. Your client will notice and you’ll be proud of the work you did.

You’ll have to decide at this point whether you want to use real content in your design or some dummy text (e.g. Lorem Ipsum). There are plenty of fans in either camp, but I personally prefer to use real copy and photos if they are available to make it as close to reality as possible.

During the design phase, it is incredibly important to seek feedback often to make sure all specified requirements have been met. If the client wants to make changes, now is the time to do it before the design is sliced and coded, making it ten times more difficult to make what would be a simple change if you were to do it during the design phase.

4. Code

Once you have a killer design, you’ll need to turn it into a real, live website. A safe bet, no matter what content management system you are going to be working with, is to start with a generic HTML and CSS template.

Start with a Base Template

If you’re like me, you’ve already got a set of starter HTML and CSS files ready to go that are already linked to each other and already contain some basic starter code (such as a CSS reset).

If you’re not like me and don’t have these generic files at the ready, go ahead and create some that you can reuse at this stage in the future.

Before you go any further, it’s a good idea to go ahead and add in your title, descriptions and meta tags, or at least make a note of what they should be if you are going to be using a content management system later on.

Lay Out the Main Sections and Content

Begin carving up your HTML/CSS by inserting the major sections (your main <div>s) for your header, footer and content area.

Next, begin adding your text and image content. The goal is to keep your markup as semantic as possible so that each element is meaningful.

Avoid divitis — the act of utilizing too many divs. For example, you don’t need a div just to contain the logo. Try using an <h1> or a <p> instead — it can be styled exactly the same way (e.g. making them into a block elements using the display CSS property).

Validate and Test

Don’t forget to make sure your code validates by using the validation tool provided by the W3C (but also understand that validation tools have shortcomings).

You’ll also need to do some browser testing to make sure the site looks and acts as intended and provides a uniform brand experience no matter how a user accesses it. You can use a tool like Browsershots if you have limited access to different types of computers.

Use Firebug and YSlow to debug your site and make sure your work is running at an optimal speed.

One last thing: don’t forget to implement Google Analytics or your favorite analytics alternative so you won’t miss out on tracking the stats during the big launch.

5. Launch

When you’ve finally perfected the site, it’s time to release it to the public. Launching can mean different things to different people, mostly because there are various content management systems and development circumstances out there.

For instance, if you are redesigning a site that uses a content management system or publishing platform, your launch may be as simple as applying a new theme.

If you are designing a brand new site in a sandbox or local development environment, then ‘going live’ means FTP’ing your files to the production server.

6. Maintain

During your planning phase, you should have determined who will be in charge of site maintenance. If a client is unable to maintain the site, you may want to suggest that they hire you on a regular or as-needed basis to manage and perform maintenance tasks.

During the hand-off/closeout of the project, it might also help to provide some guidelines and basic training to your client to make sure they understand how to properly maintain the site.

(Via Six Revisions.)

Lorem ipsum is a block of dummy text in Latin often used in design and publishing to fill space in a mockup. The brilliant Dummy Image Generator is like ‘lorem ipsum’ for images.

Like ‘lorem ipsum’, the Dynamic Dummy Image Generator offers a glimpse at what content might look like in a layout, but instead of placeholder text, it creates a placeholder image. Using the service is dead simple:

Sometimes you just need a placeholder image right at your finger tips. Just enter the width + x + height at the end of this URL and off you go!

Example: http://dummyimage.com/640x480

You can even use a dummy image as a source in your HTML, like <img src='http://dummyimage.com/340x123' alt='A Dummy Image'>, which would look like this:

The Dynamic Dummy Image Generator is free to use, and is a bit on the geeky side, but if you’re a designer or just spend the occasional free minute tinkering on the web, it’s a really simple, well-executed idea.

(Via Lifehacker.)

You took the leap and installed WordPress to host your own blog because you want complete control over how it looks and works. Now, it’s time to power it up, lock it down, and make your blog completely yours.

What You’re In For

With all the hype around cloud computing and no-configuration-required hosted services, you don’t hear about the joys of running great software on your own server very much. The fact is, if you’re just a casual user who doesn’t know if you’ll stick to blogging over the long haul, or if you don’t want to spend a little time maintaining WordPress, you should sign up for a hosted blog at WordPress.com or Blogger or TypePad. (Also, this tutorial is not for you.)

But if you’re willing to keep WordPress updated religiously, you get access to a whole world of WP plug-ins that add features to your site, the opportunity to create and tweak custom WordPress themes, and a huge sense of accomplishment. In the most recent version of WordPress, keeping your installation up-to-date is a matter of clicking a link when you get notified to do so.

Everything you need to know about installing WordPress is right here. Got it up and running? Let’s get to customizing.

Initial configuration

The first thing you want to do on your WordPress blog is set up a new author with administrative access. Don’t use the default ‘admin’ user to write your posts; create your custom username and give it admin privileges. Then, log out of WordPress and back in as your new username. For security reasons, some folks like to delete the admin user completely (as some WordPress attacks have used it to do bad things to your blog). Once you’ve got your administrative account working, add other authors to the list of users who might be posting to your blog.

Now it’s time to cruise through WP’s settings area and configure things just how you like ‘em. First, set up your post permalinks to look prettier for both humans and search bots. WordPress’ default post permalink looks like http://example.com/?p=123. Instead, under Settings>Permalinks, select something like http://example.com/2009/09/welcome-to-my-blog.

Next up, configure how you want comments to work on your blog. Under Settings>Discussion, you can enable comments and set other advanced options, like whether or not users have to be logged into your site to comment, or if comments should automatically close on posts after a certain number of days, if user avatars show up, or what words in a comment should automatically mark it as spam.

Speaking of, spam comments is a ridiculously epic problem across the internet for all blogs, so how you set up comments will mean the difference between miserable hours spent gardening V14gRa and ‘check out my sexy webcam!!’ comments or not. Coming from Lifehacker’s ‘must register to post here’ model, I checked off ‘Users must be registered and logged in to comment.’ If you don’t want to put up the registration hurdle in front of your commenters, make sure you install the Akisment spam-killing plug-in (more on that below).

Must-have plug-ins

Just like you can extend Firefox with feature-adding extensions, WordPress also has a pluggable architecture and a whole world of plug-ins that can soup up your blog. When youre logged into WordPress, click on Plugins, and search for the name of the plug-in you want to install (which you can do without involving your FTP client). You can also just search on keyword, too—to find Twitter related plug-ins, just enter Twitter. The plug-ins that you use will depend on how you want your site to work and look, but here are a few that every WP user can benefit from.

WordPress Database Backup (Backup): Running your own server and database means that if things go wrong, it’s up to you to have a backup. This plug-in can email a full backup of your WordPress database on a schedule to an address you specify. I’ve had great success building my WordPress site locally with the backup this plug-in created; however, the other resident WP expert here on staff, The How-To Geek, recommends using the old-school cron job for 'mysqldump -uUser -pPassword databasename > filename.bak' approach. No matter how you do it, make sure you’re backing up both your blog’s database and files. It’s worth consulting with your blog hosting provider about the best way for you to do this, too.

FD Feedburner Plug-in (Feeds): Google-owned FeedBurner is a must-use for anyone who publishes RSS feeds, like your blog does. FeedBurner saves you bandwidth costs by hosting your blog’s feed and offers statistics about how many people are reading it; this plug-in will redirect your blog’s feed to FeedBurner for you.

WordPress.com Stats (Stats): See what posts are most popular using this up-to-the-minute statistics plug-in, right inside your WordPress dashboard. WordPress.com stats doesn’t count visits to your own blog, and unlike the richer Google Analytics service, there’s no day-long delay to see what’s happening on your site. To run this plug-in, you have to get a WordPress.com API key (it’s free) and enter it into the plug-in’s settings.

Search Meter (Stats): If you have a search box on your site, you’ll want Search Meter, a plug-in which shows you what readers are looking for and finding (or not) on your site. Search meter also offers widgets you can add to your site which show readers what other readers are searching for.

WP SuperCache (Optimization): The first time a highly-trafficked site like Digg links to your blog, you’ll wish you had installed this plug-in, which maintains high-speed, database-call free ‘cached’ copies of your WordPress pages on your server. Your site will run faster and won’t buckle under the strain of a lot of traffic if you’re caching it with this excellent plug-in.

Akismet (Comments Spam killer): Because comment spam can get so bad, WordPress now ships with the Akismet spam filtering plug-in. Since I’m requiring user registration to leave comments on my WordPress blog, I don’t have any experience with how good Akismet is (and haven’t had any spam at all), but word on the street is it’s absolutely essential for sites with open comments. Like WordPress.com stats, Akismet requires a WordPress.com API key.

Finally, to make your site as accessible to Google and other web search engines as possible, a few Search Engine Optimization SEO plug-ins help. I use All in One SEO Pack and Google XML Sitemaps.

Make Your WordPress Theme Yours

If you’ve got HTML and CSS chops, you can make your WordPress theme sing your tune. (For advanced stuff, some PHP skills come in handy, too.) First you want to start with a base theme. WordPress’ default theme is ok, but if you google ‘free WordPress themes’ or take note of what themes sites you like already use, you’ll find an insane number of gorgeous and eye-catching site layouts. Picking your theme is one of the most fun (and most time-consuming) parts of setting up WordPress. It will be hard to choose!

Once youve installed the theme you want by downloading the .zip file and putting it in your WordPress themes folder, you can dig into the CSS and markup and make it your own. WordPress offers a theme editor in its interface which lets you update files on the fly (under Appearance>Editor). While this is convenient, its also dangerous if you hit the wrong key, save the file, and dont have a backup. My recommendation is to set up WordPress and your theme of choice on your own computer, edit it in your favorite text editor, and upload it to your live server when it’s perfect. I started my WordPress blog with Lucian Marin’s Journalist theme, and made it mine by adding color to the header and tweaking how comments look.

If you’ve got patience and custom HTML you want to turn into a brand new WordPress theme, copy the default theme’s files into a new folder and get to hacking. The WordPress Codex is an invaluable resource for both starter reading and reference as you go. That is, when you get to the part where you’re thinking ‘WTF is wp_list_comments?’, Google it and you’ll find the function reference at the codex. It took me a full weekend of pretty intense theming work to get my first custom theme done and ready to go live, so give yourself some time, and most importantly, have fun with it. Here are some tips and links from my Twitter followers on creating a custom WordPress theme.

Sidebars and Widgets, Oh My!

The easiest way to customize your WordPress blog without digging into code or your FTP client is to do so with widgets. The latest versions of WordPress offer drag-and-drop custom modules you can add to and remove from your blog. When you’re logged into WordPress’ admin interface, under Appearance, click on ‘Widgets’ to see what’s available and add and remove what you want on your site’s sidebar (or top bar or bottom bar, depending on where your theme puts it).

Advanced trickery

Here are a few more tips for advanced WordPress hackers who want to troubleshoot or try even more customization:

• Use multiple custom sidebars: WordPress’ sidebar and widgets feature is very powerful and customizable; in fact, you can create and customize multiple sidebars or site zones to show up on different pages. (For example, the sidebar that shows up on a post page can look different than the one on the front page.)
• Troubleshoot slowness and other problems with Firebug: Every web developer knows that the Firebug Firefox extension is absolutely essential when developing any site, and it’s true for WordPress, too. When my WP site went down because of multiple background 404′s doing resource-sucking searches, Firebug revealed the problem and so I knew how to fix it.
• Use tags to display content differently: You can use conditional tags to display different types of content on your blog in different ways, like a short link or big photograph. I use has_tag to display ‘quick links’ with smaller inline headlines on my front page by assigning the tag ‘brief.’
• Set up a ‘staging’ server: Once your blog’s up and running and live, you don’t want to make huge changes to it with the whole world watching. Set up WordPress on your local computer, hack away on your theme and/or plug-ins, then upload your changes when they’re complete and ready.

This post only scratches the surface of WordPress customization possibilities. The good news is WordPress open nature and huge community means that you can find the answer to almost any WP question hitting up Google—or in worst case, asking the forums. Special thanks to the author of this CSS Tricks post who also writes the excellent Digging into WordPress blog, which I referenced for this post.

(Via Lifehacker.)

10 Things Every Web Designer Just Starting Out Should Know: ”

There are many aspects of creating a website design. Web designers often have to play multiple roles and be very knowledgeable about building effective and usable site layouts.

Most of the lessons you’ll learn in web design comes from work experience; learning is an iterative process and there is no better way to gain knowledge than to make mistakes (and then and learning from them).

In this article, we discuss 10 essential and general tips that every novice web designer should know.

1. Optimize Web Graphics for Better Page Load Times

Learn how to optimize your web graphics by selecting the proper format and making sure that it’s as small as it can possibly be. Even though people are advancing to broadband connections, there are still quite a few who use dial-up internet connections. Additionally, with the emergence of mobile device technologies that don’t necessarily have broadband-like speeds, having slow page load times due to image file sizes can turn users off.

Here a general rule of thumbs for picking the right file format: images that have solid colors are best saved as PNGs and GIFs, while images with continuous colors (such as photographs) are best saved as JPGs.

There are plenty of tools available at your disposal that will help you further optimize your images and lower their file sizes, check out this list of tools for optimizing your images.

By limiting the number of images you use to the bare minimum, being smart about using images, and reducing file sizes as best as you can, you will significantly cut down page response times of  a web page and improve your web page performance.

2. Keep it Clean and Simple

A good web design is not just one that looks visually appealing, but also one that is user-friendly. A clean and simple web design typically ends up being a high-usability web design that is not confusing to interact with.

By having too many site features and components on a page, you risk the chance of distracting website viewers from the purpose of the website. Make sure each page element has a purpose and ask yourself the following questions:

• Does the design really need this?
• What does this element do and how does it help the user?
• If I remove this element all of a sudden, will most people want it back?
• How does this element tie into the goal, message, and purpose of the site?

Additionally, though it may be super awesome to come up with a new concept or interface design pattern for your website, make sure that the design is still accessible and intuitive to your users. People are accustomed to common interaction patterns, site features, and web interfaces – and if your design is truly unique, make sure it’s not too obscure and puzzling. Be creative, but also keep it simple.

3. Navigation is the Most Important Thing You Will Design

The most essential site feature is the website’s navigation — without it, users are stuck whatever page they happen to land on. With that obvious fact out of the way, we’ll talk about some important points to consider when constructing a navigation scheme.

First, it’s very important to put enough time and a lot of planning on a site’s navigation structure. This is common sense, but it’s still surprising how many web designs take site navigation for granted.

Placement, style, technology (will it use JavaScript or just CSS?), usability, and web accessibility are just some of the things you need to consider when creating the navigation design.

Your navigation design should work without CSS because of text-based browsers. Poke fun of text browsers all you want, but they are still prevalent in many mobile devices. Perhaps more importantly, navigation that works with CSS disabled is accessible (99.99% of the time) via screen readers.

Navigation should be accessible and usable without the need for client-side technologies such as JavaScript or Flash, which users may not have enabled or installed for various reasons such as security or company policy.

It is imperative that you have a good navigation system in place that is located at a highly-visible location. A good navigation is detectable as soon as the web page loads without having to scroll down the web page. This is where keeping it clean and simple plays a major role: a complex and unconventional design can lead to user confusion.

Users must never wonder, even for a split second, ‘Where is the site navigation?’

For sites organized in a hierarchical, multi-level manner, make sure that it is easy to navigate from between parent and child web pages. In addition, it should be easy to reach top-level pages (such as the site’s front page) from any webpage.

The main goal of your site navigation is to allow users to get to their desired content with as few actions and with as little effort on their behalf as possible.

4. Use Fonts Wisely and Methodically

Though there are thousands of fonts out there, you can really only use a handful (at least until CSS3 is fully supported by major browsers). Make it a point to stick to web-safe fonts. If you don’t like web-safe fonts, consider a progressively-enhanced web design that leverages sIFR or Cufon.

Keep font usage consistent. Make sure that headings are visually-different from paragraph text. Use white space, tweak line-height, font-size, and letter-spacing properties to make content pleasant to read and effortlessly scannable.

Perhaps one of the things that web designers often get wrong is font-sizes. Because we want to fit as much text as we can in a web page, we sometimes set font sizes to uncomfortably small sizes. Try to keep font sizes at and above 12px if possible, especially for paragraph text. While many people face no difficulty reading small text sizes, think about older users and persons with low-vision and other types of vision impairment.

5. Understand Color Accessibility

After talking about fonts, we also need to point out the importance of using the right colors.

You  need to consider color contrast of background and foreground colors for readability and for users with low-vision. For instance, black text on white background has a high-contrast, while orange text on red background will make you strain your eyes.

Also, use colors that are accessible to users with particular forms of color-blindness (check out a tool called Vischeck that will help you test for certain types of color-blindness).

Some color combinations work well only when the color is used as a foreground color instead of a background color. Take for example, dark blue text on a pink background versus but pink text on blue background, same colors but different levels of readability and reading comfort. It is important not only to get a good color combination but also to apply it to the right elements on the page.

6. You Need to Know How to Write Code Yourself

With various WYSIWYG editors flooding the market, it has become as simple as 1-2-3 to design a site. However, most of these editors insert unnecessarily code junk, making your HTML structure poorly designed, harder to maintain and update, and causing your file sizes to bloat.

By writing the code yourself, you come out with clean, crisp, and terse code that’s a pleasure to read and maintain; code that you can be proud to call your own.

Knowing how to use a WYSIWYG or an IDE with a visual preview does not excuse you from learning HTML and CSS. You have to know what’s going on in order to create effective, semantic, and highly-optimized web designs.

7. Don’t Forget Search Engine Optimization

A good designer should always remember to keep the basics of SEO in mind when designing a site. For example, structuring web content so that important text are represented as headings (i.e. page title and logo). This is where learning how to code properly comes in handy. Knowing correct, semantic, and standards-based HTML/CSS – you will quickly realize that divs are better than tables for web layouts not only for accurate representation of site content, but also for search engine rankings; you will also know that CSS background text image replacement is a good idea.

8. Understand that People are Impatient

People on an average spend only a few seconds before deciding whether they want to read more or navigate away to another site. Therefore, you as a web designer have to device a way for encouraging users to choose the former option within those precious seconds.

Know that not many visitors will scroll down to view the entire contents of the page if what they see at the top does not interest them. Remember to keep your important elements on the top where they are easily visible, but also do not overcrowd the top half of the page which can intimidate users and turn them off from reading further down the page. Consider the top half of a web design a selling point: be a salesman, make people buy into the notion that they want to see what else is on your site.

9. Learn About (and Be Aware of) Browser Quirks

One of the things you must know as a web designer is that your work operates in a finicky and unpredictable environment: web browsers. It’s not enough that your designs work on a few web browsers, they need to work in as many browsing situations as you can possibly afford. Before production – test your prototypes using tools like Browsershots.

10. Make Designs that are Flexible and Maintainable

A good web designer makes sure that the site can easily be updated or modified in the future. Designing websites that are malleable and easy to maintain is a sign of a great web designer. Make your work as modular as possible by separating style from structure.

Know that our industry is dynamic and still young – things change in a very short amount of time. Keeping this thought in mind will promote the creation of flexible web designs.

(Via Six Revisions.)

(Via Ian Scott.)

Why Designers Should Learn How to Code: ”

More often than not, designers have rightfully been accused of retreating into their cocoons of ignorance as soon as their work of creating a web design is finished, leaving the dirty and more hands-on work of putting it up on the web to developers. This apathy is prevalent not only in the web-building industry, but also in software and game engineering.

The hard truth is that the buck of development should stop with designers. For optimum efficiency, designers should not only be concerned with painting the bigger picture but also building it! In this article, I’d like to share with you some reasons why designers should learn how to code.

Designing Realistic and Doable Designs

With a clear image of how the final product will be actualized, a designer will come up with more feasible and practical concepts. Being an integral part of the development process, they carry the responsibility of ensuring their designs translate well into a web-based medium that takes into account: usability, web accessibility, and achievability. A user-friendly website is not only a picnic to navigate from one page to another in a clear and concise flow of logic, but also provides a user with all the information they need without being too overbearing or cluttered. The only real way to know if a web layout works or not is learning how to build it yourself.

Easier Communication

Virtually all products designed but implemented by different parties never satisfy both sides’ expectations, especially when it comes to intangible products like websites, software, or games. It normally comes down to a compromise between what it should have been and what, in reality, it can be.  Whereas the general idea is captured, it is seldom replicated verbatim. The panacea: designers should preach water and drink it too!  This avoids confusion, misunderstanding, and misrepresentation.

Convenient Iterative Development Process

A design, in practice, should not be absolute. By this, I mean that it should be flexible and affable to change without distorting its intrinsic essence to meet the systems’ technical constraints. These repetitive and necessary alterations can only be realized by the original designer. A designer slash developer can iterate more quickly where necessary, rather than having a developer resubmit the design to the designer, who is rarely at hand, to implement the alterations. This situation can create friction – and it often does – between designers and developers.

Better and More Harmonious Results

I often like drawing parallels between software, web, or game development to orchestral music where the designer is the composer and the developer is the ensemble’s maestro or conductor. Imagine if the latter had the composer’s score? Wouldn’t the symphonies be awesome, captivating, and unadulterated? Not only were they crafted by a master craftsman, but conducted by their creator!

Shorter Development Time

The designers doubling up as coders implies that the design and coding processes occur at least sequentially, if not concurrently. This results in a shorter development timeframe – and who doesn’t care about efficiency?

Designers become More Marketable

Modern day designers worth their salt need to up their portfolio, and up their game, if they want to remain relevant; it’s no longer enough to have one set of skills. Oftentimes, we’re required to wear various hats: designer, front-end developer, content writer, and project manager.

By learning to implement what you design rather than leaving it orphaned in the hands of developers – you increase your value. After all, citing design and coding skills in one‘s resume does not hurt. On the contrary, it makes one less redundant and indispensable, a life and death determinant in these financially tumultuous times of corporate restructuring (read: mass retrenchments) and downsizing (read: firing).

However, in so much as designers should also code their innovations, there are downsides to this scenario.

Quoting Lukas Mathis in one of the controversial article about the topic called ‘Designers are not Programmers’¹:

If the designer implements his own designs, he is beholden to two different goals: Clean code and great user experience. These two goals contradict each other. If you have to implement your own designs, you’re bound to compromise for the sake of code quality, which is bad for your interaction design.

‘

Designers who implement their own designs face two issues: They know when a neat new idea will create messy code, and they know about all the existing code that would be touched by a change to the user experience. The two goals are at odds, because the user experience is all about the little details, and those little details all end up being messy bits of code you would rather not have to write.

This aptly summarizes the hard stance taken by web development purists. They are of the old school of thought that advocates for clear-cut lines between design and development.  Apparently, designers create for humans, developers create for computers. Thus, UX designers should design the best possible user interface and leave the developers to make the best possible programming decisions. While this holds some merit as I’ve found myself trying unsuccessfully to abstract my mind from the code when I’m working on a user interface, it is ultimately more convenient to have the technical and usability constraints in perspective.

(Via Six Revisions.)

(Via Ian Scott.)

I’ve been posting links to new blog posts on Twitter since I started using it two years ago. It’s just a natural thing, another step in the publishing process. You can see very clearly where it fits in by looking at the button-bar in my editing window.

Here’s the process.

Step 1. Write the initial draft. Organize. Edit.

Step 2. Save. This publishes the piece to scripting.com, both on the home page, and on its own story page. I repeat this step until I’m ready to have the story appear in the RSS feed. (I don’t mind if readers see the interim versions, I imagine it’s somewhat interesting, if not it doesn’t seem to do much harm.)

Step 3. Build RSS. I know that many RSS clients will only read an item once, so I wait to rebuild the RSS that includes the new piece until it’s pretty much finished. I might still add some pictures, or links or tweak up some wording, but by the time it goes out in the feed, it’s not likely to change much.

Step 4. Twit-It posts the link to Twitter. I get to edit the link text before it goes out, but it does the work of creating a short URL and smashing it together with the headline before presenting it to me in a dialog.

This last step is relatively new, but its import is starting to settle in. In a real way a story isn’t published until I’ve pushed it through Twitter. I expect over time, as more systems hook into Twitter, it will come to mean more. Of course I will, as long as Twitter has a 140-character limit, publish everything on the web and in RSS. This article so far has 2291 characters, or 16 tweets.

Another way of saying the same thing is that Twitter has become the newspaper of record. In a few years what’s left of the news industry will call Twitter a parasite and demand royalties. Too bad they don’t see this coming, and create an even better news system built around the principles of Twitter and instead of asking for alms they’re getting a piece of the PE.

Sidebar to the Twitter bizdev people: Wish I had upside in Twitter, so I could be motivated to make these things work in your company’s product. But I’m a greedy capitalist just like you, and with my ‘stock’ in Twitter diminishing in value every day (through dilution), I have to look elsewhere for my upside. You might think of this as a challenge or a puzzle, figure out how to incentivize your users to make you even richer.

(Via Scripting News.)

I do wonder at times if some Twitter users have any time to get any work done. Several of the more prolific ones that I follow swear they spend no more than 30 minutes a day on Twitter, but I really find that hard to believe. Many times it seems they are twittering just to say something, like ‘Good morning Twitterverse’ when they begin their day, give more details than I want to know about what they had for lunch, what their children said to them, or when they take a nap.

I realize that this is part of the ‘like, know, and trust’ process that enables people to get to know each other, but sometimes it’s simply too much information..LOL. I’m Twittering primarily to market my business. Consequently, I try and limit my personal twitters to no more than 2 per day. My clients, who create Twitter accounts for marketing, as well, tell me, ‘I’m signed up. Now what in the world do I Twitter about? How do I market my business with this tool?’

Here are 10 strategies that I use regularly to market my business and my expertise via Twitter. Remember, you have only 140 characters for your tweet (Twitter post).

1. How you’re helping clients. Talk about specific ways that your business helps clients and use their Twitter ID if you have their permission, i.e. ‘Just finished @clientname brainstorm great Internet marketing plan for 2009″ or ‘Finally finished setting up Quickbooks for local hardware store — now they can invoice their clients’

2. What you’re doing in your business. This is a perfect time to tell others when you’re blogging, writing an article, creating your weekly ezine, recording your podcast, i.e. ‘Had great interview with Jane Smith today on speaking to grow your biz. Great ideas! Subscribe to podcast & listen here (URL here)’

3. Useful tool or resource you’ve found. I run across these all the time in my daily activities, and Twitter is a perfect place to share,. i.e. ‘Found great new Firefox plug-in to monitor & check multiple Gmail accounts at same time at (URL here)’ or ‘Read great blog post on workíng at home with kids under 5 at (URL here)’

4. Ask a question. Need some ideas or some quick brainstorming? Twitter is an ideal place to gather opinions, i.e. ‘Help! Desperately seeking new laser prínter. Recommendations?’ or ‘How do I find training organizations online?’

5. Conduct a survey. What do your Tweeps think about a particular issue? Ask them via Twitter, i.e. ‘Quick poll: Do you get more clients from Facebook or Twitter? Respond at (URL here)’

6. Report on live events. The latest Twitter trend seems to be tweeting what’s happening at conferences or workshops. In order for Twitter users to follow a particular event, it’s usually referred to by a name preceded by a # sign, as in #JVAlert, for example, to make it simpler for people who want to follow those posts. So, if you were at an event, you might tweet ‘#JVAlert John Smith speaking on affiliate programs. Just got great idea on training affiliate managers!’ Just don’t get so wrapped up in tweeting that you ignore the content delivered in the conference!

7. Product or service launch. If you’re about to launch a new product or introduce a new product, let your Twitter followers know, i.e. ‘Pre-launch pricing for new DVD set about how baby boomers can start an online biz. Get $100 early bird discount at (URL here)’

8. Responding to others with advice or answers. The way to build professional relationships on Twitter is to help your tweeps. So, if someone asks a question, comments about something to which you have a response or an idea, or you want to ask a followup question, this is the perfect place to do so.

By Donna Gunter (c) 2008

”

(Via KDI Media : Savannah, GA.)

In this post, you’ll find 28 excellent, useful cheat sheets in various file formats for Photoshop, Dreamweaver, colors, typography, and other web-design related topics all in one page with pictures of each cheat sheet.

If you’re looking for front-end web developer cheat sheets (more CSS, HTML, and JavaScript) check outCheat Sheets for Front-end Web Developers.

Photoshop

Photoshop CS3 Keyboard Shortcuts Cheat Sheet

Downloads: PDF (Windows), PDF (Mac)

Keys for using the Layers palette (HTML)

Photoshop Toolbox Reference (HTML)

Photoshop Lasso Tool Cheatsheet

Download: PDF

Photoshop Brush Tool Cheatsheet

Download: PDF

Color

RGB Hex Colour Chart

Downloads: PDF, PNG

Color Reference Guide (PDF)

Web Designer Color Reference Hexagon  Mouse Pad

Download: GIF

Web Safe Color Chart (HTML)

Hexidecimal Color Chart (HTML)

The Browser Safe Colors (HTML)

Typography

VisiBone Font Card

Download: GIF

Common fonts to all versions of Windows & Mac equivalents (HTML)

Mixing Typefaces (PDF)

Units/Dimension

Approximate Conversion from Points to Pixels (HTML)

Megapixels Chart

Download: GIF

CSS/CSS Frameworks

Blueprint CSS Cheat Sheet

Download: PDF

YUI Library: CSS Reset, Base, Fonts, and Grids (PDF)

CSS Shorthand Cheat Sheet (PDF)

Apple’s CSS Cheat Sheet Widget (Mac Dashboard Widget)

HTML/XHTML

HTML & XHTML Tag Quick Reference (PDF)

HTML/XHTML Character Entities

XHTML Character Entity Reference (HTML)

Dreamweaver

Dreamweaver Quick Reference Guide (PDF)

Dreamweaver CS3 for Mac Quick Reference Card (PDF)

Illustrator

Adobe Illustrator CS2 Keyboard Shortcuts – MAC

Download: PDF

Browsers

Will the browser apply the rule(s)? (HTML)

W3C DOM Compatibility Tables (HTML)

(Possibly) Related Posts

• Cheat Sheets for Front-end Web Developers
• 7 Incredibly Useful Tools for Evaluating a Web Design
• 30 Exceptional CSS Techniques and Examples

(Via Six Revisions.)

Imagine trying to tell someone what you want your site look like – it’s not an easy task. A website’s overall look and color scheme is the first and most significant impression you can make on a first time web site visitor.

Our web designers work with our clients to develop the right look and feel for their website.

By following what we refer to as the “who, what, when, where, why and how of web design” we ensure each web design meets a projects unique requirements.