Shop Forum More Submit  Join Login
×



i have finally launched my personal website that is .. www.munawarkhel.com/ kindly guys have a look at it .. and let me know your thoughts feedback suggestion i would really appreciate it ...

regards
  • Listening to: Coke Studio
  • Playing: with my daPro Bag:D
  • Listening to: Coke Studio
  • Playing: with my daPro Bag:D
With a little CSS3 magic, you can created a scalable set of sexy buttons with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.


And there we have it: scalable buttons with minimal CSS that work everywhere.


www.zurb.com/blog_uploads/0000…
www.zurb.com/article/266/super…
  • Listening to: phone ringing ..
  • Reading: deviant comments on vector wellpaper
  • Watching: my achievements
  • Playing: with my mouse
  • Eating: jaws
  • Drinking: water
th01.deviantart.com/fs12/300W/…

thank you guys for everthing i just noticed

Views
Total: 71,448

man thats like wooooooooowww ...

Favourites & Collections: 364 i never knew it .. i wish it just goes beyond that hopping it to be 500 and more ..

thank you
  • Listening to: phone ringing ..
  • Reading: deviant comments on vector wellpaper
  • Watching: my achievements
  • Playing: with my mouse
  • Eating: jaws
  • Drinking: water
This article presents further principles and rules that will help your site convert. Among other things, we cover A/B testing, footnotes, testimonials, feature lists, the sign-up process and typography.

1. A/B Testing
-----------------
There is no reason to stop developing your website once you've come up with a design that you're happy with and that you think best sells your product. Practice often differs from theory, and every market is different. Things you believe should work may not actually perform well in your context. This doesn't mean your implementation was completely wrong; perhaps it just needs a little tweaking to achieve its full potential.

You can tweak your website using what's called A/B testing (also known as split testing). Basically, this test pits design A against design B and determines which performs better. This simple test helps you figure out things like, Which headline works better, or Where should you place the "Buy now" button?

Google Website Optimizer is a free tool you can use to perform A/B testing, as well as multivariate testing (testing many combinations of variables), on your website. It's relatively simple to use: all you need to do is provide Google Website Optimizer with the different assets you want to test, and it will randomly load them for your visitors and track which ones lead to better conversions.

2. Footnotes: The Good and the Bad Ones
------------------------------------------
Sometimes, when writing a description of your service or a product feature, you may need to disclose additional information about things like availability and price. This extra information can usually be placed in a footnote at the bottom of the page.

This is logical because you want to keep the copy on your main page as slim as possible to ensure people actually read it. If the copy has any extra information that is not relevant to the pitch, then it may break the flow and add needless weight. To add a footnote, just insert a reference number in the main text (using the sup-tag), and then place the accompanying explanation at the bottom of the page (the larger the font size, the better).

