Shibuya Scramble Crossing is the busiest crossing in world. Everyday, hundreds of thousands of people used the crossing and the crossing scene is really breathtaking, because cars will stop and the road will filled with many people from many directions crossing the intersection. Besides that the crossing also very popular and being featured in Hollywood movies too.

The Shibuya Scramble Crossing connects the Shibuya train station, with many huge shopping centers and retail shops. At night, the countless billboard ads will brighten up the crossing, not to forget the famous Hachiko statue that is just beside the crossing which many people use it as a landmark for meet up. In this post, I will show you the various photos of the crossing taken by various people and photographers.

Basically here are the 15 beautiful photos of Shibuya Scramble Crossing. Which one do you like the most? I somehow like the one that is raining. And also had you traveled to Japan before and walked across this crossing?

All the images are belongs to the respective photographers linked on each images.

I still remember when first learning the English alphabets while I was a kid, we get to sing the ABC song. It was a truly fun moment and until now I still remember the music and lyric. Then, we use alphabets in daily basis, from typing to verbal communication. Our life is inseparable with them.

There are 26 different characters in the modern alphabet system and each of the alphabet characters have distinctive shapes. Although the shapes are pretty much fixed, but these doesn’t limit creative designers from around the world to create something outstanding out of it. In this post, I will show you some inspirations that goes from A to Z!

Alphabets Everyday

Talented photographer, Bela Borsodi, uses everyday life objects and clever perspective to create his vision of alphabets.

Evolution of Type

Designer Andreas Scheiger created this “Evolution of Type” project that treating typefaces as living being. The characters are being operated, showing the bones and flesh. Eerie thou!

Effing Typefaces

Designer Alex Metro uses human body features to construct these black and white, cartoonish alphabets. Slightly NSFW.

Alphabet Illustration

Jing Zhang, a designer from China, using architectural elements to create these unique 3-dimensional alphabets.

paper + typography

Sabeena Karnik uses her crafty hand to build up these elegant typefaces with paper craft. Have to love the curves and colors of each characters.

Alphabetcha

Alphabetcha is another alphabet sets that uses human body, slightly weird but well executed illustrations. Done by Nathan Walker.

Animals in Alphabet

Learn animal names with alphabets! Casey Girard created this interesting sets of A to Z illustrations that not only beautiful, but educational too.

Letterform for the ephemeral

Amadin Alessandra thought us that not only we can write them, but also wear them! This unique approach of depicting A to Z was done by wearing bright color cloth with human gesture.

Collages – ABC of professions

Like the animal alphabet, this set uses job profession as subject matter. Anastassia Elias using her wonder hands to create the alphabets with collages of color paper. Excellent!

alphabet on 12 inch record sleeves

This alphabet sets was done on 12 inch record sleeves, and the characters was illustrated with graffiti inspired styles. Pretty cool!

End word

With the creative mindsets, the conventional alphabets transformed into something decorative and beautiful. Lastly lets watch a video depicting the wonderful alphabets to wrap up this A to Z inspiration. Hope you enjoy this post!

In this modern, fast moving 21st century, mobile phone has been an essential in our daily life and with the growing popularity of smartphone, it enables users to connect with each other much easier in a more enjoyable way with various applications installed. There are hundreds of thousands of apps available for download, and some of them are really well designed.

In this post, I will show you a total of 9 websites that are dedicated to showcase the best and delicious mobile user interface (UI) that are not only good looking but also intuitive. These websites are very useful to UI designers that are looking for inspirations for next UI design project. Be sure to check them out and bookmark them!

IOS Inspires Me

Beautiful Pixels

IOSpirations

Landing Pad

Lovely UI

TappGala

pttrns

Inspired UI

Android Niceties

Hey, that’s more!
Above are the 9 sites that you should visit if you are looking for User Interface inspiration. If this is not enough, you can go to MobileGUI for more links, or go to Dribbble to search for UI shots.

Here we go again! It’s the seventh edition of the Flickr gallery showcase again! As usual, five awesome photo galleries will be showcased in this post. Continue read on to check out the inspirational galleries! If you want to check out the previous series, here are the link to first, second, third, forth and fifth and sixth episode of this series.

arcreyes [-ratamahatta-]

Acreyes took a lot of shots of Japan and shows us how beautiful Japan are! Photos are amazing and HDR-ish. Click here to view the slideshow.

kaori.ikt

Here we enter a gallery that has many cherry blossom photos and random street photos that taken with film camera. Click here to view the slideshow.

Photoportee

Photoportee’s subject matter are mainly architectural and I really love the photos that look surreal and out of this world. Click here to view the slideshow.

loo3*

Recently I also started to shoot film, well I think film photography has much more emotion and personality. I really like the anticipation of getting the processed film. Click here to view the slideshow.

kero*

Right now I have 2 film cameras: one 35mm and one medium format. I really like square photos, not because Instagram popularize it, but because I can frame much better with it. Click here to view the slideshow.

Picture header credit: kaori.ikt. All the pictures belongs to the respective owner mentioned above.

