The Bluer the Better (Playing Psychological Games)

Many words have been already said about web design color trends of this year. But they change so fast that it won’t do you any wrong to update your knowledge base on the topic one more time. Today we decided to plunge into cool waters of the color blue. Why? The answer is obvious – users like blue hues. Blue color in web design is always trendy. According to recent Instagram research, blue images receive 24 percent more likes than photos with high concentrations of reds and oranges. Today we will try to understand what psychological nuances trigger this mechanism of blues special appeal.

Blue color in web design

Let’s start with the definition

The word “blue” has derived from the Old French word “bleu”. Blue is a color of spectrum with wavelength of 440–490nm. It is considered one of the additive primary colors. On the optical spectrum, blue is located between violet and green. Surveys in the U.S. and Europe show that blue is the color most commonly associated with harmony, faithfulness, and confidence. In U.S. and European public opinion polls it is overwhelmingly the most popular color, chosen by almost half of both men and women as their favorite color. Impressive, isn’t it?

As a rule, we use the word “blue” to refer to any color from navy blue to cyan.

But let’s sort out shades and variations of blue more attentively

Blue color in web design

Blue is the color of light between violet and green on the visible spectrum. Hues of blue include indigo and ultramarine, closer to violet; pure blue, without any mixture of other colors; Cyan, which is midway on the spectrum between blue and green, and the other blue-greens turquoise, teal, and aquamarine.

Blues vary in shade or tint as well. Darker shades of blue contain black or grey, while lighter tints contain white. Darker shades of blue include ultramarine, cobalt blue, navy blue, and Prussian blue; while lighter tints include sky blue, azure, and Egyptian blue. (As you understand this list is not complete, for more info you can click here).

Do you know what blue pigments were originally made from? Usually they were made of minerals such as lapis lazuli, cobalt and azurite. Blue dyes were made from plants like woad in Europe, and Indigofera tinctoria, or True indigo, in Asia and Africa. We are sure that you won’t be surprised if we tell you that at present most blue pigments and dyes are made by chemical process.

However, we still don’t know the answer why do so many people like blue…

Blue color in web design

We offer you to reason. What are your personal associations with blue? Blue is the color of the sky and sea. Both are constant elements we’ve got used to since childhood. Plenty of positive emotions are connected with cloudless sky and warm, tranquil sea.

Maybe that’s why blue is so often associated with depth and stability. It symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.

Did you know that blue is beneficial to the mind and body? It slows human metabolism and makes us calm as cucumbers. Blue is strongly associated with tranquility and calmness. If you are interested in heraldry, you should know that blue is used to symbolize piety and sincerity.

But what about blue color in web design? Where blues are simply indispensable?

Read More

Web Art as It Is: Nonstandard Navigation Menus with CSS3

CSS3 technique raised in the mid of 2000’s and still it’s widely used throughout the web. It’s not surprising, because in spite of quite simple usage CSS3 gives a great variety of opportunities for web designing. As everything popular Cascading Style Sheets gain a certain amount of clichés and therefore nowadays in most cases it is quite common for users and considered as something regular on the web.

However, you should know that all simple things become fantasy if you attach some lighthearted creativeness.CSS3 jobs are not the exception and sometimes we can meet such elements that truly can be named masterpieces. As you could guess this post is totally about such type of internet art: take a look 10 examples of nonstandard navigation menus with CSS3 I have gathered for your inspiration and improvement.

* * *

The Cabin in the Woods

It’s wonderfully designed websites that presents scary film Cabin in the Woods. The menu supports the creepy atmosphere of the website by flashing, splashing and other spooky effects.

nonstandard CSS3 navigation menus

Read More

How to Pick the Right Fonts for Your Website & Why It Matters

How to Pick the Right Fonts for Your Website

When designing a website, a lot of attention is paid to details like color combination, layout, design, images, user-interface, and navigation. The one thing that often gets ignored is font. To my mind, that seems a tad bit unfair, since choosing the right font can spell the difference between engaging your readers and sending them away with a bad headache.

