Get started with web fonts: 15 expert tips

Thousands of web fonts are available to use on your websites, bringing the aesthetics of print design to the web. Here's how to make best use of them.

Over the last few years, the possibilities for using type on the web have expanded enormously. In the bad old days of the web, designers were restricted to a few 'web safe' fonts, which meant everything looked pretty much the same, or using images to replace the type - a clunky solution that caused problems for the reader and technical problems in the browser. Nowadays, though, you can access an astonishing array of professional typefaces for use on your sites, bringing the aesthetics of print design to the web.
Since around 2010, widespread support of @font-face in all the major browsers, plus a new web open font format, WOFF, has led to a technical revolution and the rise of a number of web font hosting services. These companies allow users to pay a subscription to host an enormous range of web fonts on their website. Popular services include Typekit, Fontdeck, WebINK and Fonts.com.
Tim Brown is the type manager at Typekit. Here are his tips for getting started with web fonts:

1. Be selective

Typekit fonts rock out in these digital posters from Voltage Fashion. Left: Hellenic Wide, League Gothic and Bello Caps; right: Vinyl

Pick a typeface that is appropriate for your content (read it, and know your font through and through); appropriate for its context (use text faces for body copy, and so on); and web-ready (both properly licensed, and optimised for the medium).

2. Put type first

Once free from traditional 'web safe' fonts like Verdana and Georgia, make design choices based on the typefaces you use. Building a composition outward from the type produces very different results to swapping fonts into an existing design. The principles of 'Typography First' are explored in this article by type guru Elliot Jay Stocks.

3. Take your time

The web may move at lightning speed, but quality typesetting requires lots of patience. If you don't stick up for the time it takes to do a job with precision and diligence, who will?

4. Know what's out there

At Typekit, we do several things to help point out typefaces that are worth a look. For example, Jason Santa Maria spearheads a column called About Face, in which we profile specific fonts. While Lists are used for finding alternatives to common fonts, and grouping web fonts in ways metadata can't.

5. Look for specific suggestions

Part of the Elementar family, created exclusively for electronic displays

Typekit also recommends web fonts for Paragraph or Heading use within its font-browsing interface. When you've found fonts you like, you can mark them as favourites, or add them to kits and get right to work on your website.
With around 100,000 fonts available, 99.9% of them are created for high-resolution print outputs. So, what now for web designers? Peter Bil'ak, founder of Typotheque adds five more tips to help you create the best web font designs for your online needs:

6. Be mindful of file size

Typotheque fonts can support as many as 200 languages, which results in fairly large files. A single style of Fedra Sans can be as large as 400K. While this may not appear large, serve it thousands of millions of times and it starts making sense to optimise it.
One approach is to strip out unnecessary characters from the web font version. Most web browsers can access only a small fraction of those characters anyway.

7. Stay across browser updates

Bear in mind that browsers are constantly changing. For instance, the latest version of Firefox can now display advanced OpenType substitutions such as small caps, ligatures, swashes and different numerals. This means some options that are usually stripped out can now be included if required.

8. Design for the medium

The Lost World’s Fairs site was praised for the personality afforded by its use of web fonts

Consider what kinds of web fonts will function best on screen. Sturdy sans serifs usually work well. But they also need to have proportions that are suited for reading in small sizes, which generally means having larger x-height and omitting finer details that can't render well on screen.

9. Explore new scripts

There are over 400 languages in India. While in the West we have plenty of fonts for the Latin script, I've encountered writing scripts that have limited or no digital fonts at all.
My company, Indian Type Foundry, is one of the first to do so, and the country is becoming increasingly design-conscious - so the opportunities there will grow.

10. Test, test and test again

As a designer using web fonts, be sure to test their appearance across different platforms and different browsers. It sounds an obvious thing to do. But it's all too common to design a page on a Mac when most readers use Windows and will see something quite different from how it was originally designed.

• These tips were originally published in Computer Arts Collection: Typography. Now here are five more tips from us...

11. Try before you buy

New service Skyfonts let you trial more than 8,000 fonts, and rent rather than buying them

Worried about committing to a web font you're not sure will work on your site? Font specialists Monotype has recently launched a new service that lets you trial any of 8,000 fonts for free. With Skyfonts, you can also rent fonts for as long as they’re needed.

12. Consider free web fonts

In the world of web fonts, as in most creative arenas, you usually get what you pay for. Yet if you search hard enough amongst the free web fonts offered online, you'll find some diamonds in the rough. That takes a lot of time and effort, though, so we've put together a list of the best free web fonts to save you the trouble - check it out!

13. Don't go overboard

Just because thousands of web fonts are available to you, don't use them just for the sake of it. Always remember you're designing for readers, not to impress other designers. If a tried and tested combination of two traditional web-safe fonts is what works best for the reader, then stick with that.

14. Brush up on the basics

Learning about the fundamental rules of typography for print remains an essential grounding for using web fonts. Check out our article What is Typography? to get to grips with the basics.

15. Further reading

Anyone serious about developing their understanding of typography - for both print and web - should read at least one of these classic books:

