Wednesday, 16 January 2013

20 colour tips for website design

Choosing the right colours when designing a website is something that requires a lot of patience and experimentation, and – ideally – a minimum of guesswork.
 
Thankfully there are some useful rules of thumb to follow when it comes to working with colours, as well as some truly excellent sources of inspiration out there to help you make the right colour choices for your brand, website, and audience.
Let's start off by considering why colour matters, then I’ll list 20 colour recommendations for web professionals, followed by some pointers to my favourite tools at the end of this article.

Why is colour so important?
Psychologists have for many years studied the effects of colour on the brain / emotions. There don't seem to be any absolutes truths here. People’s perception of colour is largely subjective so I don’t think we can be too instructive in this area. Red doesn’t always mean danger, and blue doesn’t always mean calm.
Yellow is pretty much bi-polar, as far as I can tell. Somebody I used to work with once told me that it was ‘the colour of suicide’ and steadfastly refused to have our office painted yellow. Yet it is also said that yellow conveys optimism, confidence and emotional strength. So which is it?

There are also cultural considerations to factor in, something of particular importance to global brands: green may be lucky in Ireland, but it’s apparently not so lucky in England, while Islam venerates the colour. On top of that green is also the colour of envy, and of money. And it is also every eco-warrior’s colour of choice, and – more recently – has been adopted by a number of those wool-pulling energy companies. Wah!
So what on earth do you do? And where to start?

Well, it turns out that it’s not so much about choosing one colour as choosing a bunch of them, and making them sit comfortably alongside one another. The psychology of colour is less about individual colour washes, but rather an understanding of how people respond emotionally to multiple colours.
Ultimately, factoring in colour theory and pscyhology, colour choices for your website should only be made once the designer has a firm grasp on a) audience / market, b) geotargeting / cultural considerations, and c) brand / product and related guidelines.
Oh, there is another thing to think about, and it's important: d) usability / accessibility.

Usability and colour
Considerations relating to the psychology of colour, your brand, and your audience may help you narrow your colour choices. Now, there are some very important functional issues to think about.
Usability professionals have consistently warned us about the danger of making poor colour choices, for largely practical - as opposed to strictly aesthetic or psychological - reasons. Certain colour combinations are a non-starter. Poor colour choices can induce eye strain and headaches, forcing users to leave your site. Crazy page layouts can make matters even worse.
Yet this isn’t all about colour as such, but about contrast. Contrast is hugely important for accessibility reasons. Strong contrast is required to ensure legibility, so make sure the background is substantially different from the text colour.
Keep in mind that around one in 10 people are vision-impaired. Try printing out early prototype web designs in greyscale, to determine whether the eye can see differing shades of colour.
Ok, let's get to some recommendations...

20 colour tips for web pros

