Design daily news » How-to & tutorials

How to convince your clients of the importance of white space

Mirko — Mon, 06 Feb 2012 23:31:11 +0000

This is a recurring issue for designers around the globe. No matter if you are a graphic or web designer, you will sooner or later run into a client that finds the layout of your design too “empty”. This is a quite natural reaction for a non-designer. I remember in graphic design school, most students would add more elements in their layouts than needed, or they would make these elements bigger because they were afraid of too much white space.

As a designer, you should probably already know that white space helps a lot to create more elegant designs, separate elements better from one another, and allow to focus and make things more readable. You client doesn’t know all that, so the best way to teach him is to explain him with examples that ring a bell for him. If you know your client well, you may find one of these examples fitting, who knows?

Food

This is the first example that I ever gave to one of my clients, maybe as an european I’m a bit too concerned with the presentation of food. Tell your client that he should remember the last time he went to a high-end restaurant. What did he see? A plate full of food like in a school cantine? Obviously not. What he saw was some food delicately dropped on the plate, with some color arrangements and… a lot of white space!

The white space in that case, just like for graphic design, helps to create a layout with the food, putting a strong emphasis on the meal.

Use of white space? Check. Looking yummy? Double check. Image by William Schmitt on Flickr.

Gardening

Gardening is a bit different, you cannot tell your client to just think about a garden, because many gardens are full of flowers and look beautiful that way. In that case, you will need to give him the japanese zen gardens as example. These gardens are very minimal, and the position of every rock or plant is studied to create a calm atmosphere.

A zen garden. Notice the white space? Image by Tess on Flickr.

First class vs second class

Travelling in 1st class from time to time is a great way to understand the importance of white space, although in this specific example talking about empty space would be more appropriate. Nevertheless, travelling in 1st class is much more expensive mainly for one reason: you have more room for your legs or for reading your newspaper. That might ring a bell to your client and help him understand how a design can become more comfortable if you allow more white space to fit in.

Second class seats in an airplane. Image by Vik Cuban on Flickr.

First class seats, notice a difference? Image by S. Yume on Flickr.

Where is Charly?

Remember that guy with the white and red stripes? Finding him in a double-page layout was often a pain in the ass because the illustrator drew tons of other little characters with features similar to Charly.

Try to explain your client that his logo might become a bit like Charly if it is layed out in the middle of 50 other pictures and two tons of text. Trust me no client wants his logo to go unnoticed.

Where the hell is Charly? Not in the white space for sure.

Famous ads

Last but not least, you can use some famous ads to make your point. Try to find examples in your client’s industry. For example, if you work for a garage you can take some advertising made for Volkswagen, Mercedes or Mini Cooper. Seeing that succesful brands are not afraid of white space should assure your client that he can get away with it.

Following are a few examples of car advertising making good use of white space.

How to take charge of clients who want free work

Mirko — Fri, 03 Feb 2012 00:46:25 +0000

When you are conducting your own business there will become a time when a person feels you should do certain work for them and not get paid. Relatives and ‘friends’ are notorious for this and it is not uncommon for others who simply feel they are close enough to you to enable them to extract the same ‘favours.’ There are also others who damn well have no intentions of paying for anything unless they are somehow forced into doing so.

How you handle your friends and relatives is up to you but there is no way a virtual stranger should have any work done for them and not expect to have to pay at the finish. No business can sustain giving away free products or services for too long and if you want to be successful you too must ensure that your efforts are rewarded. Why? There will be a cost involved in running your business and in order to survive you will need to make a profit over and above that cost. It is really that simple.

What is not so simple however is how to get a serial bad payer to cough up as many play on the fact you will eventually give up asking for compensation and they will then have got what they wanted.

There are some basic rules about lowering the risks of not getting paid and if you cover all these bases you may avoid building up too large a list of debtors. Debtors than can put you out of business, even when, on paper, your enterprise looks quite sound.

Rule Number One

Be upfront right form the beginning. Don’t undertake any work unless you have an agreement in place of how and when you are to be paid for the work you are about to embark on. This need not have to be a long winded policy statement full of small print and traps. It can be quite brief and straight to the point. The main thing being that you both know where each other stands before you you get started.

Rule Number Two

Insist on part payment as a show of goodwill. If you are fortunate enough to be in a business where you can insist on payment before you start any work you will be very lucky. If this is not possible try to get a deposit paid. By doing this it indicates the client can and will pay when required. It is not always possible but if you are able to be strict in this area right from the beginning you can save a lot of future heartache.

Rule Number Three

Hold back on delivery. When you have finished what you have been requested to do and it is all ready to be passed over, have a policy whereby you will only send the product once you have received payment. Once again, when you are first starting out this might be hard, but give it a go and you could be surprised how many people these days are willing to pay in this way.

Rule Number Four

Don’t be too willing to offer credit. There may be a situation where giving credit can be beneficial but this is not to be treated as being normal. Only give credit if you are getting something in return but under normal business circumstances you should be able to be paid before you hand your finished work over. If you are dealing with other business people they will all understand this and if it is an individual you are dealing with there is no reason why you should have to carry them financially. They should have access to their own banks and credit cards to pay when they have to. If they can’t do this it could indicate they are a bad risk.

Rule Number Five

Readjust your attitude to monthly billing. It is still commonplace to bill many clients at the end of each month but in this fast moving modern world you should not need to adhere to such protocols any longer. Much work can be undertaken in a month and a lot of money can pile up during that time. Unless your business is such that monthly billing is desirable, such as when you produce a large number of small products to the one customer, it is not generally to your advantage. If your client in not going to promise ongoing business on a regular basis there is no reason why that client can not pay as soon as the product is finished.

Rule Number Six

You have got caught out and your client is not paying. It will happen, have no doubt about it, you won’t be able to escape the odd debtor but when it does occur don’t pussyfoot around. Before the end of the month send out a demand for your money. If the month comes around and no payment has been received call him or her by phone and ask if there is any reason why their account with you can not be settled. At this stage you can make fresh but firm new conditions and if this is not complied with send out a debtor notice. If the second month comes around and no payment has been received don’t hesitate to put the account in the hands of a debt collector.

There are many ways people try to recover money owed to them for services and products delivered. Don’t get yourself too involved in these tricks. Keep everything you do professional and don’t waste time chasing money. You are far better off making it. Leave the chasing to the experts, even if it costs you something in the process. Eventually you will be able to add this cost to the prices you charge.

About the author: Kristy is a freelance designer and writer for Life Insurance Finder where she helps other freelance designers compare income protection insurance policies.

A guide to setup your freelance business

Mirko — Wed, 02 Nov 2011 02:50:53 +0000

So you decided that you’ll take a big step and start freelancing? Great idea! However, there is a lot you’ll have to learn if you want to be successful, I have gone myself through a lot of trial and error before getting a comfortable income, and I still make many mistakes. To help you out a little, I have written a little guide of things to consider before starting your own freelance business.

Where will you work from?

This is the first choice you’ll have to make, will you work from home, share a studio or rent your own? Each of these solutions has its ups and downs.

Setting your freelance business at home

The advantages of such a solutions are quite obvious: it’s cheaper, you don’t need to commute and to get dressed for work, you also don’t have to wake up too early if you are a night owl, no more nine to five for you.

