Web Design Archives - Jayhan Loves Design & Japan

Web design trend: bento box

19 Mar 23

While browsing through good web designs recently on Twitter or via web design galleries, I noticed a trend of using content blocks in variable size and design to form an interesting bento box style design. It’s usually designed in a grid, for example 3×3, 4×4 or other configurations, and then making it visually interesting by being creative with the block sizes while conforming with the underlying grid configuration.

In this post, I will be talking about how the trend got started, then show some creative examples of applying the bento box content UI in web design. Lets get into it.

8 excellent use of gradient in web designs and learn how to create it

06 Feb 23

. Inspiration, Web Design

Recently while browsing through some good web design, I’ve been seeing a noticeable trend of using gradient in the design application. Gradient is essentially a gradation of two colours or more to create the effect of one colour fading into another. It can be used as a way to convey light source, to unflatten the design or to bring out the sense of space; it also can be used to bring more colours to brighten up the design.

During the skeuomorphic dominant design era, designers may use it more on the UI elements like buttons. In the modern web design, we can attribute the use of smooth gradient to Stripe, and Linear for the usage of gradient in dark web design. In this article I’ll show you some more examples of using gradient in web design.

14 inspirational web design galleries for 2023

18 Jan 23

. Inspiration, Web Design

It’s new year and let’s start it right with a refreshing mind and take a look at what are the great designs out there, done by creative designers with modern tools. As a designer myself, I always hunger for good designs that can ignite that spark for my design work. In this article, I will be sharing 12 web design galleries that I found recently and would like to share with you.

In the examples, you’ll find a mixture of galleries that showcase nice landing pages, the technology, the motion and the styles used, but also galleries of for UX focus that demonstrate user flows and jobs to be done. Without further ado, let’s jump right in!

8 Product Hunt-ish web design community that worth visiting

08 Jul 15

. Web Design

Product Hunt for Web Design

Product Hunt is a famous website that allows users to submit new startups and services and then gain exposure plus get upvoted and discussed by anyone if they find it interesting. With the uprising of the Product Hunt’s popularity, many Product Hunt-ish websites are born, cater to different subjects and theme. We call this “Product Hunt for X”.

Well there is no exception to design world. Here I collected 8 Product Hunt style web/mobile design community that covers every topics related from visual design, user experience, product designs, tutorial to development. Continue reading to find out these 8 vibrant and useful websites.

Best of 2014 and predictions for 2015

04 Jan 15

. Resources, UI/UX, Web Design, Web Development

Best of 2014 and predictions for 2015

Happy New Year guys! 2014 has comes to an end and I wish everyone to have a great year 2015 ahead! As the tradition of this blog, every end of the year I will gather around the “best of” links around the web and put them into one post. This years I have gathered best links ranging from best design resources, identity redesigns, mobile apps to user experience and more.

Not only that, I also gathered a few post about trend prediction for year 2015. Continue reading this post to find out those links!

Web design trends in 2013

14 Aug 13

. Inspiration, Web Design

Web design trends in 2013

Every year we see the web design world shifts. New design idea coming up and quickly adopted by the trendy designers over the world. Besides that, we also see some approach that were experimental back then, getting matured this year. In this post, I’m going share with you some design patterns that are trending this year.

I categorized this years trend into 7 main categories from the famous flat design to video as background. Continue reading to find out all of them.

15 useful websites for web designers

03 Jun 13

. Resources, Web Design

Web Designers need to learn a lot of things to become a well-rounded designer. Ranging from brushing up skills for web designing, web designers also have to learn to keep themselves up to date with latest coding skills, and also the best practices of creating the best user experience for the users when visiting the site or using the web app.

Fortunately, there are tonnes of great resources out there to aid especially the fresh designers along the way to become an experienced designer. Below, I’m going to introduce a couple of websites that are useful that covers many of the subjects that are related to web. Read on the find out!

Trend Alert: Flat UI Design

12 Feb 13

. Web Design

Trend Alert: Flat UI Design

In the recent years of Web and UI design, there are a lot of design examples that are visually stunning, with sense of depth and mimicking the real life objects. But in the year 2013, a design style has gotten into attention and become a rising trend: the flat UI Design.

Flat UI designs are usually minimal, less sense or absolutely no sense of depth, less gradient and more solid color fields, and huge white spaces. The visual components are usually straight forward, clean interfaces and uses flat icons as well. Continue reading to find out some examples of the flat UI designs.

2 tools to quickly convert PSD layer styles to CSS3

26 Oct 12

. Web Design

2 tools to quickly convert PSD layer styles to CSS3

As any web designers like me that use Photoshop as the tool to design websites, I believe many of us used layer styles to style up the common design elements like buttons and boxes. And when comes to converting design to CSS styles, we will have to manually enter the properties and values which is very inefficient and time consuming.

Well, rejoice! Today I’m going to introduce 2 tools that can quickly convert Photoshop layer styles to CSS/CSS3 with just a single click. They are: CSS3Ps which is a free tool and CSShat which is a premium plugin. Both tools are aimed to save your time and accurately convert your layer styles to reusable CSS styles.

7 heartwarming wedding invitation websites

22 Oct 12

. Inspiration, Web Design

7 heartwarming wedding invitation websites

Love is in the air… many of my school friends and work colleagues are getting married and certainly I can feel the love and happiness is surrounding them! Well, today in this post, we will be talking about wedding, and to be specific: heartwarming wedding invitation websites.

In my country Malaysia, majority of our people still preferring the good old invitation card to inform friends and family about their wedding and the dinner, but on the net I can see that there are couples that used web as medium to send out invitations. Certainly by using web as medium, the couple has the freedom to express their love story in a creative way. Here I gathered some great examples of them. Check them out after the jump!