The Coming of Bootstrap 3?

Bootstrap, the so-popular framework built at Twitter by @mdo and @fat, is finally getting to its next release. Today we can check out the release of the preview site for Bootstrap 3.

We’ve had a basic summary of what to expect for Bootstrap 3 since December. In short, the creators shared that the framework will drop lots of it’s current functionalities, but will get lots of new even more cool.

Much more has changed, however, namely that Bootstrap 3 is now mobile first. According to the release note the launch has been rewritten “to be mobile friendly from the start. Instead of adding on optional mobile styles, they’re baked right into the core…Mobile first styles can be found throughout the entire library instead of in separate files.” Those who love gradient and bulgy elements probably were frightened by the flat design — don’t worry your favorite stuff is still there.

Designing a Login Form. Best Practises

When browsing the web one can see hundreds of all possible variants of user data input. But among those most popular are still web forms. No matter how much lazy we are to fill them in, we still need them.

Web forms are everywhere…but people hate them, I’ve got a friend who works in the tech support of a hosting company, he says that every day their department receives from 10 to 15 emails about errors in web forms. According to tech support web forms are the nastiest things on any website. They break for no reason, and when they get fixed they break again.

If you’re designing web sites, it’s likely forms will be there, whether it is a simple login/feedback form or a supercharged web application. In this article we’are not going to point out ways of solving all possible misunderstandings with web forms, we’re going to speak about the design of login forms. Here we’ve united 5 web form design concepts for designers/developers that are of great importance when implemented.

1. Plain forms

That’s simple as a pie. No need to rack your head over the design, cause most people don’t even care about how your form looks like. In this case minimal style can “strengthen your hand”.

Unlocking

***

Quoterobot

***

Boxee

Read More

20 Fresh Free jQuery Content Slider Scripts and Tutorials

At present jQuery sliders are frequently used on all stylish contemporary websites. Such popularity is absolutely reasonable as the technique lets you cram different content into one limited area, thereby saving precious space on the web page and raising user’s interest. Implementation of jQuery slider on your website will immediately improve its appearance, interactivity, dynamics and user experience as a corollary. Among all slider types, the given one is highly appreciated by web developers for the simplicity of its usage and multiple transition effects available to choose from, i.e.: ken burns effect, squares, fade, parallax effect, basic linear, responsive slider, circular animation, swipe, animated caption and many others.

It’s rather difficult to define particular website categories, where jQuery sliders are applied the most often. Whenever you need to showcase images, articles, products or featured content and avoid messy layout – jQuery slider is able to cope with the issue in the beautiful elegant way.

If you are looking for impressive slider to fit your next project, this collection of 20 best recent jQuery scripts and tutorials will help you make up your mind. All of them won’t cost you a cent as they are free and ready to fascinate your visitors with excellent slideshows!

* * *

How to Build an iOS-Style Content Slider using jQuery

This tutorial will teach you build the iosSlider plugin. It includes typical animations and effects on click or hover as well as dynamic text.

jQuery Content Slider Scripts and Tutorials

* * *

Revolver.js

Revolver can be considered a boilerplate or framework for making your own slider, exactly the way you want it.

jQuery Content Slider Scripts and Tutorials

* * *

Read More

10 Free Fonts: Web Developers Jokes, Part 2

Almost 2 weeks passed since the first series of free fonts actual for 2013 was published, and now I am eager to present new samples. Following the concept of the previous post, the typography is demonstrated in the form of jokes about different types of web developers: designers, programmers, SEO experts, copywriters. I won’t miss an opportunity to remind you about the exalted role of humor in the Universe: hope your face will smile, your lungs will laugh, your eyes will shine, your mind will relief itself from neurotic seriousness opening a path for permanent inspiration and new ideas in your web developing creativeness. In our case your liberated artistic will can be immediately supported on practice by fresh fonts.

* * *

Nexa

Web Developers Jokes

* * *

Grand Hotel

Web Developers Jokes

* * *

Multicolore

Web Developers Jokes

* * *

Read More

Russian Motifs in Vintage 8th of March Soviet Postcards

