Since June 2011, you may have noticed pictures of authors next to search results for their articles. These authors have linked their work to their Google profiles in an effort to attract more clicks – a picture and byline can draw attention towards a page, and can link to other work by that person.

There are obvious potential benefits to a Google authorship profile – a photo and name are eye-catching and will make a website stand out next to other search results, but some have suggested that it isn’t worth it.

Having your name and picture displayed in search results requires setting up an account on Google plus, the search engine’s answer to Facebook. Authorship has been criticised as just one way for the search engine to use its domination to promote Google plus.

Tying your professional design work to your Google profile can make some people uneasy, especially if you use Google plus in a social capacity – mixing your personal and professional life online can be a concern for some people.

However, there are other benefits to having an authorship profile beyond seeing your picture next to search results. As Google gives better rankings to websites linked to Google profiles, authorship can boost your visibility to potential clients. Perhaps most importantly, a Google profile makes your work more personal – if a client can see who is behind a website, they will feel a more personal connection, and may feel more comfortable hiring you.

Your Google profile can also display a wide range of other design projects you have done, in effect an online portfolio.

A Google authorship profile does require work to set up, and a degree of professionalism on your authorship profile, but the advantage of adding a personal touch to your work will make it worth it for many.

How to set up a Google authorship profile

First, you need to set up a Google plus profile at plus.google.com. Fill in your details, including a professional picture and some of your details. For Google to verify you as a legitimate author, your profile must be fleshed out with some detail about you, but edit your privacy settings to make sure that certain private details, such as your telephone number, are not made public. The more active you are on Google plus, the more Google will trust you, resulting in higher search rankings.

When editing your profile, add the websites where your content is hosted to the ‘contributor to’ box. You must then link your website to your Google plus profile, which can be done by providing an email address that links to your website, or by adding some simple code to your website.

Google will then take some time to verify you as the author of the work, but eventually your authorship profile will show up alongside your search listings.

With bounce rate and time-on-site assumed to be the top trump cards in Google’s new algorithm; there is most certainly a push from Google — and subsequently advertisers — for websites to become more user, in addition to search engine, friendly. Read on to find our top ten tips for enhancing the user experience including everything from Search Engine Optimization (SEO) and rich media, to navigation and mobile device optimization.

1. Faster is always better.
It is not a newsflash that speed and load times rule the web. Every second a user has to wait, the more likely they are to leave your site. If you’re experiencing some lag time, try reducing the number of HTTP requests by simplifying the design, using CSS and CSS Sprites, combining images into a single file, and reusing elements — like page headers — which can reload from the cache. You can also create the illusion of speed by placing style sheets in the header. This will allow the header and navigation menus to load first thereby showing progress and pacifying user impatience.

2. Simply site navigation.
The foundation to every webpage is the sitemap and navigation. Clear and concise menus are essential as well as a single page showing all links. Online reading patterns lend themselves to the typical “F” pattern (example below). To ensure that the user can easily interact with your content, keep a relatively short list of menu option down the left side and across the top. Be sure that all navigation info stays above the fold and that the logo links back to the homepage. Intuitive navigation outlasts number of clicks, so go ahead and forget about that 3-click rule. Not to imply that the user will stick out a lengthy path, but ultimately clicks don’t cause user frustration, poorly organized sites do.

3. Embed Rich Media
Tickers, videos, animation and other rich media options have changed the landscape of the web and help keep the user on your site for longer while they interact with more content options. Nowhere is this more valuable than on education, news and entertainment sites. The biggest hurtle to overcome with rich media embeds is software compatibility. Consider using a third-party hosting site like youtube.com and embedding the video directly on your site. This will level the compatibility playing field and remove the server-hosting burden from you.

4. Optimize for Mobile Devices
While designing (or redesigning) your site, the need to factor in mobile devices is pressing. There are several schools of thought regarding site optimization, but the most all-encompassing and user-friendly option is to simply use the same URLs as the standard website. Strip down the site content to only the bare essentials. Simplicity is of the name of this game. Avoid using scripting languages or Flash components, as most devices are not equipped to support them. Keep in mind the small screens and use small graphics or ads and content that are scalable.