This said, I’m not sure if the advantages of having your freelance business at home outweigh the disadvantages. For example, it is quite hard to have customers coming over. It is also hard to stay disciplined and to keep a normal social life, which is bad for networking.

Share a studio with other freelancers

This is probably the solution I would chose if I were to restart. Sharing a studio is a great solution because it’s not too expensive, gives you a working environment with people who can give you feedback. The best is probably to work with other freelancers in complementary fields, if you are a designer you can find a programmer, a writer an illustrator,…

On the other hand, you have limited space and it can be noisy. If somebody wants to move or bankrupts you need to replace that person.

Have your own studio

This is the most expensive solution, but it can be good if you plan to meet your clients at your studio regularly. You can focus better in such a place, because nobody will talk to you while you are trying to concentrate. On the other hand it can feel a bit lonely.

Get the right material to get the job done

A lot of the design work happens in your imagination, that where most of your creativity comes from. However, good material is crucial in making these ideas becoming real.

Mac or PC?

No, I will not start trolling my blog readers with such a debate, just go with whatever you feel comfortable with. Most designers use Macs, so file exchange can be made a bit easier if you also have one (for example for fonts). Here are a few suggestions I’d make to chose a computer for a freelance business.

27 inches iMac

A big screen increases your productivity, so this iMac should be a good pick. It also avoids having a PC tower bothering you, which is always good, as well as an awesome design. The downside? It’s more expensive than an equivalent PC, and if anything breaks and you must send it to Apple support, you have to send the whole thing.

See more on Amazon

Sony VAIO VPC-L22

This 24 inches PC is powerful and comes with great hardware as well as a space-saving design.

See more on Amazon

These are of course only two choices among many computers that could be suitable for your freelance business. If you are considering buying a laptop, we already have an article that lists the best laptops for designers. For mouses, we already wrote about the best mice for designers.

Chose a good printer

First, let me tell you a sad truth. When you’ll buy a printer, no matter how well you chose you will be tricked into spending insane amounts of money on ink. If you are a graphic design, I suggest that you invest in an A3 format printer. Try to trust brands that have a reputation for consuming less inks and not breaking after 3 weeks.

Brother MFC-5890CN

If you don’t need a too high-end scanner or printer, you can also consider buying one of those all-in-one printers. It is both space and money saving.

Epson WorkForce 840 Color Ink Jet

Canon PIXMA MG8120

Find the right camera

If you are freelancing, no matter if you are a graphic designer or a web designer, some of your clients will be small companies who have no budget to spend on a professional photographer. Some would see this as an annoyance, but you should see it as an opportunity to learn more about photography and take that job. For the task you’ll need a decent camera, we already covered the topic on Designer Daily: 8 cameras to consider if you are a freelance designer.

Canon EOS 5D Mark II, heavily recommended by our readers.

Get yourself a decent mouse

You will spend most of your days holding on a mouse, so make sure that you are using a comfortable, accurate, and professional one. Once again, we did a round-up post on the best mice for designer: What is the best mouse for a designer?

The Logitech Wireless Performance Mouse MX is hands-down my favorite mouse for design work.

Get yourself a website

Don’t even dream about it, you will not get most of your work from the Internet, or at least not before a long time. This said, a strong online presence is a must if you plan to setup a serious freelance business.

Your portfolio

Before anything else, you should have your own portfolio, on your own domain name. Think carefuly before chosing your domaine name, there is nothing wrong with using your own name, at least you can be sure (or almost) that it will not change. For your portfolio, make sure to chose the best way to present your work with images, and make sure to be easy to contact. There are many articles online to help you build your design portfolio the right way:

How to build your website

If you have never built a website, you will need either to learn some new skills or to hire someone to do it for you.

Find a good web host

Don’t aim too high, if you just need to host your portfolio you won’t need an expensive host. Some cheap and reliable hosts like Dreamhost should do the trick. If you want to make a little money on the site by hosting your clients’ websites, go for a reseller hosting plan.

Code it or use a good CMS

If you are familiar with HTML and CSS, you can build your website from scratch and code it to your liking. Doing so would create a rather static website, and you might miss on some more advanced functionalities (or will have to build them yourself).

For a CMS, I recommend using WordPress, Drupal or Concrete5. All those are quite simple to install, customize and update. If you don’t know anything about installing those, you can always try to use a service that installs WordPress for you for free.

Design portfolio networks

There are plenty of networks that will host your portfolio and promote it if your work is popular. These portfolio networks will not substitute for your personal portfolio, but they are a great way to get more exposure for your work, get back links and network with other designers. These websites are also a place where bloggers head to find great designers (I know something about this).

Some of the popular portfolio community sites are:

Should you start a blog?

As a blogger whose freelance business benefited a lot from blogging, I would recommend blogging to freelance designers. However bloggin is not for everyone, you may not be able to make some time for it or want to blog, then don’t. If you want to try blogging, the benefits can be an opportunity to gain exposure, position yourself as an expert, and eventually to make money.

Prepare your marketing material

Promoting your freelance business online is a very good idea, but it will not be enough to market yourself properly in real life. For that, you will need some printed marketing material as well.

Business cards

Getting a business card is a must, you will have to learn to distribute it wisely every time you get the chance to meet new people and network. To create a good and memorable business card, take a look at these articles, tutorials, and inspiration:

Letterheads

You letterhead and envelope design are not really part of your marketing, but they are important in you branding effort. If you don’t have a letterhead, it is a clear sign of lack of professionalism that your clients will quickly see. We did share some letterhead inspiration on Designer Daily.

Brochure or printed portfolio

Your online portfolio is a great way to quickly share your work with potential clients and let them see what you can do. However, having a printed version of your portfolio or a brochure that shows some of your work is important. You can find some good examples of that in our old post on brochure design.

Greeting cards

Networking and keepting relationships alive should be at the center of your marketing effort. When you meet someone and want to follow up, your client has an event, or anything else, you should be ready to keep in touch and have a delicate reminder of your freelance business will not hurt.

Sales copy

This is a crucial point that is often ignored by freelance designers. Prepare good copy for landing pages on your website, for proposals you will make, and for eventual advertising you will create for your business.

Testimonials

If your clients are happy with your work, why not let everyone know about it? Getting referrals is a good way to let other people talk about your strengths and about how good of a designer you are. Remember: telling people you are wonderful is good, getting other people to say that about you is better.

Secure your freelance business

One of the downsides of being a freelancer is probably the lack of job security. No customers, no money, it’s as simple as that.

Insure your business

Make sure you have your ass covered in case of unexpected trouble, nobody will cover it for you. I cannot go into details here since insurances work differently in many countries, so you should do some searching by yourself. The types of insurances you should get, at least, are: health insurance, accident insurance, business insurance (to get covered if everything burns), gain-loss insurance (if you cannot work, they’ll provide a temporary income to compensate), and of course a life insurance.

Get an inverter

Unless you are still working like 20 years ago, it’s likely that you are using a computer, a printer and other electronic material. This is your main working material, so you should try to avoid getting it broken. An inverted will help to protect your computer against power surges. You can buy an inverter on Amazon.

Organize your backups