Today is the sixth of March, the eve of International Women’s Day, celebrated yearly over the whole territory of former soviet countries and marked by women’s groups around the world. This date is also recognized at the United Nations and is declared a national holiday in many countries. Speaking about the 8th of March we immediately recall its political background as the holiday was to commemorate high political, economical and social achievements of soviet women. Besides, the holiday used to symbolize the fight of women from all over the world for their rights, democracy, peace and absolute equality with men. Sounds not too feminine, isn’t it? Nevertheless, soviet period is a part of world history having its unique colour and distinctive character, which are definitely worth studying. Now-a-days, the residues of once vigorous soviet culture and ideology can be traced through the old documents, newspapers, posters, postcards etc.

Surely, today the holiday has lost its political significance. Most of the Russian women associate it with spring, flowers, revelry and relaxation. Men traditionally take all female responsibilities and give flowers and presents to their sweethearts, colleagues, mothers and grannies. We can say that the holiday has turned into the kind of Mother’s Day and St. Valentine’s Day blend.

But let’s remember how everything started. Here we’ve collected a heap of 8th March Soviet Postcards. Some of them might seem naïve and even primitive, some of them contain traditional Russian ornaments, objects and elements. Try to discover old soviet design school tricks and feel the subtle breathing of the gone epoch… it still can be heard… just listen…

* * *

8th March Soviet Postcards

* * *

8th March Soviet Postcards

* * *

Read More

Creative Parallax Scrolling

Parallax scrolling is a technique used in computer graphics that creates an illusion of depth in the 2D image. Essentially, the background scrolls by more slowly than the foreground does, mimicking the way things which are far away seem to move more slowly than things which are closer.

Although this is associated with computer graphics, the technique has its origins in the 1940s, when animators used the multiplane camera technique to add depth to their images. In that technique, the animators would draw the background and other animation elements on separate panels. The panels would be layered over each other in a contraption that kept the panels separate, and they would be pulled or changed, then photographed. By allowing the panels to move independently, the animators could create an effect that made it look like things were moving at different speeds. This was perfected in Disney’s Snow White and the Seven Dwarves, when the evil witch drinks a potion which makes the things in the room spin around here.

In the 1980s, computer games developers wanted to bring that same effect to their artwork, so they developed parallax scrolling, where the foreground, middle ground and background move at different speeds to give a sense of depth. This technique became popularised after its use in the game Moon Patrol.

Read More

Free Spring Wallpapers – Kick Off Winter Stupor!

Do you feel tired after the long cold winter? Lack of sun, vitamins and happiness inevitably catches us up in the period of weather change. But don’t let seasonal depression take control and interfere your plans! Today we’ve prepared a kind of effective therapy for you… Lots of blossom, greenery and freshness, which you can place on your desktop and give your eyes a pleasant repose from time to time! Spring has come at last. Nature is gradually awaking from its “wintermare”. The sky returns the transparent blue color we’ve missed so much previous months. The sun is hurrying up to warm each creature with its warm caressing rays.

All of us also notice positive changes inside. The desire to “spread the wings” and shoot upwards into the sky becomes almost irresistible. Don’t restrain yourself; spring is the best time for new ventures as everything is getting ready for the next life cycle.

You don’t need to postpone any action, switch your mood to the spring one right now. Just pick out one of the free spring wallpapers behind and set it on your screen. We are sure you will start to notice soon energy and inspiration rush – decide yourself where to direct it!

* * *

Come Spring

Spring Desktop Wallpapers

* * *

White Orchid Nature

* * *

Springtime Nature

* * *

Read More

How Music Genre Affects Website Design: Some Bizarrely Popular Techniques

Have you ever thought how many music genres are there in the world? African, Avant-Garde, Blues, Brazilian, Comedy, Country, East-Asian, Easy Listening, Electronic, Modern Folk, Hip Hop, Jazz, Latin American, Pop, R&B, Rock, Ska, South and South-East Asian and many-many others. As you might have understood, each of the above mentioned large music genres is sub-divided into narrower categories.

So, why we recollect all those innumerable trends now? The reason lies in the fact that when you design a website related to music, your final web project should look like accurate visual print of a certain genre, otherwise it won’t reflect the soul of the artist and the spirit of the music.

In this entry we will try to guess what design techniques help us clothe something intangible like music into a static form visible and understandable by any user.

In fact, creation of a music site is a hothouse for web design junkies. Cool typography, crazy imagery, offbeat composition, wild visual effects, complicated concepts, hidden objects, lush graphics – no taboos as long as the music seeps through your design!