If you are looking for jQuery slideshow plugins for your next project, the official jQuery Plugins library is the destination to look for the plugin. Unfortunately, at this time of writing this post, the plugins page is under development. So, where you should go to look for your slideshow plugin?

Luckily, there are several other plugins libraries that you can rely on. Here I will introduce 4 jQuery plugins libraries that you should visit today, while waiting for the overhauled Plugins page to be up in future time. Please continue reading to check them out!

jQuery This

This is a new plugin library that I stumbled upon. Currently it has a small nice selections of plugins presented in a nice design.

The Ultimate jQuery List

As recommended by jQuery, this alternative plugin library has 593 items, with nice and detailed categorization.

CodeVisually – jQuery category

In here, you will also able to find a handful of useful and latest plugins on the market. This site currently listed roughly 100+ plugins.

jQuery Clip

Lastly, this nifty plugins library which was written in Japanese, and it lists various plugins in 5 columns format, provided with categorization.

End Word
This is it, above are the 4 jQuery plugins galleries that you can use to search and refer to the latest plugins. Well, I hope you find this post useful! And as usual, if you have any other recommendation, please do inform me with comment form below.

With CSS3’s transition property, Web Designers are able to do object transitions, especially for interactive content like navigation menus, without relying on Javascript. In this tutorial, I’m going to show you how you can achieve cool animated menu on hover by using CSS3.

For this tutorial, we will be utilising CSS3’s background-size property as well as transition property, to animate the background image. If you are learning CSS3 and would like to learn this trick, please continue reading to find out how.

Demo

Click here to view the demo.

Browser Compatibility

This effect is viewable on latest Firefox and Webkit browsers like Chrome and Safari. IE9 does not support transition property so it will not have transition animation.

Tutorial

STEP 1
First is to create the image for the rollover effect. All you need is just open a new 1px by 1px canvas as Photoshop, then apply your favorite color. In this example I use the color with the hex code “#d0044c”. Once done, save it as png image.

HTML
Now, launch your text editor which I will be using Dreamweaver for this tutorial. Create a new blank HTML5 file, and insert the standard navigation code like below:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">My Blog</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

CSS
Here we enter the core of this tutorial. Here is the essential CSS codes to make this effect works.

nav {
    position: fixed; /* fixed the menu to the left side */
    top:200px;
    left:0;
}