• Inside Paragraphs: Typographic Fundamentals by Cyrus Highsmith.
• Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann and E.M. Ginger
• The Elements of Typographic Style by Robert Bringhurst

link source:http://www.creativebloq.com/web-design-tips/web-fonts-tips-1233034

9 Information Design Tips to Make You a Better Web Designer

 

1 – Be methodical

Information design is a problem that gets more and more complex the bigger the website. However even a small website will benefit from a methodical, step by step process to figure out how to order and organise the site’s content. Here are some simple steps you may wish to take:

1. Understand the Site’s Content, Processes and Purpose
   It’s pretty hard to organise a bunch of stuff if you don’t know what that stuff actually is. So your first task is to skim through the site’s content, processes and goals. A site’s content means copy, images, video and other assets you’ve been given or briefed on that needs to go into the site. A site’s processes are the tasks and workflows that users will need to complete to interact with a site. And the site’s goals refers to both the client’s goals and the user’s. So for a simple restaurant example you might find that you have text for pages 1 through 20, you know that users will be attempting to complete some task such as making a reservation. You might also see that a user’s goals on the site are to find out what the restaurant serves, where it is located and whether there are tables, and then hopefully make a reservation. Finally the client’s goals might be to serve the user, but also to push them towards a set of specials they run.
   
   
2. Prioritize and Look for User Paths
   Once you’ve got a firm grasp of what’s going into the site, you can begin to prioritize information and figure out how users will traverse the site. What paths will they take to accomplish their goals? What pages are the most important? Which should be seen right up front and which are just supporting information? Even with a simple example like our restaurant site, there are many ways of setting out the information. For example you might push specials straight away on the homepage, or you could tie them into the reservation process, or you might work them into the menus. Similarly you may find that given a client’s goals, you will have a different priority on page content. Maybe the client tells you that no-one is ever able to find this restaurant, so you need to make a How to Get Here page and give it a high priority.
3. Organise the Information
   
   With an understanding of what is going into the site, and a clear grasp of how the different elements relate to each other, how users will want to work through them, and how important different sections are, you can now organise the information for the site. This organising involves not just categorizing pages – for example figuring out that ‘about the company’ fits under an ‘about’ tab – but even questioning and rearranging the content you’ve been given. Sometimes you may find that it’s better to combine multiple pages, break up one long section, turn some text into a simpler diagramatical representation, or any number of other rearrangements. Develop a sitemap or plan of how the information will site in a heirarchical way. Although sitemaps are usually just a set of boxes indicating pages, you can work in all sorts of extra information explaining how the site is going to be set up, including things like quick links from the homepage, how different sections might tie in together, and paths a user might take through a sitemap.

After realising there was so much information on the marketplaces, we now believe a wiki is the most effective way to organise it

---

2 – Think out of the box

Sites with a reasonable amount of complexity can be rearranged and reorganized many different ways. One site that I’ve worked on organising and reorganising countless times is FlashDen. I’ve lost count of the number of times I’ve looked at that menu and rearranged it. In some instances we just move pages into different sets and groups so that they seem more logical, and in others we’ve introduced more out-of-the-box thinking.
For example some months ago the menu was becoming overly complex so we removed a whole heap of the more "fluffy" menu items and created a blog that now houses competitions, newsletters, subsite links and other pages that were cluttering up the menu.
Recently we’ve found we have many of what I call "stragglers" – that is pages without a home in the menu. From an information design point of view, stragglers are terrible – even I can’t remember how to get to some of them! The solution this time is to build a wiki system, pipe top level content into the menu behind the scenes, and then use the wiki to house deeper levels of information with its own search, tagging and categorization facilities.
The point of my experiences with FlashDen is that organising information doesn’t even necessarily have to be about putting it into menus and submenus. You may find that some information shouldn’t be on a site, or that it requires a subsite, or that you need to do something else altogether. With FlashDen I have the advantage that it’s been almost 3 years now that I’ve been looking at the content and still to this day I find new arrangements and solutions.
To be an effective information designer and to find the most optimal solutions often requires thinking out of the box. Of course saying "think outside of the box" is much easier to say than to do! Sometimes we are constrained in a box we can’t even see. Some time ago I heard of an experiment where a bunch of jumping bugs were placed in a glass box and over time learnt to jump only so high. When the glass lid was removed the bugs continued jumping the same, restricted height not even realising they could if they wished get out.
So how do you overcome a box you can’t see? Simple! With the help of others who aren’t restricted by the same issues you have. For complex information designs I will often ask other people for organisational ideas giving them only the raw problem and not my own permutations. Getting say a programmer’s ideas or a user’s views will often surprise you as their perspectives are completely different from your own and unhindered by the same set ways of thinking.

If anyone has a huge website, it has to be Chevron. How would you organise all that information?

---

3 – Keep your structure balanced

