Tips to Create an User Friendly and Attractive Website

Good website is a rewarding outcome of several important elements encompassing design, content, navigation and functionality. Nowadays running a business website is one of the most important facets in the life of a company and therefore has to be intuitive, not overly complicated and engaging. Keeping your website user-friendly will greatly improve its performance, entice more prospects and boost sales for your business. 

The Web is growing every day and your competitors are getting smarter. A key law of marketing is to differentiate yourself from your savvy competitors. If you’re in an industry which has lots of vendor choices, then you have to ask to yourself how you can make your company get noticed, stand out, and attract attention of your target market.

Creativity in website is all about taking the ideas and the spirit of your company to the ladder of success and creating a powerful impact on your target market. Everything has to be just right: the logo, the icons, the color palette, the imagery, the graphics, the design of the page, the eye trail, etc. When all these elements are combined creatively you produce a powerful emotional impact on your visitors capable of improving your sales rate and revenue.

User friendly website is nothing but a website which is easy accessible and comfortable for a user to operate. The main reason for making a website user friendly is that it helps in increasing traffic on the website, which in turn leads to improvement of the site ranking. Making a website attractive is not enough to attract the people, the usability should also be good, otherwise the visitor will go from your website and switch to your competitor’s site. Just visiting and leaving the site in few seconds, this kind of traffic is of no good use. So making a website user friendly is very important because it is the face of your business especially if it is an online product purchasing company.

Some of the usable tips which should be kept in mind for making a website user friendly and attractive are as follows:

Implement a Smart Choice Of Colors

Colors play a significant role in making a website attractive and amazing. Each color has its own impact on each page. You should know the value and meaning of each color before you choose the right ones for your website. Never choose colors, which are unsuitable for the spirit of your business.

Colors plays a very important role in the website appearance, each color have its own meaning and value, analyse and read about each and every colour and accordingly decide your theme of website and colours which are to be exhibit on the website. Your website is certain to look attractive when you have used right combination of colors.

Keep Your Content More Simpler and Informative

It is important that you provide only simple and informative contents to your viewers. Do not test their knowledge of language or grammar through your content. People can identify your brand through your contents, so keep it simple and easy for them so that they can have a clear picture about your service or products through the same. Explain your services and products which your customers wish for, in a simply language, provide description with the help of pictures so that they can understand it easily. Using appropriate white space is also important, your content should not be very clumsy, it should have some appropriate white spaces which differentiates the words so that the content looks clean and proficient.

Create Something Well-Organized

Always try to keep your website well-organized. Make sure that your viewers can get all information easily on your website and do not need to dive under the sea to get some simple information. If the viewers find that everything is on its place, and they can reach all of them easily, then they would appreciate your effort.

Online visitors wanted to visit those website which is more organized and provide each and every information which they are seeking for. It’s a fact that the average page visit of a user lasts a little less than a minute. As the user is in rush so he will just visit your site and take a glimpse of your website, if he founds out that the website is more organized and everything is on its place then he gets the confidence that he can find out the correct information which he is seeking for.

The first 10 seconds of a visit is very critical because at that time a user decides that whether he wants to stay on the existing page or leave. Users have seen many poor Web pages hence they act accordingly, so unless and until if a web page is not extraordinary and would not be able to develop an outstanding image on the mind of user then he will not at all stay for a longer time on the website and will switch to the competitor’s website.

Make Your URL Name Easy to Remember

The one of the most important factor is to make aware your customers about you, so you should select such a name for your website which is easy to remember and which makes a meaningful relation with your name.

Make Your Website Mobile Compatible

Nowadays visitors browse the websites with mobile too so it is very important to make your website mobile compatible. This can be done using responsive web design, which is nothing but your website is designed such a way that it fits exactly to the screen of any size giving whole view of the website. Responsive web designs helps in increasing traffic due to increase in percentage of users browsing in mobiles.

Error Handling

There should be proper error handling at the time of coding which keeps the website bug free. While coding for an online application make sure you give proper error messages, so that even if the user while filling the form makes some error it should be clearly shown on the screen where the user has gone wrong. This makes website user friendly and makes website more bug free.

Regular Updates Is Required

According to the changes in the market there arises a need to update the websites, The technology changes day by day and you have to remain updated with the technology and so do your website too.It is essential that you update your website at regular intervals. This will help you to recognize the errors of your portal as well as your users can find something new and fresh after a regular interval.

Search engines like updated websites – Search engines record how often you update your website. The more you update your website, the more it will rank its web pages and the more people will find you on search engines.