Here are some things to keep in mind when planning the colour scheme for your website. Remember that there are always some superb exceptions to the rule (see 13), so don't be afraid to experiment...
1.    Contrast. Background colour should be a single wash and have plenty of contrast with the text. Black - or dark grey – text against a white background remains the most sensible option.
2.    Avoid patterns behind text. This is the main problem with many of those user-customised MySpace profiles.
3.    Links. I firmly believe that links should be coloured blue, largely because the web’s most popular websites typically use blue (Google, Yahoo, BBC, New York Times, eBay, etc). Why reinvent the wheel?
4.    Clicked links. The vast majority of websites change the colour of a visited link to help users navigate. So should you. Maroon is a common choice for clicked links. Avoid applying these settings to your primary navigation.
5.    Limit your colour choices. The consensus opinion with regards to colour and web design seems to be one of ‘the fewer the better’. Use colour sparingly if you want it to grab the eye. Colour can be persuasive, but not if it is lost among a rainbow.
6.    Shades. Many websites use a blend of neutral colours and a range of shades of their main colour choice/s. This is easier on the eye than trying to work with multiple primary colours. I’m currently a big fan of grey. Note that some people struggle to pick out differing shades of blue.
7.    Add 30% more white space. By spacing out content units and blocks of colour you’ll help guide the eye to key areas. I’d wager that lightly-coloured landing pages with one brightly coloured ‘buy now’ button will convert better than a page featuring a mess of colour. Make that button stand out! Go on, try it…
8.    Be ‘web safe’. Macs and PCs both render colours differently, as do browsers. You should use ‘web smart’ colours to minimise issues.
9.    Clashing colours. Nobody wants to read green text on a bright red background. Avoid bad colour combinations.
10.    Branding. Make sure you consider brand guidelines and use matching or complementary colours throughout your website.
11.    Take extra care when using light text on dark backgrounds. Not recommended for publishers, but it works for some websites. Here, you should increase the leading, tracking and decrease the font weight. Why? Because there is greater contrast with white on black, compared to black on white. But for news sites and blogs with lots of content, this doesn’t work so well.
12.    Use gradients and shadows. Ok, this is a bit Web 2.0-ish, but it works. I’ve seen websites relaunch with barely anything changed except the addition of some sexy gradients, or a drop shadow below the logo. This can add a lot of depth to a site, making it appear less 2D.
13.    Consider some colour coding. I love the brashness of colour in the navigation of the new Guardian website – they have ripped up the rulebook somewhat, but then we don’t do rules, do we? The typography works, and there’s plenty of white space on these colour-coded channels. It is a stand-out example, and shows how well this can work. It’s not just about colouring up channels: note how Techcrunch authors have their comments colour-coded when replying to reader comments.
14.    Try a little opacity. If you insist on using patterns, or placing text in front of images, try reducing the opacity of the background pattern (or part of the image where the text is placed) to lighten the colours. This will achieve greater contrast for the text in the foreground.
15.    Use richer colours for prominent items. My favourite buy-it-now button is bright red, placed against a white background.
16.    Avoid fluorescent craziness. This is the web, dammit, not a Stabilo Boss catalogue.
17.    Remember the role of images. Pictures can add a lot of colour and depth to web pages. Keep this in mind when working on the wireframes / early designs of a website, as if you’re using test content (‘Lorem Ipsum’) you won’t necessarily factor in images. Don’t overcompensate with colour at this early stage.
18.    Going global? Where do your existing and prospective customers live? Which market are you targeting? There are plenty of cultural considerations to factor in when choosing colours.
19.    Demographics. If your audience is elderly then some usability experts suggest that brighter colours may be a good idea. On the other hand, if your website is mainly used by children then you could introduce lighter shades and pastels.
20.    Does it fit? Green is for the environment. Pink is for maternity leave. Blue is for corporate sites, etc. I’m not sure these observations are anything more than generalisations, but an eco-friendly site heavy on hot pink might look a little bit odd
source: http://econsultancy.com/in/blog/2654-20-colour-tips-for-website-design 

Monday, 14 January 2013

5 Tips to Simplify Your Web Design

5 Tips to Simplify Your Web Design


Simplicity rules! It makes a websites look sleek, reduce nagivation confusion and it helps achieving desired goals and results (I.e., more signups, subscribers and sales). But too often it seems elusive to simplify your website design. No matter how hard you try, you can’t make your work look like Apple’s. So what does a website designer really needs to do? Fret not, for there are 5 starting points to simplify your website design.
simplebits
A simple website design shouldn’t be a daunting all-or-nothing ordeal – you can simplify your design by taking small steps. Simple tasks like putting the focus only on the essential elements of your website, getting rid of the unnecessary, reducing the number of pages your site has, getting more content above the fold, and limiting the number of colors you use. You can always fine-tune and improve your simple design, but the important thing here is to get started.
Ready to start simplifying your website design? Awesome. Without further ado, here are 5 starting points to simplify your website design.

1. Focus Only On Essential Elements

Thesis
This first step probably seems forehead-slapping obvious: of course I should put the focus on the essential elements in my site, what am I, an idiot? But a surprising number of websites fail to achieve this and the result is a big mess of important and unimportant elements spewed onto a page. I’m as guilty of doing this in the past as anybody. It’s hard to be objective and prioritize what’s important or not, because everything seems essential. If you want your website design to be simpler, identify what needs to be focus, just like with any good visual design or piece of art. And that means putting the focus only on the essential elements.

Use the 80-20 rule

What 20% of what’s on a page gives 80% of the value and content that people go there for? It could be the copy, some social proof (review snippets, testimonials, media badges), and a signup form or call-to-action button, for example. That’s the 20% right there. On your website, as well as on each individual page, focus on displaying only the 20% of site elements that are delivering 80% of that usefulness.
This isn’t a technical step but a principle that you can use as your guide to simplify your website design constantly. The 80-20 rule will help simplify your website design by pushing you to trim your site elements down to the essentials. What’s really cool is that the 80-20 rule can also help increase your desired results that you hope to achieve on your website. For example, an increased conversion rate in visitors subscribing, signing up, or buying. How? You’re making it so there are less distractions and things for visitors to click on to leave the page.
As we all know, we’re always looking for an excuse not to purchase something at the final step, and any reason to navigate away is a good one. Reduce those reasons and click-away options with the 80-20 rule.
Chris Pearson, creator of the popular Thesis WordPress theme framework, says this is exactly what helped increase sales on his website.