When you do organise large sets of information, an obvious question that always arises is how deep or how wide should your navigation be. Depth refers to how many layers of categories and subcategories there are, while width is about how many of each level there are. The trick is to find the balance. If there are too many items on a single level – especially the top level – then you risk confusing the user. On the other hand if a user has to click many levels in, you risk losing them.
A good rule of thumb is to keep the number of options on a given level to 4 – 8. If you have 8 top level items, each with 8 subcategories, and each with 8 sub-subcategories, you’ll have enough space for a 512 page site. Of course rarely do things automatically balance out so well. So again you have to be careful that you don’t have a heavy side and a light side. For example, on a site with a couple hundred pages, if you put contact up on the top level somewhere, chances are it’s not going to have 8 subcategories with 8 sub-subcategories. It’s more likely that contact is going to be a pretty simple section – even for a complex site.

On the flip side if you don’t put something like contact at the top level, you may get a more balanced depth of information, however you risk not having an important user task completed because it’ll be hard to figure out how to find the contact information. A simple solution to this particular problem might be to add ‘quick links’ where you give a user a few options on the homepage to jump deeper into the structure without navigating the usual way.

On NETTUTS we decided to facilitate user habits with demo and source button placement.

---

4 – Design for scanning, skimming and jumping

I don’t know about you, but it is seriously rare that I will ever fully read a webpage. Whether it’s to read instructions, terms and conditions, or just regular copy, most of the time I skim, scan and jump. Assuming I’m not the only one who does this, it makes sense to design pages to faciliate this way of consuming information.
Don’t wrap key information in bundles of text – highlight it. Don’t give users paragraphs on end – break them up with headings, subheadings, bullet points, diagrams, whatever it takes! Think about how a user will use your site and design it to facilitate their use.
A good example of designing for user consumption is on our sister site NETTUTS, a site that as most of you know, publishes tutorials about web development topics. Now on NETTUTS we noticed early on that most people, on first viewing a tutorial skip right through to the end, where they try to find a link to a demo and / or source code so they can decide if the tutorial is worth reading in the first place. Once we realised this, it was a simple matter to add special Demo and Source buttons and place them consistently at the top of the tutorials. This simple adjustment to match our design up to user consumption patterns has gotten us a lot of happy feedback.

PatternTap is a good place to get ideas and see how other people design articles and textual information

---

5 – Design text that wants to be read

I’m not sure if I’m just getting older, or if spending all my time in front of a screen is just making me picky, but lately it really bugs me when I’m presented with text that doesn’t compel me to read it. The aim of a site design is usually to transmit information and most of that is written text, so focusing on displaying it well should be a priority.
Using too-small font sizes, low contrast between text and background colour, or badly using light text on a dark background, are all design sins that we’ve all been guilty of (me on many on an occasion!) But beyond these, there are other ways that your design can make the visitor actually read. Aim to design such that your layout focuses visitors on the copy and leads them in with titles, subheadings, demarcations, pullquotes, and other techniques for pulling the eye.

A simple example of guiding users through a site – ThemeForest‘s 4 step guide

---

6 – Guide the user both across pages and through pages

Earlier I mentioned User Paths – that is set ways that users will tend to traverse a website. Many of these will come about simply by the way people behave, but with planning, you can choose how a user will be guided both through a single page and across multiple pages. Once you know specific paths you can work in visual guides and links to help them move along that path.
For example on FlashDen, when a new user arrives, it is our aim to get them to register, find files, deposit money and then buy those files. So we first give them a summary of the four step process on the homepage, then at each stop there are pointers to direct the user onto the next step. In our next redesign I’m hoping to make this path even more obvious as it’s essential to the site working as it should. Note that the path I’m describing is not 4 pages, but 4 tasks. For example finding files might involve the user looking at dozens of pages, but it’s one discrete task. User paths don’t need to be through set pages, they can just as easily encompass set tasks!

Steve Krug’s very worthwhile book!

---

7 – Don’t overcomplicate things

It should go without saying that simple is better for users than complicated. Nonetheless it’s all too easy to overcomplicate designs. I know that I often make things seem more complicated so that I have more visual elements on a page to work with (bad Collis, bad Collis!) Another overcomplication sin is using unnecessary words on buttons and calls to action. Steven Krug in his excellent book Don’t Make Me Think gives the example of a hypothetical employment site with a button that reads:

• Jobs
• Employment Opportunities
• Jobs-o-rama

One of these is clear, one is reasonably obvious, and one is – well who knows.

Information can be presented as more than just text!

---

8 – Visualize information

As designers, we more than most, know the value of a good visual. And there are plenty of opportunities to diagram or visualize some data, concepts or information. This very article as you will remember begins with a very basic diagram of how interface design, information design and aesthetic design relate. These visuals not only break up text, but they are also more memorable and give you an opportunity to bring a page to life.
DoshDosh have an interesting article on information visualization, diagrams and what the author calls infographics that is worth checking out even if it’s only to see the brilliant graphic examples.

Analysing paths and goals has never been easier thanks to tools like Analytics

---

9 – Analyse your information design

Information design is one of those things that is hard to get right on the first attempt. So once you’ve built a site you should be analysing it to see how people use and digest the information, how they behave and where you can improve your design.
A neat tool in this regard is Google Analytics. For example where I mentioned User Paths earlier, Analytics lets you track paths through pages using the Goals feature. You set up a sequence of pages and Analytics will report the %’s of visitors who make it through (and by extension click away) at each point.
Another Analytics feature you can use is search term tracking which lets you see what users are searching for on your own site’s search field. Knowing what people are looking for tells you what information needs to be more readily available!