Your customers will visit it more often – An important part of updating your website is to keep your customers informed and give them updates. Whether it is news, a sale, an event, a change in policy, etc. all of this is valuable information that your customers want and can use. It will also help attract potential customers and convert them into regular customers.

Speed/Loading Time

Make sure that your website takes a nominal time to be uploaded because viewers hate to visit pages with longer loading time.No one prefers to wait for web pages to load. Therefore, always ensure that your website uses the least codes possible. If your website takes long time to load, chances are that your customers will get bored and leave without reading what you want them to.

Include Contact Information

Never forget to give the contact details of your company so that the viewers can trust you. Try to give some physical address to enhance your reputation.

Providing contact information creates confidence and offers comfort to users since they know that there is a real company behind a business website. This will have a potential impact on the goal conversion, specifically if you are selling products and/or services directly online. Thus the visitor can convert from a visitor to customer easily. Always provide easy contact mechanisms like contact forms, customer service numbers and addresses along with pin codes and phone numbers. Hence potential customers who want to find more about your products or services can reach you at the click of a button or phone call easily.

Social Media Sharing

Include the option of social media sharing on your website so that they viewers can feel it easy to access your website and get connected with their social media profiles through the same.

Social Media in this generation have become so much important and necessary for promoting each and every business, Do include blogs on your website and social media sharing options, people are seeking for the new information and likes to share it on social media platforms, By including social media option on your website gives users the comfort of sharing information without even going away from the website.

Read More

HAPPY INDEPENDENCE DAY 2016

On 15 August, India celebrating its 70th Independence Day.

{WISH YOU ALL } 

HAPPY INDEPENDENCE DAY

MAY OUR COUNTRY PROGRESS IN EVERYWHERE AND IN EVERYTHING

SO THAT THE WHOLE WORLD SHOULD HAVE PROUD ON US.

HAPPY INDEPENDENCE DAY

HAPPY INDEPENDENCE DAY

HAPPY INDEPENDENCE DAY

HAPPY INDEPENDENCE DAY

HAPPY INDEPENDENCE DAY

HAPPY INDEPENDENCE DAY

Read More

Tips for Responsive Website Design

Responsive design has become the new web standard. Many companies have accepted the challenge and have created specific design solutions (such as mobile only) or have attempted to address the issue cross-platform. In this article we look at several tips to help with your design process and make it more efficient.  

One such program is Adobe Edge Reflow, which allows you to make use of media queries, set breakpoints within the program and design your layouts to fit desktop, tablet and mobile. You can then copy the CSS into another program such as Adobe Dreamweaver or other HTML editor to further refine your design.

Consider a Mobile First Strategy: This is where you build the mobile site first, then scale up and build the tablet and desktop designs. One of the major concerns for all three is the logo and/or text. If the text is easy to read on the mobile device then you shouldn’t  have any issues with the tablet or desktop.

  

Beware of Navigation: If your site has only 2-3 navigational menus, you could include those in a simple menu on the screen. If there are more menu elements, you might want to consider creating a single icon that opens into a drop down menu of additional menu items.

other option is to make use of an icon menu style as one would see with a GoMobi site.

Build the Look and Feel of Your Site(s) First: Some companies, like Jiffy Software, build the entire layout of the interface first, before doing any coding. This ensures they have the look and feel the client wants before they do any coding. When building a layout for a mobile site, one very important consideration is making the buttons large enough for a fingertip. Another consideration is keeping the design both simple, yet functional. Many designers tend to add too much to a mobile interface, which can cause design and usability problems. When in doubt, keep it simple.  

  

Be Prepared to Use Many Software Programs: For many users, using a template with WordPress will be enough but if you want to build a complex design, you might have to use custom programs and you might have to code each site individually.

As an example, if your layout is fairly straightforward you might use a template such as Moboom but for a more complex layout you might need to use programs such as Adobe Dreamweaver for the desktop and a standalone program such as GoMobi for the mobile layout. 

Images: When building responsive design layouts, create optimized images for each layout. This reduces scaling and bandwidth issues. Make use of JPEG, GIF and PNG-8 file formats. Never use PNG because it can bloat your files sizes by 5-10 times.

Use Exact Measurements with Images: (i.e. 500x350px at 100ppi) and set image dimensions to match. This will eliminate scaling and will also preserve the resolution and quality of your images. If your images scale this could cause color depth and resolution problems.

 Must Read: Quick Tips to Improve Your Web Design Skills

Use Parallax Scrolling: Here is a tutorial on how to make your site responsive. As with many design elements, the effect can be overdone, so here are some examples of several sites which use the technique well. 