2. Get Rid of All Unnecessary Elements

Tumblr
We’re continuing with the 80-20 rule here.
Now that you’ve identified the 20% of website elements that will get you 80% of your desired results, it’s time to get rid of all unnecessary elements. In other words, the 80% of website elements that will get you only 20% of results. It could be social media sharing widgets, sidebar elements, blog post meta details (date, time, author, number of comments, etc), or links in the footer (this is especially a huge culprit a lot of the times, particularly when the visitor is looking for the aforementioned excuse to navigate away from the page).

3. Reduce the Number of Pages

Squarespace
A large part of simplifying your website design is to simply have fewer places to explore and click around. You can do that by trimming the page count. Either get rid of unnecessary pages that deep down inside you know aren’t needed, or at the very least, fuse multiple pages into one. I mean, you don’t really need to separate "about the site" and "about me" pages.
Firstly, get in the mindset of the visitor – if you were to arrive on your website, what are the key things would you want to do? For instance find out what your stuff is about? Or contact you? Next, make sure that your pages facilitate what is necessary and nothing more. Don’t keep unnecessary pages on your website because you think you need to, or because other websites have them. When you reduce the number of pages on your website, not only it is easier for your visitors to focus on your content because there’s less places to click around, but your navigation menu is simpler too.
We’ve all been on websites with too many nav menu items. We don’t know where to start navigating because we get overwhelmed by the choices. And when we get overwhelmed by being presented with too many choices, we go with choosing nothing. By having as few nav menu items as possible, you make your website not only simpler but more inviting and friendlier to visitors.

4. Get More Content Above the Fold

MailChimp
Studies have shown that a majority of people spend most of their time above the fold on web pages (what shows up on the screen without scrolling down). So if you want to increase the effectiveness of your website, have the main content and call-to-action elements above the fold. You can do something as simple as shortening the header height if you have a logo and a navigation menu at the top of your website.
This involves nothing more than changing the header’s "height" value in your stylesheet (typically style.css or stylesheet.css). Also, see if a sign-up form or button is below the fold. Move that element higher up in the page so it’s the first thing a visitor sees. After all, that is your desired call-to-action of the visitor, so decrease the work needed to get to it (ie. scrolling).

5. Limit Your Color Scheme

37signals
It’s easy to get carried away with colors. Why settle on 2 or 3 colors when you can have 12 or 13? But in order to simplify your website design visually, you need to limit your color scheme. When in doubt, use fewer colors. It’ll vary based on your design of course, but try sticking with no more than 2 or 3 colors to start off. If you need more subtlety and texture to your visual design, use shades of the same color – light blue for the background and darker blue for header and menu items.
I’m as guilty as anyone with getting wild with colors in the past. I’ll add this color, then another, and another – and before I know it, it looks like a rainbow diarrhea all over my website. You can have your website constructively simplified, but if the colors distract the eyes when you look at it rather than complimenting the content, then all that effort was for naught. So use fewer colors with your website design instead.
Having trouble choosing a color to start with? Before & After magazine has a useful free e-book on how to find the perfect color here. Need help with picking a color scheme? Try out this handy color scheme generator.

Last, but not least

Apple
Hopefully you’re now armed and ready to start simplifying your website design. You’ll be more proud showing off your website because it’ll look gosh-darned sexy and lastly, your visitors will have a much more enjoyable experience browsing in your website.
To recap, here are the 5 starting points to simplify your website design:
  1. Put the focus only on the essential elements
  2. Get rid of all unnecessary elements
  3. Reduce the number of pages
  4. Get more content above the fold
  5. Limit your color palette.
source http://www.hongkiat.com/blog/5-tips-to-simplify-your-web-design/

Saturday, 12 January 2013

7 Tips to Maintain Your Website Reputation

In order to succeed and combat the competitive online world, you need to maintain a good reputation online. A good reputation not only builds confidence and grows sales, but ultimately leads to better revenues and higher profitability. In today’s Internet buzz nasty rumors, wrong opinions and incorrect news spread rapidly and if not taken timely action to handle the news properly, you may face a serious threat to your online business and credibility.
Here are some simple measures you can take to maintain your website’s reputation.