5. Bookmarking
Listing your site on social bookmarking websites like Digg can drive quality traffic to your way and bump your page views. It can also have a cascade affect where a user will tag your site for yet another site where yet another user will tag it again, and so on. Bookmarking is a handy tool that is relatively easy and doesn’t require a ton of time to achieve.

6. Utilize Social Media links.
Social media sites have taken over the way users share information with one another. Give viewers an easy way to link content they like from your site to their profiles. Not only will it spread the word, it will also get the attention of like-minded users who will not only click out of curiosity, they will probably spend quality time on your site which will help bolster your chances in the search engine pool.

7. Clearly Identify and Brand.
Brand identity is essential in all forms of media, but is most important on a large and complex website. Be sure the company’s logo or name is clear in the header. Choose, colors, fonts and graphic treatments compliant with brand style guides and reinforce that look at every opportunity. The more comfortable the user is with the style, the more familiar they are with the brand and are more likely to come back time and time again.

8. Search Bars are Essential
The more complex the site, the more essential the search bar . For user ease, stick to the tried and true method with an input field and a “submit” or “go” button located at the top, right of the page. Design the search bar cleanly with the font and color style already established for the overall look. In regards to search fields, less is more. Take Google for instance (see below), their entire brand is built upon the search bar and it remains simple and straightforward.

9. Strategically use Keywords and Titles
Be true to your content. Of late, Search Engine Optimization (SEO) has been all the rage, but don’t sell your digital soul for a few extra clicks. Google is working hard to filter and outsmart spammers who abuse the algorithm. Instead of getting caught up in the hype and fortifying your site with endless keywords, focus on how the user would look for your information and what words they might use. Be strategic in your keyword choices and get to the kernel of the matter to effectively garner the largest audience who will also spend the most time looking through your content.

10 Design. Design. Design.
Place big, attention-grabbing headlines above the fold, but don’t be overly concerned about making a user scroll. If you’ve successfully filled your site with quality content that is organized and clearly designed, scrolling won’t deter a user. The presentation of information requires a designer’s eye to ensure a site that is both aesthetically and functionally sound.

Choosing a great domain name for a website is a big decision whether its for a personal blog or a brand new business.  It has been estimated that over 184 million domains have already been registered so its becoming increasingly difficult to find a great original name.

Doing its best to help on this front is PCNames.com a starkly simple site that helps you search and discover available domain names.

Check availability

Getting great ideas for domain names only to find they have already been registered can get really frustrating. PCNames simple search interface makes the process a lot less time consuming by quickly displaying results as you type  just like Google instant.

Simple color coding on the results means you can see at a glance if your domain is available in a selection of the most popular top level domains( .com, .net., .org, .info, .biz, .us, .mobi, .name).  Red denotes the domain is taken, blue that its for sale and green that its available. If you hover over any of these a pop up appears that displays a screen shot and the price if its for sale.

The site also keeps all you recent domain search history right on this page so you can you don’t end up searching for the same domains over and over.

Related name suggestions

In addition to the search functionality the site also has a selection of handy tools to help you on your quest to find the perfect domain. The domain generator tool is particularly useful,  just enter one or more keywords and the site generates a list of alternative related domain names. Like with the search function the availability of each TLD is also displayed.

In the example below I have searched for design, the tool suggested some available domains such as the designblog.mobi, designnow.us and thedesign.name. Another useful feature is the Bulk Lookup Tool that allows you to easily check the availability of multiple domains at once.

The site also has a selection of useful embeddable widgets, the widgets work just like the the domain search tool on the homepage so you can use these to add domain searching to your website see an example below.

Conclusion

To sum up PCNames has great set of free tools which are definitely worth taking advantage of the next time you are registering a domain. The instant search result saves time while the bulk availability check and domain suggestions are useful additions.

It’s that time of year again. It’s time to start thinking about what gifts to pick up for your family and friends (and maybe even yourself) for the holidays. And if you happen to be buying for a web designer this year, we happen to have 10 awesome holiday gift ideas that web designers will cherish.

1. Adobe Photoshop CS5

Adobe Photoshop CS5

You all knew this was coming first, right? What’s a top 10 list without Adobe Photoshop? With the release of Creative Suite 5, Adobe has boosted Photoshop’s features and delivered more flexibility and design options. And web designers know that a powerful graphic and image editor is essential to be effective at work. With holiday season discounts from Adobe, you can snag a copy of Photoshop CS5 starting around just $600.