About Updates: If your site is to be a one-off production then updates won’t be an issue but if you plan to build the site then hand it off to others for updates, make sure that it’s easy to do so. Include instructions for those who come after you. Make sure you place comments in the code along with written documentation so those who come after you can see what you’ve done. This will make it easier for them to make updates/changes as necessary. 

Limit the Use of Text on Mobile Devices: Only use what’s necessary, rather than trying to reproduce your desktop site on mobile device. The latter tends to create long scrolling pages, which can cause you to lose viewers.

  

Take Advantage of Google Design Standards: On this page, you will learn what Google recommends when designing sites for use with smartphones. Among other things, you’ll find out what you need to do to make your smartphone pages load quickly.

Test Code Snippets and Templates: As in some of our earlier articles on the use of API’s, be careful. You might accidentally slow down the performance of your site. If in doubt, test the components, first.

Build a toolkit of Frameworks: One fast way of creating responsive designs is to build on what is already there, using existing themes (such as Genesis or Thesis) and use these to create custom child themes. This will save an enormous amount of time since you won’t have to build a new layout from scratch. 

Clean Design: This is especially important with responsive design. Make sure you strip away all non-essentials when designing your site(s). This will improve page loading time.

Read More

Quick Tips to Improve Your Web Design Skills

Every web designer has a secret or two. Hard-won workflows, hidden hacks, and insider knowledge that are the mark of true experience and the stuff that separates great web design training from good.

Here, we've managed to persuade some of the web's busiest devs and designers to part with their most closely guarded tricks and tips. It's quite a collection.

Packed with professional know-how, you'll discover secret features of well known tools, the beta services that the design industry is buzzing about and CSS tricks that make page design for multiple platforms easy. So whether you're a beginner at online design or a web veteran, you're bound to uncover one or two tips here that will change the way you work.

Design in shades of gray, then add color

If your web designer creates wireframes prior to visual designs, then you know the value of starting with shades of gray.  Turn your wireframe into a grayscale visual design, add your photography, then carefully add color to design elements one at a time.  

This will prevent an “overdesigned” website and help to place prominence on just the items that need it.

Use Keynote (Mac) to create rapid page prototypes

You don’t need Photoshop to create rapid prototypes of web pages, landing pages, call to actions or other web interface elements.  There’s an entire underground movement around using Keynote (that’s Apple’s version of PowerPoint) to create mockups.

There’s even an online repository containing user interface design templates for wireframing, prototyping and testing mobile and web apps in Keynote.

Add web fonts to your corporate style guide

It’s 2015, and if your corporate style guide doesn’t include web fonts, then you need to look into adding those so your website has the same governance that corporate documents and collateral does.

If you haven’t looked into this yet, Google Fonts is a great place to start. Find a suitable web font and define usage in your corporate style guide so you use it consistently online

Remove sidebars

The sidebar has been an especially popular web design trend for the last ten years, especially on blogs. Many companies are finding that when they remove sidebars from their blogs, it encourages reader attention to the article and the call to action at the end.

Removing the sidebar on our company blog has increased the number of clicks on call to action graphics over 35%.

Get color inspiration from nature

Struggling to find the perfect color combination for your website or a call to action graphic? Get your inspiration from nature. You can either use your own camera to photograph natural wonders around you or find landscape photos on the web, the use a color picker to select a color. Nature’s color palette never fails.

Step away from the computer

Good design starts with great planning. Getting your ideas down on paper or on a whiteboard can help you iterate through a design, refining it and adding detail as you go along. Drawing on a whiteboard can also make the design process collaborative and allow other team members to give input.

It’s also easy to erase pencil from paper or marker from a whiteboard and make quick changes, and once you have something concrete to work with, snap a photo with your mobile phone and get to work on screen.

Use Pinterest to create mood boards

When you’re putting together inspiration and ideas for a new website, or you’re redesigning part of your website, you need a way to collect your inspiration in one place for future reference.

Did you know that you can use Pinterest to create a mood board of your favorite images, colors, layouts, patterns, sample websites and concept material? Another great advantage of using Pinterest is that other designers create and share mood boards too, and they’ve already curated a ton of resources that you can use.

Bury those social media icons

You did all that work to get people to your website, and yet you’re inviting them to leave? That’s what you’re doing when you place social media icons in a prominent location of your website, like in the header. Bury the icons in the footer.

If people are on your website, you want them to stay, learn and perhaps inquire about your services, not check out company picnic photos and bowling outings on Facebook. Social media should send people to your website, not vice versa.

Ditch the slideshow/carousel