If we come down to earth from the cloud of creativity, it will be easier to see some major trends and musts in music websites development.

Last years, the overall popularity of social media sites has taken over the world and musicians can’t be considered exclusion in any case. They use every single opportunity to warm up fans’ interest with the next hot behind-the-scene story.

Not long ago, music websites were mainly done in Flash as the technology had no equals from the point of spectacular animated effects. Now, the situation has cardinally changed, and most bands switch to CSS, HTML and JavaScript to be up-to-date.

As any other website, a music one should perform definite functions:

  • 1) provide the users with latest tracks;
  • 2) sell albums and other stuff;
  • 3) draw new fans;
  • 4) keep the existing ones.

To cope with these strategic goals, any decent music site should include:

  • Latest news
  • Upcoming shows and events
  • Blog
  • Fully operative store
  • Media (photos, videos, music)
  • Bio
  • Community Forum
  • Newsletter
  • Contact Info
  • Press Page
  • Social network connections like Facebook, Twitter, and Last.FM…This list is not exhaustive, of course.

* * *

Now, when we’ve discussed some technical matters a little bit, let’s talk about common design methods which let us set this utterly important connection of music genre and design style. Studying websites collected below, you will notice evident dependence of design style from music genre.

  • Rock music websites, for example, can be referred to grunge style due to the dark, dirty textures, scaring images and worn out fonts. This layout suggests the users that their ears should get ready for hard, loud music.
  • Radiohead.com

    How Music Genre Affects Website Design

    * * *

    Read More

Forget about Angry Birds! Check 10 Apps for Learning HTML5

In Ancient Times people had small range of opportunities to exchange useful information with each other. One can argue even some ancient civilizations used written language, but we should understand the main word here is “some”: most folks knew no letters. The second factor is most part literate. The sacred knowledge of letters was destined only for narrow caste. So, the information had to be transmitted mouth-to-mouth, the facts were improved with fantasies and impressions of each narrator. That’s how the myths were born. I’m not trying to say this phenomenon is bad, because I love myth for the interesting art of collective unconscious, but the concrete usefulness of the info is covert with the fantastic elements.

Why did I tell you this? To show the real value and benefit of modern technology level – cognition comes through comparison. Just imagine how many opportunities for self-education you have today, when it’s so easy to get access to any information from your smartphone. Few movements of your fingers: and you, for instance, can start learning modeling, designing, engineering or programming. As for the last point I’d like to assist you and represent 10 useful applications for learning HTML5.

* * *

HTML5 Basic

* * *

Learn HTML5

* * *

HTML5 Reference Guide


Read More

Trendy Examples for Surviving When Stuck with a Mobile Website Design

It has been said enough about the deep influence of smartphones on a human life. So I don’t want to repeat, I just would like to mention it’s obvious a modern web designer must improve himself in mobile website making. This kind of designing activity differs from the classical one for PC: the primary reason of distinction lies in the smaller space of the mobile screen. This feature generally forms all main attributes of mobile web design, some of which are the following:

  • Big fonts – you know, it’s very inconvenient to strain the eye to see the microscopical text on the mobile screen.
  • Big buttons – missing touches provide with a quite understandable frustration dose.
  • Simplicity – touch-oriented interaction requires specific approach, because it lacks of PC’s wide range options.
  • Clean and clear look – no comments.
  • No horizontal scrolling – no one wants their finger to be tied into knot.
  • Visible and easy-to-use search bar – the touch-keyboard has its own specialties in using.
  • Handy social media widgets – a mobile user has no time and patience to scroll for a while and seek for Twitter, Facebook and other buttons, they must get apparent immediately.

Anyway, here we got the whole new branch of web designing appeared, according to that the professional level requires hours of teaching, practicing and experimenting to be reached. So, for those who suddenly understood the importance of high quality mobile design, it would be helpful to start from this infographic.

But before, let’s check the best examples of mobile web design to keep in mind how a good version should look like and also, of course, to inspire for new creativity.
 

* * *

Visit Bruges

Creative Mobile Websites
 

* * *

National Theatre Wales

Creative Mobile Websites
 

* * *

Eden

Creative Mobile Websites
 

* * *

Read More