2. Apple iPad

Apple iPad

Not only are Apple iPad’s the hottest item since sliced bread, but they’re less than half the cost of a quality laptop. They’re essential to have around if you’re designing for mobile devices, applications and varied device resolutions, and not to mention (we drool over how cool they are). If you really want to make a web designer happy this season, surprise them with an iPad (starting at just $499).

3. SanDisk Ultra® Backup 16GB USB Flash Drive

SanDisk Ultra Backup 16GB USB Flash Drive

SanDisk has introduced the SanDisk Ultra® Backup USB Flash Drive which is the first USB flash drive with a backup button. With three models available: 16GB, 32GB and 64GB, web designers can store lots of files, images, drafts, proposals and more. Buy online from Staples.com starting at $89.99!

4. CSS3 For Web Designers

CSS3 For Web Designers

A Book Apart continues its web design book series ‘…for people who make websites’ with Dan Cederholm’s masterfully written “CSS3 For Web Designers”. With the emergence of new methodologies like HTML5 and CSS3, it’s always important for us designers to study up on the semantics so we can stay ahead of the game. Purchase “CSS3 For Web Designers” as paperback, ebook or a bundle of both.

5. Basecamp

Basecamp | 37Signals.com

Basecamp is a robust project management software solution for managing almost any type of web project. Millions of people already use Basecamp, and it’s the preferred project management tool of several multi-million dollar brands. Don’t have a large organization? That’s okay too. Basecamp starts with a “Small Group” plan that costs only $49/month.

6. Apple Magic Mouse

Apple Magic Mouse

The Apple Magic Mouse is a must-have for Mac-lovers. It’s a wireless, bluetooth-dependent multi-touch mouse that allows for seamless operation. Make sure you have the required hardware and software before buying the Magic Mouse. Details can be found on the Apple website or by clicking the link above.

7. Typekit Portfolio Plan

Typekit Portfolio Plan

Typekit is a really cool web service that allows web designers to use a large library of stylish fonts that were previously unavailable for use on websites. For web designers who have started using CSS3 on a regular basis know that in order to use a large variety of fonts on their projects, they must adhere to license agreements for font usage on the web. Typekit makes the “licensing agreements” a non-issue, allowing designers to stick to what they do best — using great typography. Purchase a “Portfolio” plan for a friend and spend only $49.99/year.

8. The Smashing Book

The Smashing Book

The Smashing Book is a byproduct of Smashing Magazine which is an awesome read for designers. It’s a printed book that covers best practices in modern web design. And as a treat, The Smashing Book also shares some exclusive information about the background of Smashing Magazine. This is a must-have gift for web designers!

9. Custom Laptop Skins

Laptop Skins

Surprise someone with a custom or pre-made laptop skin from Schtickers.com. Schtickers gives you total flexibility; allowing you to add custom graphics, text and backgrounds to their removable and reusable laptop skins. Create a custom laptop skin to fit the dimensions of your specific laptop! Very affordable, thoughtful gift for a web designer.

10. Quality Headphones

Headphones

Last but not least of the great gifts for web designers are a set of quality headphones. Lots of web designers enjoy listening to music while working. However, a set of half-broken headphones that barely work anymore aren’t going to get the job done. Do someone a favor and get them a quality pair of headphones that will last the test of time. The Amazon.com Headphone Department has a great selection. Get shopping!

There are plenty more great gifts for web designers that could have been included in this entry, but I decided to narrow the list down to the top 10. Any web designer would be lucky to receive any of the above. I know I would be. Happy holidays and happy shopping!

As avid computer users we all know how many tedious tasks we have to deal with on a daily basis. However, we tend to ignore an important fact: we’re using a computer. We shouldn’t do any of these tasks by hand. Everything that sounds repeatative should be accomplished by a computer, not by hand. Let’s see how we can achieve this on a Mac Utilizing Automator.

Automator is a utility hidden in every Mac. If you’re a web designer needing more and more time to accomplish your tasks, you should begin to use it now. Automator lets you perform a series of actions on your Mac which can save you a great deal of time.

Automator Workflows

When you create a new workflow in Automator, it will ask you which type of workflow you want to create. The standard workflow is a workflow that can be run inside automator. It’s useful for testing purposes, but you should convert it to something more usable when you’re ready to run it. The application workflow is very interesting because it will convert your workflow to a standalone application.