1. Respond to customers
Being open and responsive to customers is an important part of creating a positive impression and managing your website’s reputation. If someone asks you a question, answer it there or through e-mail. Be quick in addressing your customer issues before the word spreads.
2. Answer the negative comments humbly:

Be real, not everyone is satisfied with your work and services. If these people are among the ones spreading negative comments about you for whatever reason like delayed service or unfriendly attitude, answer them instantly to terminate the issue right there! Be very polite when putting your point of view in front of such people and you’ll sure succeed in saving your reputation. Answering negative remarks modestly can be a great way of turning a bad situation into positive one.
3. Create official online profiles

Create your own platform for users to share their experiences they’ve had with you. Create your own profiles and websites complete with the kind of information you actually want to be available about you. Let users communicate with each other and comment about your products or services, whether positive or negative.
4. Report stolen material from you

It’s very well possible that online competitors may steal material from your website to increase their ranking and traffic. This may lose your credibility among your users, making you “not-so-unique” in their eyes. To control such theft, you can report their site through strict action.
5. Write blogs

Writing blog posts are extremely effective in promoting your business. Through blog reviews and blog comments, you even increase your chance of getting high traffic volumes to your website. If you or any of the experts in your business have important knowledge like instructions, guidelines, tips and trick that can be useful for the users, share them through writing blog posts. This will greatly enhance your online reputation.
6. Optimize For Search Engines

Majority of the internet users accept results from Google searches or any other search engine as highly credible. Therefore, to maintain a good website reputation, don’t forget to optimize your website. You can consult professional search engine optimization services for this purpose.
7. Using the social media

Setting up social media networks in order to maintain your website’s online reputation is a great thought. To begin with, set up your profiles on Twitter, LinkedIn, Facebook and MySpace. Once you have your accounts setup, you will need to do the following things:
  • Create a complete profile by putting all the information
  • Engage and Interact with the members
  • Monitor comments for both positive and negative remarks
You’ve spent a lot of time building up your website’s good reputation, so it’s important not to let anyone drag it through the mud. Follow the above given tips to maintain your positive reputation among the online community.
source:  http://www.cyberdesignz.com/blog/website-design/7-tips-to-maintain-your-website-reputation/

Thursday, 10 January 2013

Make Your Site Valuable to Your Readers

There aren't any magic pills to create a great web page that everyone will visit again and again, but there are things you can do to help. Some key things to focus on are making the site as easy to use and user-friendly as possible. It should also load quickly and provide what the readers want right up front.
The ten tips in this article will help you improve your pages and make them something your readers are interested in reading and passing on to others.

1. Keep your focus on fast pages.

Speedy pages are always important. No matter how fast the average connection is for your readers, there is always more data, more content, more images, more everything for them to download. The thing about speed is that people only notice it when it's absent. So creating fast web pages often feels unappreciated, but if you follow the tips in this article, your pages won't be slow, and so your readers will stay longer.
How to Speed Up Web Pages

2. Keep your pages short, but not too short

Writing for the web is different from writing for print. People skim online, especially when they first get to a page. You want the contents of your page to give them what they want quickly, but provide enough detail for those who want expansion on the basics. This article gives you tips for writing web content.
Writing Well for the Web

3. Good navigation on your websites is critical

Navigation on your websites is what gets readers around on the page and the site. Long web pages can benefit from tables of contents using anchor links to help readers get around. But you should also have good site-wide navigation.
Navigating Web Pages

4. Keep images small and use sprites whenever possible

Small images are about the download speed more than the physical size. Beginning web designers often create web pages that would be wonderful if their images weren't so large. It's not okay to take a photograph and upload it to your website without resizing it and optimizing it to be as small as possible (but no smaller).
CSS sprites are also a very important way to speed up your site images. If you have several images that are used across several pages on your site (such as your navigation icons or your logo), you can use sprites to cache the images so that they do not need to be re-downloaded on the second page your customers visit. Plus, with the images stored as one larger image, that reduces the HTTP requests for your page, which is a huge speed enhancement.
Learn How (and Why) to Resize Web Images

5. Use appropriate colors.

