In the current world of design for digital space, we talk a lot about using the user interface to bring the best user experience for the users. Yes, it’s indeed very crucial. Just like the environmental design in real world, good user interface will help users to achieve goal and solving their problems. Intuitive user interface will churn out satisfied users!

In this post, I will show you some sites that you can go for best user interface and user experience inspiration fix. You will learn a lot about the tiny little details that make the difference. In my opinion, UI Patterns is the ultimate destination for inspiration and research, but continue read on to check out the other sites that you can visit.

UI Parade

In here, you will find many good examples of designs for common ui elements. The clean user interface on this site makes navigating the site easy too.

UI Details

In UI Details, you will find design inspiration for interface designs for website and mobile applications.

Little Big Details

Little Big Details is all about the tiny little details that brings out the good of user experience. Not just design, but also tiny interaction and feedback that are caring.

Awesome UI

Or if you just want to surf through images and more images of good UI, crisp, pixel perfect, drooling designs, this is the site to go!

Pattern Tap

Pattern Tap is also a great destination for finding specific element UI inspiration. The examples were carefully categories for your ease of use.

Extra! UI Cloud

A bonus entry to this post! With this site, you can find many good resources of various UI designs that you can download, or just for reference!

The post 5 sites for your UI/UX inspiration fix appeared first on Jayhan Loves Design & Japan.

Today I want to show you the beautiful illustration works by a Japanese illustrator Ryotake Masa (武政 諒). Born 1981, and graduated from art school and university, he became a freelance illustrator since year 2010. He often get commissioned to create illustrations for books, advertising, and magazines.

What I like about his style is the use of subtle texture to bring life to the illustration that normally depicted with solid colors. The lines are very clearly defined, pairing up with contrasting colors to produce the unique ambiguous artwork. Besides that, I also like the way he illustrates the everyday object in flatty style but yet remained identical. Continue read on to check out some of his works.

To see more about his works, please go to his homepage to view his illustrations and also commissioned works. And you can actually buy his prints on Etsy too.

The post Beautiful artworks of Ryotake Masa appeared first on Jayhan Loves Design & Japan.

Well, if you want to learn more about other culture, one obvious way is to travel to that country and experience yourself. But sometimes, you want to know more about it, you will have to read books, watch videos and more. For country like Japan which has rich in culture and diversity, every traveler will gain different experiences in Japan! In this article, I will show you a couple of interesting videos and playlists that talks about Japan.

With these videos, I’m pretty sure that you will learn new things, culture, practices and interesting facts about Japan! I get a lot of surprises when viewing some of them. Japan is really a wonderful country and definitely would like to go again! Without further elaborating, read on to check out the videos!

Japan actually is such a country!

This video is in Japanese from Japan news agency and it talks about the foreigners travelling to Japan without travel guide and go experience the real Japan! Interesting!

Amazing Japan that surprised the world

Ok, this is another Japanese narrated video that talks about shocking discoveries in Japan that surprises the Saudi Arabian. What a culture shock for him and actually shows the beauty of Japan.

Japan from foreigners’ point of view 1

This is also an interesting video about foreign travellers’ point of view about Japan. Again this video is in Japanese. Click here to view the second episode.

Culture Japan by Danny Choo (playlist)

Culture Japan is a series of television program hosted by ultimate famous anime blogger/culture pusher. In this series, you can learn more about interesting things about Japan anime scene and also interesting facts that were hardly found elsewhere.

Lost in Tokyo

An interesting video from Mark Bramley that he took when in Tokyo about 2 days.

Tokyo Slo-mode

Another interesting video showing the scenes of Japan in slow motion.

FIRST TIME HERE: JAPAN

A different travel documentary of traveler couple that first travel to Japan.

Tokyo, Japan – Travel Attractions (playlist)

In this playlist, you will find interesting information and you can use to plan your next travel to Japan!

A Life in Japan – Documentary

This is a 1 hour plus video, documenting the foreigners who live in Japan, sharing their findings and experiences.

Living in Japan (playlist)

This is a series of videos showing the different bits of Japan narrated in simple to understand and very useful!

[Bonus] Weird $#it from Japan

This is a hilarious web series, showcasing the Japan in a funny way. The host of the show, Jukka Hilden is really funny! Enjoy!