You’ll be enabled to run it outside Automator, like a normal application. It also supports drag and drop, so if you drag an element on the application icon it will be treated as the application’s input. The service workflow will let you run your workflow using a menu item accessible in the services menu.

This means that you can run it in every external application. The print plugin, ical alarm and image capture plugin are pretty self explanatory and are outside the scope of this article.

Our focus in this case will be on the Folder Action Workflow. Why this is so important? Well, it’s really simple and powerful. You create a folder, assign your workflow to that folder and that folder will be always monitored. Every time you drag an item in that folder, the workflow will be launched. Let’s take a look at our first workflow example to understand how it works:

Simple Unzip Workflow

Let’s start by creating a folder on our desktop and name it Unzip. Then we’re going to create our first workflow in Automator, as a folder action. On the left side we have all our actions and on the right we have our empty workflow. The first thing to do is telling our workflow to which folder it should be connected. Select the Unzip folder from the drop down menu on the top of the workflow view.

Now the workflow is linked to our folder. Let’s describe the scope of our first folder’s action. We want to create an action that unzips an archive and deletes the original zip file. How many times we do this by hand every day? This action will save us a lot of time. The first action that we have to drag in the workflow is “Filter Finder Items”. This is necessary because we want to target only zip files in our directory.

So we can create a rule that checks if the file extension contains zip. Now that we filtered items in the folder we can unzip the archive. We can use the action “Open Finder Items” and the zip file will be automatically opened with the OSX unarchiver.

Now we have the original zip file and the contents of the zip file in our folder. We can delete the original zip file by “Get Folder Contents” targeting zip files and “Move Finder Items to Trash”. To test the workflow just drag a zip file in the Unzip folder. It will be extracted and deleted.

Rename by Pattern

This is another common tasks that we repeat every day. We download a file from the Internet and we have to rename it. We can create an automator workflow to understand the pattern used in the filename and rename it following our personal pattern.

In this case we’ll need a really useful automator action, “Rename Finder Items by Pattern”, that can be downloaded for free. Let’s create a new folder named Rename and add a new folder action linked to this folder.

The first action that we have to use is “Get Folder Contents”, which will retrieve all the elements in the folder. Now we can add the “Rename Finder Items by Pattern” previously downloaded. This action works using pattern matching. In this case we have files that are named filename-otherstuffs.txt. We want to rename our files just using the filename part and removing the dash and the words after the dash.

The action that we’re using takes a pattern as input. In this case we have to use the *-* pattern. This means that we’ll have a different variable for every asterisk. Variables are named $1, $2, etc. In this case we’ll have a $1 variable that will be “filename” and a $2 variable that will be “otherstuffs”. So in the field “Replace With” we can just use $1. Every file having this pattern that we’ll drag in the folder will be renamed to filename.txt.

Image Size and Save for Web

This is the most important action for a web designer. We receive images from a client, we have to resize them and save for web. Then we’ll be able to use these images in our web project.

Let’s do it automatically. First of all, let’s download a great actions collection. In this collection there’s a great “Save for web” action that will be perfect for our workflow. Let’s start by filtering finder items in our folder, selecting only jpg images. We have to add another important rule to our filtering action: select images that have not been already resized.

This is important because if we don’t add it, our workflow will run in a loop, resizing the image infinitely. Now we can add the “Save for web” action previously downloaded.

You can see in the picture how we configured it. It’s really simple, but the important thing in our case is to “Delete original files”, to prevent looping. The we have to add the action “Add text to finder item names” using the _resized suffix. When you drag an image in the folder, the image will be resized to 800 pixels, saved for web and renamed with a _resized suffix.

Conclusion

As you can see, it’s very simple to create and use Automator workflows to save time. The previous examples show you all the basic knowledge to create your own workflow as a folder action. There’s just one important thing you need to know before working in Automator: it doesn’t have an undo function.

Therefore if you create an automator action that moves all your hard disk to trash and you click run, you can’t go back. This is virtually the only drawback of this wonderful utility. Always make sure you test your workflows inside a sandbox folder and on dummy files. When you’re absolutely sure that everything is functioning as needed, you can then use it in the finder.