Remember that web pages are, by their very nature, international. Even if you intend your page for a specific country or locality it will be seen by other people. And so you should be aware of what the color choices you use on your web page are saying to people around the world. When you create your web color scheme keep in mind color symbolism.
Color Symbolism

6. Write as globally as you can.

As mentioned above, websites are global. So great websites acknowledge that. You should make sure that things like currencies, measurements, dates, and times are clear so that all your readers will know exactly what you mean.
Writing Websites for a Global Audience

7. Check your spelling and grammar.

Many people are not tolerant of spelling errors. You can write a completely error free topic for years, and then have one simple “teh” instead of “the” and you will get irate emails from some customers, and many will give up in disgust without contacting you at all. It may seem unfair, but people judge websites by the quality of the writing, and spelling and grammar errors are an obvious indicator of quality for many people.
Spelling and Grammar Errors that Can Ruin Your Site

8. Keep links current.

Broken links are another sign for many readers (and search engines, too) that a site is not maintained. And why would anyone want to stick around on a site that even the owner doesn't care for? Unfortunately, link rot is something that happens without even noticing. So it's important to use an HTML validator and link checker to help you check older pages for broken links.
Fix Your Broken Links
9. Annotate your links.
Annotating your links means that you should write links that explain where the reader is going to go, and what they are going to find there. By creating links that are clear and explanatory, you help your readers and make them want to click.
While I don't recommend writing “click here” for a link, you may discover that adding that type of directive right before a link can help some readers understand that the underlined, different colored text is intended to be clicked on. You shouldn't use “click here” as the text of any link, but that direction can be useful for sites that cater to an older audience who might not understand how links work.
Creating Better Links

10. Put contact information on your pages.

Many web designers are uncomfortable with contact information on their website. It feels like a violation of privacy. You may be thinking “but what if they actually contact me?” It's true, it could happen. But most contacts you receive are going to be related to your site or useful in some fashion. I'm not advocating you place information on your site that you aren't comfortable with, but providing some way to contact you is important for a website.
Contact information reminds people that the site is maintained by another person. This means they may be more charitable and more willing to respect you when they do make contact. Plus by putting contact information on your site, you are helping your readers trust you. If there is an email address or phone number, they know they can contact you if there's a problem.
And finally, if you do have contact information on your site, follow up on it. Answering your contacts is the best way to create a long-lasting customer, especially as so many email messages go unanswered.
Why Put Contact Information on Your Site

More Tips from You

Are there other tips that people should know about how to design a great Web page? Why not post them to the forum and let us all know about them.

Tuesday, 8 January 2013

Top Tips for Web Design in 2013

Top Tips for Web Design in 2013

1) Don’t Design For Yourself
When you are looking for a new Web Design for 2013 it is important to make sure your website is designed for your visitors/potential customers and not for you. Remember, at the end of the day it is not you who will be looking at your website and making your website appeal to visitors will reap much more rewards.

2) Keep Your Website Quick
We spoke about this last year and it is still one of the most important things to keep an eye on. Remember that people are put off if they don’t see your website load in a reasonable amount of time (3 seconds is about the norm these days). There are plenty of tools available to measure website speed, head on over to tools.pingdom.com to test your website.

3) Analyse Website Analytics
Always keep an eye on your website analytics, you should visit the data at least once per month to see what your most popular pages are, where the highest bounce rates are and where the highest amounts of exits are occurring. If you haven’t got analytics installed on your website then head over to google.com/analytics and sign up. If you are not sure what you are doing speak to Pebble and we will help you out.

4) Keep Your Website Updated
Another thing we spoke about before. Keeping your website up to date is vital, ask yourself this question, why would anybody visit your website if you last updated it back in 2009? Everybody has something to say, remember to post it on your website!

5) Help Your Visitor To Find The Information They Are Looking For
Avoid having massive menus that visitors might find it hard to locate the page they are looking for or hiding links to your most popular pages. Keep navigation menus clearly visible, use bright and bold colours that people can see clearly.

We hope these Web Design tips give you some good indication on what to look at doing on your website in 2013. If you have any questions or comments please contact us at pebble on 01733 367799 or email us via our contact form.

source:http://www.pebbleltd.co.uk/top-tips-for-web-design-in-2013/

Monday, 7 January 2013

7 Important Tips for Designing and Maintaining a Large Site

7 Crucial Tips for Designing and Maintaining a Large Site