“What’s the big deal? Why make such brouhaha about it? Fonts are just fonts, right? What do they have to do with anything? Just pick any and go with it. Or better still, stick to the more common ones and you are good!”

My dear friends, you dismiss fonts in that casual, offhand manner and you are going to have some big trouble on your hands. Fonts appeal to your readers at a psychological level. Don’t believe me? Well, I come bearing hard facts to back up my statement. In fact, I present to you the psychological experiment that was done by two researchers from the University of Michigan – Hyunjin Song and Norbet Schwartz.

In two separate studies, Song and Schwartz were able to discover a connection between fonts and how they affected human perception. In the first experiment, one group of test subjects was given directions written in a simple font, while the second group received the same directions written in a fancy font.

Astoundingly enough, test subjects with the simple-font directions declared it would take them 8.2 minutes to complete the task as compared to the 15-minute estimate that was given by the other group. Isn’t it amazing? The simpler font made people think that the task was a breeze to accomplish. Hey, if it’s easier to read, then it’s easier to do, right?

How to Pick the Right Fonts for Your Website

But does that mean fancy fonts are useless?

Not entirely.
Read More

PNG vs JPG. Which is Better? None of Them

Most probably you have met this picture on the web:

PNG vs JPG

It’s definitely cool and shows the exact difference between JPEG and PNG formats: JPEG is lossy and PNG is lossless. Nevertheless, the image is quite unidirectional: after looking at it you can decide that you should always use PNG to have your pictures nice and clean. However, this view is very superficial, because there is no universally better format. Everything depends on the situation: in some cases JPEG is more suitable, in other cases PNG will be the only proper choice. So, answering the question strictly: JPG vs PNG – which is better to choose? – I would say: none of them. Below I reviewed pluses and minuses of both illustration formats for the web and outlined the ways of their relevant usage.
Read More

Freebie Powered by Open Framework for Drupal Based Sites

To get a feature-rich Drupal website, consider this pre-configured Free Drupal Open Framework Theme. Feel free to download this theme and make the power of Drupal, Stanford and Open Framework work for your project.

This free template is based on Open Framework – responsive Drupal theme based on Twitter Bootstrap 2.3. By the way, it will be switched to Bootstrap 3 soon. It should be also mentioned that this framework works only with Drupal 7 and it’s not compatible with the older versions. Follow the links to read more about this framework:

Open Framework Official Website
Open Framework on GitHub

Open framework is the core of this theme, and its layout is designed in correspondence to Stanford branding identity (the chosen colors and set fonts). Why Stanford? Because Stanford framework theme is a sub-theme of Open Framework and for today there are 5 Stanford’s Drupal themes available for today. The sixth one is the free template from this post. Its clean elegant layout will perfectly work for a variety of websites (business, communications, education, etc.). Click the link below to see this simple and user-friendly design in action. And get its source files to set up a site on its basis.

live demo | download

Free Drupal Open Framework Theme:

How to Design a Powerful Brand Identity

It’s powerful enough to embody the core ethics of your business, draw people towards your product, and say everything about the consumer base itself. It’s the medium which becomes the message and endeavours to set itself ahead of the game. It’s the brand identity which becomes the key marketing device and imprints itself in both the commercial and social market, forging itself into the minds and imaginations of the cultures within which it operates. Designing a powerful brand doesn’t just have to be catchy – it has to be unforgettable, revealing, and indispensable.

Reasons that popular apps like the Logo game place the most popular logos on the easier levels isn’t simply because the companies are commonplace household or roadside names. It’s because they have become ingrained in the historical psyche of society and the brands are reflective of this. Whether or not the logo has changed its shape and nature multiple times – aka Pepsi – the brand that is successful is always recognizable.

Brand Web Design
Read More

When Death is Not the End: Adobe ImageReady Tutorials

Everyone knows about Photoshop: this product from Adobe is so widely known and used that it can be definitely called legen…WAIT WAIT…dary. However, its extra popularity can put a shadow on other Adobe products.