However, some companies use footnotes for another purpose: instead of hiding superflous technical details, they trick customers into buying something, offering services "for free" and referring with footnotes or asterisks to details of the deal. These details are almost always unreadable – because of the font size and the font color – and almost always result in misunderstandings and problems. If you or your company use footnotes for this purpose, you are definitely doing something wrong. Once your users lost trust for your company (for instance, because they purchased something that they didn't want to buy), it will be damn hard for you to win it back.

Conclusion: if you care about your customers and aim to build a solid, long-term relationship with them, you better make sure you communicate with them honestly and directly – and use footnotes properly.

3. Testimonials
---------------
Testimonials are great because they tell your visitors that other people use your product and would go as far as recommend it. Testimonials help relieve some of the risk associated with purchasing a new product or service. You have little way of telling whether something is good or not until you try it, and knowing that others have tried it and liked it helps a lot in breaking down this risk barrier.

There are some formatting tricks you can use to make your testimonials more effective. For example, read the following three testimonials:

I found Product X to be incredibly useful in my daily workflow.

"I found Product X to be incredibly useful in my daily workflow."

"I found Product X to be incredibly useful in my daily workflow." John Smith, ACME Corp, New York

The first testimonial doesn't have anything attached to it — it's just a sentence and so doesn't look very believable. The third one on the other hand has speech marks around it and attribution to the source. Just adding speech marks already makes a testimonial look better. For best testimonials though make sure to add a source.

It's also a good idea to provide readers with case-studies that describe the process of your work and explain how customers liked it, what were the problems and how the service can be useful to solve tasks from the daily routine.

4. Scannable Feature Lists
-----------------------------
Your visitors don't have a lot of patience. Why? They're spending their time browsing your website, time that could be spent doing a myriad of other things. Time is money, and people are investing it when they navigate around your website. This means you've got to offer something valuable in return. You must grab their attention and not let go. If they get bored or don't like what you offer, then they will click away and likely be gone forever.

5. Streamline The Sign-Up Process
------------------------------------
Selling has a lot to do with breaking down barriers. These barriers are mainly the objections people imagine to buying your product, but these barriers can also be physical; for example, the sign-up form on your website. Users have to fill in forms, and that means a little work on their part. To ensure you don't lose conversions at this stage, you can do a few things.

First of all, ensure the sign-up form is as short as possible. If a field is optional, it doesn't have to be there. Users can always fill in optional fields later on their settings page. Don't make potential customers do more work than they have to; keep the form nice and short and easy to fill in.

Secondly, to ensure users don't make any mistakes and have to re-fill information, you can validate fields live using AJAX. You could, for example, display a green tick next to each filled-in field when it validates, or display a red cross along with a short error message if some error occurs (such as if a required field is left empty or a user name that is already taken is chosen). This allows people to see any errors as they're filling in the form and fix them before clicking the "Submit" button.

Lastly, you can simplify the page layout of the sign-up form by removing any irrelevant navigation elements. Your objective here is to get the visitor to sign up rather than navigate to other sections of the website, so you can remove any extra navigation to help the user focus on the task at hand.

6. White Space Is Not Lost Space
-----------------------------------
Have you ever seen those cheap ad booklets one gets in the post, all full of bright colors, big text and pictures, every millimeter used to display a latest offer or new deal. The designers try to fit everything they've got into the booklet and make sure no space is wasted. Cramming everything you've got into a limited amount of space isn't always the best approach, though, and in most cases it's the wrong approach online.

White space, the empty space around and between various pieces of content, is important. It gives your design air to breathe by separating elements. This separation is valuable because it allows people to focus their attention on individual areas of the page, be it the navigation, a feature description or the website's description.

When everything is stuck together, it becomes more difficult to distinguish between its components and thus more difficult to focus on and thus less scannable.

7. Set your type properly
----------------------------
The way you set your type has an effect on how well your copy performs. Good typography can give your copy the punch it needs. Use large font sizes to make headings stand out. If you're selling to an older demographic, ensure all font sizes are large enough to read easily. Small fonts may look great, but if they're difficult to read, they will turn people off.

Also, ensure the text and its background color have enough contrast. Black on white is a good start. Inverted color schemes (light text on dark background) do not work so well in most cases, especially if your audience is used to more traditional media (e.g. newspapers), where black on white is the standard.

To focus people's attention on certain elements, you can decrease the contrast of surrounding elements by using something like dark gray on white (instead of black on white) to fade them out a little. Use stronger contrast for the stuff you want people to notice. One good technique is to use the highest contrast for a feature heading or brief description, and then a lower contrast for the detailed blurb below. The aim here is to make the page scannable: let people glance over it and settle their gaze on the text that's most important and quickest to digest.

To Conclude
Design definitely has a role to play in selling the product or service on your website, though it's more of a support than a lead role. Design should reinforce the copy: help it stand out and be readable. Choose images that send the message you want. Ask yourself what purpose each image on your website has. If it has no purpose, why is it there? Use white space and typography to give your copy punch. At the end of the day, though, you have to make sure your content actually works, because a great design alone won't be enough to close the sale.
  • Listening to: Lionel Richie
  • Reading: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
  • Watching: My Monitor Screen
  • Playing: with my mouse
  • Eating: my partners nerves .. :P
  • Drinking: Bacardi :P
Hi guys this is my first ever Journal hope it goes well i was reading this artical 10 Steps To The Perfect Portfolio Website which was really interesting .. and thought to share it with you guys .. i guess some of you have already read it but for those who dint get a chance to read it .. here you go its by by Lee Munroe

You may have a personal portfolio website for a number of reasons. If you're a freelancer, then you'd need one to showcase your work and allow people to contact you. If you're a student (or unemployed), then you'd need one to show prospective employers how good you are and what you can do, so that they might hire you. If you're part of a studio, then you might use one to blog about your design life, show people what you're doing and build your online presence.

A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you're a Web designer, developer, writer, gamer or any other type of creative, then it's essential that you have a good portfolio website.

1. Logo

Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.
It doesn't necessarily have to be your name, but if you're trying to promote yourself online, then it's a good idea to go by your name. And always link your logo to your home page. It's a common convention that users expect online.

2. Tagline

Once the user sees who owns the website, they'll want to know what it is you do. This is where you explain what you do with a tagline. Your tagline should be short and snappy, summarizing what you do.
Things to ask yourself when writing your tagline:

What are you? A designer? A writer? A developer?
What do you do? Design websites? Develop games?
Where are you from? Country? City?

Are you a freelancer or do you work for a studio? Are you looking for work?

3. Portfolio

This is a personal portfolio website after all, so your portfolio will determine whether the website is interesting or not. People will want to see your previous work to decide whether you're good or not and for general interest, to see what you've been up to in the past.

Depending on what you do, your portfolio should contain big high-quality images, clearly accessible to the user. Always include a link to the live version of the website you worked on, and link your screenshot to the live version (another common convention that people expect). Include a short description for each project, including the different skills that you needed to complete the project.

It's never a bad idea to get a testimonial from a client. Your visitors might also be interested in the stages of development for your projects and how you arrived at the final outcome.

4. Services

Your tagline summed up what you do, but you'll want to go into a bit more detail here about each service that you offer. You can't expect potential clients to guess what you do based on your portfolio, and you don't want to leave them wondering whether you offer a particular service or not.

Make it clear, and break it down: Web design, development, video, copywriting, branding, etc. You may want to be even more specific: corporate branding, church website design, Flash banner ads and so on.

5. About me

It's all about you. Let people see the man or woman behind the mask (i.e. website). Share your background, where you came from, how many years you've been in the business, etc. The more details you give, the better your users can form a bond and build trust with you.

If you're not camera-shy, show a picture of yourself. This will give potential clients peace of mind by allowing them to see who they're dealing with, and it adds an element of trust.

Don't be afraid to show off your awards and recognition here. You want people to know you're good at what you do.

6. Contact

This is one of the most important elements of a portfolio website but is often hidden or even neglected. A potential client has browsed your website, is impressed with your portfolio and can see who you are. Now they want to hire you.

Your contact information should be obvious and easy to access; don't hide it in the footer. Let people know they can contact you for a quote or a chat. Use a form to make it easier for users to contact you (so that they don't have to take down your email address and then open up their email manager). A form also allows you to ask for specific information, such as name, email address, website URL, details of inquiry.