Projects vary in scope and size, and the challenges they entail vary likewise. As a lone web designer, the biggest job I am responsible for is FlashDen. Along with thousands of active members all chatting, uploading and buying, the site processes large amounts of money and large amounts of traffic.
Designing, redesigning, maintaining and working with developer team has given me some useful insights and tips for making life easier. And since today we’ve launched my latest redesign of the site, it seems like a good time to write up my top 7 tips!

1. Design and Code for Maintainability

The first and biggest tip I can give, is to design the site so that it’s easy to maintain. Often times when designing a site you might sacrifice things for aesthetics. For example you might use images where text or styles would suffice. Or you might deliberately choose a menu structure that has no room to grow. When the site is large, this becomes a really bad idea.
When I built the very first version of FlashDen almost two years ago, I used images for buttons. They looked really nice, but I wound up with a library of 100 different button images, not to mention rollovers. Then in the next couple of months every time a developer needed a new button they had to ask me to create an image. Needless to say I learnt that lesson pretty quick and we switched to a single button class that maybe doesn’t look as good, but is much better for peace of mind.
Another aspect of maintainability is thinking about how the site is going to grow and change. For example, as new pages get added on, where do they go? Early on I wanted to have a horizontal navigation, but this is really limited After some experimenting, we wound up using a vertical nav, allowing for submenu items, and then on top of that, added a tab structure into pages to allow for related pages to be grouped together. I’m not saying it’s the best navigation in the world, but it certainly means we’re not redesigning every time a new section is added to the site!
So in designing for a large site, look for ways to make life simpler later, because you’ll be glad you did!

2. Figure out your User Groups and Tasks

One of the biggest differences between a large site and a small one, is the number of different user types who might be using the site. For example on FlashDen, there are buyers, authors, visitors, admins, and members. Each group has a different set of aims and tasks they have to carry out. Sometimes these tasks overlap, but sometime they are quite different.
The best example of a place where user tasks are at odds with each other is on a homepage. Nowhere else on a site does every user group converge, and nowhere else is it so vital to make sure everyone gets what they want. And of course you have to be careful that in serving one user group you aren’t ignoring another.
In this latest redesign of FlashDen, the biggest area that I worked on was the homepage. The first thing I did was list out to myself all the things that each user group needs to do:
  1. Buyers – People who are on FlashDen to purchase files
    Start browsing items, start searching, access their personal homepage, deposit money, learn how the site works (for newer buyers)
  2. Authors – People who are selling goods on FlashDen
    Chat with other members, get featured on the homepage to push their items, find out about site news, quickly get to their portfolio & earnings
  3. New Visitors – Potential Buyers/Authors/Members, who have just arrived
    Learn what the site is/does very quickly, get started, find out types of files and prices
  4. Members – People who aren’t really buyers or authors, but just participate in the community
    Chat with other members, see site news, browse files
  5. Admins / Reviewers – Our staff who manage file approvals, moderate forums, and generally participate
    Get quickly to file approvals, see the latest forum threads, hear site news
When you know what different user groups want to do, then you can design a page that solves all their needs. Needless to say this is a task that gets exponentially harder the more groups and tasks there are. On other pages in the site, you will often get a subset of user groups to worry about, but on the homepage they all converge. Not coincidentally, the homepage is the most important bit of design work you have to do on a site.
Before you can solve the different needs though, you need to prioritize the user groups, and in order to do that, you’ll need to understand what the site is trying to achieve.

3. Understand the Site Goals

Although every user group naturally feels they are the most important, it is up to you to prioritize them according to what the site itself is trying to achieve. For example on FlashDen after sitting down with the team we drew a few conclusions as follows:
  • The top priority for the site is to serve buyers. When buyers are served well they keep buying bringing income and simultaneously serving the authors.
  • It’s vital to get new visitors to quickly learn about the site and hopefully become members. FlashDen is still in a relatively new market, and new competitors are still appearing, so that makes it more important to capture visitors and convert them to buyers or authors or members.
  • Authors are important because at its heart FlashDen is really about her authors, but out of all the user groups they are the most committed to the site.
  • Members are not as important as Authors and Buyers, but do contribute to the community surrounding the site.
  • Admins / Reviewers are the least important as they are a paid group.
So following from this, it’s possible to conclude that the homepage needs to server users in this order: Visitors > Buyers > Authors > Members > Admins.
Understanding what your site is trying to achieve is the final thread that sews your user tasks together and tells you what you should be trying to put on the page. Ideally on every key page you should identify the user groups, tasks and priorities. For a vital page like the homepage I do this formally on paper, and for lesser pages I will often just do it in my head while designing.