nav a {
    padding: 8px 20px;
    margin: 1px 0;
    display: inline-block;

    /* the background image created in first step */
    background:url(img/menu-hover-bg.png) no-repeat -1px top rgba(0,0,0,0.2);

    /* set background-size to 0 in width but 100% in height */
    background-size:0 100%;

    /* transition code to animate the hover */
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

nav a:hover {
    /* when hover, becomes all 100% */
    background-size: 100% 100%;
}

FINISH
Well, basically this is it! Just save and preview it in your favorite modern browser. The code above is for menu that sticks to the left, in the demo, I also included another version for horizontal menu bar.

Explanation

With CSS3, we are able to control the background image’s size with the new property called “background-size”. So, at first we include the background image, then set its background size to 0 in width, which will make the image invisible. At the background properties, we also set the background position to -1px to the left to make sure it is hidden completely.

Then, for the :hover state, we set the background size to 100%, to make it fill up the whole link space. The transition properties makes the transition animation of the background image smooth and cool.

Today is a lovely Sunday and I’m just back from the beautiful island of Bali, and in this article I will be talking about deals. So the group buying and the daily deal sites are really popular on the Internet now, thanks to great deals from big name sites like Groupon and Living Social. Well, in the design world, we too also have daily deals sites that sells useful resources at very cheap price.

Here I found 5 dedicated design related deals websites. There are a variety of stuff that you can buy with these sites at cheap price, namely from WordPress themes, books to resources. Continue reading to check them out.

DealFuel

DealFuel is created by Sitepoint, a popular company that produce many web development books. Of course you will find many deals related to their books as well as others.

AppSumo

Perhaps the biggest player in design deals site. Appsumo has wide ranges of deals, from design and development to ebooks related to business and entrepreneurship. Don’t forget to check out the free deals!

Mighty Deals

Mighty Deals is another popular design related deals sites that provide great deals for web professionals. The items are more design related from, WordPress themes, icons to Photoshop actions.

Bundle Hunt

Bundle Hunt has awesome bundle deal of high quality software. Well the latest bundle had ended, but be sure to sign up for e-mail alert to catch up their next deal.

Dealotto

Dealotto is a daily deals site where your luck decides the price you pay. The site design is pretty fresh, and it has small range of quality products on the deal store.

End words
Well, here are the five sites that I wanted to share with you. One question that I would like to ask, do you buy stuff from these deals site mentioned above? If you have any other design deal sites that I missed out, please inform me too via comment form below!

Picture header credit: 春景色 by **sione**

Today in the age of Internet, we are exposed to many source of information, either from the news portal, magazines or blogs of our choice, or from social sites like Facebook or Twitter. There are so much information created everyday and sometimes it is very difficult to consume them all.

Well, maybe you will think that some stories out there are presented in a conventional way and somehow it is boring to read. Well, here I’m going to introduce some fresh ways of creating and consuming information in this digital age.

Personalized News

There are so many news and information covering all sorts of aspects, how are we going to find the stuff that we want to read? Enter Zite and Paper.li.

Zite is an application for mobile devices (both Apple and Android), and it is a personalized magazine that gets smarter as you use it. When using it, you will pick several topics/keywords of your choice, and it will fetch you with relevant news that you care. I used Zite and found really useful links with it.

With Paper.li, you can create your own online newspaper! Paper.li is a content curation service and you can publish newspapers based on topics you like, and you can also share with others and read other users paper.

News with audio

Sometimes, we all like the good old television because it feeds you with not just visuals but also audio. There are a great website call Qwiki, it is like Wikipedia with audio. Here you can search for your information, and it will present you with an entertaining slideshow, with audio narrations as well as subtitles.

Storify

Storify it’s a service that helps users tell stories by curating social media. That means with Storify, you can gather the scattered news from many sources like Twitter, Youtube, and links etc and put them into one place, or a story. It’s pretty interesting way to present the news if is involving social aspects.

Timeline

As many of Facebook users have known, the profile page had gradually turned into the timeline based interface. Personally I like it very much because of the presentation is nice and sorted based on time. Well, Verite.co also comes up with this service call “Timeline” that let you create interesting stories based on timeline event. I think this is great for creating interactive company milestone page, personal profile, and historical events.

Read the Important Only

Conventional news sites normally displays all the news in a page, but hardly highlight which one is the news that matters for the day. However, Newsmap is an one of a kind news portal that displays news based on popularity. The more popular the article, the bigger square it is. You will know that that news is a definitely a must-read.

Next, is a site call Breaking News., it also displays important news of the day, based on multiple sources like wire services, live feed, RSS, Twitter and more. It also shows you the popular topics and ongoing stories that you may want to follow.

End Word
Well, there are definitely more new ways of consuming and creating news that I couldn’t manage to cover, if you have any recommendation, please do introduce it to me. All I can say is, digital text is definitely way more interesting than the linear, printed text.

Picture header credit: Day006 by NaokiOsha(sansuu)

3D tool in Illustrator has been existed for some time and it is very useful to create simple 3D models and text effects easily. In this tutorial, I will show you how you can utilise the 3D’s wireframe option to create a unique yet eye catchy text effect.

What you need here is an Adobe Illustrator version that comes with 3D tools. This tutorial is really easy to do and it’s really suitable for beginners who wants to learn more about Illustrator. Please continue reading to follow the step by step tutorial!

Step 1

Launch your Illustrator and create a new canvas of any size. I’m using Adobe Illustrator CS5 for this tutorial. Select the Type Tool, type a word with fonts of your choice. Here I’m using a bold sans-serif font that gives a better outcome.

Step 2

By selecting the word you created in Step 1, now go to Effect > 3D > and select the Extrude & Bevel. The Extrude & Bevel window prompts out.

Step 3

Now, look at the screenshot below and check out the options. The most important thing is to select the “Surface” option to Wireframe.

Step 4

Tada, there you have it. You had just wireframed your text. The text is still editable at this moment.

Final Step

You can further enhance the 3D effect and make it even outstanding by using the original text with different colors. You can also go crazy by adding more stuff like halftones to make it funky. You can download the free halftone vectors here.

This is it! Hope you find this tutorial useful and perhaps you can use this cool effect for your next flyer or poster project!

As mentioned in my previous article, fancy scrolling website is one of the hottest trends on the net. When scrolling down, the parallax effects and unexpected object animations give a fresh new definition for scroll down the page where it used to be boring. But for people who are not really good in coding, how are we going to create such cool scrolling and presentational effect website?

Well, I gathered a few essential plugins and tutorials found on the Internet that will let and teach you to make such websites with a breeze. Many of these plugins mentioned below are powered by jQuery and they are really powerful. Please continue read to find out all of these great resources.

Curtain.js

This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises.

Scrollorama

You can use this plugin to do all sorts of cool scrolly stuff, for example objects flying in and out, and also parallax effect too.

Impress.js

It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

jQuery Scroll Parallax plugin

You can use this plugin which was created by Dave Cranwell to achieve simple parallax scrolling website. An alternative plugin would be jQuery Parallax plugin which was created by Ian Lunn.

Lateral on scroll sliding with jQuery

In this tutorial, you will learn how to create a scrolling presentational website that mimics the effect of popular website Nizo App.

Stellar.js

This is another plugin that helps you to create parallax website. The demo in that site shows that the effect also achievable with horizontal scrolling website.

jmpress.js

jmpress.js started as a jQuery port of impress.js created by Bartek Szopka but with a different goal in mind.

Scrolling through video

Perhaps you had visited a cool scrolling site like 360° Langstrasse website http://360langstrasse.sf.tv/ and been wondering how they achieve the result? Well this useful tutorial will enlighten you!

End word
There you go, above are all the plugins and tutorials to aid you create unique presentational and scrolling website. One thing to remember thou when using these effects, is it necessary to implement in your project? Because although it is cool, but if doesn’t use it wisely, your site experience could turn out bad! So please use those plugins wisely and I hope you find this post useful!

Picture header: Blue Sky Blue by Hirotaka