link source: http://psd.tutsplus.com/articles/9-information-design-tips-to-make-you-a-better-web-designer/

 

3 Web Design Tips to Generate More Leads

3 Web Design Tips to Generate More Leads

Your website is there to help your business get found online. It serves as a way for customers to learn more about whom your business is and what you, as a company, offer. But not all visitors that arrive on your website are ready to make a purchase. These people may just be scouting out companies that do what you do to try to prepare themselves for the moment when they are ready to make a purchase. In these cases, it is important to capture the lead so that you can do what you can to remain in the forefront of this prospects mind.
The way you design your website can help you capture these valuable leads. Here are three web design tips to help you get the information you need so that you can nurture your leads and help your business thrive online.

Use Social Media to Your Advantage
Website visitors have become accustomed to seeing the social media logos of their favorite networks, such as Twitter and Facebook. By posting these logos, links to your social media accounts and a call to action asking for your website visitor to engage with you on social media, you can encourage people right then and there to follow you. This will help you gain more followers that you can slowly nurture with valuable posts and content until they are ready to make a purchase. Then, when they are in a position to buy your goods or services, you will be in the forefront of their mind because they will be connected with you on social media. By simply adding social media links in your web design, you can immediately start a relationship with your prospect.

Offer Valuable Content for Free
People love free stuff. Combine that with the increasingly popular content marketing and you have a recipe for success. This form of marketing allows you to offer something for free on your website. This free offering can be an e-Book written to about a specific topic that you know will help your website visitor and future customer, or a subscription to your blog post filled with daily tips and tricks that will give bits and pieces of valuable information. When you offer something for free, do so in exchange for an e-mail address or phone number so that you can get in touch with your prospect again in the future.

Make Your Call to Action Impossible to Miss
Your website visitor is busy and they may only spend a few seconds on your website before they head off to other competitor websites. Therefore, you want to make your call to action or prompt to gain their personal information easy to find and impossible to not react to. One way to do this is through an interruption window that pops up after a few seconds on your site offering your free content. Another way to do this is through the use of arrows or bright colors to direct their eye to that portion of your site first. Depending on what it is your business offers, there is a way to make your lead generation call to action clear and straightforward so that you can be sure you will capture your website visitors’ personal information.
Following up with customers once they have been to your website is a sure way to make a bigger splash in the market and drive more sales. Likewise, offering something of value to them as they make their purchase decision will keep your business in the forefront of their mind and give them a reason to remember you when they are ready to buy. Contact us for help designing a website to drive these conversions.

link source: http://www.infintechdesigns.com/blog/3-web-design-tips-to-generate-more-leads/

Time to Design! Where Do I Begin?

Time to Design! Where Do I Begin?

Welcome, Startup Weekend participants! Once you’ve received your free .CO domain name from www.domain.com/startupweekend, you’ll be ready to begin building your website. If you’ve never designed a website before, the task can seem daunting, but have no fear! With Domain.com’s intuitive site building tools, even beginners can be successful designers.

To help get you started, we’ve consulted with our very own Director of Web and UI to get the best tips and tricks for designing the most visually appealing website. Check out his advice below and good luck!

6 Tips for Creating a Great Website

Think of the websites you visit the most — chances are they are clean, professional, and easy to navigate. This is no coincidence: the human mind takes just a millisecond to make a definitive decision as to a site’s credibility, and this initial judgment is based entirely on aesthetics which means a good web design is critical for retaining visitors. So before you get going, consider these 6 design tips:

1) Plan Your Site: Before turning on your computer, consider the layout, page structure and how users will move from one page to another (navigation). Then, sketch out your site on paper.

2) Understand Your Audience : Knowing your audience will help set the tone for your content and layout, as you identify what visitors will be looking for on your site. It’s also important to consider popular web browsers and your visitor’s screen resolution size so that they see your site the way you intended; you can find this data in most site analytics tools. If you’re not sure how wide to make your site, 960px is a great place to start.

3) Allow for Easy Navigation : Since people often read from left to right and top to bottom, the upper left-hand corner of your site is the first place your visitors will look. Place your navigation buttons here and keep them consistent, along with font and color choices, for easy reading and fluid movement from page to page.

4) Choose a Color Scheme : If you’re designing your site around an image, try uploading it to a color palette tool, like DeGraeve.com‘s, for example, for complementary color suggestions. Be sure to remain consistent with your design patterns, and stick to no more than three font types and colors.

5) Use High Quality Photos : In order to give your site a more professional appearance, all images should be clear, focused, and of high resolution. An alternative to taking your own photos is buying them from istockphoto.com; at about five-dollars an image it’s an inexpensive way to visually take your website to the next level.

6) Test Your Site, Then Test Again : When you’ve created or redesigned your site, ask friends and family to test it for you. They may find things you’ve missed, or point out areas of confusion.

When paired with quality content, executing these tips appropriately will help retain first-time visitors and transform them into regulars.

