Communication during the client intake process is critical because it is needed to get the designer and client on the same page, helps to avoid lost time from unnecessary revisions, establishes the responsibilities and expectations of both the designer and the client, and it sets the foundation for design decisions that will be made throughout the project.

Having a set process for client intake can help to streamline the process and save time. Additionally, it will also help to ensure that nothing is missed or skipped accidentally, and it will help to make the communication smoother and less time consuming for clients. While there will always be differences from one project to the next that may require special attention, the major aspects of the client intake process will be applicable to almost all of your projects.

At Vandelay Premier we have released a resource that we feel can be an extremely valuable resource for helping freelancers and small design agencies with the client intake process. Many designers use questionnaires to help with gathering information from new clients, so we created a resource to help with this process. Our Design Brief Print and Web Template has an InDesign template that includes a variety of common questions that help to gather the basic information that is needed on most client projects. The questions can easily be edited in InDesign to customize the document to meet your needs.

While the InDesign document is certainly helpful, we know that many designers, and many clients for that matter, would prefer to complete the questionnaire electronically rather than dealing with printing a paper version that may require mailing, faxing, or scanning. So we had the design brief coded into a template that can be quickly and easily uploaded to your website. The template includes a PHP form. You can upload the directory to your site and send clients a link to the form. They will then complete the form right on your site and the responses are sent to you by email. This version can also be customized to suit your own needs. You can see an example of the design brief here.

How to Set Up the Design Brief On Your Website

To start with, you’ll need access to the template file. The Design Brief Print and Web Template sells for $10 at Vandelay Premier (see the end of this article for a discount offer), and it is also available to all active Vandelay Premier members (learn more about membership here). Once you have downloaded the file you will need to unzip the file and make a few simple customizations.

The first thing you will need to do open the data.php file. Here you can add a link to a logo image to be included in the header, and enter the email address where you would like to receive the responses. You’ll also have the option to customize the subject line of the email, the confirmation message that is shown to users after completion of the form, and the error message that is displayed when required data is missing, but you can also leave those items as is and it will work just fine.

$logo_path = 'css/i/logo.png';

$user_email = 'info@example.com';
$name = 'Your Name';

$subject = 'New Design Brief Submission';

$confirmation_message = "Thanks for completing the design brief. We will be in touch shortly.";
$error_message = " Some required fields are missing.";

At this point you can upload the directory to your website (you can change the directory name to something other than “design-brief” if you prefer) and as long as the php mail() function is enabled on the server, which is typically the case, it should be working right away.

If you would like to make minor changes to the wording of specific questions you can simply open the index.php file and find that particular question. You will see code that looks like:

$ui->createToggle('material',"5. Do you have materials like a logo and photos to use in the design?");

You can simply change the text here. So an example of a slight change would be:

$ui->createToggle('material',"5. Do you have materials like a logo or other branded graphics that you want to use in the design?");

If you want to add a new question, that can be done rather easily as well. In the index.php file find the location where you want to add the question. For this example we will be adding a new question to the “Tell Us About Your Company” section. So we’ll find this code in the index.php file:

<h2 class="title">Tell Us About Your Company</h2>

  <div class="content">
    <?php 

	$ui->createTextarea('company_brief',"1. Please provide us with a brief profile of your company");
	$ui->createTextarea('describe_products',"2. Please describe your products and/or service");
	$ui->createTextarea('target_audience',"3. Please describe your target audience");
	$ui->createTextarea('primary_comp',"4. Who are your primary competitors?");
	$ui->createTextarea('apart',"5. What sets your company apart from the competition?");

	?>

  </div> <!-- End of page content -->

We’ll add our new question at the end, so before the closing PHP tag we’ll enter it based on the following format:

$ui->createTextarea('field_name',"Your Text label here");

So here is the code that we will enter:

$ui->createTextarea('mission',"6. What is your mission statement?");

This code tells it to create a new text area that we have titled “mission”, and it asks the question “What is your mission statement?” You don’t need to change anything in order to get this question to be included in the email that is sent to you, it will automatically be included. So you can see it is rather easy to customize the form to meet your own needs. Documentation is also provided in the download that explains how to add other types of fields, such as ones with checkboxes.