For example, there is a utility called ImageReady, which gives a opportunity to work with bitmap formats. It has been a faithful companion for Photoshop for almost 10 years. And finally, lacking the users’ attention, it was discontinued in 2007. Nevertheless, Adobe ImageReady is still used by people who know its benefits for creating animations. Below I would like to present some helpful Adobe ImageReady tutorials from such skillful people. Welcome the world of ImageReady.

* * *

Animation in Adobe Photoshop / ImageReady

It’s a very informative tutorial that teaches different aspects of working with ImageReady. It is divided into 5 pages, each of them includes step-by-step guide.

Adobe ImageReady Tutorials

* * *

Adobe ImageReady Tutorial

This is very interactive tut from famous Newgrounds community. Just click and watch the next step.

Adobe ImageReady Tutorials
Read More

Halloween Promo from TemplateMonster: Holiday Themes 30% Price Off

This is Halloween! This is Halloween!

Okay, you got it and maybe even remembered the theme from Tim Burton’s Nightmare Before Christmas. But what does it mean for web developers?

Well, I have useful news for you. TemplateMonster opens traditional Halloween discount period. It begins today and finishes on 14th of November. You have a lot of time to make your purchase till its end. The promo concerns any holiday template and takes 30% off the price.


Read More

Best Free Coding Resources To Educate Yourself

Everyone today understands or at least guesses that the good old traditional education runs out. All this sitting in university classrooms is so annoying if considering modern technologies provides us with so wide opportunities to get useful information and learn. The first sprouts of new education system, which effectively uses all the latest achievements of human civilization, began to born throughout the web. These resources appeared really actual, their popularity grows with inevitable intense. For now the most famous educational website is Coursera, it contains hundreds of learning courses from professors of authoritative universities from different parts of the world. Coursera concerns a wide variety of directions. And, of course, it’s not the first to understand the importance of e-learning for today society.

The pioneers of studying on the web were web developers, coders, programmers and other internet builders. Of course, it’s natural, because people of this activity field were immersed into the global net system in the deepest way (well, they were creating it!) and know about its potential most comparing with other people. Their educational resource had a wide specialization, teaching how to work with web. In order to honor their deposit to the progress of educational system and just to share with you definitely helpful website, I want to present the 10 best free coding resources for education.

* * *

Codecademy

Free Coding Education Resources

It’s probably the most famous code education resource. You begin you first lesson from the main page right away. Once it’s finished, Codecademy offers you to continue after registration. The education process is quite interactive and therefore easy for the quick pace of modern human being.

* * *

Coderace

Free Coding Education Resources

Coderace demonstrates a rather original concept. The educational process is made in the form of the game, where speed gives more points. A player is fighting with opponents getting meanwhile different prizes. Indeed, competitive spirit is a good stimulation for many people to learns.
Read More

Early Drupal 7 vs. Drupal 8

Drupal is a powerful content management system that has been dominating with its enhanced functionality over some other platforms. Its incredibly rich features attract numerous web developers: i.e. performance, usability factor and scalability. It grabs the attention of users across the globe. The latest version of Drupal has come up with some new and enhanced features than the previous one. In this article you will find a complete differentiation between previous version of Drupal 7 and new expected features of Drupal 8.

Let’s firstly discuss the previous version of Drupal, the 7th one.

Drupal 7 VS Drupal 8

Reasons for choosing Drupal 7

Less number of Modules

Software engineers who worked on the previous version know that it has hundreds of modules that make it complicated for the web developers to increase the caching speed for a website. Drupal 7 possesses a lesser amount of module downloads which helps in resizing the image and the aspect ratios of the video libraries to any promising size.

User Friendly Interface

Software engineers who had ever used Drupal 7 will admit that the platform is quite user friendly. It has various options to modify the website at any stage of development. Many tasks can be performed by quick shortcuts which are admired by the software engineers very much. Actually, namely quick shortcuts make Drupal 7 so unique.

Website Development

A large and rapidly growing group of people works on developing Drupal, supports its usage and is very passionate about its improvement. Drupal possesses a framework that developers can use to quickly create custom functionality. The users of this version can make complex websites very easily.

Expected Features of Drupal 8

Read More