Calls and Screen Sharing

Join.me
It’s simple, easy, and free. Either join someone’s screen share or share your own. You can invite up to 250 viewers into your screen share and can even let them take control of your computer. Join.me has a great list of features, such as internet calling, chat, and file sharing, which makes it a great all-in-one solution for screen sharing presentations.

Skype
Skype has over 600 million users, so chances are high that even your client will have an account that he/she can hop on to at any time. Skype is a great way to have face-to-face conversations with clients when the option of meeting them in person is unavailable. In addition, if you need to chat with more than one person in a single call, Skype comes with conference call support so you can include as many people as you want in your presentation. Most importantly, Skype has a built-in screen sharing ability that allows you to switch from video to design comp with ease.

GotoMeeting
GotoMeeting is a familiar business go-to for conference calls and screen shares. You can attend meetings from your phone or your computer and utilize its convenient scheduling features to help better organize your meetings and presentations.

Google Video Chat
You probably already have your Gmail inbox open, so why not hop on a video or audio call with your clients within the same workspace? If you live in your Gmail inbox archives and frequently reference email exchanges and attachments in your workflow, Google Video is the perfect solution for communicating with your clients.

Google Voice
This is a frequently underrated communication tool that makes living our work lives on computers that much easier. Free up your hands by using your computer as your phone. Even if you miss a call, you can easily access it via Google voicemail or email transcription!

Presenting: Information Architecture and Prototypes

Axure
Axure is a powerful and robust flowcharting, wireframing, and prototyping tool for all of your IA and prototyping needs. Axure is easy to use and is packed with every sort of web tool imaginable for creating the web wireframe or prototype of your dreams. You can even utilize its dynamic panels and widgets (including user-created widgets) to make your prototypes interactive. And if you want to get even more complex with your prototypes, you can integrate APIs and data to make your prototypes work with remote data!

Mockingbird
If you’re looking for an inexpensive, browser-based solution, Mockingbird is the way to go. If you’re working with a team, everyone can access and work on your wireframes together. Previewing and sharing your wireframes is easy, and since everything is online, you’ll avoid having to deal with more file organization and clutter. To make things even easier, Mockingbird has an intuitive UI, with simple drag-and-drop interactions, smart text resizing, and interactive page linking.

Omnigraffle
Omnigraffle is a great Mac solution for creating and presenting flowcharts, sitemaps, and wireframes. While it comes with a great span of tools to create your IA needs, it really shines with its “stencils” feature. For a fully customizable and personalized look, you can utilize Omnigraffle’s stencil or user-created libraries.

InVision
Want to create beautiful wireframes and prototypes? InVision is a simple and intuitive web application that allows you to take your design jpgs, pngs, or gifs and turn them into interactive prototypes within minutes. You’ll be amazed at how easy it is to turn your flattened PSD images into dazzling working prototypes.

Presenting: Designs

Photoshop full view mode and layer comps
Did you know you can utilize the different screen modes in Photoshop to view your PSD file? Photoshop’s Full Screen view hides everything but whatever is on your canvas and allows for easy toggling access back to the PSD in case you want to edit some nitty gritty elements of your file. Another great way to present designs is to use Photoshop layer comps. Layer comps allow you to save specific visibility, position, and layer styles for different versions or parts of your design. These layer comps are saved to your PSD so you can come back to them at any time.

Preview for Mac
If you’re using a Mac, Preview is a powerful default image viewer that allows for easy viewing of your jpgs, pngs, and pdfs. If you have Lion OS X installed, you can take preview one step further by taking advantage of the revamped Slideshow or Full Screen modes. These two modes have the same functions as Preview normally does, but they’re now packed with beautiful isolated presentation screens that allow you to swipe between multiple images in a subtle but showy sliding interaction.

Picasa Photo Viewer for PC
While Windows Picture and Fax viewer has some merit to its usability, a great image viewing app that you might want to consider installing on your PC is the Picasa Photo Viewer. It’s got a great interface for navigating through files, and its black overlay background makes viewing a single design (PSD or image file) both clean and easy.

Browser Viewing
For web-based projects, another interesting way to present a design is to drag your image file straight into your internet browser. This gives your clients the experience of seeing your design in its natural environment and helps capture a better overall impression of how the design will feel. Also, if you’re HTML/CSS savvy, you can make edits with the browser’s “Inspect element” screen to center and throw a background color behind your image. You’ll hardly be able to tell that the design isn’t live!

Feedback and Collaboration Tools

Notable
Notable app allows your clients to give feedback straight onto the designs themselves (image files only). What’s especially nice about Notable is that feedback is displayed as an overlayed highlight area that clearly indicates what parts of the design are being discussed. You can then have a threaded conversation on that feedback or even create your own notes on your design.

InVision
InVision was mentioned earlier for its wireframing and prototyping capabilities, but it also allows for collaborative feedback on these projects. So not only will you have beautiful IA and designs to show your client, you can also ask them make comments right on your InVision mockups.

Basecamp
Basecamp is one of the most popular project management systems on the web. Apart from its project management system, however, is its feedback environment for designs and PSDs. Since many of your clients will probably be familiar with Basecamp, having them provide their feedback within the app itself will be beneficial for both of you. This helps you keep your project organized, recorded, and easily accessible. If you’re looking for free alternatives that yield similar results, take a look at Freedcamp and Podio.

Google Docs
Free and popular, Google Docs is a great area for storing feedback on Word docs, Excel sheets, and many other document types. Google Docs has a particularly useful commenting system which allows for easy comment threading and discussion. Especially if your clients enjoy giving written feedback, consider taking advantage of this online resource.

About the Author:

Jessica Moon is both the blog editor and a UX/UI designer at digital-telepathy, a user experience design studio that specializes in creating products like SlideDeck, Hello Bar, and Impress. She has a passion for illustration and design, and enjoys blogging and sharing what she’s learned via Twitter and Google+.

The success of a blog re-design is more heavily influenced by a proper planning process than it is by the design skills of the person creating it. A blog can get a fancy new design that looks great, but if it doesn’t help to make the site more user-friendly and it doesn’t do an effective job of achieving the blog’s purpose, the impressive look ultimately has very little impact.

In this article we’ll take a look at 7 keys to the blog re-design process. These are all things that should be considered at the time of the re-design in order to make the site more useful for visitors and more effective for its owners.

