Effective split-screen design methods
One of the most noticeable trends in website design for 2017 is the split of the screen into two parts. More and more web projects are using a similar layout…

Continue reading →

9 site typography tips
Typography for a web site is a rather important design element, which in RuNet is somehow not very pronounced. This issue is often raised on English-language foreign design blogs, we…

Continue reading →

The difference between UI and UX: a practical example
Today there will be a guest post on the topic of UX and UI interfaces using the Icons8 service as an example. The author is a usability specialist Andrei Burmistrov,…

Continue reading →

Google+ style buttons, download 200 Google+ icons

The Google+ social network, even in beta testing, burst into the lives of advanced users, so do not be surprised at the interest that this social network causes, including web designers, developers and seo optimizers. This interest is quite large and is constantly “fueled” by Google developers who are constantly improving the project and adding integration with their other services. So, for example, Google+ buttons and icons are popular among SEOs that allow you to add “+1” to your site or page.

But not “+1” unified, in the last year, Google+’s appearance dictated fashion to other Google services that have undergone a change in design and style. A common element for many projects is the stylish menu at the top of the page, similar icons, control buttons, and indeed many different elements that can be found in all projects – from Gmail to Google Reader. Today I present to your attention an interesting set of Google+-style buttons found on shrapp.nl. This set is not just icons of the social network Google+, but rather a whole framework that allows you to add interface buttons from Google+ to your site.

google + icons
You can see the demo of how the Google+ buttons work, download these icons and read the documentation for their installation on this page. First of all, of course. You can just say these cute minimalist icons for different actions, situations, etc. in order to use in your design or website. A more advanced option is to connect the framework (scripts) for applying icons via css styles easily and quickly.

SET GOOGLE + BUTTONS
A complete and more detailed instruction can be found at the link above – there are various options and examples of use. I will only consider the installation process + one of the options for using the buttons after you have downloaded the corresponding archive.

google + button framework
So, the installation order:

1. Place the css file and images in the root directory of the site, well, or wherever you have the styles for the template.

2. “Connect” the stylesheet to do this, add a link to the code (added anywhere between <head> and </head>):

<link rel = “stylesheet” href = “css / css3-buttons.css” type = “text / css” media = “screen”>
3. Next, connect the jQuery TipTip plugin and the corresponding stylesheet (added anywhere between <head> and </head>):

<! – Using TipTip jQuery plugin for the tooltips ->
<link rel = “stylesheet” href = “tiptip.css” type = “text / css” media = “screen”>
<script src = “http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”> </script>
<script src = “jquery.tiptip.js”> </script>
<script>
$ (document) .ready (function () {
// Launch TipTip tooltip
$ (‘. tiptip a.button, .tiptip button’). tipTip ();
});
</script>
4. If you need a dropdown menu, add also:

<script>
$ (document) .ready (function () {
// Toggle the dropdown menu’s
$ (“. dropdown .button, .dropdown button”). click (function () {
$ (this) .parent (). find (‘. dropdown-slider’). slideToggle (‘fast’);
$ (this) .find (‘span.toggle’). toggleClass (‘active’);
return false;
});
}); // END document.ready

// Close open dropdown slider / s by clicking elsewhwere on page
$ (document) .bind (‘click’, function (e) {
if (e.target.id! = $ (‘. dropdown’). attr (‘class’)) {
$ (‘. dropdown-slider’). slideUp ();
$ (‘span.toggle’). removeClass (‘active’);
}
}); // END document.bind
</script>
On this installation can be considered complete. Now, for example, to display these buttons:

google + buttons
… add the code:

<a href=”#” class=”button left”> <span class = “label”> Left </span> </a>
<a href=”#” class=”button middle”> <span class = “label”> Middle </span> </a>
<a href=”#” class=”button right”> <span class = “label”> Right </span> </a>

<a href=”#” class=”button left”> <span class = “icon icon63″> </span> </a>
<a href=”#” class=”button middle”> <span class = “icon icon58″> </span> </a>
<a href=”#” class=”button right”> <span class = “icon icon64”> </span> </a>
That is, due to the framework, all Google+ buttons can be displayed via css and html by simple actions. You can find other examples of using Google+-style buttons in the documentation that I referred to earlier. In principle, there is nothing complicated, but it turns out very nice and stylish – especially, I think, it will be relevant for the development of some intracorporate sites where the buttons will be used for the system interface.

Web Design Illustrations - Best Uses
If you carefully study any selection of website designs on a particular topic, one trend will be obvious to you - illustrations are now in fashion. They are so widespread…

...

9 site typography tips
Typography for a web site is a rather important design element, which in RuNet is somehow not very pronounced. This issue is often raised on English-language foreign design blogs, we…

...

Licenses on photo stocks: not prohibited does not mean allowed
In the comments to the blog article about the best free photo stocks, you can find a few questions regarding copyright for photographs and images. An employee of one of…

...

Typography for web.
There are many books and articles on typography, but only a few of them reveal issues of choice and combination of fonts. In view of the opening opportunities and prospects…

...