Make yourself a good backup strategy. You should not rely solely on an external hard drive for your backups, try to also maintain online backups (try Dropbox) and keep all your documents save in at least two places.

Get a fire proof cabinet

Yup! This might sound like paranoid advice, but if you want to keept your files in case of disaster in your home or office, it’s the best thing you can do. You can get some not too expensive fire-proof file cabinet on Amazon like this one, or try to look for second-hand ones.

Software you’ll need

Pretty much all the professional work will be based on the computer, so your machine should be equiped with the best software for the work.

Graphic design software

For graphic design, most freelancers use the same tools: the Adobe Creative Suite. In this suite you get the basic tools: Photoshop for image editing, Illustrator for vector drawing, InDesign for layouts, Acrobat for collaboration,…

You can also try to take the Open Source route by working with for image editing, InkScape for vector drawing and Scribus for layouts. It is not as performant yet, but these are also great tools.

Web design software

For web design, the tools you’ll use will depend on whether you code yourself or not. For non-coders, you could use the software of… Adobe once again. Dreamweaver or Flash are decent tools. Other tools if you don’t want to code are Kompozer or Aptana.

If you code websites yourself, you can work with Notepad++, jEdit or Coda for your coding needs. In terms of CMSs, I suggest using Concrete5, WordPress or Drupal, all Open Source. Of course, there are also many Firefox extensions you can use to improve your web design workflow.

Management software

As a freelancer, you will also have to setup a good workflow to make sure you don’t waste time on managing the business side of freelancing. Here are a few suggestions of software that will help you.

Billing software

To save yourself some time, I suggest that you get a workflow for billing your clients and keep some accounting. I’d say that Freshbooks is perfect for that.

Productivity software

As a freelancers, you’ll have no manager to tell you what to do and push you, you’ll have to push yoursel. For that, I have found that writing down your tasks in the form of to-do list is an awesome way. There are many softwares for keeping to-do lists, but I can strongly suggest using Remember the Milk.

Online collaboration tools for freelancers

With the help of the internet, you can build your own team anywhere. Even better, your team members may be in different parts of the world and yet communicating with the help of online collaboration tools.

10 problems you can solve with these Magento tips

Mirko — Tue, 09 Aug 2011 02:00:50 +0000

Setting up an e-commerce website with Magento is not too complicated, the install and global configuration are pretty easy and shouldn’t cause too many problems. For more advanced configuration and template tweaks, things can get a bit more hectic, but with the following Magento tips it should already get a little easier.

1. Add a custom “add to cart” button on CMS pages

Sometimes you’ll want to show a different presentation of your products or introduce it on a CMS page for some reason. If you want to do that it’s actually not so complicated, in your page editor, just add the following HTML code where you want it to appear in the page.

Save the page and refresh the cache. Now if you open the page in you should be able to see “Buy It Now” button. When clicked it adds 1 product with ID=1 to your shopping cart.

To make it a little more advanced, you can add the quantity of products you want to let the customers add, in that case use this code (example for five products).

Source of the tip

2. Add custom comment box to each product on the cart page

If you create more than one website with Magento for clients, you get 90% chances that one of your clients will ask to have a comment box for products on orders. It makes sense, the client could have a specific requirement or question regarding the order or the shipping and a comment box is the best way to let him comment.

This tip is a bit long, so take a look at it on Magento Coder’s website.

3. Hide shopping cart sidebar when it is empty

Having the shopping cart in the sidebar or elsewhere on the page is very useful for your visitors. However, displaying the shopping cart when the user has nothing in it is not necessary. To hide the cart in the sidebar, try the following steps.

1. Open: app/design/frontend/default//template/checkout/cart/sidebar.phtml

2. Look for the following div (normally on line 32):

3. Add this php code right before that opening div tag

$_cartQty1 = $this->getSummaryCount()
if ($_cartQty1 >0):

4. Add this php code to the bottom of the file
endif

Source of this tip

4. Add Facebook Like on a product page in Magento

Having a Facebook button on your product is an easy way to take advantage of the power of Facebook. If a user clicks on it, he shares your page with all his friends.

To add this button, add the following code anywhere in this template file: app/design/frontend/theme/theme/template/catalog/product/view.phtml

5. Add a language pack as a store view

Creating a store view for a language is not too hard, but you shouldn’t have any problem doing it in Magento if you follow these instructions.

1. Download the language pack you need and then unpack it to your Magento install folder. It copies two folders: one goes to app\design\frontend\default\default\locale and the other one to app\locale.

2. Go to System > Configuration in your admin. On the left top corner in Current Configuration Scope dropdown box, you can see Default Config, and Main Store in English store view.

3. Now let’s go and add the French store view. Under the dropdown box, there’s Manage Stores link or you can directly go to System > Manage Stores. Click the Create Store View link on top right, and type these in store view information form:
Store: Main Store
Name: French
Code: french
Status: Enabled
Sort order: 0

4. Save, go back to System > Configuration. In Current Configuration Scope dropdown box, you now see there’s French store view. Click that link.
On Locale options tab on the left, uncheck the “use website” checkbox then change the locale to French (France). Save.
Now you can have your website in French.

6. Tip to hide the price of the product if Magento user is not logged in

Tier pricing is great, but you don’t want to display every price to every customer. To show tiered pricing to logged in visitors only, go to: app/design/frontend/default/default/template/catalog/product/view/tierprices.phtml

On this file, add this PHP function

isLoggedIn()): ?>

The above function should be added before the following piece of code

 0): ?>

Then add this code at the end.

7. Add a contact form to a Magento CMS page

Of all Magento tips, this one solve a very frequent problem. Your clients will want to get a contact form to which they can add bits of text, they’ll also want to have the breadcrumb menu shown for that contact page. Out of the box, the Magento contact form doesn’t allo this, to do it you just have to follow this procedure.

Go to your CMS> Manage Pages interface
Once there, input your HTML as you normally would on any other page
Once you are happy with HTML part, add this lines:


{{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/form.phtml"}}

Source of this Magento tips

8. How to Remove Credit Card Information From Sales Email

Depending on what payment system you allow to your visitors, Magento sends the credit card number openly by email, which is not secured at all. Here is a Magento tip to avoid displaying that info in emails.

1. Open the file app/design/frontend/default/your_theme/template/payment/info/cc.phtml

2. Find the lines that read:

__(’Credit Card Number: xxxx-%s’, $this->htmlEscape($this->getInfo()->getCcLast4())) ?>
__(’Expiration Date: %s/%s’, $this->htmlEscape($this->getCcExpMonth()), $this->htmlEscape($this->getInfo()->getCcExpYear())) ?>

3. Comment this code out, so it looks like this:

__(’Credit Card Number: xxxx-%s’, $this->htmlEscape($this->getInfo()->getCcLast4())) ?>
__(’Expiration Date: %s/%s’, $this->htmlEscape($this->getCcExpMonth()), $this->htmlEscape($this->getInfo()->getCcExpYear())) ?>–>

4. Save the file.

Source of this tip

9. Debug your layout in Magento

Your layout files and templates are not showing up on front? You can see what’s going on with your layouts using Mage::log() method in your controller. The code below would log loaded layout handles and compiled layout update string into var/log/layout.log file.

Here is how to enable the debug mode in your index.php file.

public function testAction()
{
$this->loadLayout();
// …
//Somewhere within controller action after loadLayout() was called
//The code below logs loaded layout handles to “var/log/layout.log” file
Mage::log(
$this->getLayout()->getUpdate()->getHandles(),
null,
‘layout.log’
);
//The code below logs merged layout to “var/log/layout.log” file
Mage::log(
$this->getLayout()->getUpdate()->asString(),
null,
‘layout.log’
);
}

10. Display a product’s category name

When on a product page in Magento, it can be a bit tricky to display the name of the category the product is in. Actually it’s not that hard, all you have to do is to follow these Magento tips.

The template file you’ll have to edit is this one catalog/product/view.phtml

and add the next code where you want to display the category

getCategoryIds(); ?>
 $_category_id): ?>
load($_category_id) ?>
getName() ?>

Have any Magento tips to share?

The Magento tips mentionned in this article are only a few, but they really helped in creating my Magento sites and templates. Do you work frequently with Magento? If so, do you have any cool Magento tips you could share?

Creating Horizontal Tabbed Navigation using jQuery

Mirko — Wed, 03 Aug 2011 04:00:13 +0000

Horizontal Tabs simulates the interface of offline real world being accessed by each computer user. However, implementing tabbed navigation can be quite difficult sometimes, especially for non-developers.

If you are thinking to use the tabbed navigation then you can easily implement it through jQuery. Do you know how? Here, we will discuss how to implement the Horizontal Tabbed Navigation through jQuery. We will also put a highlight to add the implementation of effects like Collapse, Sorting, and Mouseover.
Let us start now from a blank html file. We are adding following default code to it:



   
   jQuery Tabs

Now, we will link the default jQuery CSS and JS files with our HTML file.

This is the time to add the script code to create the tab interface.

This is the default script to create the tabs without any effects.
Now, we will create the tabs using ul and li tags, and add the contents in them. For this work, the jquery-ui-1.8.13.custom CSS file have the classes like tabs-1 for 1st Tab, tabs-2 for 2nd tab, and tabs-3 for 3rd tab. You can edit the CSS file to have more classes to create more tabs in your design. Following is the code to create three tabs:


   
      Google
      Yahoo
      Bing
   
   
      Content for Tab 1
   
   
      Content for Tab 2
   
   
      Content for Tab 3

After merging the complete HTML code will be as following. You can also copy this code for your work.


   
      
      jQuery Tabs
      
      
      
      
   
   
      Welcome to jQuery Tabs
         
         Tabs
         
         
         
            Tab 1
            Tab 2
            Tab 3
         
         
            Content for Tab 1
         
         
            Content for Tab 2
         
         
            Content for Tab 3

Following will be the output of the tabs created with above code:

Thinking to add the effects in tabs?

Mouseover Effect
You have to add only event: “mouseover” in the scripts code as show below:

Remember to remove the previously existing script code with this one. After adding this code, the tabs will toggle on moving a cursor above them.

Collapsible Tabs

Want your tabs to expand and collapse with a click, then replaces the existing tab code with this one:

Sorting

Want to allow the visitors to sort the tabs as per their requirements, just add following code.

Positioning Tabs on Bottom

Thinking to position the tabs on the bottom of content! For this, you have to add some more customization through style tag, change the script code, and change the HTML code.

Script Code

Style sheet Code

HTML Code

Now, you have to add the above mentioned tabs-bottom class to the div creating tabs.

Complete code to have tabs on bottom


   
      
      jQuery Tabs
      
      
      
      
      
   
   
   Welcome to jQuery Tabs
   
   Tabs
   
   
   
      Tab 1
      Tab 2
      Tab 3
   
   
      Content for Tab 1
   
   
      Content for Tab 2
   
   
      Content for Tab 3

Output

Conclusion

The implementation of Horizontal Tabbed Navigation becomes easy with the use of jQuery libraries.

You can make use of above code or download the following demo-jquery-tab.zip file containing the mentioned files below:
jquery-ui-1.8.13.custom.css – contains the code style the tabs.
jquery-ui-1.8.13.custom.min.js – contains code letting the tabs to work.
jquery-1.5.1.min.js – includes the code from jQuery library from Google Ajax APIs.
demo-jquery-tabs.html – has the code for implement default jQuery tabs.
demo-tabs-mouseover.html – has the code to implement jQuery tabs with mouse over effect.
demo-tabs-sort.html – has the code to implement tabs with sort effect.
demo-tabs-collapse.html – has the code to implement the tabs with collapsible effect.
demo-tabs-on-bottom.html – has the code to implement the default jQuery tabs on bottom.

About the Author: Keshav Arora is a Senior Technical Writer with seo-Semantic-xhtml.com, a specialized division of HYPERLINK “http://www.ipraxa.com” IPraxa. Seo-semantic-xhtml.com provides PSD to HTML, XHTML, CSS and 3rd party application integration. Follow us on Twitter, and be our fan on Facebook.

Case study: are web design projects too expensive?

Mirko — Mon, 18 Jul 2011 14:02:53 +0000

Nowadays, people are more attentive on each dollar spent and any economical activity is suffering a contraction. The web design market is also part of this global and unstable economy, so it is facing the same challenges, even though outsourcing has become a very common activity, producing good profits for both the outsourcers and workers.

Freelancers and web design companies reacted to this sad context, proposing various and attractive offers. In spite of these offers, many people have put on hold or gave up having an online presence because of the costs involved. It is very hard to fight against an old and worldwide spread conception that creating a website is something for kids. Are truly the prices of creating a website too high? There can’t be an ideal answer to these interesting questions and each situation needs a particular approach. Here, I want to present some aspects regarding the prices of web design projects which should give you a good idea why the costs of web services are maybe too high.

It may sound a little harsh and avaricious but money is the mobile which is governing the capitalist economies and almost everything depends on them. I believe that the best solution to explain the cost of a web design project is to present the most important and common sub-costs. Please, let me know if you have another idea, other sub-costs to add or cut from here, so use the comment form!

1. The cost of school and after-school specialization

The school must be regarded as an investment which, with the passing of time, it should be amortized; the same principle is applied to any other after-school specialization. Each project must offer a small compensation to the huge amount of money invested in order to amortize the total cost of education. The more people are working on a project, the more money is required to amortize the education and the hired specialists. The immediate conclusion is that a more specialized project will cost more because the preparation of the designer was longer, more difficult and of course more expensive. The bad news is that the prices of the education are higher and higher.

2. The costs of software, tools and other adjacent stuff

The Creative Suite 5 has a total cost of 2500$+, a pretty huge amount of money but all the specialists say that the products are amazing, fully deserving their cost. Another part of the cost of any project is to amortize the money invested in these software and tools.

The coolest projects are made using the features of the latest versions and I highly recommend purchasing these. In spite of that, there are many specialists who never want to update their software and the work resulting is still amazing. Anyway, a lot of time is saved due to the richness of the possibilities. This sub-cost implies the cost of acquisition of other tools, not directly related to design. A busy freelancer may keep the accountancy using an online application which has a purchasing cost. Definitely, almost everything may be substituted with free solutions but a serious brand needs the best alternatives.

3. The office rent

A nice office from a towering building is the dream of anyone but to realize that it is a must to pay a pretty decent rent. A company or a freelancer based in such a coveted office must pay a rent which should be monthly amortized (if the rent is paid on a monthly basis). We all know that the rent depends on the location in the city, the age of building, the facilities, the furniture but it is almost a law of commerce that a luxury place attracts rich clients.

4. The cost of employees non design related/time spent of non design activities

When someone wants a web project, he has two possibilities:
1. Hire a specialized company, which will have employees who will effectively contribute to design but there are people who will work for non-design activities i.e. clearance, acquaintance, justice presence, advertising.
2. Hire a freelancer who will accomplish both design and non-design related activities.
Here comes in another sub-cost of the total: all the employers non-design related must be paid and their wages come from the payments of the clients so the final price of a web design price includes a part corresponding to the wages of the non-design related employers. The freelancers are doing everything by themselves and they also are asking money for their time spent on non-design activities as accounting, paying taxes, or self promoting. The rule of capitalist economy says that time is money.

5. The cost of insurance

To avoid any “chance” of bankruptcy, both freelancers and design companies must save some money for worst situations and once again, a part from the overall price of the web design projects is canalized to these special funds. Besides that, a freelancer must pay his taxes to benefit from medical care, various insurances and taxes.

6. The profit

Adding up the amounts of money from the previous points, the provider of web services is making the price which guarantees the amortization of the investment but nothing more. Nowadays, the entire society is headed towards profit so the real price must include another sub-cost, which in fact is the profit. Nothing is worth without obtaining the extra money. Some people may consider me avaricious but it depends on the perspective: without adding the supplementary cost-the profit, the provider is on zero, but what about the work invested? I believe it is for the best to consider the profit as the reward of the intrinsic work, and each one rewards him as he wishes.

In conclusion, some people may say that all that really matters is the final amount of money to pay, not the sub-cost or any other partition of the cost. Anyway, this post gives everyone insight of the factors which contribute to the price of a web design service and reading and understanding it may conduct to a better dialogue between client and employer. It will be the supreme reward to the author to find out that a client now comprehends what the work of a designer is all about, the problem of the payment being more decently solved.

About the author: Alexandra Vlasceanu works for conversion rate optimization Company Invesp and enjoys writing on landing Page optimization and affiliate marketing.

User-centred design and mobile user experience

Liz Tran — Fri, 17 Jun 2011 05:31:46 +0000

What is UCD and how does it relate to the mobile user experience?

So what is this ‘user-centred design’ (or UCD) you have been hearing about? Well it comes down to you really! As the user you are bombarded with a plethora of experiences and interactions through websites everyday. UCD is a design philosophy in which your needs, wants and constraints are taken into consideration at each stage of the design process.

So what is the process of getting to know your users? Knowing the different processes of UCD and how to fulfil a mobile user experience is a task that takes quite a bit of research and time delving into different models and approaches. There are many processes, models and tools that you can use for UCD the question arises which is right and which is wrong? Which one works and which one doesn’t?

Knowing the Tools and Process of UCD

Generally when starting a project you gather knowledge such as your target market or target audience. This is a good start, from here usually people will look at business objectives and then start to re-arrange user objectives to suit…This is where it can start to go pear-shaped!

Business objectives are great but without the user in mind as a main element to the project processes the end result could be a bit business orientated and alienating to the user.

Tools such as personas, scenario building and use-case can greatly help your client see the objective of different users.

It is all a hypotheses until you place it in front of a user and test.

With the view that it is a hypotheses, it comes to a point where the tools and methods you are using are subjective, as each user scenario is created by you and/or the client, though the main goal is to achieve focus in the area you want your users to go to, it is still just hypotheses till it is delivered to the users to test.

Designing for a UCD Approach

For web designers the process is similar to designing for websites. However there are some additional considerations with mobile designs, such as screen resolution, device constraints and features and issues with connectivity.

A crucial question is, do you really need a mobile site? Most websites probably do not need a mobile dedicated site/app and so delving into this process can be lengthy and a waste of time. While there is the opinion that everything will be “mobile web” soon, doing a quick analytics check on the breakdown of your desktop to mobile visitors and what operating system they use to access your site, will quickly tell you if you really need to provide a mobile site. This simple check could save you lots of time and money! Google analytics can do this operating system to browser analysis breakdown.

If your analysis reveals that you really do need a mobile site, next steps are, how can you determine that a mobile site will complement your website and be of use to users? Basically you need to identify the core functionality of the site and content that users will find useful on a mobile setting, while still fulfilling your own business objectives.

Certain questions that are useful to determining if you require a mobile site are:

Would users find the information useful and can they access the information on a limited connection/speed?
Are there features/areas of my site that would have a better function as a mobile accessed site/app?
Can a mobile site/app enrich the experience for users?
Do you need a dedicated mobile site/app or is it viewable as a full website on mobile devices? Is it too content heavy?
Can you break the mobile site/app down so that the main areas are shown on the mobile site/app?

Who are the users and what do they want?

UCD methodology answers questions regrading the task and goals of users. These answers can then be used to make decisions about design and development of the mobile site/app.

When addressing what users want, knowing your target audience is crucial, particuarly key things such as what they want out of the content, what is their experience with the content and what functions do the users need.

Knowing your target market, identifying your key user groups and creating personas will help you create better designs for your users. The key here is the more you understand about your user the better you can design something for their needs.

Mobile design considerations

When designing for mobiles, there are certain things that need to be taken into consideration such as smaller screen sizes, simplified navigation, prioritization of content, design for connectivity issues, minimising user input and steps to goal plus many more depending on the content you want the users to view and the mobile functionality that you can build in.

The UCD Mobile Process and Testing

This process is very similar to a website process and there are many ways to “skin a cat” as the saying goes, but with UCD and mobile design; designing, prototyping and then testing are the three crucial stages for effectively seeing if your user interaction is correct and how this correlates from content to user.

Testing your mobile design with users is a crucial step. There are many tools out there to do user-testing such as online cases, focus groups and online emulators. These will all help you to gather knowledge about if your content/product and design is effective. An example tool is the W3C mobileOK Checker and this great list of mobile emulators: http://www.mobilexweb.com/emulators.

Testing and analysing through Google analytics is also a great way to see how users interact with the content on the site. If you can’t do extensive user testing, you can setup a Google analytics account and use such things as advance segmentation and goal setting to see if your users are going to the right areas.

UCD is the way to go

So when designing a mobile site, good UCD practises help ensure the content is relevant and useful for the users while fulfilling business objectives. No feature should be added to the site just because it is cheap and easy or you ‘think’it is a good idea. UCD and mobile user experience should go hand in hand to create a richer experience for the user, this means marrying great functionality with content that matters.

Creating beautiful web designs: 9 details that matter

Mirko — Wed, 18 May 2011 02:51:26 +0000

There are many good web designers out there, thousands of them, but there aren’t so many great designers. The difference between a good and a great designer? Details! Just like for product design, where Apple makes its products better by paying attention to every little detail, you can make a big difference in web design by focusing on polishing details of your design. So if you want to become a better designer, make sure you are not too quickly satisfied and don’t give up the work too quickly. Too tired to keep on? Take a break and come back to your work with a fresh look later on.

But do you know what details are often overlooked by web designers? I know a few… To help you understand which details will bring your designs to a new level, I have listed some important ones. These are not rules of course, but advice that could help you make your next design better than the previous one. Be careful though, don’t put all your attention on the details and don’t forget the big picture, your design has to be good in the first place for those details to really enhance it.

1. Use smooth and consistent drop shadows

Drop shadows are a great tool for giving depth to your designs. However, if poorly used they can give your design an unprofessional look. Two things are important for creating good drop shadows:

Make your shadow subtle: it will provide the desired effect in a subtle way, without being too obvious.
Use consistent lightning source: for a coherent design if you use two shadows of more, make sure the source of the light is always the same.

2. Go easy on gradients

Same as for drop shadows. Don’t overuse gradients or it will kill the effect. Also, gradients should be subtle and use colors that degrade smoothly. For better results, try to avoid using more than two colors in your gradients, it will make it look more heavy but not more elegant.

3. Align, align, align

Give proper alignments to the elements of your designs. Well-aligned design elements make your web page look tidy and organized, it also helps create better white space. To do this, grid systems will make your life much easier. I personally recommend the Grid system or the 960 Grid System, but there are many others out there or you could even consider creating your own.

4. Think out of the box

A bit contradictory with the previous advice, you should some let elements or images of your design go out of the box. Grids are good to lay the base of your design, but they can quickly get quite boring if too rigid. Letting an element pop out makes the website design look more dynamic and lively. This effect is often used on titles or on some important images that need more attention than others.

5. Use icons

Icons help your visitors scan through your pages to find the information he is looking for, in that matter they are important to improve the usability of your website. Use icons and your content will be read much more. Even better, nice looking icons will make your design more elegant. The good news is that you can find tons of free high-quality icons on the web. As with anything else in modern web design, don’t overuse icons and make sure they are appropriate.

6. Use highlights

This has been quite a trend in web design for the past few years. Use a small 1px white line to highlight and provide smooth contrast between two colors and give a clean look. This also make the outlines stand out better and create a very welcome contrast.

7. Improve the typography of your design

Start by chosing the right fonts, if possible no more than two. Hierarchy and scaling of fonts should be optimized to make the text easily scannable and have the text presented in easy-to-read chunks. Style the lesser used element such as quotes, lists,… Use well-balanced rags and keep good vertical rythm. An excellent plugin to take care of that if you are using WordPress is WP-Typography. Good typography will not be noticed by your average visitors, but it improves the readability of your site, its elegance and make it look more professional.

8. Use textures wisely

How many times have you seen websites that use huge wood textures in the background that totally overwhelm the web page? In those case, the background attracts all your attention and makes the page less readable. This is not how textures should be used. You should use textures to create an ambiance on your page and add some style, but they should stay unnoticed.

9. Use the right words for call-to-actions

Semantics is a very important part of your website’s design. For the search button, use the word “search”, not go or an icon. Another example that I always find confusing is blogs that use the words next and previous for the article navigation. Instead, use the words “older posts” or “newer posts”, they give some context and users will know where they are heading when clicking on those.

Tutorial: how-to code your PSD into a HTML-CSS layout

Mirko — Tue, 17 May 2011 01:45:05 +0000

Whether you’re working for a firm or freelancing on your own, the most efficient way to develop a site is with a layered Photoshop mockup. This allows designers to easily manipulate the design and adjust the color palettes without having to spend lengthy amounts of time coding. Designers show the mockups to their client, gather any feedback the client might have, allow the client to pick which design they have best, and then turn the mockups over to the developer(s).

The good news for developers is that the design is already there for them all they have to do is convert it from the Photoshop mockup file, or PSD file, to a coded version that can be read by internet browsers. In this tutorial we will be focusing on taking a PSD and “slicing” it with CSS and XHTML to develop the front-end of the site. And since the PSD has all of the images and text we need, along with x and y coordinates, it’s just a matter of doing a little copy and paste, and then writing out the XHTML and CSS to make it work.

For this tutorial we will need to download two files. The first is the Photoshop mockup file that we will be converting to XHTML/CSS to create a website. The second file you will need for this tutorial, if you don’t already have it installed, is the Tiza font, which can be downloaded from here. Once you’ve downloaded the font you will need to unzip it and install it by dropping it in to your “Fonts” folder. Mac users can access their Fonts folder by going HD – System – Library – Fonts. Or, if you’re a Windows user, you go Start – Control Panel – (select icon view in the top right corner of the window) – Fonts.

We’ll start by opening our PSD file in Photoshop, Fireworks, or whatever your image-editing program of choice is. Once you’ve got your image file opened, go ahead and create a new CSS and HTML file. We’ll be developing the home page, so I’d suggest naming your HTML file “index.html” and giving your CSS file something basic like “main.css” for easy referencing.

Typically when I’m coding a site from scratch I like to start by zeroing the page out and making sure that there are no default margins or any padding that will screw up the site when I’m slicing it. This can be done by setting everything to zero at the beginning of the CSS file with an opening few lines like this.

body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, fieldset, legend, label, input, textarea { margin: 0; padding: 0; border: 0; } sh1, h2, h3, h4, h5, h6, p { margin: 0 0 1em 0; } h1{font-size: 200%;} h2{font-size: 170%;} h3{font-size: 140%;} h4{font-size: 110%;} h5{font-size: 80%;} h6{font-size: 50%;}

With everything set to zero, let’s move on to the body. But first, let’s take a look at what’s going on inside our PSD file by having a look at the “Layers” in our PSD file. You will see a group of folders titled, “header”, “home”, “footer”, and “back”. We will be starting with the “back” folder as this contains all of our background images. To make life simple and prevent any unwanted mistakes, go ahead and hide the “header”, “home”, and “footer” folders. The bottom file in the “back” folder should also be titled “back” and if you hide everything else within the “back” folder you will see that this file is just a solid color. One of the keys to creating a website that loads fast is to minimize the images, so we can skip putting this image in the site by setting the color as the background color in our CSS file. To figure out the color of that file select a fill color and hover over the image. The result should be a hexidecimal color code like, #D7D5C3.

Jumping back to our CSS file, create a body tag and set the background color to #D7D5C3. Your body tag should look like this:

body{ background-color:#D7D5C3; }

Next we’ll go back in to our image program and create our background image. With the header, footer and home folder hidden, the only image layers that should be displayed are the ones inside our “back” folder. Let’s hide the one labeled “content area” and leave the rest of them displayed. Now we have our background image. So, go ahead and save the file as “bg.jpg” and place it inside a folder named “images” within the root folder of your site.

Going back in to our CSS file now, we’ll add a line of code in our body tag just below the one defining our background color, to define our background image. The body should now look like this:

body { background-color:#D7D5C3;background-image:url(images/bg.jpg); }

With the background in place, now we’re going to develop our main DIV tag. I usually name mine “#container” as it simply holds everything in place. As you’ll notice on the design comp the main content area is centered, not justified to the left or right. In order to achieve this we must give it a relative position and then define margins with 0 on the top and bottom and “auto” on the sides. And if we take a quick look back inside our PSD file, we’ll notice the only image we didn’t add to our main background image, “content area,” is 960px wide and by checking the y coordinate we learn that it starts about 139px from the top. So, this tells us that our container should be 960 pixels wide and that we should have a header that’s 139px tall before we start our main content. Let’s translate that to CSS and add it to our CSS file by doing the following.

#container { position:relative; margin:0 auto; width:960px; } .header { height:139px; width:960px;}

Now that we’ve got a few DIV IDs and classes going let’s do some quick work in our HTML file and set it up. In between the head tag we can add the title, I simply put “Hit Machine Music” and we can add the link to our CSS file. Once those are set we can add our DIVs to produce an HTML file that looks similar to this:

Hit Machine Music

Best case scenario, you did everything right and if you preview your index page in a browser it should just be a textured background. Like this.

Now that we’ve got the basics taken care of, let’s start on the header. Going back to our PSD file, make sure that the “header” folder is visible and unlocked. Once that’s done we’ll need to isolate the “Hit Machine” logo in to its own image file. There are a few ways of doing this, but I find the easiest to be cutting it, opening a new file with a transparent background and pasting it in there. The header needs to have a transparent background so that it can seamlessly sit on top of the site background, that we created earlier, without interrupting any of the background designs or texture. I named mine “header.png” and saved it to the “images” folder in my sites root directory.

Next we go back in to our PSD file and undo our cut so that our design comp is back to full again. Behind “Songs” link on the main navigation bar you’ll see a faint-white, rectangular box that notifies viewers of which page they’re on. Let’s cut that and drop it in a new transparent .png file and save it as “navHover.png” to my images folder. Though several browsers these days support transparent backgrounds, not all of them do. So, it’s always safest to stick with an image file with a transparent background.

With the header framed up, let’s define the navigation starting with its placement. We need to create a class for our entire navigation bar and have it floating to the right, so that it will align with the right side of our content. To do this we create the following lines of code.

.navBar { width:555px; float:right; }

To define the links within our navigation bar, select the navigation links in our PSD file and, Arial font, bold, all caps, size 17 and the color is #6F6751 appear to be the styles we need to define in our CSS file. It also looks as though our “navHover.png” image has padding on top of 65px, bottom of 34px, and 15px on each side. And, since we’re going to need to move it down from the top, inside the .header tag, we’ll need to set its position to relative and define where we’d like it placed. In the sake of keeping things simple, let’s go ahead and create a new class for our navigation and name it “.navBar” so that I can define its style as follows.

.navBar a { position:relative; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; font-weight:bold; font-size:17px; color:#6F6751; padding:65px 15px 34px 15px; top:65px; }

As to not mess up our navigation bar by placing it below our header image, let’s make our header image float left and give it a slight margin. Like this:

.header img { margin-left:25px; float:left; }

With our navigation set up we should now add in our “navHover.png” class to apply to the correct pages the viewer is on as well as when hovering over links to other pages within our main navigation. To do so we simply create a “.navbar a:hover” and an “.on” class with the only attribute being the background image, like this.

.navBar a:hover, .on{ background-image: }

Now that our navigation bar is all set up, let’s go drop in all of the appropriate code to our HTML page. Working within our header tags we need to place our header image, then insert our navigation. This can be accomplished by doing the following.







News

Songs

Photos

Videos

Tours & Events

Now that we’ve got the header down, and if you haven’t already, go ahead and preview your index.html page in a browser to make sure that everything matches with the design comp so far. If everything’s good to go, it should look like this.

The first step to creating the body will be isolating its background image. To do that we want to go back in to our PSD file and cut the “content area” file from our “back” folder which we left back at the beginning of this tutorial, pasting it in a new, transparent, image file and saving it as, “contentBG.png.” Then we want to go back to our main PSD file, undo the cut, and inspect the style of the main content area’s text, as well as note the margin between the background image and the start of the text, so that we can define some font styles in our next step.

Going back in to our CSS file we are now going to create and define our “.mainContent” class by writing the following code.

.mainContent { background-image:url(images/contentBG.png); width:900px; padding:25px; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#3F3D3D; }

Next we need to isolate the text, “See Hit Machine in Concert” along with the picture of the band member and the background texture image. To do this I clicked on the text box inside my PSD file and deleted the links that were below, “See Hit Machine in Concert.” We’re going to add that text back later with HTML so that it functions properly. What I did next was expand the “home” folder inside my PSD file and then selected the first four images, “band member,” “see Hit Machine…,” “flash texture,” and “flash back.” Once they were selected I cut them, pasted them in to a new file and saved it as, “mainImage.jpg.” Since this image has no transparency, there is no need to save it as a .png. While we’re at it we can slice out the rest of time images from our main content body. These include our social media links and the thumbnail for their latest video. I saved my icons as the corresponding social media network, (facebook.png, myspace.png, twitter.png, linkedIn.png, flickr.png and rss.png) and the video thumbnail as thumbnail.jpg. The icons are .png because they have rounded corners across a variant of color, so they need a transparent background, whereas the thumbnail is a perfect square and could be saved as a .jpg.

Now that we have all of our images taken care of, let’s go to work on formatting and plugging in the main content, beginning with the main image. Back in our HTML file we need to insert our “.mainContent” div and add our “mainImage.jpg.” To do so our code needs to look like this:

If you preview your work, you should see your page starting to come together and look something like this.

Next we’ll add the quick links underneath the “See Hit Machine in Concert” header within our main image. Referring back to our PSD file we can get all of the styling and positioning info necessary. And even though the PSD file doesn’t show a hover state for the links, we’ll go ahead and add a standard one to let the viewers know it’s an active link. To get everything set properly, your CSS code should look as follows.

.quickLinks { position:absolute; left:115px; top:390px; } .quickLinks a { color:#fff; font-size:16px; } .quickLinks a:hover { text-decoration:none; }

Now, going back to our index.html file, we’ll add the links in so that they’re displayed on our page.







Schedule of events


Exclusive backstage photos


Tour information


Upclose interviews with the band

Preview your work in a browser and make sure that you’re still on point with the design comp. If you’re on the right track, you should be seeing something like this.

We’re rounding the home stretch now and I think the best way to handle the “Latest Videos,” “Hit Machine Blog,” and “Connect With Us” parts of the main content area is to split them in to floating columns. We’ll start from the left and work our way right. So, first up is the “Latest Videos.” Our PSD file shows that from the left alignment point of our video column to the left alignment point of the blog column is 310 px. While we’re in our PSD files let’s check the style attributes for our header and the link text below the thumbnail, before jumping back to our CSS file. Once you’ve noted the style attributes you can go back to your CSS file and define them.

Since all of the headers were the same for our bottom three columns, I’m going to modify the h1 tag that we defined in our reset stage in the very first step. So, going to the top of our CSS file I’m going to find the h1 tag which should only have a size definition and look like this h1{font-size: 200%;}. And I’m going to modify that h1 tag to match the style of our video, blog and connect headers. So that it should now be defined as follows.

h1{ font-size: 18px; font-weight:bold; text-transform:uppercase; color:#3f3d3d; padding-bottom:20px; }

Now that our h1 tag is set we can start defining our video class. I named mine “.latestVideos” and defined the width as well as created a class for the links and their style, so my code looks as follows.

.latestVideos { float:left; width:310px; } .latestVideos a { color:#3d3f3f; font-family:Arial, Helvetica, sans-serif; font-size:16px; } .latestVideos a:hover { text-decoration:none; }

With our latest videos column now set up, we can go ahead and put it in our HTML file and drop in our header, thumbnail and linked text by adding the following code.



Latest Videos




Another video to watch here


And yet another video here

Now would be a good time to check our work in a browser and make sure we’re still on the right track. If all is correct, you should see something similar to this.

Next we’re going to add the blog column, which will be quite similar to the video column only according to our PSD file it’s about 90 px wider. So, you can copy and paste your .latestVideo classes, modify the width and rename them to something like “.blog” or you can revel in the practice and write them back out. Whichever you choose, your code should wind up as follows.

.blog { float:left; width:400px; margin-top:30px; } .blog a { color:#3d3f3f; font-family:Arial, Helvetica, sans-serif; font-size:16px; } .blog a:hover { text-decoration:none; }

Once the column is set up in your CSS file you can go ahead and add the content to the HTML file. Mine looks as follows.



Hit Machine Blog


Loremipsum dolor sit amet consectetur adipiscing


Nunc eu mi risus, nec luctus justo. Proin consequat mi lacus, eget commodo mi. Donec ultricies...


Bibendum est eu gravida cras dui sem


Venenatis a egestas id, consectetur faucibus nibh. Fusce id felis at lorem lacinia pharetra...


Aliquam arcu nisi, sagittis at feugiat quis


Accumsan ut metus. Mauris rhoncus odio fringilla diam vestibulum vitae vehicula mi rutrum...

And if I preview it in a browser, it looks like this.

Now for our final column, similar set up to the previous only slightly skinnier than the rest, is our icon link column. I named mine, “.logoLinks” and added the following code to match with what our PSD is calling for.

.logoLinks { float:left; width:180px; margin-top:30px; }

Next we need to add some code to space the logos apart to match our PSD. We can apply the necessary style strictly to the images within logoLinks by targeting them specifically. Then all we need to do is add a margin-left and some padding to the bottom that will match our design comp. This can be done by adding the following code:

.logoLinks img { margin-left:30px; padding-bottom:20px; }

Now that you’ve got your “.logoLinks” column framed up, go back to your HTML file and let’s drop in all the information we need in order to get the icons to display on our page. Thanks to the defining of the image tag, all we have to do is add in our header and the image links. So, your code should look like this.



Connect With Us

With all of our columns in place, go ahead and preview your work in a browser. It should look almost identical to your PSD file, but be missing the footer.

Last but not least, we have the footer. According to our PSD file, there are only two layers that make up our footer, a bar the width of our content area and then some text. I cut out the bar, dropped it in a new file with a transparent background and named it “footerBar.png.” Next, we need to jump back to our CSS file and create a “.footer” class and define it’s attributes to match those in our PSD file. So, your CSS code should be two simple lines defining the width and center aligning your. My code looks as follows:

.footer { width:960px; text-align:center; }

After you’ve styled your footer, we’ll need to create a class for the image to add a little bit of space between the “footerBar.png” image and your actual footer text.

.footer img { margin-bottom:5px; }

Once those are added we’ll need to style the “contact us” link by defining links within the “footer” class. Your code should look as follows:

.footer a { color:#3d3f3f; font-family:Arial, Helvetica, sans-serif; font-size:16px; } .footer a:hover { text-decoration:none; }

Now that the CSS is set up, all we have to do is add it to the HTML file and we’re done! So, open your HTML file and we’re now going to want to place our “footer” div AFTER the closing of our “mainContent” div but before the closing of our “container” div. If we were to place our footer inside of the “mainContent” div our footer would have a left margin and not run the full span of our main content. Your HTML code should match this.





© 2009 Hit Machine Band | contact us

If you did it correctly, when you preview your index.html file in a browser it should look like this.

If it does, that’s it. Congratulations, you’ve just converted a Photoshop PSD file to a webpage! Now take your newfound wisdom and allow it to start earning you some money. Good luck and have fun!

If you’d like to see the full source code, you can download it from here.

The article is written by Scott Stanton. With over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Maria works for website builder Wix.com, a free online platform for the easy creation of customized Flash websites.

6 tips for designers to create brilliant icons

Mirko — Mon, 25 Apr 2011 13:59:42 +0000

What are the functions of web icons we observe on various websites? How are they used most efficiently? In this article, we’ll guide you through the process of effective icons creation.

Web icons are generally indicators and separators, they help to navigate and emphasize some key ideas of the content. If you drive a car you can easily imagine that icons serve exactly like the road signs, guiding through the website or application. They help to find the necessary tools and information quickly.

These catchy simple signs are usually intuitively recognizable. The majority of Internet users easily discern such icons as a miniature printer, a minidiskette, play arrows, twitter birds etc. This helps to see what action to take and how to play with the content.

Web icons are supposed to convey the clear meaning of the functions they serve. They should be intuitively clear within 1-2 seconds of scanning. Effective web icons don’t distract from the general content, but outline the most important features and make the process of navigation easier.

The key principles of web icons effectiveness are consistent lightning, considering the audience, general project layout, perspective, metaphor and so on.

It would be easier to create great efficient icons for your project using the tips below:

1. Consider the clear metaphor

Smart icons should indicate the common features of the objects they depict. Exact metaphors help to establish the better contact with the website audience. Make the concept be immediately recognizable.

2. Broaden your potential market and keep it simple.

Use flexible, sketchy images instead of detailed clip-arts. The icons should be recognizable to fit into various branches of the same business area. Simple icon means 2-3 objects in its structure. Simple jazzy concepts should be the natural complement to the project environment.

3. Use light sources consistently and carefully

The human eye feels the untruth and wrong perspective intuitively. So if you create the set of icons for the same project, make the light consistent not only for all the icons but also for all the elements of the environment. Try to depict web icons as the objects you observe in your real life, applying realistic shadows and lights. This will make them look more trustworthy.

4. Use nonstandard color combinations.

Feel free to experiment with the colors and tints. Make the icons stand out a bit. Eye-catching colors combined with the nonstandard shapes will bring the visitors attention and arouse the desire to click on them. But surely the icons should fit the general project color scheme to be more pleasant to theeye. Flash colors used for the simple business interface can be irritating.

5. Always consider potential customers.

Make web icons be interpreted in the single way regardless the cultural, national or religious traditions and signs of various groups of people. Use universal metaphors that could be easily recognized by users from any country.

6. Make a plan, create icons step-by step.

Find out the general concept first, make a sketch, choose the shape and colors, work out the details. Ask people about what they see in your image. If it takes them less than 2 seconds to grasp the icon idea, the icon is supposed to be successful.

Be creative and inventive, add some zest to your projects by adding awesome web icons!

The article is provided by IconDemon experienced columnist Helga Weber, enthusiastic about web design and digital arts. IconDemon.com is a great stock icons provider. It offers 5300+ professional web icons of different topical categories and styles. In case you don’t have enough time or skills to create each icons individually feel free to choose any icon set according to your preferences.