1. Same Design Style or New Approach?

Most of the time when a blog is re-designed it will maintain a similar style or look and feel, just with an updated approach. Brand development takes time, and if a blog has established a certain identity with its audience you will usually want to maintain that identity through the re-design process. However, there are some cases where the re-design presents the opportunity for the blog to go in a new direction. This includes color schemes, logos, and general design styles.

One of the first decisions that should be made is whether the blog should keep a similar style to the existing design, or if it should feature a new design style. Think about the blog’s current audience, how they view the blog and the brand, and if that still fits with the direction the blog is headed.

2. Focus on Conversions

Every blog should have some type of conversion goal. The content is obviously intended to be helpful, useful, and interesting to readers, but ultimately there is probably some action that the blog owner wants the reader to take. It could be to subscribe to the blog’s RSS feed, sign up for an email newsletter, purchase a product, download a free e-book, sign up for membership, connect via social media, etc.

Whatever the priority of the blog may be, it should significantly factor into the re-design. In fact, this is one of the reasons blogs need to be re-designed or re-aligned from time-to-time, as it is normal for a blog’s priorities to evolve. When that happens, changes to the design should be made. In some cases minor changes are sufficient, and in other cases it may require a more thorough re-design.

In order to focus on conversions you will of course need to know the specific priorities of the blog. This sounds simple, but many bloggers don’t take the time to think of it in these terms. So if you’re designing for a client you may need to prompt them to think about what types of conversions are most important to them. Once you know the priorities you can include calls to action in the most influential locations of the re-design. This could include the blog header, directly above or below the post title, directly after the post, the sidebar, etc.

3. Determine What Content Takes Priority

In addition to knowing what types of actions you’ll want visitors to take, you also should think about what content should be prioritized in the design. By default most blogs prioritize the newest content by showing it at the top of the font page.

News-related websites obviously want to prioritize new content because that freshness is what visitors are looking for, and it’s what keeps them coming back. Many news blogs also prioritize content based on it’s category. For example, the front page may list new posts in different categories such as world news, finance, sports, politics, etc. Some blogs use a “featured” category to determine what posts get priority on the front page. Many WordPress themes use a slideshow to scroll through top new posts, and if they are placed in the “featured” category they will be included in this slideshow.

The front page isn’t the only way that content can be prioritized. Many blogs, like our own, link to important or popular posts from the sidebar. Blog visitors often look to the sidebar when they want to browse the archives, so this is another way to control what content is noticed by visitors.

Other options also exist for prioritizing content. Linking to specific posts or pages can be done at the end of blog posts (this is often done through related posts lists), below the loop on the front page, or even in the footer. IncomeDiary uses the area below the main loop on the front page to display a list of “our favorite posts”.

4. Decide on the Front Page Approach

The font page is obviously important to the blog because many visitors will arrive here first. Blog front pages typically show excerpts from the most recent posts, but there are plenty of options. Rather than simply displaying the most recent excerpts from all categories you could choose a magazine-style approach that shows recent content by category. This is usually most effective for sites that publish a lot of content (typically more than one post per day) and probably have multiple authors contributing.

Another option that should be considered is the static front page. Rather than just displaying recent posts on the front page you could set a static page to draw attention to something specific, and to work as a call to action. For example, Copyblogger was recently re-designed and they moved from a more typical blog front page to a static front page that promotes the resources that they have for sale, as well as their email list. The new Copyblogger front page is not completely static, it does include a featured post area at the bottom of the page.

The approach that you take with the front page should be influenced by the decisions that have been made regarding the conversions and content that are prioritized. If you are focusing on a conversion for selling a specific product (as is the case with Copyblogger), a static front page may be more effective than a typical blog front page.

5. Plan for Ease of Navigation

One of the biggest challenges that you will face with a blog re-design, especially on blogs that already have a lot of content, is to make it easy for visitors to find the content that they are looking for, and to make it as easy as possible. And to make it more of a challenge, you’ll also want to consider the content that hasn’t even been published yet.

Most blogs use categories to help organize content, and links to the category pages are frequently used in blog navigation menus. However, sometimes a blog may have too many categories to include in a primary navigation menu. Tags and tag clouds are sometimes used as well. Linking to an archive that lists all posts can be helpful to some visitors, but not in cases where there is too much content to sift through. Links to monthly archives can also be helpful at times, especially for content that is time-sensitive.

When it comes to navigation there are several elements of the blog design that should be considered, and in total they should all work together to help visitors find the right content. Those elements include the main navigation menu, a secondary navigation menu (not used on all blogs), sidebar links, related content links at the end of posts, category/tag/author links at the top or bottom of posts, footer links, and a site-wide search.

It’s important to also consider the direction that the blog seems to be headed in the foreseeable future, and take this into consideration when planning for ease of navigation. For example, some blogs change the type of content that they publish every now and then, or they may take a different approach with their content. If the blog’s primary navigation menu includes links to five different categories and it is likely that new categories will be added, make sure that the menu can be adjusted to include those new categories when the time comes. So avoid designing the navigation to work with the blog as it is right now, but rather think about where the blog is likely to be over the next year or so and try to design it to support new types of content that may be added.

Smashing Magazine has adapted it’s current design several times in regards to the primary navigation in order to make it easier to navigate. They have added sections for posts on Coding, UX Design, and WordPress.

6. Consider Ads

Advertisements are a critical part of the sustainability of many blogs, and they should be accounted for in the design of such blogs. Ads that are not considered during the design process will usually look out of place and will wind up being more intrusive to visitors.

Before re-designing the blog consider the specific ad units and sizes. You’ll also want to consider any new ad zones that are likely to be included in the near future, so if you are working on a design for a client make sure you discuss this with them.

7. Prioritize Engagement

The ability of a blog to engage its readers will go a long way in determining the success of the blog. There are several different ways that readers can engage, including blog comments, following/connecting on social networking sites, votes on social media sites, and sharing links on sites like Twitter and Facebook. The more readers become engaged with a blog the more likely they are to keep coming back. Building a strong, loyal following will make the blog more successful in every way.

Almost all blogs include a comments section where readers can leave feedback. Some blogs are now using Facebook comments instead of typical blog comments, which is something that can be considered if Facebook is a major resource for connecting with the blog visitors.