Discount for Our Blog Readers:

If you like this design brief template and if you are not already a Vandelay Premier member, we’d like to offer a 20% discount on this product. The regular price is $10, so the discounted price is $8. If you’d like to take advantage of this offer you can visit the product page for the Design Brief, click on the “add to cart” button, and enter the discount code “designbrief”. The discount code is only valid on a purchase of this individual resource.

Theme features include:

• Customizable slider on home page
• Events calendar
• Custom post type for audio files with audio player
• Upload your own logo, or just use the site title in text
• 4 color schemes from which to chose (see details below)

This free theme has everything your church needs for an effective website. First, choose from four different color schemes to get a site that matches your church’s identity (screenshots or alternate color schemes are at the end of this page).

Your home page will include a slider that can be easily customized from the WordPress dashboard. Without touching any code you can upload new images for slides, (optionally) set any of the images to link to a specific page when clicked, and set the transition effect between slides. The slider is a great way to promote upcoming events, special programs or initiatives, a current sermon series. or anything else that needs exposure.

Every church website needs some type of upcoming events list or calendar functionality. This theme allows you to enter events and they will displayed chronologically in order of the event date. As the date and time passes, the event will automatically disappear from the list so you won’t need to constantly update the site manually after each event.

At the top of the site’s header there is an area for custom text, intended to be used to display the time of your services. Enter your church’s address in the WordPress dashboard and it will automatically create a link to the map and directions from Google Maps.

The theme includes a custom post type for audio media files, so it’s easy to add sermon audios to your site. And more importantly, it’s easy for visitors to listen to them right on your site. We recommend using a service like Amazon S3 to host audio files so they do not put a strain on your hosting account, although this is not necessary depending on your host and the size of your files.

Documentation for the theme is available in this PDF file.

View the theme demo | Download for free

We Recommend BlueHost

If you’re looking for a hosting company, we recommend BlueHost. They offer quality shared hosting and responsive customer service at low prices. The video below shows how to sign up with BlueHost, install WordPress, and upload one of our free themes in a matter of just a few minutes. Read a more detailed explanation of why we recommend BlueHost.

Sign up with BlueHost

Alternate Color Schemes:

While having a well-designed website is important for any business, iPhone users are especially interested in quality design, as it has played a big role in Apple’s success of the years and most Apple-related sites featured an attractive design.

In this post we’ll showcase 50 examples of iPhone app websites. These examples show high-quality design, and hopefully they will provide some inspiration for your own work when you are creating a site for an app.

Photo Stats

Layer Cake

Pocket

Sipp

Stamped

Localhero

Bord

Yowza

Run do to-do

Leaflet

Storific

Movies Now

Camera+

Tea Round

Ringer

RaceSplitter

Zoopy

Faces

Postmates

Overlapps

Euro 2012

Handshake

Moojive

Cutest Paw

Fontain

Scoretastic

Face Fun

Popset

Cocktails

Saver

Flight Card

Blip Me

Zootool

ParkBud

Piictu

Notica

Instagram

Friends

Tourist

Lighty

Headquarters

Nota

Billings Touch

Lite Weight

Pastebot

Ecoki

Junecloud

HipGeo

TouristEye

Lo-Mob

For more design inspiration please see:

• 50 Awesome Portfolio Websites
• 40 Impressive Design Agency Websites
• 25 of the Best Photographer Portfolio Websites
• 50 of the Best Church Website Designs
• 40 of the Best Websites on Non-Profit Organizations

In this post we’ll take a look at 55 responsive WordPress themes, including free and premium themes. The majority of the themes showcased here are premium. Although there are some good free responsive themes available, the time and effort required to create one is rather significant, so most of the good ones must be purchased. There are more free responsive themes available aside from the ones we’ve mentioned here, but we tried to showcase only the best ones regardless of whether they are free or premium.

Free Responsive WordPress Themes:

Skeleton

Responsive Twenty Ten

Meeta

BonPress

Mixfolio

Respo

Orion

Leon

Origin

Oxygen

Hatch

Yoko

iTheme2

Premium Responsive WordPress Themes:

Hero ($49)

Uber ($49)

Reveal ($49)