When the homepage slideshow/image carousel came into fashion, it was a way to get lots of information on the first page of your website. The problem is that most people don’t stay on the page long enough to experience all of the tiles/messages.  

What’s more is that the messages and images usually aren’t relevant to your prospect’s first visit. What’s the one thing a visitor should take away from their website visit? Promote that one thing -- usually what your company does in layman’s terms -- and ditch the rest.

Simplify navigation

Reducing your visitors’ options might seem counter intuitive, but it can actually help guide people to your most productive content. Rather than overwhelming your website visitors with links to every page, simplify your navigation.

Eliminate dropdown menus and especially multi-tier dropdown navigation that only the most skilled mouse user can navigate, and go a step further by reducing the number of links in the header or sidebar of your website.

Increase your font size

Typography is incredibly important in web design. Text is hard enough to read on a computer screen, so you have to make the important things stand out.

One way to do this is to increase your font sizes, especially for headings and important blocks of text. Consider increasing the size of your normal font, too.

Use white space

It may be hard to believe that using whitespace is a hack, but I evaluate websites every day that could use more whitespace. Not every blank area of the screen needs to be filled.

Even though whitespace and simplicity are in style right now, too many companies try to cram everything into a small space, or worse yet, “above the fold.”  Give your design room to breathe, and your website visitors will be able to find things easier.

Use the squint test

Want a quick way to learn what’s most prominent on your website? Back away from your computer screen and squint.  Most everything will become blurry, and only the larger, colorful, more prominent features will be noticeable.

Read More

Google Web Fonts and How to Use

As a web designer, you’re probably well aware of the importance of typeface. With the growing amount of businesses engaging in content marketing, font selection is becoming all the more crucial.

There’s nothing worse than coming across a website with awesome content and horrible typeface. One of your main goals as a designer is ensuring a positive experience for the end-user.

After the release of Google Web Fonts, it’s become a lot easier to incorporate beautiful typography into your websites. The only difficulty is sorting through the 600+ styles that are offered.

For this reason, we’ve put together our top 20 Google web fonts that are sure to bring out the best of your design.

But first, let’s walk you through the installation process.

How to Use Google Web Fonts

Step 1

Step 2

1 2 3

<head>   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'  type='text/css'> </head>

Step 3

1 2 3

body { font-family: 'Open Sans', sans-serif; }

Recommended Google Web Fonts

Open Sans

Droid Sans

PT Sans

Lato

Oswald

Droid Serif

Roboto

Lora

Libre Baskerville

Josefin Slab

Arvo

Ubuntu

Raleway

Source Sans Pro

Lobster

PT Serif

Old Standard TT

Volkorn

Gravitas One

Merriweather

Google Web Fonts is a free, open-source and hosted service. The fonts are compatible with a wide variety of devices, browsers and operating systems. You don’t need to create an account and you’re not restricted to using them in any way. It’s definitely one of the best solutions for adding nice typeface to your site.

Head over to Google Fonts and pick out a font. Don’t worry, we’ll provide you with a bunch of suggestions down below. Once you have one picked out, click the quick use button shown below.

You’ll then be brought to a screen where you can choose the style you want (ie. light, bold, extra-bold, etc…) as well as the character sets. After that, you will be given a piece of code that you will add into the <head> of your website. For this example, I chose Open Sans.

Google API will generate the necessary CSS code to add to your stylesheet. Simply add the generated code to your CSS file.

Now that you know how to install them, let’s go ahead with the recommendations.

Open sans is a sans serif typeface designed by Steve Matteson and it’s the most popular Google Web font available.

Open Sans is an upright stressed font with open forms and a neutral but friendly appearance. It was optimized for print, web and mobile interface and has gained extreme popularity over the excellent legibility of the typeface.

Recommended pairings: Roboto, Oswlad & Lato.

Similar to its open sans counterpart, this font was also designed with an upright stress, open forms and a neutral but friendly appearance.

Droid was heavily optimized for user interfaces and to be comfortable for reading on a mobile handset in menus, web browser and other screen text.

Recommended pairings: Droid Serif, Lobster, Open Sans.

PT Sans is based on Russian sans serif types of the second part of the 20th century, but at the same time has distinctive features of contemporary humanistic designs.

Recommended pairings: PT Serif, Lato, Ubuntu

Lato is another sans serif typeface designed by Warsaw-based designer Łukasz Dziedzic. Lato gets its name from the Polish word meaning “summer.”

The font is based off classical proportions which are particularly visible in the uppercase in order to give the letterforms a familiar sense of harmony and elegance. The semi-rounded details of the letters give off a feeling of warmth, while the strong structure provides a sense of stability and seriousness.