Most blogs are now linking to profiles/pages on Twitter, Facebook, Google+, or other social networking sites that are relevant to the blog’s audience. Engaging with your readers now involves the use of these social networks that are outside of your website, but promoting the profiles through the blog can help to drastically increase engagement. During the re-design process, consider what social networks are the most important for engaging with the audience, and determine locations to promote them on the blog in order to attract new followers and increase engagement.

What’s Your Experience?

From your experience with blog re-designs, what have you found to be critical to the success of the re-design?

1. Decide on an Invoicing App or Software

There are plenty of online invoicing apps available that have been created with designers and freelancers in mind. Additionally, there are some software options as well. Using either an online app or software to handle your invoicing will allow you to save time and to have better organization over your invoices and receivables, as opposed to using a manual system or spreadsheets.

With so many options to choose from (see 20 Invoicing Tools for Web Designers), you should be able to find an app or software that includes all of the features that you need, and ideally, not a lot of those that you don’t need. Online apps are available in a wide range of prices, some are even free. Prices will usually rise as more features are included, and most invoicing apps will have a few different plans according to the number of invoices and clients that you need to manage.

If you’d like to avoid monthly or yearly fees of online apps, you can purchase invoicing software for a one-time fee and manage an unlimited number of invoices and clients.

For invoicing software we recommend Fanurio. For online apps we recommend FreshBooks. Find a solution that meets your needs and it will help you to have more accurate invoicing and financial records with less time commitment.

2. Determine Your Policies

In an ideal world, all of your invoices would be paid on time. However, most designers have to deal with late payments, or even no payments, every now and then. You should be prepared and set some policies for how you will handle your invoicing and payments.

Some things you need to consider:

• How much will you charge up front?
• How many days will you give clients to make payments?
• What late fees will you charge for late payments?
• Will you provide completed files or work before or after final payment is received?
• What types of payment will you accept?

Of course, there will be situations when you’ll want to make some adjustments or exceptions to your policies, but it’s a good idea to establish the policies in the first place and then deal with exceptions as needed.

3. Avoid Surprises

Clients should be made aware of your policies and they should know when they will be invoiced for your services. Clients who are surprised by anything on the invoice (whether it is the amount due, the payment terms, the hourly fee, or not knowing what the invoice is for) will be much more likely to pay late or to not pay at all. Part of having an invoicing system that works efficiently is to make sure that there are no unpleasant surprises for clients.

4. Include Your Contact Information

Your invoices should always include your name (or your company name), address, and preferably your email and phone number. Depending on the client you are dealing with, there may be a number of different people that handle the invoice before it gets paid. If it gets passed to an accounts payable department and they have some question about the invoice, it should be easy for them to get in touch with you. Any delays in being able to contact you will result in a delay of the payment as well. Additionally, some of your clients will need your contact information on invoices for legal or record keeping purposes.

5. Have a System for Numbering

Most designers send out invoices on a frequent basis. It doesn’t take long before it becomes difficult to track them without having a system for numbering. Most online apps and software will include this by default or will allow you to customize the invoice numbers. Having numbers will allow you to easily record payments accurately as they are received, it will help for tracking down late payments, and it will make it easier on your clients’ record keeping as well.

6. Include the Recipient’s Information

In addition to including your own contact information, you should include all of the same things for the recipient. This can help for making communication easier, but more importantly, it can be important for legal purposes if you are having issues with not receiving payments. The less information you have on the invoice the harder it is to prove that you are owed any money.

7. Provide the Details of Services and Charges

Each invoice should specify what the charges are for and what services have been performed for the client. This will help both you and the client. For the client, it will help to avoid confusion over what has been done, what they are being billed for, and what they have already paid for. This can especially be an issue for projects that involve multiple invoices or for clients for whom you do on-going work.

From your perspective, a detailed description can help you for record keeping and to know what clients have already been invoiced for and what they will need to be invoiced for in the future.

8. Include the Due Date

Each invoice should include a due date for when payment is expected. Without a due date it can be difficult to assess any late fees or to establish that a client has not paid on time. Due dates are helpful even for your clients that always pay on time, as it can help them to know what you expect and when they will need to process the payment.

9. List Methods of Payment that are Accepted

Clients should not only be aware of how much they owe, what services they are being charged for, and when they need to pay, but also how they can make a payment. Some designers prefer to receive checks, while others accept online credit card payments. Your clients should be aware of how they can get you the money that is owed. Making it easier for them and communicating clearly is always a good thing for increasing the likelihood that you will be paid on time. If you are accepting payment in the form of checks, clients should also know to whom they should make out the check.

10. Send the Invoice as an Attachment

Most designers send their invoices by email rather than snail mail or fax, and this is a good practice for saving paper and speeding up the process. Generally, the easiest way for clients to receive and view an invoice sent by email is a PDF attachment. Most apps and software will create PDF versions of invoices for you.

11. Be Sure to Send it to the Appropriate Person

Before sending an invoice to a client, be sure that you know who should be receiving the invoice. Especially if your client is not a small business, sending the invoice to the wrong person can slow down the process and increase the chances of the invoice being lost or ignored.

12. Record Payments as They are Received

Sending out invoices is really just the start of the process. You’ll also need to have a system for recording payments as they are received. This way you’ll be able to easily, and accurately, see who has paid you and what invoices are outstanding or past due. If you fail to record payments accurately you’ll waste time trying to identify unpaid invoices, and you may even wind up contacting clients about a late payment that has already been made.

13. Follow Up

As your unpaid invoices reach their due dates, take a moment to follow up with the client, remind them, and see if payment is on the way or if there are any problems. As was mentioned earlier, it’s a good practice to have some sort of policy for handling collections of late payments, and follow up will probably always be a part of the process.

In some cases the invoice may have slipped through the cracks and the client will quickly pay when they realize this. In other cases, a gentle nudge or the possibility of a late fee will be enough encouragement.

14. Indicate if it is a Partial Payment

Because most web design projects involve more than one invoice or payment (for example, 50% up front and 50% at completion), it’s a good practice to indicate this on the invoice. Doing so can help to avoid potential confusion and disputes that could lead to difficulty in collecting payments, plus clear communication is always a positive.

15. Address any Problems