In the freelancing industry, we often find ourselves at the top with so many potential clients requesting us rather than the other way around. However, there is also many times where we find ourselves in a struggle to pay our bills at the end of the month. In such situations, we usually tend to contract with anyone who we can nab. With that all said, we discuss several key points or strategies to be able to quickly find contracts and begin working again.

Partner Up

The freelancing industry is definitely a stressful option in the web industry that we choose to take upon. This includes every ups and downs that we have to go through, and every night and weekend we spend up working. A great way to better divide up work is to collaborate with other businesses or freelancers. By using such a collaboration method, you can monetize on many benefits such as better work security, easier workloads, and others.

First and foremost, when you collaborate or partner up with others, you increase the chances of finding work during the times of need. The reason for this is, the freelancer or business you may be partnered up with might have quite a few clients they do not have time to work with, and transfer them to you. The same applies when you are at the peak of your freelancing career where you have way to many client requests than you can handle, you can easily transfer them to your partner who can help take the load off for you until you finish up some projects. This method also relates to a saying “you scratch my back, I scratch yours”.

Secondly, by collaborating or partnering up with someone or an entity, you gain more exposure, decreasing the chances of a fall for you and your partner. Which means you can feel more secure with your freelancing career than any other sole freelancer out there.

Consider your partner as your backup plan, when your primary plan fails, you have something to fall back upon and vice versa.

Contact Former Clients

A quick and easy way to gain work again is to contact former clientele who you have done work for once before, and offer them a limited time discount that they cannot resist. This usually tends to work, as former clientele know they cannot get work done for as inexpensive as you are offering them with the discount, and they usually tend to find work for you to do for them. Even if your former clientele offer you small paying jobs, accepting them is better than declining them and not receiving any income.

Freelance Job Boards

This option has to be one of the more obvious routes to choose as we often resort to freelance job boards to find new jobs and clientele. However, because the freelance job board you may often frequent to find work may not be sufficing for a certain month, it is always good to branch out and locate other freelance job boards similar to those you use.

This helps expand on your portfolio as well as increase your chances to locating clientele quicker, and often, when you search for new freelance job boards, you may find a job board that suits you better than the previous ones you may have frequented.

Refer a Friend Program

An addition to contacting former clientele, you can also setup a refer a friend program where former clientele can refer clientele to you and receive a discount on work they need done next. This often helps increase your clientele base rather quickly, and causes a bit of a chain reaction or domino affect client after client. It is also a great method to be using whether you are in a “drought” or not as it helps decreases the chances of falling again.

Local Business Listings

When in need, it is a great opportunity to search through your local classified job boards to find locals in your area who may need some freelance work done. This not only helps boost your image within your local community, but it often guarantees quick income as you can work with the client directly without hassle.

Do note however, many may condone this method of finding quick clientele, as often many seem to find themselves with clientele that they want to get rid of, as they may have been a nuisance. Therefore, it is a great resource to tackle, but leaving it as one of your last options could be more ideal for you, depending on your situation.

Advertising

One unique method to get yourself known to the world is to use advertising networks on sites such as Google, LinkedIn, StumbleUpon, and others. This helps provide you quick exposure to the global market you may have not touched. It also additionally allows you to focus on other mediums in search for clientele while clientele come to you via this method.

If you have heard of the saying “two birds one stone”, it exactly applies to this method, as it is running in the background for you automatically while you do something else to double up on the effort of reaching potential clientele. However, do not just solely rely on this medium or method to reach clientele quickly, as money is constantly being put out to a medium that cannot relatively guarantee that you will receive clientele from, so it is a costly hit or miss.

To conclude, when you are in a time of need, use creative methods that work for you, and try out new methods to receive clientele when you have contracts and projects going. This allows you to experiment with many different great methods at no cost or affect to you or your business. Additionally, always work on new methods and apply them in times you are not desperately in need, so that you can constantly keep clientele moving in, rather than fall hard when times become tough. This is usually a great idea to put together, as a backup plan is better than no plan at all.

In this post we’ll analyze a variety of useful techniques that will allow us to tone map an image for future print or web design projects.