4. Design, Refine, Refine, Refine …

It’s only after you’ve figured out user groups, tasks, site goals, priorities and so on, that it’s time to design! It is really vital that you do this first, because on a practical level, it dramatically lowers the odds that you are going to have go back and redo your design. Whenever I have just started designing a big site, without really analysing first, I have inevitably had to rework lots of screens or even whole interfaces.
Lots of designers like to use wireframes at this point – that is to simply lay out a bunch of lines and boxes indicating roughly where things should go. Personally I prefer to work in Photoshop from the start because I’m quick enough and it lets me really see what’s going to happen. I also think that there is more to information design than where something appears on a page. Simply altering colours and background colours can make a page element further down the page suddenly seem more important.
Once you do have a rough idea of how the information needs to work together, you should come up with a working design that is generally OK, and then refine, refine, refine. I often will wind up with 5 or 6 versions of the same look, where I’ve tried varying different things like type sizes, images, layout alterations, backgrounds, and so on, to see how it affects the information you’re presenting.
No matter how good you think the first layout is, I can guarantee that after spending more time and coming up with more versions you’ll have discovered that your original wasn’t quite as good as you first thought. Sometimes you wind up throwing out the whole design and starting again, but if you do have a good base, then refining should get you to a great finish.

5. Get Others’ Opinions, but Make the Final Calls

In any large job you are going to have a lot of other opinions involved. In most cases these will be the opinions of your client. Prior to starting FlashDen, I used to work with all sorts of companies building websites. Among them I did have the misfortune to design for several large insurance companies and a few governmental organisations. I say misfortune because when you get to that size of client you are dealing with a lot of stakeholders, and in many situations it isn’t clear where the real power to make decisions lies. This can result in endless meetings, endless changes and a high degree of difficulty for carrying through your vision.
Whatever the client, it’s really important to get their opinions. Aside from anything else in most cases they know a lot more about the business than you do. Hopefully they also know more about the users than you do, and with this knowledge will be able to give constructive advice.
It’s also important to get the opinion of the development team you are working with. At FlashDen we’re fortunate to have two devs who have a lot of skill in user interface design and usability. And their input, along with the rest of the team, made a lot of difference to the end product.
But in the end, it’s up to you as the expert designer to come up with the final call. If you have a tough client this can be tricky, because a client often believes they should make the final calls. If that is the case, you need to (a) find ways to explain, educate and show the client that your choices are for their benefit; and (b) sometimes bite the bullet and accept the client’s directives as a further constraint in your project, and find ways to make it work.

6. Organise for the Future

When you are coding up a design for a big site, it’s really important to again think about the future. How you manage your files and folders will impact you greatly later. For example recently we have decided to build a sister site to FlashDen that focuses on audio only called AudioJungle. To make things simpler the site is going to run the same HTML, with just stylesheets to make it look like a different site. A development like that throws up all sorts of new challenges to my file and folder structures, my stylesheets and my HTML. Here are some things to keep in mind:
  1. Organise yourself into a good folder structure
    Scripts, stylesheets, interface images, content images, and so on, all need to be kept separately. With a small site you might be able to just dump things together, but the bigger you get the more important it is to be able to find what you need.
  2. Use a coherent and intelligent naming system for your files
    There’s nothing worse than looking at a pile of images with names like "gd_l3.jpg". How you do it is largely a personal matter, but I find naming using common prefixes and descriptive file names helps a lot. So for example I might start every image going in the header with the word ‘header_’, every background with ‘bg_’ and then a menu background from the header would be called ‘header_bg_menu.jpg’. Prefixes have the advantage that when your files are sorted by name, they all appear together.
  3. Use Subversion
    This was forced on me by our developers, but thank goodness it was! Subversion tracks files and file changes and stops you from overwriting other designers/deveopers working on the same project. Also importantly it helps you roll back to old versions of things. It takes some getting used to, but even minus all the reasons developers use it, it’s worthwhile for HTML/CSS designers. Don’t know about Subversion? Check out Subversion for Designers
  4. Be thoughtful about how you write your HTML and CSS
    It’s really easy to make a mess with your HTML and CSS files, and it’s really hard to clean them back up. After four redesigns, I’m still using many of the same CSS files and it is a mission cleaning up classes that aren’t used any more or finding obscure definitions wrapped in lots of layers. Use lots of comments, possibly even multiple stylesheets, and make sure you name your styles well!

  5. Get Browser Compatibility working EARLY
    This is an area I went really wrong with FlashDen and we’ve been paying for it ever since. My initial layout worked in IE7 and I ignored IE6 until after we’d finished building the whole site. Ever since we’ve been adding IE conditionals, and hacks and workarounds. It’s much easier to make something compatible when there are only a few elements on the page than when you’ve built a massive site, so don’t follow my foolishness!