Infinity ($49)

DailyJournal ($39)

Trim ($39)

Pioneer ($35)

Angular ($35)

Swagger ($35)

innoVative ($35)

Office ($35)

Zig Zag ($35)

Next ($35)

Gigawatt ($30)

Aware ($35)

Propulsion ($40)

Good Minimal ($35)

Reaction WP ($35)

Good Space ($35)

PixelPower ($35)

Super Skeleton ($35)

Whitelight ($70)

SMPL ($70)

Unsigned ($70)

Shelflife ($70)

Olya ($70)

Beveled ($70)

Currents ($70)

PhotoTouch ($39)

Simfo ($39)

Micro ($50)

LitePress ($69)

PhotoNote ($69)

Momento ($60)

Knead ($60)

XO ($35)

Jigsaw ($35)

Akita ($35)

Website ($35)

ELOGIX ($35)

ProMotion ($35)

Modernize ($35)

For more WordPress resources please see:

• The Best WordPress Themes for Churches and Non-Profits
• 27 of the Best WordPress Themes for Photographers
• 25 of the Best Real Estate Themes for WordPress
• WordPress E-Commerce

Today we’ll see how to do an awesome categories menu, based on Pawel Kadysz’s awesome menu design.

We’ll see alternatives to WordPress wp_list_categories functions that allows full customization. Also we’ll see how to do it with clean CSS and a little jQuery for final touches to make it smoother.

So, are you ready to rock?

The Final Look

This is what we get by the end of this tutorial. Highlighted item is the hovered one and all those categories will come from WordPress. You can Download source files or visit the live demo.

#1 – Slicing and adjusting

Before getting into the coding part we need to slice the psd we downloaded, right? Actually no (I know, I know, the sub title is wrong). We’ll use CSS3 for those subtle effects so the only image there will be the background image.

We’ll need to adjust the background image to make it tileable. Each developer does it his own way, what I do is duplicate the layer, invert it vertically and delete the top part for the inverted layer with a smooth eraser. Then I flatten the result and do same thing horizontally.

You can just download the final result from the source files.

#2 – PHP (and, why not, HTML5)

When it comes to a categories listing we often just use wp_list_categories, in the best case add a few CSS rules to make it better but we just ignore all the possibilities of using better markup and completely custom menus.

Here we’ll use a standard HTML menu and for categories listing we’ll use the get_categories() function. It works pretty much same as get_posts, returning a lot of data on our categories but with no markup or styling at all, it’s just a PHP object.

Here is our main code to get the menu:

<nav>
<ul class="mainNav">
	<li><a href="#">Home</a></li>
	<li>
		<a href="#">Categories</a>
		<ul class="submenu">
		<?php
			//http://codex.wordpress.org/Function_Reference/get_categories
			$args = array (
				'hierarchical ' => 0
			);
			$cats = get_categories( $args ); //meooowww!!

			foreach ($cats as $cat) {
				echo '<li><a href="' . get_category_link( $cat->term_id ) . '">'.$cat->name.'<span class="number">'.$cat->count.'</span></a></li>';
			}
		?>
		</ul>
	</li>
	<li><a href="#">Archives</a></li>
	<li><a href="#">Search</a></li>
	<li><a href="#">Contact</a></li>
</ul>
</nav>

As for our demo this is the HTML output after processing this function:

<nav>
	<ul class="mainNav">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Categories</a>
			<ul class="submenu">
				<li><a href="#?cat=1">Tutorials<span class="number">15</span></a></li>
				<li><a href="#?cat=2">Inspiration<span class="number">5</span></a></li>
				<li><a href="#?cat=3">Roundups<span class="number">8</span></a></li>
				<li><a href="#?cat=4">HTML and CSS<span class="number">7</span></a></li>
				<li><a href="#?cat=5">Freebies<span class="number">25</span></a></li>
				<li><a href="#?cat=6">Workspaces<span class="number">4</span></a></li>
				<li><a href="#?cat=7">Apps<span class="number">9</span></a></li>
				<li><a href="#?cat=8">News<span class="number">13</span></a></li>
			</ul>
		</li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Search</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Now we have our raw material. Let’s make it prettier.