Recommended pairings: Open Sans, Source Sans Pro, Roboto.

Oswald is a reworking of the classic style historically represented by the ‘Alternate Gothic’ sans serif typefaces. The characters of Oswald have been re-drawn and reformed to better fit the pixel grid of standard digital screens.

Oswald is designed to be used freely across the internet by web browsers on desktop computers, laptops and mobile devices.

Recommended pairings: Open Sans, Droid Sans, Roboto

The Droid Serif font family features a contemporary appearance and was designed for comfortable reading on screen. The font features slightly condensed letterforms to maximize the amount of text displayed on small screens. Vertical stress, sturdy serifs and open forms contribute to the readability of Droid Serif while its proportion and overall design complement its companion Droid Sans.

Recommended pairings: Droid Sans, Open Sans, Raleway.

Roboto is the font we’re using for our blog which features friendly and open curves. The goal of the this font was not to allow distorted letterforms to force a rigid rhythm. In contrast, Roboto doesn’t compromise by allowing letter to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Recommended pairings: Open Sans, Lato, Droid Sans.

Lora is a well-balanced contemporary serif with roots in calligraphy. It is a text typeface with moderate contrast well suited for body text.

Lora is optimized for screen appearance but works equally well in print.

Recommended pairings: Open Sans, Lato, Ubuntu.

Libre Baskerville is a web font optimized for body text (typically 16px.) It is based on the American Type Founder’s Baskerville from 1941, but it has a taller x-height, wider counters and a little less contrast, that allow it to work well for reading on-screen.

Josefin Slab is a Scandinavian style font with typewriter style attributes. It was developed by Santiago Orozco who wanted to stick to the idea of Scandinavian style, so he put a lot of attention to the diacritics.

Recommended pairings: Open Sans, Pacifico, Oswald

Arvo is a geometric slab-serif typeface family suited for screen and print. The flavour of the font is rather mixed. Its monolinearish, but has tiny bit of contrast (which increases the legibility a little in Mac OS X.).

Recommended pairings: Droid Sans, PT Sans, Ubuntu.

The new Ubuntu Font Family was started to enable the personality of Ubuntu to be seen and felt in every menu, button and dialog. The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens.

Recommended pairings: Open Sans, Droid Sans, Roboto.

Raleway is an elegant sans-serif typeface family. It was initially designed as a single thin weight and later expanded into a 9 weight family.

Recommended pairings: Droid Sans, Lobster, Droid Serif.

Source Sans Pro, Adobe’s first open source typeface family, was designed by Paul D. Hunt as a sans serif typeface intended to work well in user interfaces.

One of the important  design considerations was to create a typeface that reads well over extended periods of time.

Recommended pairings: Lato, Open Sans, Roboto.

The font draws many versions of each letter and a lot of different letter-pairs (aka “ligatures”) so it always uses the best possible variation of each letter depending of the context of the letter inside each word. All this happens automatically in any browser that supports ligatures.

We recommend Lobster for headings and titles but not so much for large paragraphs of text.

Recommended pairings: Droid sans, Raleway, Open Sans.

PT Serif is a transitional serif typeface with humanistic terminals. It is designed for use together with PT Sans, and is harmonized across metrics, proportions, weights and design.

Recommended pairings: PT Sans, Open Sans, Droid Sans.

Old Standard TT uses a classical style of serif typefaces commonly used in various editions of the late 19th and early 20th century

It’s considered a good choice for typesetting scientific papers, especially on social and humanitarian sciences, as its specific features are closely associated in people’s eyes with old books they learned on.

Recommended pairings: Droid Sans, Lobster, Vollkorn

It intends to be a quiet, modest and well working text face for bread and butter use. Unlike its examples in the book faces from the renaissance until today, it has dark and meaty serifs and a bouncing and healthy look. It might be used as body type as well as for headlines or titles.

Recommended parings: Droid Sans, Lobster, Open Sans.

Gravitas One is modeled on the “UK fat face” which is a kind of very heavy advertising type created during the industrial revolution in England.

The letter forms are characterized by an attention getting and strong contrast between the very heavy vertical shapes and the thin horizontal ones. The contrast of the design means that it will be most useful when set from medium to large sizes.

Recommended pairings: Paytone one, Open Sans, Lato

Merriweather features a very large x height, slightly condensed letterforms, a mild diagonal stress, sturdy serifs and open forms.

Recommended pairings: Open sans, Oswald, Merriweather

Source: https://bootstrapbay.com/blog/google-web-fonts/

Read More