7. Blog

blog is always a good idea. Blog about your area of expertise; show you know what you're talking about. It will help promote you and prevent your website from lying static.

Let people follow you by subscribing to an RSS feed, and show off your most popular blog posts to new readers.

Be sure to enable comments for feedback. Don't make users register to add a comment to your blog, and don't use anti-spam Captcha software, which only turns people off from commenting. There are plenty of anti-spam plug-ins available that don't require users to do extra work.

8. Call to action

Ask yourself what you want to get out of your personal portfolio website. Do you want to be hired? Attract more blog readers? Maybe you just want people to know who you are.

Each page should have a call to action, a "Next step." The best way to accomplish this is with a "call to action" button that is clear and stands out from the rest of the page. Link it to your blog, portfolio or contact page, and use appropriate language (e.g. "Hire me," "Request a quote," "View my portfolio").

9. Use social networking websites

Now that people have an interest in you and your work, encourage them to follow you on other websites. Make it clear that they can follow you on Twitter, Facebook, Flickr, LinkedIn, etc. Make the most of social networks and have a group of friends to call on if needed.

10. Language and communication

How you conduct yourself is important. Remember, it's a personal portfolio website, so be personal. You don't need to sound like a corporate brand with no emotion. Be friendly and personal, but also clear and precise; don't ramble. Once you write all the text for your website, read it again and see if you can cut it in half.

Hope you enjoyed it and helpfull ...
  • Listening to: Lionel Richie
  • Reading: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
  • Watching: My Monitor Screen
  • Playing: with my mouse
  • Eating: my partners nerves .. :P
  • Drinking: Bacardi :P