You probably have your own way to color correct and alter the tone of an image in your preferred application, but there’s a huge reason why you should know more about gradient mapping: it’s cross compatible between applications and operating systems. If you understand the basic principle, you can use it in Photoshop, Gimp, Pixelmator and all other applications on Mac OSX, Windows or Linux. It’s a powerful technique also in video editing systems and generally where you want to alter the colors of an image.

Our Original Image

This is the image that we’ll use for our gradient map toning examples. One thing is important: if you want to use the gradient map tool, and generally any tool that implies altering colors, avoid tweaking the exposure and brightness/contrast of the original image. Try to shoot the image as best as you can because you’ll be able to work on real pixel information. If you alter the exposure after the shooting a whole lot, you’ll loose a lot of details that will compromise the toning.

As you can see, it’s a simple shooting at Park Guell, in Barcelona, on a rainy day. Before you begin to go into Photoshop, let’s analyze the image. The important thing here is to understand three color zones that will make our tone mapping a breeze. You have to focus on highlights (areas that are brighter, getting to white), shadows (areas that are darker, getting to black) and midtones (areas that are between brighter and darker areas, getting to gray). It’s important to train the eye to understand differences between these areas so that you can target them easily with the gradient map tool.

The gradient map tool works in a really simple way: you choose a gradient and Photoshop will map the image with the gradient. The left color of the gradient will be mapped to shadows, the right color will be mapped to highlights and the middle area of the gradient will be mapped to midtones.

Let’s start with a self explanatory example.

Black & White Tone Mapping

Let’s add a gradient map adjustment layer in Photoshop, by clicking on the little circle icon in the bottom area of the layers panel, and selecting “Gradient Map”. This action will automatically add a Gradient Map Adjustment Layer with a predefined black to white gradient. As you can see, you get a black and white conversion of your image, since highlights are mapped with white and shadows are mapped with black. It’s a pretty boring black and white image. But let’s add a white color stop in the middle of the gradient and assign black to the left and right stops.

Now the effect is extreme, but useful to understand how the gradient map works. As you can see the subject of the photo is highlighted. Why? Because we pushed to the white all the midtones in the image, and since the monument in the original photo was having a lot of midtones areas, it’s entirely white now. The sky is black because the areas that in the original image were near white have been mapped to black. This is the power of the gradient tool. It’s intuitive and after a little bit practice you’ll be able to achieve a really professional color correction. The HEX color codes for this effect are #000000 to #ffffff to #000000.

X-Ray Tone Mapping

Now we can start experimenting with some colored gradients to give the image a distinctive and creative look. Obtaining a pseudo x-ray style with a gradient map is very simple. Just add a new gradient map layer with a gradient that starts at #020144 and ends at #95a2ce. With this gradient the image turned to blue, but you’re not actually seeing the x-ray effect. The secret is in the “reverse” option. By checking this option you reflect your gradient, and the tone mapping is reversed so dark areas will turn to light blue and bright areas will turn to dark blue. The final result is an x-ray color corrected image.

Warm Tone Mapping

In this section we’ll take the gradient map tool to another level by introducing the overlay blend mode and the opacity adjustment. As you can see from the image, the result is fairly better that previous effects. Let’s start from the gradient. In this case is a simple two stops gradient, from #ff0015 to #fff800. If you apply it before the effect you will soften the image and you’ll loose a lot of details.

The trick is, whenever you see that the gradient map is too visible, select the overlay blend mode for the current gradient map layer. This way the layer will be applied with the low contrast/high contrast method and the result will be more real and consistent. If it’s still too heavy, just decrease the opacity a bit (in this particular case 70% is fine) and the image will be warmed.

Cold Tone Mapping

As you can see from the image, in this case we have to choose some cold colors to achieve the opposite effect. A cold image is an image that has a color space defined by cold blue colors. In this particular case a simple two stops gradient will not work since the midtones of the monument would be too dark.

After experimenting with colors and stops, a good solution could be a gradient from #004170 to #9dd4fb to #bde9fa, with a middle color stop at 28%. This gradient will cool down the sky and the ceramic parts of the monument, while lighting up dark areas. The final result is a more dramatic image, that presents itself better than the original image due to the weather conditions of that particular rainy day.

As you may have noticed, from time-to-time we like to highlight to our readers some of the best freely available and freshest possible icon-sets. We really do love them, and we are sure you will love the selection we have for you today. You will find a mixed bag of social icons, an almost complete e-commerce set, and, finally, a flag icon-set that consists of a monumentally huge 2400 icons.