7. Make it Easy to Develop With Your Stylesheet

The bigger the site, the less likely a designer will get to see or modify every single page. If you’re a single designer on a big site – like me – then you also might not want to be called in for every thing. So it pays to make a stylesheet that can almost by default makes things look nice. For example:
  1. Make sure you style default elements like <input>, <strong>, and so on.
    That way the page will automatically present well. If you rely on people doing things like <strong class="my_bold"> then inevitably you’ll wind up with variance on pages.
  2. Create reusable elements that developers can use.
    For example on FlashDen we have a table class called "general_table", that makes a good fall-back style for data. When I have a chance to style a page I can do more specific types of tables and data highlighting, but at the very least a developer putting together a page has a good all-round table style to use.
  3. Make sure your page layout has a structure that looks nice even when it’s just got text in it.
    Inevitably there will be pages which you haven’t had a chance to add images to, and which may look a little boring. By using things like heading styles, sidebars, and so on, you can make sure that they still look pleasant and have some visual style. For example on FlashDen we wrap most text blocks in: <fieldset>
    <legend>Heading</legend>
    Content
    </fieldset>

    And this by default wraps the text up with a nice little border around it and a heading. It’s easy for a developer to work with and does a good job of separating text up and making it look more readable. We also have a sidebar component which is just another package for extra text content, but that again makes the page look more visual.
Naturally it’s optimal if every page does go through a designer, but it’s also much less stressful knowing that even if they don’t, it’ll still look professional and uniform.

What’s your opinion?

So those are my tips, if you have some of your own from working on bigger sites, leave a comment!
source : http://net.tutsplus.com/articles/general/7-crucial-tips-for-designing-and-maintaining-a-large-site/

Wednesday, 26 December 2012

5 Mistakes that should be avoided in SEO while starting a new website

Similar like other technologies, SEO also have a lot of myths and confusions. Since it is the key point of the online businesses, the same can be crucial. So avoiding some common mistakes, we can ensure our online business to move on a smooth road. We should keep some points in mind while carrying on the SEO process:
 

1.       Submitting to 1000 Search Engines
Generally people start their SEO by submitting their website to search engines (some companies also offers to submit to 1000 search engines!), but as far I know it’s not of any worth. It’s totally waste of time and money. The only search engines that are of any use are few and they will automatically recognize and index your website once they found its link anywhere crawling. Instead of submitting into any search engine, just place its link on popular websites. Search engines will crawl your website sooner than you might think.
 


2.       Poor Content Pages
Webmasters load their pages with images and flashes to make them attractive (or provide some specific information), and do not write any content on the page. Especially in case of product site or some kind of wallpaper site. Those pages look content rich to users but may pose a risk to flag your page with thin content pages by search engines. So adding an alt attribute to images, and a little description of the images and products or wallpapers will avoid instances.
 

3. Ignoring URLs
Generally people heard that dynamic URLs are not good for SEO, and static URLs are helpful but they forget its real importance. Not even making your URLs static is pretty enough for search engines. They play an important role in SEO and they should contain your prime keywords. Especially keywords in URLs are more important in Yahoo and Bing, and Google also give a higher weight to it.
 

4. Backlinks
Of course backlinks are the key players in SERP rankings but these are the quality backlinks that do that. Putting your links in link farms even harm your rankings. It is true that making quality backlinks requires more time and efforts but they ensure your SERP rankings. In terms of backlinks, another mistake that people make is to try building links speedily. They try to create backlinks as soon as possible to get their website higher ranking. But it’s not a wise task. The backlinks should be building steadily and should not looks odd to search engines.


5. Keyword Stuffing
It is seen that new webmasters or SEO load their websites with lot of related and unrelated keywords. This is called excessive keyword stuffing or keyword spamming. According to the recent Panda Update, Google phased out the websites practicing keyword spamming. The webpages should have a proper keyword density (around 1-2% is fine) and should not contain unnecessary or unrelated keywords.