#3 – CSS3, gradients, text shadows…

To avoid crazy browser default values, we’ll use a CSS reset. Ok, now we need to add that wooden background and position our main nav. Also we’ll use the CSS gradients to avoid using images. This is the CSS to get this working:

body {
	background: url(background.jpg);
}
.mainNav {
	position: relative;
	margin: 100px auto 0;
	width: 500px;
	height: 50px;
	font-family: Arial, Verdana;
}

Now we need to style our links. Since our subitems are also links we need to target our rules for the top ones and then create specific rules to the submenu items, which is easier than use general rules and overwriting them all every time.

We’ll use also CSS gradients for our items. Unfortunately we still need a lot of vendor prefixes to get those items working, but their syntax is pretty similar from one to another. And the final touches will be done with text shadows to avoid using images at all:

.mainNav > li > a {
	display: block;
	padding: 20px 21px 18px;
	font-size: 12px;
	line-height: 100%;
	color: #666666;
	text-decoration: none;
	text-shadow: 0 1px 0 #f4f4f4;
	text-transform: uppercase;
	border-top: 2px solid #f8f8f8;
	border-right: 1px solid #e9e9e9;
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #afafaf;

	background: -moz-linear-gradient( top, #dddddd, #cdcdcd );
	background: -webkit-linear-gradient( top, #dddddd, #cdcdcd );
	background: -o-linear-gradient( top, #dddddd, #cdcdcd );
	background: -khtml-linear-gradient( top, #dddddd, #cdcdcd );
	background: -ms-linear-gradient( top, #dddddd, #cdcdcd );
	background: linear-gradient( top, #dddddd, #cdcdcd );
	background-color: #dddddd;
}
	.mainNav a:hover,
	.mainNav .hover > a {
		border-top-color: #3F3F3F;
		border-bottom-color: #272727;
		color: #ffffff;
		text-shadow: none;

		background-color: #2a2a2a;
		background: -moz-linear-gradient( top, #2c2c2c, #272727 );
		background: -webkit-linear-gradient( top, #2c2c2c, #272727 );
		background: -o-linear-gradient( top, #2c2c2c, #272727 );
		background: -khtml-linear-gradient( top, #2c2c2c, #272727 );
		background: -ms-linear-gradient( top, #2c2c2c, #272727 );
		background: linear-gradient( top, #2c2c2c, #272727 );
	}

As you can see, this CSS will give a nice divisor between elements but it won’t look good for the first and the last items, so we’ll remove this styling for them:

.mainNav > li:first-child a {
	margin-left: -1px;
	border-left: none;
	border-radius: 8px 0 0 8px;
}
.mainNav > li:last-child a {
	padding-right: 25px;
	border-radius: 0 8px 8px 0;
	border-right: none;
}

Now we’ll style our submenus. We need to position it as absolute so it won’t affect the rest of our main items. Also we have a specific styling for our links under submenus. This CSS will get you there:

.submenu {
	position: absolute;
	padding: 15px 0 20px;
	width: 350px;
	background-color: #2a2a2a;
	background: -moz-linear-gradient( top, #272727, #181818 );
	background: -webkit-linear-gradient( top, #272727, #181818 );
	background: -o-linear-gradient( top, #272727, #181818 );
	background: -khtml-linear-gradient( top, #272727, #181818 );
	background: -ms-linear-gradient( top, #272727, #181818 );
	background: linear-gradient( top, #272727, #181818 );
}
	.mainNav .submenu a {
		position: relative;
		float: left;
		padding: 8px 0;
		margin: 0 0 0 16px;
		width: 150px;
		color: #666666;
		font-size: 10px;
		text-decoration: none;
		text-shadow: none;
		text-transform: lowercase;
		border: 0 none;
		border-bottom: 1px solid #333333;
	}
		.mainNav .submenu a:hover {
			margin-top: 0;
			color: #ffffff;
			border: 0 none;
			border-bottom: 1px solid #333333;
			background: transparent none no-repeat;
		}

#4 – jQuery touch

Now that we’ve got our pretty menu we need to hide it when users have JavaScript enabled and also add the proper bindings so we’ll have the hide / reveal effect.

To make things easier we just got a CDN copy of jQuery so we don’t even need to download it (more on this technique later!):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

We’ll add our script tag after everything to improve performance. You may be aware that we need to use $(document).ready(); to avoid triggering jQuery before the DOM is actually ready (doh!). But we can also use this great shortcut:

<script>
	$(function(){
		/* your code here! */
	});
</script>

This is pretty much same as $(document).ready(); but it’s far easier to remember, isn’t it?

We’ll hide our submenu. This is pretty easy, this line will do the job:

$(".submenu").hide();

Now, we need to show the submenu when we hover its parent. Since we already selected the submenu item we can just make use of jQuery chaining and go up in the DOM tree with the “parent()” function.

Now, instead of using the hover function, we’ll use the on, and a mouseenter / mouseleave binding since the hover is just a shortcut for this. This is the corrected line to get it working:

$(".submenu").hide().parent().on('mouseenter', function() {
	$this = $(this);
	if ( ! $this.hasClass("hover")) {
		$this.addClass("hover").children(".submenu").stop().fadeIn();
	}
}).on('mouseleave', function() {
	$this = $(this);
	if ( $this.hasClass("hover")) {
		$this.removeClass("hover").children(".submenu").fadeOut();
	}
});

Notice that we’ve made use of caching also, so our performance will be a little bit better than if we called $(this) twice for each block.

[Note: the code in this section for adding jQuery is used for the HTML/CSS demo. For use in WordPress themes it is recommended that you use wp_enqueue_script().]

That’s all!

So, what do you think about it? Do you have a better idea to implement this awesome menu? What about idea for future articles? Don’t be shy and let us know via comments!

View the demo | Download the source code

About the Author:

I’m a WordPress and FrontEnd (HTML5, jQuery, CSS3) specialist from Itajubá, Brasil. I just love writing about obscure topics, doing some cool stuff and helping people out there.

Follow Rochester: Website | Twitter | YouTube channel

This set of textures is free for use in your own personal and/or commercial projects. No attribution is required to use the textures.

Download the textures (12 MB zip file)

In this article we’ll take a quick look at 9 things you can do to stay focused and productive.

1. Work from a To-Do List Each Day

One of the best ways to stay focused and on task is to have a list of specific things that you need to do each day. Without having a to-do list it is easy to get distracted or to dedicate time to things that aren’t important, but with a to-do list you’ll always know exactly what you need to do each day. Most of us don’t like to end the day with things from our to-do list still unchecked, so it serves as motivation to stay on task and to get things done.

2. Eliminate the Easy Tasks from Your To-Do List First

This may be more personal preference than anything, but for me it is one of the most important things I can do to stay focused. Each day will have a few siginifcant tasks that will take up most of the day, and a few smaller tasks that can be done in a matter of a few minutes. When I look at my to-do list and see things crossed off I feel good about my progress and it’s easier to stay focused. When I leave the little things till later my to-do list will look more intimidating all day, and sometimes it can be distracting. I prefer to take care of the easier things early in the day so I can get them off of my list and then I can focus completely on major tasks without distraction of having a to-do list that looks very full.

3. Keep Your Expectations Realistic

There is only so much that you can get done in one day. If you overload your to-do list you will be stressed out all day and you probably won’t do your best quality work because you’ll be feeling rushed. If you keep a smaller number of things on your to-do list you can focus more on doing your best quality of work.

4. Work Ahead of Deadlines Whenever Possible

Working on tight deadlines can hurt your focus in a few different ways. First, if you’re thinking more about the deadline than the details of the project, it can hurt your work. Second, if you have deadlines coming up you’ll have little choice about what you’re going to work on since you’ll need to rush to meet the deadline. When you’re not working with tight deadlines you’ll have more flexibility to choose what you are going to work on each day, allowing you to use your time and attention wherever you want.

You won’t always be able to avoid tight deadlines, but it’s a good habit to work ahead of deadlines whenever possible.

5. Close Out of Unneccesary Programs

Most designers and developers work in a lot of different programs throughout the day. If you have programs open that you are not using it’s easier to get distracted by something that you aren’t expecting. Closing the programs that you’re not using at the time will help to declutter and you’ll eliminate potential distractions before they can become an issue.

6. Turn Off Your Phone

Phones can be a distraction not only when you’re receiving calls. Most people receive and send several text messages each day. By turning your phone off you won’t hear notifications of new text messages, and you won’t pick up your phone to read it. Once you pick up your phone the interenet and apps can also be a distraction. Turning the phone off for a while obviously helps to eliminate these distractions as well.

7. Don’t Try to Multi-Task

Multi-tasking is one of those things that most of us have been programmed to do, and it’s often considered to be a great skill. The problem is that when you are multi-tasking you’re not focusing on any one thing, and your work will typically suffer in all areas.

Rather than trying to do several things at once, focus on one thing at a time and move through your to-do list by checking things off individually. This will help you to get things done faster and with better quality of work.

8. Have a Comfortable, Dedicated Office Space

Your environment has a lot of influence on your focus. If you’re working from home make sure that you have an area that is dedicated to being your work space and nothing else. A private room with a door is best, but if you don’t have the space for an office make sure you at least have a desk and a section of a room for your work space. This work space should be confortable (including a good chair) and preferrably in a quiet area of the house.

9. Take Short Breaks Throughout the Day

Trying to work for too long without any breaks will lead to poor focus. Just taking 5 or 10 minutes to stretch your legs, get some fresh air, or get a drink will help to improve your level of work. Breaks don’t usually need to be long in order to have an impact. If you feel like you are struggling to focus, take a break for a few minutes.

What’s Your Experience?

How do you stay focused throughout the day? If you have tips or advice for our readers please share in the comments.

Theme features include:

• 7 color schemes from which to choose (screenshots of each are shown lower on this page)
• Customizable homepage slider
• Events calendar
• Organization news publication
• Upload your logo, or just use the site name in text

This WordPress theme was created with non-profit organizations in mind, including features that are needed by most organization websites. The homepage slider allows you to promote your programs and services, or attract attention to any initiative. Images in the slider can be linked to any page.

Most organizations have a lot of events going on, and with this theme you can have an effective event calendar. The homepage even displays 5 upcoming events for added exposure. When you set up the events you insert the date and time, and as it passes the event will be automatically removed from your site so you don’t have to remember to delete each event as it occurs.

The theme also includes a custom post type for news announcements, so you can publish press releases or other announcements and have them featured on your website. As with any WordPress-based site, blogging functionality is included. The theme’s home page template includes links to the most recent blog posts.

WordPress’s custom navigation menu feature is used for both the header and footer menus, so you have complete control over the links that are shown in your menus. The header menu supports drop downs.

From the WordPress dashboard you can enter links to your Facebook page and Twitter profile and the footer icons will be linked appropriately. If you don’t have social media profiles, simply leave the URL fields blank and no icons will be displayed.

Scroll down to see the alternate color schemes.

Documentation for the theme is available in this PDF file.

View the theme demo | Download for free

We Recommend BlueHost

If you’re looking for a hosting company, we recommend BlueHost. They offer quality shared hosting and responsive customer service at low prices. The video below shows how to sign up with BlueHost, install WordPress, and upload one of our free themes in a matter of just a few minutes. Read a more detailed explanation of why we recommend BlueHost.

Sign up with BlueHost

Alternate Color Schemes:

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+.

In this post we’ll showcase examples of 21 different bright and colorful websites. Hopfully, seeing these examples will give you some inspiration when you’re considering color schemes in your own work. By seeing what other designers are doing and how they are able to make colorful web designs work, you may get some ideas of your own.

Brooks Shoe Advisor

Adventure World

Global Team Travel

SulaFest

Corona Radiata

Mastec

Hitmo

Anet Design

Belong

S.O.S. Mamute

Trinity Web Tech

Dribbble Draft

Marlin Jackson

Mark Fasel Design

Viget

House

Social Forces

Art4Web

Fuzzco

Daniel Sitek

The New Web Design Guidelines

For more design inspiration please see:

• 50 Awesome Portfolio Websites
• 25 Websites with Outstanding Illustrations
• Showcase of Amazing Websites with Attention to Detail
• 25 Beautiful Non-Profit Websites
• 21 Marketing Agency Websites