Discons

The Discons icon set, designed by Dave McNally, consists of 95 icons and all are 24px circles. Each icon has one unified shape – the glyph was combined with the background and knocked out of the shape. This means it’s easier for you to alter colours as there’s only one shape for each icon.
Discons

Glossy E-Commerce Icon Set

Ecommerce Glossy has been created by the folks at Iconshock for Hongkiat readers. It consists of 21 different e-commerce related icons in total and comes in these formats: AI, PSD and PNG.
Glossy E-Commerce Icon Set

2400 Flag Icon Set

Liquidcity has created a flag icon for every major country in the world, plus a few more. They've created them in several sizes so they'll look great no matter where you use them – 16×16, 24×24, 32×32, 48×48, and 64×64. They also come in 2 variants – as flat and standard, and the other with a lovely glossy finish.
2400 Flag Icon Set

By Paul Andrew (Speckyboyand speckyboy@twitter).

You can be the best web designer in the industry, but if you do not know how to properly lay things out and create a great interface for mobile devices, you will fail in such a task. With that said, designing for mobile devices is quite different from designing for mainstream devices such as your PC as screen sizes and resolutions play a big part in how much space you can utilize, and how it performs.

Therefore, we cover eight useful interface design techniques for mobile devices that will help you get started on your quest for designing for mobile platforms.

Layout, Layout, Layout

The layout of the design is what sums it up for accessibility, usability, and overall readability for users on mobile devices. First and foremost, the design needs to be flexible across the mobile devices as all screen sizes and resolutions vary greatly between each and every mobile device.

What that means is, the content needs to scale in size as the screen size and resolution increases or decreases depending upon each device. The layout needs to be touch and key capable for users with touch screens, and for users without them. To go into more depth, let us dive into each of these aspects individually.

Order and Size

These are two major keys to a good user interface for mobile devices. When we mention order, this is referring to the order or sequence in which each element within design is laid out. For example, the order of buttons, text boxes, links, etc. This is actually very important for many mobile platforms for the way they react with your design. Therefore, assure the order of the elements within the design or layout are ordered in the way intended for use, and skip out on the fancy ordering techniques you may have for web design on mainstream platforms.

The size of content is also a big deal for many mobile platforms. Make sure the links and buttons are of fair size for those who have touch screen devices as each person’s finger varies in size, a good-sized button will help make it easier for all of your users to navigate about. You need to remember that the small link sizes or button sizes you make for normal website designs for mice and keyboards is a lot different than actually using your finger or a keypad to navigate around, so assure to cope for the differences.

Hierarchy of Importance

On a mobile device, screen space is a limited resource and thus you need to use it wisely. With that said, you need to eliminate clutter as much as possible, and one way to do this is to set your content in hierarchy format. Set content apart by playing around with the font size, weight, color, and the likes. You want the content to speak for itself rather than describe it before it runs. By doing so, you are eliminating unneeded elements and clutter from the layout and or design and increasing on needed space and using the space for quality content.

Lightweight

You need to remember that when users are visiting your website from a mobile device, they are visiting the website to view the content, and not the fancy layout you may have put together for non-mobile devices. Therefore, you need to eliminate all the unneeded fancies and stick to a lightweight layout that clearly presents content in an organized fashion.To put it into perspective, imagine yourself in a hurry trying to load a website and run to a meeting.

As the website is loading all sorts of fancies need to load, you need to scroll through a long header, and the likes. When you are in a hurry to obtain information before dashing to a meeting, you do not care for these fancies, you just want the information you were looking for. Similarly, users who visit websites on mobile devices are also after the content, and not the fancies you may surround it by.

Important Content

Your website can consist of a whole genre of goodies; however, before bringing everything to the mobile platform via the web, you need to eliminate some of this content, to make the website load quicker. Therefore, only port over essentials that make up your website and what your users are mainly visiting your website for.

Offer a Simple Navigation

Many mobile devices and platforms do not offer a browser with too many navigational features such as a back button. Therefore it is a good idea to offer these essentials in a simplistic form within your website’s mobile version for easier navigation, but do not over do it as it can slow down the loading time significantly, and effect vital screen space.

Do Not Use Tables