Whenever you experience a problem or issue that a client has with an invoice or charge, address it as soon as possible. Don’t wait to see if they’ll make the payment, make an effort to get it resolved. The longer it goes the less likely you are to receive payment.

What are Your Tips?

If you have any tips from your own experience that you’d like to share with our readers, please leave a comment.

Disclosure: this post includes an affiliate link for Fanurio. We use this software and can honestly recommend it.

In this post we’ll look at 21 useful resources. They are categorized by purpose.

Feedback from Clients:

Of course, every successful project needs to involve communication and feedback between the designer and the client. These four resources can help in this area.

ProofHQ
ProofHQ simplifies the design review, feedback and approval process for you and your clients. Clients can provide feedback conveniently through ProofHQ and you can benefit from better organization through the process. Prices range from $17 – $499 per month, with a free trial available.

GetSignOff
GetSignOff is a resource that will help you to organize client feedback and multiple versions of the design while getting client approval on the design. There is a limited free account that will allow you to try the service, and premium plans start at $29 per month.

Backboard
Backboard allows you to get feedback on your work as users can use their “red pen” to leave comments and notes on the designs. You can track records of feedback and approval on your projects. Plans range from $6 – $50 per month, with a free trial available.

Redmark
Redmark allows designers to upload designs for potential clients to see. The clients can then leave feedback and hire designers. Redmark is a free service.

Feedback from Other Designers and Team Members:

On many projects there are multiple team members involved, and internal feedback is equally important. And when there is no team involved it can still be helpful to get feedback from other designers and professionals. Here are four resources that can help for managing this type of communication.

Concept Feedback
Concept Feedback allows designers to upload their work and receive feedback and critiques from other designers. It is free to upload your designs and get feedback from the community of users.

Notable
Notable is designed to organize feedback from team members, and it helps by making the feedback visual. There is a limited free plan available, and premium plans range from $24 – $119 per month.

Feedback Army
Through Feedback Army you can submit questions about your website’s usability and get a specified number of responses from reviewers. The cost is $10 for 10 responses.

ididwork
ididwork is intended for managers and employees to communicate on projects. It doesn’t offer features for clients to leave feedback but it can be useful for feedback within a team. It is a free resource.

Feedback from Users:

Users/visitors/customers also have a role in the process. These five resources can allow you to get more out of the feedback your receive from users.

Five Second Test
Five Second Test is a useful resource for getting feedback on first impressions of your designs. You can set up tests for free (some features are premium) and you can be tracking feedback very quickly.

Usabilla
With Usabilla you can create your tests, set up questions for viewers, invite users, and get specific feedback on various aspects of the design.

UserVoice
UserCoice allows customers/users/visitors to share ideas, vote on other ideas that they like, and you are provided with this valuable feedback. A limited free account is available. Premium plans range from $19 – $589 per month.

Kampyle
Kampyle helps you to analyze and manage feedback from customers and website visitors. A limited free account is available and premium plans range from $99 – $999 per month.

SuggestionBox
With SuggestionBox you can solicit and analyze feedback from customers and website visitors. The price is $49.50 per month, with a free trial available.

Multi-Purpose:

These four resources cannot be classified in just one of the other categories.

Concept Share
Concept Share allows you to get feedback from both clients and team members. You upload your work and allow others to comment on it in a secure location. Prices range from $24 – $99 per month, with a free trial available.

Basecamp
Basecamp does much more than just manage feedback. It is a project management tool that includes features for efficient collaborating through communication and feedback. Prices range from $24 – $149 per month.

PBWorks Project Edition
PBWorks Project Edition is a project management tool that includes features for allowing clients to provide feedback on projects. It also includes features for collaborating with team members. The cost is $20 per user per month.

WebProof
WebProod allows feedback through sticky notes, text highlighting, and more. Prices start at 199€ per month.

Design Critiques:

There may be times where you would like to read a detailed review or critique of your work from another professional.

Design Critique
Design Critique is a blog that publishes critiques of all types of design. You can submit your work and request to be considered for a critique.

Please Critique Me
Please Critique Me is a blog from OnWired where you can submit your design to be reviewed and critiqued.

Forums:

Another way to get feedback on your work is to visit a forum for designers. These three forums all include an area specifically for reviews, critiques and feedback.

Reviews and Critiques – SitePoint Forums

Showcase – DesignersTalk Forums

Look at My Design! – Smashing Magazine Forums

PSD to HTML Tutorials:

If you’re interested in learning more about doing the PSD to HTML coding yourself, these tutorials will be very helpful.

From PSD to HTML, Building a Set of Website Designs Step-by-Step

Build a Sleek Portfolio Site from Scratch

Encoding a Photoshop Mockup into XHTML/CSS

How to Convert a PSD to HTML (video)

How to Code a Clean Portfolio Design

How to Code a Grunge Web Design

Coding a Clean and Illustrative Web Design

How to Create a Dark and Sleek Web Design from Photoshop

Coding a Clean Web 2.0 Style Web Design from Photoshop

Converting a Design from PSD to HTML

Slice and Dice that PSD

The Design Lab: PSD Conversion

Converting a Photoshop Mockup (video)

PSD to HTML Providers:

Here is a look at more than 40 of the leading providers of PSD to HTML services. Additionally, some offer options to have a PSD coded into a WordPress theme, some other type of CMS template, or for a particular shopping cart system.

Snobby Slice
You can read our review to see why we recommend Snobby Slice.

(UPDATE: Snobby Slice is now Purlize)

Markup4U
Markup4U also did some excellent work for us. You can see our review of the services from Markup4U.

PSD2HTML

W3 Markup

Pixel Crayons

Rapid XHTML

Markup Service

Quality XHTML

CSS Ninjas

HTML Cut

HTML Rockstars

Slice ‘n Dice

XHTMLizers

XHTML4U

Slice My Design

XHTML Slicer

Choppr

XHTML Genius

XHTMLized

HTML Blender

SEO Semantic XHTML

2HTML

PSD XHTML

PSD Cutout

Image 2 Markup

PSD Slicer

YoDiv

XHTML it

XHTML Team

PSD Slicing

XHTML Chop

PSD Converter

XHTML Mania

Dr. Martian

PSD to HTM

Feather Code

Convert2XHTML

PSD to HTML/CSS

You We You Coding

PSD to HTML Ninjas

HTML Burger

We Do Markup