The post Know more about Japan with Youtube videos appeared first on Jayhan Loves Design & Japan.

When comes to finding color inspirations or searching for color schemes, there are two main resources: Adobe Kuler and also ColourLovers. Both are really essential for designers, to find the suitable colors, and also using the tools to create personal color schemes.

Coming to the year of 2013, according to Coliss.com, there are many other online color and color scheme tools as well. They are not as powerful as the two sites mentioned earlier, but certainly they will helpful in other ways. Please continue read on to check them out!

Flat UI Colors

Ok, flat design is real hot and trending right now! You will find many great examples of flat designs, and somehow share similar color palette. In this site, you will find the popular colors that are commonly used when creating flat designs. Note that the Pantone color of the year 2013, “Emerald”, also visible in the list.

PLTTS

The color palettes in this site were pull out from ColourLovers by using its API. It gives the users an alternative to search for desired color scheme using HEX color code of choice with a cleaner interface. It’s a useful side project by iDuuck (http://twitter.com/iDuuck)

CSS Color Names

In this site, you will learn hundreds of color names, that you can use in CSS. So next time instead of using HEX or RGB values, why not using CSS color names? You can go to the grid view to check all the colors at one go. Currently featuring 147 color names.

Hexual

What, we can actually learn new words with color HEX code? For example color code #BADA55, will give you the definition of “Badass” (5 looks like S). This site is not necessarily useful, but it’s a cool addition to the list here.

Guideline Colors

This site features the corporate color guidelines for popular online tech companies like Facebook, Twitter, Google and more. Clicking on the color squares will lead you to the respective brand/logo guideline.

Brand Colors

Less useful than the previous one, this one shows the major colors of the hot online sites.

Web Colour Data

By using this site, you can actually generate color schemes for specific URL that you entered. Not only it detects the css colors, but also image pixel colors that are used in the page URL as well. Could be useful to check out what’s the main color and what is secondary color, and whether it’s aligning with the brand color.

Colourcode

Colourcode is very useful when you want to find out the HEX, RGB, HSL value of one particular color at one glance. Hover the color pane then you will find many other colors and it’s properties. You can switch between one solid color or colourscheme. In Colourscheme mode, you can find the shades of one color. Useful when finding the right shades!

HEX Color Tool

So, you have a color and blindly looking for the darker or lighter shades of it? This tool is going to solve your problem by generating a better suggestion for you. This website can be really useful when you try to find different shades of color to create some sort of 3d vector works.

HEX to RGB converter

Ok, what if you just need a simple converter from HEX to RGB and vise versa? Apart from using graphic editing tool, you can just fire up your browser and use this site instead.

Pretty IP

This is a tiny little cute color web app that detects your IP address and generate a color scheme for you.

Multicolr Search Lab

Multicolr extracted colors from 10 million Creative Commons pictures from Flickr. Simply choose some colors from the color palette and see the generated images on the left. Useful when finding images with the color mode that you want.

Pictaculous

Upload and image and you will find the generated color scheme for you. It also suggests color schemes from Kuler and ColourLovers that you might interested to use with the uploaded image.

I Want Hue

This color scheme generator is pretty complicated and well rounded. You can go through the tutorials to fully utilise the site.

Contrast Ratio

Still remember a popular website called Contrast Rebellion? This contrast ratio app created by CSS Queen Lea Verou is going to be the Contrast Rebellion’s best friend. Simply compare two colors (Background color and text color) to check out their contrast ratio that is given in score (Based on WCAG 2.0 on color contrast). The higher the better. Got a red circle? Better change your color!

Content reference: Coliss – ウェブデザインの配色設計に役立つオンラインサービスのまとめ -2013年春

The post New color scheme tools for the year 2013 appeared first on Jayhan Loves Design & Japan.

In recent web design trend, slider is one of the most commonly used interfaces. With slider, you can save a lot of space displaying similar contents and also make the website looks better. However, you might wondering is there any sliders that are responsive and still works in both desktop and mobile resolution? The answer is yes. In this post, I want to introduce 10 responsive sliders that you can use it for free.

Majority of the sliders here are built with jQuery/Javascript. Some are tiny plugins for minimal use, and some are featured pack that can slide contents and also video, not just images. Without further elaborating, continue read on to check out the sliders!

jQuery Cycle 2

• Slides images, video, HTML content
• Featured packed – loads of transition option
• Use HTML5 data attributes to configure the slider instead of Javascript
• Detailed documentation
• Touch/swipe gesture support (external plugin)

bxSlider

• Easy to setup
• Slides images, video, HTML content
• Touch/Swipe gesture supported

Fraction Slider

• Featured packed
• Advanced animation options

Unslider

• Easy to setup
• Very lightweight (only 3kb)
• Cross browser friendly

FlexSlider

• Can slide images and video
• Healthy amount of options
• Image thumbnail options available

Sequence JS

• Advance animation options
• Uses CSS3 Transition
• Endless possibilities!

Full Width Image Slider

• Full width slider!
• Lightweight for minimal use.

iView

• Customizable animation options
• Many transitions options available

ResponsiveSlides.js

• Lightweight (1kb minified and gzipped)
• Healthy level of customization
• Just slide images (captions supported)
• Easy to setup

Camera Slideshow

• Mainly slide images
• Plenty of options available

[Premium] Royal Slider

• Touch friendly
• Load of options for customization
• Predefined templates available

[Premium] LayerSlider Responsive jQuery Slider Plugin

• Hundreds of transitions available! (Hardware accelerated)
• Slides multiple content types
• Highly customisable

[Premium] Translucent – Responsive Banner Rotator / Slider

• Touch friendly
• Hardware accelerated

[Premium] jQuery Banner Rotator / Content Slider / Carousel

• Many sliding style available – full width, carousel, sidebar slider etc
• Touch support

The post 10 free responsive sliders for your mobile friendly website appeared first on Jayhan Loves Design & Japan.

Last year, I introduced a couple of jQuery plugins website libraries that you should visit, today I would like to make an update to that post. Here, I will show you some other libraries that you can use when looking for great jQuery plugins that will save your development time.

The jQuery Plugin Registry

This is the official jQuery Plugins repository from the maker of jQuery. Although it’s just launched not long ago, but there are already close to 1000 registered plugins. With it’s user friendly interface and also connecting to respective Github repositories, you can easily navigate and check whether the plugins are recently updated or not.

Unheap

I stumbled upon this site just recently. Unheap features a sleek and compact interface that allows users to quickly glance through a sea of plugins available. The detailed categorization helps to quickly search for the kind of plugins you are looking for.

Handpicked jQuery Plugins

As mentioned in the title, the plugins featured in this site are carefully selected. Although the interface are not so user-friendly, but you will only find good quality plugins here. Thanks to the owner who helps us filter out the bad one so we don’t have to.

Basically above are the sites that I want to introduce today. Hope that you will find this post useful! For users who wants to know the previous showcased libraries, here is the quick list.

• jQuery Clip (Japanese)
• jQuery category from CodeVisually
• jQuery List

The post jQuery plugins libraries – 2013 edition appeared first on Jayhan Loves Design & Japan.

Pinterest. A place where you can find beautiful, inspirational images, and also allows you to pin the images you would like to keep and arrange them into boards. There are a lot of Japan related boards too, and I would like to introduce 13 boards here in this post.

The boards ranging from places, food, art and design, architecture and so much more. I bet that you can know more about Japan with these boards and astonish about the beauty of Japan. Without talking much, please continue reading to check them out!

Beautiful Japanese Style

::: Awesome JAPAN｜Selection:::

Calming Japanese Garden

Japanese Art Images

Cool Japan

Japan

Japan

Japan Design

Japan Design

Wafuu | Japanese Scenery

Minimalism . Architecture from Japan

Minimal and Japan

Discover Japan

The post 13 beautiful Japan related Pinterest boards worth following appeared first on Jayhan Loves Design & Japan.

In Japan, the sense of architecture design has been outstanding for all these years. But through the years, the aesthetic value of the architecture and the concept of living has been changing to fit the owners vision of life and their modern lifestyle. In this post, we will dive into some of the modern cool looking Japanese houses.

Below are some examples of modern architecture designs that I found on the Internet that I would like to share with you guys. As you can see the shape of the houses are normally geometrical and very minimal interior design, using a lot of wood and glass that allows huge amount of natural lights to light up the inside during the day. It makes the space bigger and also able to save electricity too. Please check them out!

mA-style architects: Ant House

Located in Shizuoka, this house “dubbed” The ant house, indeed the interior looks like a playground maze. From the exterior, it looks like a huge black box, but inside it’s like a total different world.

Go Hasegawa: house in Kyodo

This house was designed by Go Hasegawa. The unique idea of this design is that the ground floor and upper floor serves up different purpose and has distinctive characteristic. The lower floor is like a small book library, very enclosed while the upper floor is open, allows interaction between the owner and his visitor.

Garden & House, Tokyo

This house is really unique and does not look like a house at all. It has multiple storeys on a very narrow space. It has a lot of natural plants on each floor, and makes it like a garden in the air.

The Mishima House

This Mishima house, I really like how the living/reading area at the top floor was designed. Looks really spacious although it was built with limited space.

Toda House in Hiroshima

At first glance, this house looks like a piano! The house are elevated from the ground floor, to leave space for kids to play. The house actually looks like an observatory deck, where you can get 360 view of the surrounding.

More cool houses

Above are the five cool modern houses that I want to show you. There are definitely more cool houses out there in Japan, below are some useful links that you can go:

• 10 extraordinary japanese houses volume 1
• 30 Of The Most Ingenious Japanese Home Designs Presented on Freshome
• Japanese House Tag on Dezeen

The post 5 cool modern Japanese houses appeared first on Jayhan Loves Design & Japan.

When comes to learning and referring about web development technologies like HTML5, CSS3, Javascript et cetera, normally we would find ourselves entering W3Schools website. At first glance, it’s a great site for learning, however there are many concerns about the reliability and credibility of the website content. W3fools, clearly addresses the problems of W3Schools.

So, if W3Schools posses so much false information and is not recommended by the web professionals, then what should we use instead? In this article we will dive into the alternative website which is better maintained, more open and recognized by the experts. And also a better and more social way of learning HTML and CSS.

Better Documentation

To refer to the specifications of HTML, CSS and other web technologies, below are some really good site to go. Web Platform is one documentation site that was backed up many huge Internet giant including Google, Facebook, Microsoft and many more. Other recommended choices are Mozilla Developer Network and Sitepoint Reference.

Better experience in code learning in browser

One feature in W3Schools is that you can read and also learn to code with the online code editor provided. Well the editor is pretty old and lack of features. Below are some much better online code editors that you can use for learning. Codecademy has tonnes of lessons that you can learn and track your progress too. You can also save your code online and share with others by using Codepen and also JSFiddle.

Better cross browser documentation

Another small feature in W3Schools is that it gives you the brief idea of a certain HTML and CSS property’s compatibility in different major browsers, which is not really useful and can be misleading. Can I Use is a much better reference site for the cross browser compatibility comparison. Not only user friendly, it also shows you the links to tutorial, guides and polyfill resources as well. Besides that, HTML5Please is another good one.

Better Learning Site

There are many other free resources that teaches you the tricks and fundamentals of web development. Please refer to my previous post here where I listed down some recommended sites. And for even better learning experience, you can fork a little money out and subscribe to premium learning resources like Code School, Treehouse or Tuts Premium. The subscription fee are really affordable and you can learn tonnes of stuff in an entertaining way.

Well, basically this is it. Hope you find it useful and learn the right way!

The post Learning Web Development without W3Schools appeared first on Jayhan Loves Design & Japan.

There are many websites that designers and artists can use to showcase their brilliant works for example: Dribbble, Behance, DeviantArt and more. With these sites, designers able to showcase their works, find inspiration, make new friends and get more exposure too! Today, I’m going to introduce JAYPEG, a design showcase site that originated from Japan.

The interface design of the JAYPEG website is really clean and minimal. The navigation is really straightforward, and the uploaded designs were arranged in a form of stack. There are only three public stacks at the moment: The Popular stack showing the popular entries; the Latest stack that displays the latest uploads; finally the Newbie stack for first timer. In there, we can find some really nice designs from Japanese designers. Below are some of the cool examples.

As you can see, the works are in wide varieties ranging from Digital design to Print. Be sure to check out the website to find out more cool designs! I think it’s a really good destination to search for Japanese design aesthetics.

The post JAYPEG: A design showcase website from Japan appeared first on Jayhan Loves Design & Japan.