Do not use tables for your mobile website designs as the main structure for your design. They often do not look or work very well with many mobile platforms. Therefore, the best option to getting your website’s mobile version working and looking well across many mobile platforms is to utilize the basics of CSS to get the design styled.

Platform Detections

One great way to making the most out of your website’s mobile version is to detect different platforms and offer different versions of the website for them. For example, the iPhone platform is very flexible in terms of design capabilities that you can provide versus other platforms.

Therefore, if you want to make the most out of different platforms for your users, detecting their platforms and providing different content and capabilities for them is a great idea. Additionally, this also helps make your fallback mobile website version a lot simpler with less content to assure it can work on older mobile devices or platforms as well.

Overall, you need to understand the mobile devices limitations before being able to create and develop around them. This helps greatly to better understand the mobile platform and how your website’s mobile version may appear across these multiple platforms. You can also test your website’s mobile version or versions using simulators and or emulators sometimes provided by the platform developers.

Logos have always been an integral part of a company. In fact, many consumers mistakenly assume that a company’s logo is their brand. Branding is a huge marketing movement right now and the logo is only a fraction of what makes a company’s brand. However, to the ordinary customer a logo speaks volumes. It is a first, and sometimes last, impression. It is the single, mainstream representation of what you do and you will be judged by it. Therefore, it is important to spend time, effort and money to be certain that your logo does not suck. Here are ways to design a sucky logo:

Amateurism

A common mistake in logo design is creating something that looks cheap or unprofessional. If you are using clip art or stock, it will send the message that you are not original or unique. If the images are blurry or distorted because you are using the wrong software or file format, people will be put off by your logo. Once they are put off by your logo, they will judge your company by their first impression. Not all logos designed by amateurs will look poorly done, but it is imperative to show your new logo off and get valuable feedback on its quality before finalizing it.

Mistaken Symbolism

(This symbol could easily be mistaken for a crop circle or alien hieroglyph)

A logo is your company’s first elevator speech. It is the first attempt at marketing. What goes into your logo matters. Sometimes your logo could showcase something inappropriate and you not realize it. It is best to show it around to trusted individuals to see if they get an interpretation you were not expecting. Optical illusions can be tricky and people can see different things. Incorporating people or stick people images? Pay close attention to position and placement to avoid being inappropriate. If people are able to locate something ‘dirty’ or sexual in nature anywhere in your logo if it is not supposed to be there – then you need to go back to the drawing board. The same is true for showing your product in use in your logo. This can backfire when perception and customer impressions get involved.

It is just as important to think about the wording of your logo as there are many phrases or words that could have double meanings. Sausage can be sexual if used in an improper context so unless you own a sausage company it is best to avoid it. Same for names like Johnson, Peter, and John. Be cautious if incorporating words that can be different things.

Sketchy

It is always great to start off with a hand drawn design, but when it is time to go to print the logo needs to look more professional. Hand drawn artwork can be cute and quaint, but a mainstream logo needs to be able to compete and your competition is most likely not using a cute design.

Spacing

If you are going to use multiple words without proper spacing, you better be certain the words cannot be misinterpreted. A popular example of this is using Kidsexchange instead of Kids Exchange. This method can be used effectively like in Petsmart where either Pet Smart or Pets Mart are both appropriate. Be certain to really pay attention to your wording if you intend to omit spacing.

Being Too Personal

Inside jokes and personality quirks that are unrelated to your business should be left out of your logo. If you are overweight but are running a bakery, your logo does not necessarily need a fat guy or gal in it. Instead of being a nice representation of you as an owner, people will be reminded that if they eat your goods they will gain weight. This is the opposite of what you want to accomplish. If you like to drink a lot and your friends all call you Lush for fun, this does not mean you need to add this charming bit of your personality into your business brand. Your customers do not need to know that much about you in order to spend money on your products or services.

Multicultural

This one can get tricky because no one is an expert in all cultures. However, something that seems perfectly appropriate to you may be majorly offense to another culture. If you have quite a few Indian customers, it is not a good idea to advertise cow slaughter or to even poke fun at cattle. The cow is sacred in India and this will run your Indian customers away. If you want to ensure you do no offend anyone accidently, ask people of various cultures what they think of your logo. You never know when something fairly innocent to you will send another family running in he opposite direction.