Yummy CSS

Finely Sliced

9XHTML

Lemberg

PSD to WordPress Providers:

The companies listed below specialize in taking a PSD file and coding it into a WordPress theme.

WPCoder
WPCoder has done some work for us, and you can read our review of their services.

PSD to WP

Theme Slice

WP from PSD

PSD to WordPress

XHTML This

PSD to Any
In addition to WordPress, they offer coding services for other CMSs.

Reviews:

Finding the right PSD to HTML provider can be a challenge. There are a few sites that exist to allow reviews of PSD to HTML companies, which may be helpful if you are trying to find a provider that comes highly recommended.

Most Sliced

PSD to HTML Reviews

Best PSD to HTML
Also see the post Tips to Choose the Right PSD to XHTML Firm.

PSD to HTML Companies

Resources:

There are a few resources that will take your PSD and automatically create the code for you. I have not personally used any of these tools, so be sure to pay attention to the code that is produced.

SiteGrinder 2
A premium Photoshop extension that will convert a PSD to HTML.

PSD 2 CSS Online
A free online tool for PSD to HTML conversion.

Divine
Converts a PSD to a WordPress theme.

For more helpful resources please see:

• Different Methods for Choosing Color Schemes in Web Design
• 14 Options for Managing Membership Websites
• 25 jQuery Image Gallery/Slider Tutorials and Plugins
• 40 Options for Converting PSD to HTML

(UPDATE: Snobby Slice is now Purlize)

Who Is Snobby Slice?

After trying a few different providers I came across Snobby Slice several months ago. Tyler and his team did a great job for me and they have established a reputation for being one of the highest quality providers in a crowded market. If you’re interested in working with a PSD to HTML provider who will produce quality code you can see more details in our review of Snobby Slice. And if you are just curious about the PSD to HTML process, I think you’ll find the information that Tyler shares in this brief interview to be a good starting point.

Why should designers hire a PSD to HTML service provider?

Why deal with code when you don’t have to? By choosing a PSD to HTML service provider, you can stick to your biggest profit center (design), and spend more time making sure the needs of your clients our met. We’ll do all the nasty coding work!

Most PSD to HTML companies primarily emphasize their price and turnaround time to potential clients. What would you advise designers to consider when choosing a provider?

I would suggest contacting them and making sure that it’s a provider that they trust. Look around their site, see where they’re based and get familiar with their service. Do they have relationships with others in the community? A little due diligence goes a long way. Making sure they’ll treat your client work with respect and secrecy is extremely important before putting your reputation at risk.

What type of research (if any) do you think a designer should do before hiring a PSD to HTML provider?

I’d start by talking with other designers, seeing if they have any experience with a few of the firms out there, and also read some of the blogs/forums on the topic to see if anyone can provide you with a solid recommendation.

What are some of the most common issues experienced by your coders that slow down the process or require them to go back to the designer?

Sometimes the designer isn’t always clear with exactly what they want. An added “comments” layer in the PSD (specifying texts, images, etc.) can really speed up turn around time.

What tips do you have for organizing layers in Photoshop to make it easier on the coder?

Just keeping things nice and neat in folders is helpful. However, a comments layer is really the most important thing.

What should designers expect to be included in the base price and what is likely to cost extra?

Unfortunately, many providers are skimping out on key features to lower their prices. Make sure your design would be compatible with a healthy variety of browsers, and that you’re not getting sold a “sub par” coding package.

What makes Snobby Slice different from other PSD to HTML providers?

We care about our clients! Our base pricing includes everything our clients could want or need. We don’t charge for every little drop down or javascript implementation. Since we offer a 100% money back satisfaction guarantee, we’ve designed our business model around keeping our customers happy – NOT just collecting their cash.

Getting Colors from Existing Marketing Materials

In many situations the client will already have an established color scheme from an existing website or from other marketing materials. In some cases they may want a change, but frequently you will need to work from the established color scheme. Sometimes making slight changes to the shades of colors but sticking with the same basic color scheme can make an impact, and combined with a fresh design of the website it can help to give the company some added interest to their identity.

In situations where you are not working with a client that has an established color scheme, here are some methods that you can try for finding the right one on your own.

Online Color Palette Resources

There are a number of websites and online tools available for selecting color palettes. Many of these sites allow users to upload color palettes that they have put together, and the rest of us benefit by being able to browse through those that have been uploaded. Most of these sites allow you to search or sort the color schemes by a particular hue or by keyword, which can be helpful if you have one color that you want to use but you are looking for others to use with it.

Here is a quick listing of some of the best places to find color palettes.

Adobe Kuler

COLOURlovers

ColorSchemer

ColoRotate

Others:

• ColorCombos.com
• Colr.org

Other online tools exist for helping you to put your own color palette together. Here are some of the best.

Copaso

Color Scheme Designer

Toucan

ColorMunki

The Color Wizard

Color Explorer

Taking Colors from Photographs

Photographs are a great source of color inspiration. You can easily and quickly browse through photos either of your own or random photos from sites like Flickr and deviantART. When you find one that includes a beautiful color scheme, you can upload it to one of several different online tools that will help you to determine the specific colors that are used, providing the hex value so that you can use them in your design work.

Here are some of the best resources of this kind.

ColorSuckr

Pictaculous

What’s Its Color?

Others:

• Color Palette Generator from jrm.cc
• Palette Generator from Big Huge Labs
• Color Palette Generator from DeGraeve.com

At From the Couch David Perel has a nice video tutorial where he goes over his process for choosing colors from a photograph. This is a method that can easily be applied by designers with impressive results.

Design and development blog Build Internet has a series of posts that showcase color schemes from Photographs. Check out their Motivation category to find the color scheme posts.

Taking Colors from Magazines and Other Printed Materials

Online resources aren’t the only place to find color schemes. Magazines, books, flyers, posters, brochures, cards and any other type of printed material can be another source of color inspiration. You can either find a scheme that you like and try to come close just by eyeballing it, or you can scan it in and take the colors directly from the scan in Photoshop or another program.

Browsing Web Design Galleries

One of the best ways to find color schemes that work well for the web is to browse through design galleries. As you do, you will come across some color schemes that you really like and it may give you some ideas for your own work. Of course, what is good for one site may not work very well for another, so it is a good idea to keep your particular project in mind so you can find some colors that will work well for your situation.