We hope this advice will be helpful to you as you begin designing your website. If you haven’t already, be sure to redeem your free .CO domain and hosting trial today at: www.domain.com/startupweekend

source: http://startupweekend.org/2013/01/03/domain-coms-web-design-tips-for-startups/

Six Expected Web Design Trends in 2013

Prediction #1 – Responsive Web Design:

This prediction is expected to turn out absolutely true as we all know that new kind of desktop and mobile devices are being introduced in the market every now and then. Our Each device, be it desktop or mobile, will vary in screen size and other proportions. The reason why responsive web designing is expected to be in trends of 2013 is that designers cannot design a new design for individual website. It will not only take a lot of your time but will also cost you a fortune.
Responsive web design will eliminate all of these problems because of its ability to respond to the size of the device being used. Thanks to responsive web designs, designers will not have to make a new layout for different mobile and desktop devices. A single design will work perfectly on all devices. No would avoid this trend because this trend is expected to make things much more convenient for all the designers.

Ultimate Responsive Web Design ToolKit

This article will help designers in building a strong toolkit to make a responsive website.

Responsive Web Design: An Ultimate Guide

This article will give you suggestions regarding long term marketing strategies for mobile responsive design.

Best Responsive WordPress Themes 2012

The quality of these Responsive WordPress Themes is excellently good in real sense as this is what matters the most. You can have a quick look for selecting the designs for your device.

Prediction #2 – Designed Typography:

Thanks to the variations available in Typography, designers have a lot of fonts available to select from. However, selecting typography is no longer a small decision and selecting a trendy typography design is very important. Our prediction is that 2013 is going to be the year of typography as it will be given much, much importance. In fact, typography will become an integral part of any website’s design. Designers will no longer replace text with the beautiful images and will try to enhance website’s beauty through typography. By 2013, it is expected that designers will give typography a lot of importance because it is considered to be the foundation of any website.

A Collection of Beautiful Typography

25 Fresh Typography Free Fonts For Your Next Designs

Prediction # 3 – Vertical Scrolling:

Websites’ optimization is going to be a very important decision. Nowadays, a lot of websites offer both, vertical and horizontal scrolling as far as mobile devices are concerned. However, vertical scrolling will lead the trend in 2013. Vertical scrolling is easy, convenient for all the mobile users. Vertical scrolling is quite user friendly, efficient and definitely allows easy navigation. Apart from all this, another trend that is expected to hit 2013 is vertical scrolling of menus and buttons. When a user is scrolling a page down, the header menu should scroll down with it so that the user does not have to go upwards to view the menu again. Same goes for shopping carts and social buttons. Vertical scrolling will be in demand because it allows user a friendly navigation throughout the website.
Smashinghub is an example of Vertical Scrolling. you can only see scroll on vertical..its an example of Responsive Design.

Prediction # 4 – Huge Buttons:

Since the ‘touch & tap’ is getting famous with every passing day, we can totally expect the trend of huge buttons in the upcoming year. Initially, big and huge buttons were being used just for the beautification purposes however, in 2013; they are expected to become a necessity. Huge buttons will definitely make tapping a lot easier but yes, this trend does have a flaw i.e., huge buttons would definitely require more graphics which will result into slowing down of the website. Designers will have to find a way out or else this trend might not last long. Let’s see what 2013 has in store for buttons.

Prediction # 5 – Branding will take a hike:

We all know that businesses want their brand to be noticeable; people should be able to recognize their brand within seconds. The year to come is expected to focus more on designing the brand instead of simply designing a website pertaining to the latest trends. Designers will focus more on selecting the things that will compliment the brand itself or enhance the beauty of the logo. Designer will focus more on translating the business through the website and this trend is expected to last for a long time. It is very important for you as a business owner to get a website designed which represent your brand’s image and designers will research and give you a site exactly like this.

Prediction # 6 – Parallax Scrolling:

2013 will see a lot of increase in the usage of parallax scrolling effects. This thing has been in the industry for sometime but earlier it was associated with video games only. This feature will basically allow designers to control the depth of design objects on the website being designed.

Parallax Scrolling Effect in Web Design

jQuery Parallax and Scrolling Effect Plugins

Conclusion:

Above mentioned web design trends are only predictions by some of the experts and along with these we can definitely see a lot of other trends in 2013. Are there any trends that you think will hit the designing world in 2013? If yes, please share them with us.

source: http://smashinghub.com/web-design-trends-in-2013.htm

10 Usability Tips for Web Designers

Simply put, usability is making your website easy for your visitors to find the information they need when they need it.

A common misconception about usability amongst web companies is that usability is expensive. Yes, there are multi-national companies that spend thousands of dollars on usability tests and research, but for an everyday company usability is achievable without the knowledge of usability experts or without expensive equipment for testing.
Web designers have an even easier job to do, just by reading usability articles they can accumulate a fairly good knowledge about usability basics and how to implement them on a website.

1. Include a Tagline

