Web Design – Page 3 – Jayhan Loves Design & Japan

Media Queries – a Responsive Web Design Gallery

12 Jun 11

. Web Design

Media Queries - a Responsive Web Design Gallery

Responsive Web Design has become really popular nowadays. As in the world today with the desktop screen getting much wider, while on the other hand the rising of mobile devices with smaller screen and resolutions. Now it is very essential to create a website that can be viewed with various screen resolutions. With the help of CSS3’s Media Queries, designers are able to design websites that are responsive and adaptive to what screen resolutions that the users have.

Media Queries has been existed quite some time already and there are quite a number of websites that use Media Queries. Recently I found a web gallery called Media Queries, which showcase the good examples of responsive web designs.

iOS Fabric Texture in Web Design

08 May 11

. Inspiration, Web Design

iOS Fabric Texture in Web Design

Apple is very popular for its innovative and cutting edge hardwares and softwares, and somehow they are the trend setter in terms of design. For example back in the days, the rising of the glossy button was inspired by Apple and now, the fabric texture in the Apple iOS.

The fabric texture was seen as the background for the app folders, as well as in the Maps app, when you click the page flip button at the bottom right corner. The texture is classy and subtle, and really fits well as background. Besides app, on the web world I started to see the fabric texture featured in some websites. Here I will show you 5 websites that uses iOS fabric texture as background.

What jQuery Plugins They Are Using?

12 Mar 11

. jQuery, Web Design

What jQuery Plugins They Are Using?

jQuery is one of the most popular Javascript frameworks available on the Internet, and many jQuery plugins available out there for example sliders, lightboxes and many more that are free to use. With these plugins, we are able to use them to enhance our websites usability without scratching our head.

Many websites out there use jQuery, and actually what plugins they are using? In this article I will show you 7 examples of jQuery in real world examples as well as the links to the plugin. Note that the examples might not using the exact plugin introduced below but they have the similar function. Read on to find out!

9 Web Design Blogs That I Enjoy Visiting Recently

13 Feb 11

. Inspiration, Web Design

9 Web Design Blogs That I Enjoy Visiting Recently

There are tonnes of websites and blogs that dedicated to topics related to web design and development, ranging from design best practices, tutorials to design inspiration. I bet as a Web Designer, everyone has their favorite web design blogs. Recently, I discovered 9 web design blogs that worth a visit.

These websites that I’m going to introduce might not be as popular as the mainstream blogs, but definitely they have something that are useful for you as well. I really enjoy visiting them. Please continue reading and check those websites out!

7+ Websites with Unique Scrolling Experience

24 Jan 11

. Inspiration, Web Design

7 Websites with Unique Scrolling Experience

Recently I found another interesting style in Web Design as the boring scrolling experience become really unique and fresh. Scrolling in either horizontally or vertically, it brings the whole new perspective towards creative presentation on the web. We can see how the designers telling a story through scrolling down a page, and the creative placement of the graphic elements that react according to the browser screen.

Personally I found this is really interesting and definitely worth checking out how it actually be done. If you know any resources or tutorials that talks about this cool effect please do let me know by commenting at comment form below. Without further talking, below are the 7 websites that I would like to share with you guys.

CSS3 Dotted World Map

17 Jan 11

. Web Design

CSS3 Dotted World Map

With the introduction of CSS3 in recent years and begin to widely supported by modern browsers in the market, a lot of simple effects can be done via CSS without using any images at all, for example: rounded borders, multiple drop shadows and even round shapes. Many adventurous designers start to experiment with CSS3 to see what’s the possibilities. And here, I’m going to show you a dotted world map that created by using CSS3 with no image.

To make the dotted map in CSS, first I used a dingbat font call “Geobats” to help me illustrate out the map, then I use a dot pattern to create the map into dotted style. Then I only start to code the map in Dreamweaver, the editor I frequently used. In HTML, the dots are formed by using List Item, and then by using multiple box shadow properties to create the map.

8 resources to learn and understand CSS

11 Jan 11

. Resources, Web Design

8 resources to learn and understand CSS

Cascading Style Sheets or more commonly known as CSS, is the language that describes the look and feel of a website. With CSS, web designers able to style a website creatively and it is the vital component in the front-end web development. It is the must learn language for web designers or people who wants to make websites. But CSS is not easy.

Fortunately there are a lot of free online resources that are accessible to everyone to read and learn. So in this article, I will share with you all 7 resources to learn understand the function and tricks of CSS. I think all the links introduced in this article will benefit not just beginners but also web professionals as well!

Go to the Top, Please

27 Dec 10

. jQuery, Web Design

Go to the Top, Please

In many websites with lengthy content, one very common features is by providing a “Go to top” button at the end section of an article for users to quick access to the top of the page, without using the scroll bar. This can be achieve easily by using a very simple anchor link that targets the top area of the web page. Cool and straight forward.

Well, actually I saw some really cool “Go To Top” approach which makes the experience a lot better. All you need to do is by adding some Javascript goodness into it. I will show you some real world examples and plugins to achieve the effect. Now, going to top has never been this good!

Best of 2010

22 Dec 10

. Inspiration, Resources, Web Design

Best of 2010

Few more days to go which marks the end of the brilliant year of 2010. It’s been an exciting year for the world of Web Design and the social web, a lot of new ideas, great designs, resources and tutorials that we all can collect and learn. There are a lot of “best of” roundups from various blogs and here I put up all together in a post for easy reference.

I categorize the best of roundups into 8 big categories which consist of best free fonts, best jQuery plugins, best tutorials and more. Well continue reading to check them out!

Galleries With Specific Genre

22 Nov 10

. Inspiration, Web Design

Galleries With Specific Genre

Visiting galleries definitely are one of the ways to look for design inspirations. There are tonnes of galleries out there showcasing the best in designs, and some of them are focusing on specific genre or field of area, for example app designs, minimalist designs, typography and more. This is quite handy because I can focus on specific genre in straight forward manner.

Without further elaborating, below are some galleries with specific genre. Continue reading to proceed!