You can search around and take one color from a few different websites, or find a scheme that you like and work with Photoshop to find a similar color scheme that will work for you but will avoid copying the colors of the other site. One of the downsides to this approach is that you can wind up doing more copying than you intend, so be careful to make your scheme unique even if it is inspired by other sites.

I Like Your Colors is an online tool that allows you to enter a URL, and it will give you the hex value of the colors in use.

Based on Psychology of Colors

One of the factors that should be considered when choosing a color scheme is the psychology of color. There is a great deal of research that has been done over the years to indicate meanings and messages that are associated with various colors. In many cases this will vary from one culture to the next, so be sure that you are paying attention to information that is relevant to your client and their audience.

Here is a list of some online resources and articles regarding the psychology of color.

• Color Psychology in Online Marketing
• Color Wheel Pro: See Color Theory in Action
• The Meaning of Colours
• Why Color Matter
• Color Psychology
• Color Symbolism and Psychology (from Wikipedia)

Nature

Color is everywhere in nature. Step outside, look around, and you are bound to find some inspiring color schemes. Plants, animals, sunsets, color schemes can be found from just about anything in nature. Of course, getting the exact colors and shades isn’t as simple as when you are working with a photograph (although you can always take a picture) or an inspirational website, you can still get many ideas simply from observing nature and the colors that appear.

What’s Your Approach to Choosing Colors?

If you have a method that works well for you, please share in the comments.

There are ways to take advantage of the inspirational work that is available from other designers and use it to create something of your own, and in this article we’ll look at the subject in detail.

Get Inspiration from Offline Sources in Addition to Online Sources

Web designers are not limited to getting their inspiration from other websites. In fact, offline sources of inspiration will provide more diversity and in many cases will lead to more originality in your web design. Online sources of inspiration are plentiful and easy to find, but offline inspiration can come from just about anything around you, including nature, magazines, books, photographs, fashion, and much more.

Because most other web designers are getting their inspiration almost exclusively from online sources, taking yours from a more diverse set of sources is likely to result in work that avoids simply following the latest web design trends. With offline sources you won’t be in danger of copying what is providing the inspiration.

In Where Does Inspiration Come From? Anthony Zinni writes,

For me inspiration comes from looking at the design of other mediums or formats. When I am working on a new website I tend to open up a copy of print or STEP and see what the latest articles are about, or review the pieces I have collected over the past couple of months. Usually by observing great design outside the medium I am focusing on I am able to apply design principles that are not like current trends and are still appealing. This also often helps take my mind off of the project, which is usually when I am able to find a great solution.

Use Nodes of Inspiration

Way back in 2004 Cameron Moll wrote an article called Nodes of Design Inspiration in which he talked about his process of taking inspiration for various elements within a design from different sources. He says,

In a design sense, I use the term ‘node’ to loosely define intersecting points in a layout. The logo inside the masthead. The masthead resting above two columns. The placement of phone and web address just beneath body copy in a magazine ad. And the like.

By combining the concept of design inspiration with that of design nodes, we discover something I call ‘nodes of inspiration’ or ‘node of inspiration’ for short (*snicker). Simply put, these are points of intersection in a layout in which a designer uses another source as reference for inspiration.

In the example that Cameron uses in this article he took inspiration from five different sites for specific elements in a design of his own. As a result, while each of the sources of inspiration was helpful, the end result was an original design rather than a copy. Most designers are in the habit of seeking inspiration from more than one source, but as Cameron points out, it can often happen unintentionally without even realizing it.

Ask Yourself Specifically What You Like About a Design

When browsing through a design gallery it’s easy to find sites using designs that you like. However, it’s often harder to be able to point out the specific aspects or elements of the design that you like. Without knowing what makes a design special it’s much more difficult to take away inspiration that can be used in your own work. The only way to use this design for inspiration in your own work is to basically copy it because you will not know what to take away from it.

If you’re willing and able to take a few minutes to really think about the design and how it impacts you as a visitor, you will have a solid understanding of what makes the design work. As a result, you will have specific reasons in mind why you like the site, and these are things that you will be able to use in sites that you design.

Pay Attention to the Design Details

As you are looking at the source of inspiration to determine exactly what makes the site work so well, you’ll want to pay attention to the details that set it apart. Small details in a design may not be the first thing that you notice, but they create a polished look that makes an impact.

Liam from Function has written an excellent article, How to Spot Quality within Web Design: Examples & Tips, that is a must-read on the subject. In this article he points out the impact of design details and what makes a design work, with plenty of examples. He covers a variety of topics including spacing, pixel perfect detail, typography, organization of elements, restraint and subtlety, and color.

As you examine the details of a design, you will start to find things that you can actually put into practice in your own work. In many cases you can use these details even in work that is very different from the source of the inspiration.

In Don’t Copy a Design - Steal it, Dmitry Fadeyev writes,

When you look at an inspirational design you should be inspired. Take your time to examine its aesthetic and construction in detail — look over all the nuances and intricacies of its structure. See how the creator did this and that — extract the essence of what makes this work great.

To steal a design you must collect all the pieces of the puzzle and figure out how it all works as a whole — why did the artist use this color, why these lines, why this typeface? …. Once you’ve assimilated the principles and ideas employed by a designer in their great piece, you can use those ideas in your own work. You’re not going to copy them — you will instead use these tools only where they make sense, and only where they will work well — that’s because you understand exactly why they were employed in the first place.

Evaluate How the Design Style Works for the Purpose of the Site

Just because a site features an attractive design does not mean that it will be effective. And just because we may not particularly care for a design does not mean that it will fail. What works for one site in one industry may not be appropriate for another. In order for a design to be successful it must be a good fit for the target audience and it must work with the purposes of the site.

As you are looking at other sites as sources of inspiration for a particular project, take the time to evaluate how that design would work in the circumstances of your own project. Are the particular elements of the design that could be good to use in your work and other things that you could replace?

As you look at sources of design with this approach, you will tend to focus in on specifics that you can use, and rather than copying a design you will wind up benefiting from the elements that will have the biggest impact for your project.

Try to Find Ways to Improve the Design

As I have said earlier in this article, in order to really get the most use out of your sources of inspiration you will need to be able to determine what works and what does not. One of the best ways to get you thinking in a way that will allow you to take something useful away from the design is to critique it by trying to find some ways that you would improve it.