A tagline is a statement or a motto that represents a company’s, or in our case a website’s, philosophy and mission. It should be the most obvious element on a website’s front page and it should clearly describe the website in one phrase.
Statistics show that a website has just 8 seconds to capture a visitor’s attention for them to browse the site further. Without a clear tagline a website would have a hard time keeping visitors long enough to browse the inner pages.

2. Implement Site Search

As with taglines, site search is a very important element on a website. When users are looking for something they typically look for a text field where they can enter their search term.
According to Jacob Nielsen’s web usability tips, make this search box 27 characters wide in order for the text to be clearly visible and easy to use. Place the search text field on the top of your web page, because users tend to search a website according to the F pattern, meaning from the top left to the bottom right.
Include a search button and clearly specify the search text, don’t use text such as Go or Submit, because these expressions tend to mislead your website’s visitors.

3. Don’t Use Extensive Graphics

Abusive use of design elements and graphics are always bad for a website, they just mislead the site’s visitors. Only design to improve the web page not just to decorate it. From a usability point of view, less is always more.

4. Use Site maps

Site maps are a relatively new website feature that improves web page navigation and also search engine optimization (SEO). Site maps in essence are a structural representation of a website’s pages and architecture. It can be a document in any form, or a web page that lists the pages on a web site, typically organized in hierarchical fashion.

Recently, search engines like Google, Yahoo and MSN have started offering a Sitemap protocol which is similar to a website’s site map page, but the data is organized in XML format. There are Sitemap XML generators that create these documents for a specific URL.

5. Don’t Break the Workflow

By workflow we mean every operation that a user is doing on a website. For example filling out a form, registering on a website, browsing categories, archives, etc. Don’t break these workflows, let the user cancel any operation. By not letting the user cancel an operation, we’re forcing them to finish it even if they don’t want to.
Not every operation on a website is obvious for users, guide them through the specific workflow by using descriptive tips. (e.g. when filling out a form). Javascript links usually break the workflow, so it’s not recommended to use them on your website.
Another mistake is not changing the color of visited links, this results in breaking the navigational design. Let users know where they’ve been and where they are on a website.

6. Create Easily Scannable Web Pages

Easy to read web pages plays an important role in maintaining visitors’ loyalty, keeping them on your site and reading your content. Usability tests show that the majority of users don’t read web pages, they scan them, looking for titles, bold, emphasized text or lists.
Eye tracking studies conducted by Jakob Nielsen show that users read content that resembles an F shape, meaning that the reading starts from the upper left of the web page, next it moves down a little starting from the left again.

Nielsen also states the implications of this reading pattern:

• Users won’t read a web page content word by word, they will extract important paragraphs, bold text, etc.
• The first two paragraphs are essential on a web page. These must contain the most important information that your visitors are looking for.
• Sub headings and lists stands out from the regular paragraphs. Use these elements to notify users on important information.

One important method that we can learn from traditional printed newspapers is that the journalists thought of a catchy headline and a catchy first paragraph to make readers read the whole article. They organize the content in an inverted pyramid format, just picture an upside down pyramid. The broad base represents the most important information in the whole article and the narrow tip represents the least important information.
We can use this format to organize web content by putting the most important pieces on top and the least important ones on the bottom, but how do we know which information is important and which is not? With the help of news values.

7. Don’t Design Misleading UI Controls

By user interface (UI) controls we mean web page elements, components and widgets that a user can interact with (e.g. a button, drop-down list).
Don’t design graphic elements that looks like a button, but is not. We often see text that is underlined and looks like links, but are not clickable.
By not having the action that the users were expecting, they would think that the site is broken and eventually leave. One other important usability tip regarding UI controls is consistency: Make sure that your UI controls are consistent.

Yahoo, as the above image shows too, is a good example of consistent UI control design. Every tab on the page looks and behaves the same, every link is underlined on mouse over, every button looks the same, etc.

8. Give Meaningful Feedback

Meaningful feedback is essential for a website. This is the communication channel between the site and the users, with the help of feedback we let the users know what’s going on on the site. In case of an error on your web page, don’t just print Error occurred, instead write meaningful error messages which tell the user what went wrong and what actions they can perform from there.


Feedback works in both ways. When a user fills in a form they are essentially giving you feedback. Don’t make the users have to fill in the same information twice. For example if a user has registered on a website and needs to fill in a form at some point, don’t ask for their name or any other information that they have already supplied, because these details already exist somewhere in a file or database. By simply getting these details automatically we are simplifying the whole process.

9. Do Not Overuse Javascript

With the advent of Javascript and the AJAX technique, web designers and developers can create responsive, transparent websites, but as with all new technologies there is a cost. In our case the cost is browser inconsistency. Not every user has an up-to-date web browser. They also might not have Javascript enabled by default.
By using Javascript on a website extensively we block out these users. Instead use unobtrusive Javascript and graceful degradation.

10. Avoid CAPTCHAs

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. Even the name sounds complex. The most general form of CAPTCHA is text embedded in an image and by testing visitors we can separate human users from spam bots.

The problem with CAPTCHAs are that each form of human verification method triggers a complex process in the users’ brains (e.g. figuring out the distorted text, adding two numbers, etc).
Another problem with CAPTCHAs are the inconsistencies regarding different cultures. For example Chinese symbols, numerals are different from most western letters and Arabic numerals. Chinese people have a much harder time using CAPTCHA ‘enabled’ online forms.

Summary

• Always include a tagline which should be the most obvious element on a web page.
• Implement a 27 characters wide site search and place it on top of your website.
• Don’t use extensive graphics and design elements.
• Include a site map page and register a sitemap XML document in search engines.
• Don’t break a user’s workflow. Allow every action to be canceled if necessary.
• Create easily scannable web content and place the most important information on top of your web page.
• Don’t design graphic elements that looks like a button, but is not.
• Present meaningful feedback and don’t forget that feedback works both ways.
• Use unobtrusive Javascript and graceful degradation.
• Avoid CAPTCHAs, use more usable methods instead.

source: http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/

Top 10 Web Design Tips

When it comes to web design, Alchemy Interactive – a leading London based web design agency – offers the following top ten tips: 

 

1. Have a strong, clear brand message

Your web site should project the image you want the world to see – and the great news is that through web design you can control that image entirely. In terms of physical design this means positioning your logo or key message in the top left hand corner – the part of the screen our eyes are most naturally drawn to.

 

2. Provide a clear, concise navigation method 

A good web designer will ensure that they use design techniques to lead the user around the screen and site. Clearly differentiated sub-sections and even a site map can ensure a concise, easy to follow navigation route, while good use of position, colour, contrast and size can all help focus the eye. Stick to one main navigation menu, remain consistent throughout the site, use sub-navigation and keep it uncluttered by avoiding drop down menus.

 

3. Make it intuitively easy to use

Visitors can be fickle and if a site is hard or slow to navigate they’ll be off. Ensure navigation buttons are obvious and easily identifiable – towards the top of the page is good – and have appropriate links directly from page to page so the user can quickly switch when something catches their interest. Finally, adhere to the functionalities people have come to expect. For example, if text is underlined your user will naturally expect it to be a link.

 

4. Keep it consistent

Users like to know where they are within a website and if the style of a page changes dramatically or somehow feels different visitors will become disengaged and can start to feel lost. Maintain consistency – and a professional image – by ensuring everything matches, from heading sizes and typefaces to design, colour and style of image. 

 

5. Keep it simple

The whole draw of using a website is that it should be quick and easy to use. To this end simplicity is key.
 

Succinct, useful information should be available at the touch of a button.  Today’s surfers won’t hang around so make sure the page is scannable. That means not being afraid to use (read: leave in) plenty of white space. There is a theory behind this – our eyes do not naturally work in a linear fashion. Given the chance they’ll take in more and then zoom in to an area of interest from the bigger picture. 

 

6. Ensure it’s easy to understand 

Visitors coming to your website typically won’t want to spend much time so ensure that every aspect is easy to understand; from the navigation to the copy. There are design techniques that can help make the information on a page easier to understand – think shorter sentences, larger font, sections differentiated by contrast and colour and, as previously mentioned, good use of white space. To this end, there are some common rules of thumb: never use more than three typefaces, or more than three different point sizes for a font and keep lines of text to 18 words - 50-80 characters – max!

 

7. Degrade gracefully

Not everyone has the latest pc and the fastest broadband so make sure your code is as simple as it can be without compromising on the elements you need. HTML code needs to degrade gracefully and not slow down or cause problems to lower spec computers. Cause an IT issue on your visitors pc and you can be sure that customer won’t be back again... or be recommending your site to anyone else!

 

8. Write it with your target audience in mind

When writing – or commissioning - the copy for your website, do bear in mind your target audience. Tempting as it is to use the medium to bombard the user with all the information you can, do keep it succinct in style and use laymen’s terms if appropriate – or include a glossary if technical terms are unavoidable. If you are hoping to attract visitors through search engine optimisation (SEO) you’ll need to consider the key words people will be using in their searches. Weave these into the copy as often as is appropriate to help propel your site up a search engines listings.

 

9. Consider usability 

At the end of the day if your website isn’t usable visitors will be off – as quick as a mouse. So, when working on the web design, consider the end user’s experience of the site.

It can be a good idea to make a list of the things a user will want to use your site for and then checking that these are easy to achieve and if necessary are readily available from the homepage – e.g. Start shopping, Current offers, Book an appointment etc. Then test early and throughout the process test and test again. The only way to really check that your site is as user friendly as it can be is to test it out on people who know nothing about your business.

 

10. Make sure it’s compliant

A good website should adhere to certain guidelines. For example, all web sites designed by Alchemy Interactive – a London based web design agency – comply with the Web Accessibility Initiative (WAI). This ensures their sites are suitable and accessible for people with disabilities and cover aspects of web design such as screen flickering - line with the Disability Discrimination Act (DDA).

 

source: http://www.alchemyinteractive.co.uk/resources/top-10-web-design-tips

8 Code Snippets for New Website Projects

1. Basic HTML5 Page Template