This will help you to really have a grasp of the design and it will be of more use to you in your own work. Additionally, you’re work will truly be inspired by it, rather than a copy of it.

Have a Lot of Inspiration at Your Disposal

We’ve talked about nodes of inspiration and the need to have multiple sources, so of course you will need to have plenty of inspiration available for situations where you need it. In a past article I wrote about keeping an inspiration notebook so that you always have things available when you are in need. Of course, there are also some great resources for cataloging you online inspiration, such as vi.sualize.us, Evernote, and Delicious.

Having resources to categorize your items of inspiration can make it easier to use nodes of inspiration. For example, maybe in your Delicious bookmarks you have tagged a bunch of websites with excellent navigation menus. Or maybe you have a tag for sites that have interesting footers. If this is the case, when you’re looking for some ideas for a particular element of the design you will have a place to turn where you can quickly get some help.

In Be Inspired, but Don’t Copy, Marko Prljic writes,

When you have found a design that you like, don’t stop there. Look further for more similar designs, in color, structure, content etc. Take the best of them all and start thinking about your new layout. When I say “thinking”, I mean try to visualize your new design with these elements that inspired you; don’t just try to recreate the same design. By the time you start drawing some mock-ups, you’ll have new ideas and will design something new and unique.

Attempt to Duplicate the Design for Practice

In order to be able to use your sources of inspiration in your own work you will first have to learn from it. Particularly for new designers, or those who are looking to improve their skills, attempting to duplicate a design can be a great learning experience. I’m not suggesting that you do this for a client project or for anything that will be displayed publicly, but for your own learning practices it can be a great way to improve your skills, and it will force you to pay attention to the details of the design.

You could attempt to duplicate a layout in Photoshop, or you could try to code the site. Whatever approach you take, focus on understanding the design and learning from it rather than simply trying to duplicate it so that you can apply this instead of just improving your technical skills.

What’s Your Advice?

If you have advice from your experience that you would like to share with other designers, please leave a comment.

In this article we’ll look at nine things that should be discussed between the designer and the client at the start of the project to improve the likelihood of success. These topics focus on getting to know the business and their needs, rather than contractual issues like payment and deadlines.

1. The Purpose of the Business

Almost all businesses have a mission statement and a vision statement. Understanding the basics of why a business exists and what it aims to be are imperative if you are going to be able to design a website that is truly reflective of the business and effective for its customers.

If you’re unclear about the core functions of a client or why they exist, be sure to get answers to these questions before getting into the project. It’s usually simple information, but without it, the project can lead down the wrong path.

2. The Specific Products and Services of the Business

Once you have a clear understanding of why the business exists, it’s also important to know specifically what they offer to customers or clients that generates income for the business. Whether you are building an e-commerce site, a general informational site, or any other type of site, it’s always necessary to have knowledge of what the client is offering to visitors of the website.

3. The Demographics of Their Customers/Clients

A discussion of the products and services of a business will naturally lead you to more information about the customers and clients who are paying for those products and services. An effective website will be user-focused, so it is critical that you, as the designer, and your client both have an accurate picture of who will be using the website and who is likely to be interested in what the business has to offer.

Getting as much information as possible in this area is a good practice. Information such as age, sex, occupation, income of their target customers can be extremely helpful for determining an appropriate style of design for the site. Additionally, information about why they would be interested in the products or services of the business will be equally critical for creating a website that maximizes potential.

4. Corporate Culture

A good website will be reflective of the business so that it becomes an effective part of their overall marketing and corporate identity. In order to create a site that is an accurate representation of the business, you will need to have a certain level of understanding about their corporate culture. Many times you can gain an understanding of their culture by visiting the business in person (if possible), speaking with several different employees, speaking with their clients or customers (if possible), and by looking at their existing marketing materials, such as brochures, business cards, and advertisements.

5. Needed Areas of Improvement from Their Current Website

If the project is a re-design of an existing website, one of the most important things that you will need to know is why they have chosen to re-design at this time, and specifically what are they setting out to improve through the re-design? Is their old website several years old and just in need of a general facelift? Have there been major changes in the business that require a new design and new information? Are new products and services being offered that were not a part of the old site? Has their existing site proven to be ineffective at bringing in new business? These are very logical things to consider, but you may have to ask the client for details and clarification in this area as many of them will not think about your need to fully understand why they are embarking on the re-design.

6. Their Expectations for the New Websites

If there are specific areas where their existing website is failing or out-of-date, make sure that you have an understanding of specifically how they expect the new website to improve their business. Expectations are a huge factor in determining their level of satisfaction with your work, so it’s critical that you know exactly what is expected of you and the end result of the project in order to satisfy the client.

7. The Determining Factors of Failure or Success for the Project

A new design may give the business a satisfactory feeling of improvement for their website, but ultimately there will be other factors that determine if the project was a success or a failure. As the designer, to effectively do your job and give the client a website that improves their business, it’s important that you have an understanding of exactly what will make or break the project. Maybe the success rests solely on increased sales. Maybe a website that is a more accurate reflection of the business is of primary importance. Whatever the situation, knowing how you will be measured will allow you to focus on the appropriate areas.

8. Their Reason for Choosing You as a Designer

With so many freelance designers and design firms out there to choose from, it’s clear that the client has chosen you for a reason. There is something about you that made the client feel that you were the best fit for the job. Maybe it was a specific item from your portfolio. Maybe it was the effective communication and attention to detail that you showed before signing the contract. Maybe it was your pricing.

Whatever the case may be, there is something about you and your work that encouraged the client to go with you over other designers. The reasoning behind this decision will often help you to have a better understanding of what they want or expect from you.

9. Their Plans for Maintaining the Site

Almost every website being designed and developed these days is using some type of content management system. The choice of a CMS and how you build the site should be influenced by their needs for ongoing maintenance and updates to the site.

Do they plan to add a lot of new pages and frequently change photos and text on existing pages? Will they need various templates that can be used on specific pages for different purposes? Will they only be making occasional and minor updates to pages? Understanding the ongoing needs of the client can often help to determine which CMS is right for the specific project. In some cases the client may already have a CMS in mind that they want to use, but this is often not the case.

What’s Your Approach?