To get us started I have included my very basic HTML5 webpage template. This code snippet has the obvious doctype tag along with some additional header scripts. The template makes reference to an external page styles.css for your stylesheet designs, which can be updated to anything.
Also I have included references to 2 Google-hosted scripts. The first is jQuery 1.8.2 which is the most recent version as of this publication. Then second I’m including the HTML5shiv document so that older versions of Internet Explorer can recognize newer HTML5 elements.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Default Page Title</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

</body>
</html>

2. Clearfix for CSS Floats

I learned about the CSS clearfix method years ago when just first getting into coding. Most web developers understand how floats work, but clearing floats brings in some additional rules.
You should copy my code below into any CSS document you’re using with floats in a layout. Then you should append the .clearfix class onto any container elements with internal floats. This is useful, for example, if you have 1 or 2 sidebars floating alongside your main content and need to clear the lower footer content down to the bottom of the page.

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

3. CSS Browser Resets

Each web browser comes packaged with its own set of standard rules for styling documents. By default if you include no other CSS rules you’ll be given a set of standard fonts, margins, and padding for your website.
Typically web developers want to remove these preset values so that each browser will render the webpage exactly the same. Margins and padding is one big area, but there are other topics as well. I’ve worked out this snippet through Eric Meyer’s CSS resets while adding a few additional lines of, in my opinion, important code.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 

input { outline: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

4. Full CSS3 Gradients

The code below should create CSS3 gradients for nearly all web browsers on the current market. It can be tough when you are working with these new properties since there are so many rules to keep in mind. Also you have to conform to CSS prefixes for alternate rendering engines, and they’re tough to memorize!

background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);

Just copy and paste these properties into any CSS selector which needs a gradient background. Then you can modify the color values to anything you like, including rgba() syntax for transparency. Internet Explorer has a lot of proprietary settings for generating gradients inside the browser. But since many of these are unsupported elsewhere you may choose to remove them from production code.

5. CSS3 Transforms

This is a lesser-used property by developers because of the lack in support from older browsers. But CSS transforms have changed the way developers create user interfaces on websites. Thanks to browser transforms you can generate custom tooltips and custom shapes with just a few lines of code.

-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);

You will have to be careful about using the transform properties on too many elements. These may sometimes cause ugly bugs with Internet Explorer and some older versions of Firefox. Your designs will look best if you can tack on other properties as well, such as box shadows or rounded borders. Or alternatively offer a background image as a fallback method.

6. Custom @font-face Typography

There have been plenty of tutorials explaining how to include your own custom fonts using CSS3. The process isn’t as easy as designing text in Photoshop, but you do get some neat effects in the browser. Use this code snippet if you want to include copies of your own fonts and load a unique font-family value into your CSS.

@font-face{ 
  font-family: 'MyFont';
  src: url('myfont.eot');
  src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#webfont') format('svg');
}

h1 { font-family: 'MyFont', sans-serif; }

Note that you will still need to setup the font-family property on any elements you need using this font. Also you’ll want to provide at least a .woff file which is heavily supported by all CSS3-based browsers. Ideally you should include copies of the fonts which are OTF, TTF, EOT, WOFF, and SVG.
There is a fantastic tool online named Font2Web which can actually do this conversion for you. They are limited to a select number of requests per day, but it is one of the best free solutions to generate copies of your fonts.

7. HTML Meta Tags for Responsive Layouts

Mobile responsive web designs have become extremely popular in the past few years. As such it’s common to see more code snippets thrown around and used for this purpose. To make things a bit simpler I have included just a few meta tags which you can add into your document <head> section.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

The meta viewport tag is the only one which should be required for responsive layouts. This will set the view on all screens at a 1×1 aspect ratio. This will remove the default functionality from smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching. The other two tags are supported in Mobile IE and older smartphone browsers, but aren’t necessary for mobile effects in your layout.

8. HTML5 Embedded Media

The new <video> and <audio> tags are such a relief to developers who frequently work with digital media. Images have always been supported on the web, but audio and especially video files have been struggling for decent support going on a long time now. Up until recently there were very few file types which could stream video on all major Operating Systems.

<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> 
  <source src="media/video.mp4" type="video/mp4"></source> 
  <source src="media/video.webm" type="video/webm"></source> 
  <source src="media/video.ogg" type="video/ogg"></source>
</video>

<audio controls="controls" preload="none">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

Thankfully the audio and video tags share a similar syntax. We can use the preload attribute to start downloading data before the user even clicks play. I tend to veer away from this method since we don’t always know if the user is going to stream, and thus could be wasting bandwidth. But you can feel free to customize these options as they best suit your needs.

Conclusion

I am sure there are some other awesome code snippets which have not been covered in this article. I want to present this collection as a very basic starter kit for web developers to build off. These are some amazing solutions for creating killer HTML5/CSS3 websites.
Feel free to copy and share this article anywhere on the web. Additionally you may back up these code snippets to a local file or template on your computer. If there are any related codes or questions you can think of, feel free to share with us in the discussion area below.
source: http://webdesignledger.com/tips/8-code-snippets-templates-for-new-website-projects

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 

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.

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

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

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

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

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

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

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/

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/

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.

source:http://webdesign.about.com/od/webdesignbasics/tp/aa112497.htm