As a designer, how do you approach the challenge of getting to know more about clients at the start of a project? Are there other items that were not listed here that are critical to you?

For more posts on topics related to running a successful design business, please see:

• 15 Steps to a More Productive Workday
• 12 Realities of Pricing Design Services
• Guide to Completing Projects On Time

Last week I wrote about some various steps to achieving a productive workday, and in many cases your days will involve the need to meet deadlines, or at least to make progress towards meeting the deadlines at a later date. In this article we’ll take a look at 10 different things that you can do to help yourself in terms of meeting deadlines on client projects.

1. Start with Realistic Expectations

One of the most important factors in completing projects on time is simply not accepting work that requires an unrealistic deadline. Of course, there will be times when a looming deadline will be a tight squeeze, but if you hope to be able to meet a deadline and to provide your highest quality of work, a certain amount of time will be needed.

If a client or a potential client is trying to get a project started with unrealistic expectations, the time line needs to be adjusted as soon as possible, or problems will follow. Most clients won’t know everything that is involved in getting a project completed and they won’t always be able to know what is realistic and what is not, so it is the freelancer’s responsibility to make sure that deadlines and schedules are reasonable.

2. Give Yourself Time to do Your Best Work

When evaluating a schedule or deadline proposed by the client, you may know that you’ll be rushed. In this case if the money is right and other factors work out, you may be tempted to move forward knowing that the time crunch will not allow you to do your best work. However, once you get in to the project and you want to produce something of quality, you’ll find that justifying a lower quality of work is not usually acceptable to yourself or to the client.

For obvious reasons it’s always preferable to come away with something that gives you a sense of satisfaction, and a piece of work that would help you to win new clients, not chase them away. When evaluating a potential project to determine if it’s one that you should accept, be sure to give yourself time for a high quality of work, or it is likely to be an issue later.

3. Get Started Right Away

Procrastination is easy for freelance designers, since there is no one around to hold you accountable. It’s a very simple concept, getting started earlier will allow you a better chance to meet your deadlines, but it’s easy to put things off.

By getting started right away you’ll have a chance to identify any potential problems while there is still plenty of time to deal with them, and you’ll reduce the pressure that will exist later as the deadline gets closer.

4. Plan for Unexpected Issues

Part of the difficulty in pricing projects and setting deadlines and schedules is that unexpected issues are almost certain to arise. Planning for the unexpected is a necessary part of the process that will usually be learned after a few bad experiences.

When extra time is built in to your schedule to deal with unforeseen problems, deadlines will not need to be missed because of these setbacks. Even though we all know that unexpected things sometimes happen when designing and building a website, explaining to a client that you can’t meet a deadline because of something you didn’t anticipate is never a good thing. Yes, there are times when it may come to this even when you have built some extra time in to the schedule, but minimizing and avoiding these situations should be a goal.

5. Communicate with Clients that Your Ability to Meet Deadlines Depends on Their Cooperation

Being held up by clients can often be a frustration for designers. When you’re building a site for a client there is a strong need for the client to be involved in the process. Whether you are being held up by waiting for content or waiting for feedback on the design, a slow response from the client is frqquently a contributing factor in delays.

To make sure that your clients have a clear understanding of what will impact your ability to meet the established deadline, take the time up front to emphasize that their input and follow up must also keep to the schedule, or else it will impair your ability to get the job done. This will help many clients to make sure that they get back to you promptly, and in cases where it doesn’t help, at least you will have covered yourself for later if deadlines are not met.

6. Get as Much Information as Possible Up Front

As was mentioned in the previous point, building a website is always going to involve some information from clients. Whether you need written content for the site, photographs to be used, a listing of pages that they want to be a part of the site, or feedback on the style of design that they want, the sooner you can get the information the better.

Of course, different projects will have various levels of involvement that you will need from the client. Whenever possible, it’s preferable to let clients know everything that you will need from them up front. This gives them a chance to go gather the information all at once, plus it makes it possible for you to have all of the information before you even really get in to the project.

Going back and asking the client for more information will usually happen at some point, but the more you can get up front, the less time you will have to wait later for a response. As deadlines get closer, these types of delays can often make the difference between meeting or not meeting deadlines.

7. Give Deadlines to Your Clients

In order to keep things moving forward, deadlines should also be given to clients for getting their part done. For example, when you communicate with the client at the start of the project, if you’re going to need content for X number of pages on the site, agree on a deadline with the client for the time when they should have all of that content in your possession.

Simply asking the client for something in an open-ended nature with no deadline will not always work. While you’re waiting you may be losing valuable time. Giving deadlines to the client can obviously help to get things moving quickly, but it also helps them to realize some of the ways that they impact your ability to meet the deadline.

8. Have Checkpoints with Smaller Goals Along the Way

Some projects, especially larger ones, will have smaller goals and deadlines built in to the schedule along the way. However, even if you’re working on a smaller project that only has one established deadline, it’s a good practice to break down the tasks and steps that are needed to get the project completed, and set some specific goals and progress points for yourself to meet along the way.

When you’re evaluating how much time it will take to complete a project, it will typically be much easier and more accurate if you can break it down in to small sections and gauge the time required for each of them. Without doing this, it’s easy to get part way through a project and feel good about where you are at, when in reality you should be much further along in order to meet the deadline.

9. Set Daily/Weekly Goals and Task Lists

If you’re starting a project with a detailed breakdown of what needs to be accomplished at specific intervals, you can evaluate your progress at any time and adjust if you’re falling behind.

Last week I wrote that having a daily to-do list is one of the keys to a productive workday, and I feel that it also has a big impact on allowing yourself to effectively meet deadlines. This way you will always know exactly what you need to accomplish in a given day to put yourself in position to get the project completed on time.

10. Evaluate Your Progress Daily

In addition to just setting goals for each day and tasks that need to be accomplished, it’s also necessary to evaluate your progress and make sure that you are still on track to meet the deadline. If you’re not on track, it’s obviously best to know that as soon as possible so that you can adjust your work as needed, and this method will allow you to do just that.

My typical practice involves spending about 5 minutes at the end of the day to go back through my to-do list and to make sure that any items that weren’t accomplished become part of the list for the next day. At this time I’m able to look at the projected schedule and determine if I’m still on track.

What’s Your Process?

How do you make sure that you’re able to meet deadlines?