<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jayhan Loves Design &amp; Japan</title>
	<atom:link href="https://www.jay-han.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.jay-han.com/</link>
	<description>Design blog by Jayhan Sim, a designer from KL, Malaysia who loves Japan!</description>
	<lastBuildDate>Sun, 19 Mar 2023 07:40:27 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>
	<item>
		<title>Web design trend: bento box</title>
		<link>https://www.jay-han.com/2023/03/19/web-design-trend-bento-box/</link>
					<comments>https://www.jay-han.com/2023/03/19/web-design-trend-bento-box/#respond</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Sun, 19 Mar 2023 07:39:23 +0000</pubDate>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Web Design]]></category>
		<guid isPermaLink="false">https://www.jay-han.com/?p=1876</guid>

					<description><![CDATA[<p>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&#215;3, 4&#215;4 or other configurations, and then making it visually interesting by... <a class="view-article" href="https://www.jay-han.com/2023/03/19/web-design-trend-bento-box/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2023/03/19/web-design-trend-bento-box/">Web design trend: bento box</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img fetchpriority="high" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/bento.jpg" alt="" width="1200" height="800" class="alignnone size-full wp-image-1880" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/bento.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/bento-300x200.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/bento-1024x683.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/bento-768x512.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>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&#215;3, 4&#215;4 or other configurations, and then making it visually interesting by being creative with the block sizes while conforming with the underlying grid configuration.</strong></p>
<p>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.</p>
<h3>How it all started</h3>
<p>Many believed that the trend was inspired from the Apple promotional videos in the where they show a grid view of specs and features shown below. It was unique to present the boring specs in a visually interesting grid style with variety of visual and typography application. Below is the example I screenshot from the recent <a href="https://www.apple.com/mac/">Apple Mac</a> promotional video. </p>
<p>However some might also argue that the true origin could be coming from Microsoft when they introduced the <a href="https://en.wikipedia.org/wiki/Metro_(design_language)">Metro design language</a> system when they unveiled Windows Phone 7. Be it who was the true inspirer, it definitely sparked many designers around the world to create bento box style design.</p>
<p><img decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/apple-mac.jpg" alt="" width="1200" height="674" class="alignnone size-full wp-image-1878" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/apple-mac.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/apple-mac-300x169.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/apple-mac-1024x575.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/apple-mac-768x431.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></p>
<h3>Bento box design examples</h3>
<p><strong>Apple iPhone 14 Pro</strong><br />
Apple continues to use this bento box design in the recent product offerings. In the <a href="https://www.apple.com/iphone-14-pro/">iPhone 14 Pro</a> landing page, you will see high level features introduction presented in this way with great variety of visual treatment to keep things interesting. While having different visual treatments, the content are not clashing with each other due to the effectiveness in using size and gradient text to guide user’s eye.</p>
<p><img decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/apple-iphone.jpg" alt="" width="1200" height="660" class="alignnone size-full wp-image-1877" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/apple-iphone.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/apple-iphone-300x165.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/apple-iphone-1024x563.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/apple-iphone-768x422.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Bolt</strong><br />
<a href="https://www.bolt.com/">Bolt</a> also used bento box to convey product offerings and features at a glance to give visitors high level of what it can do and then leading them to the video tiles at the end. Bolt used a more consistent visual approach to each of the tiles to keep the content easier to scan. It’s a great use to communicate features and lead them to view more at the end!</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/bolt.jpg" alt="" width="1200" height="660" class="alignnone size-full wp-image-1881" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/bolt.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/bolt-300x165.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/bolt-1024x563.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/bolt-768x422.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Linear</strong><br />
Similarly, the designers from <a href="https://linear.app/">Linear</a> used bento box design to introduce the feature with the sleek dark bento style. I like how it can be configured to have the text content on the top or below the image.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/linear.jpg" alt="" width="1200" height="750" class="alignnone size-full wp-image-1885" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/linear.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/linear-300x188.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/linear-1024x640.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/linear-768x480.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Chronicle</strong><br />
<a href="https://chroniclehq.com/">Chronicle</a> is a visually stunning presentation maker tool. It used a more free form bento box style to communicate many examples of what you can create with the tool in a small available space. It makes a lot of sense to use this style here because it’s exactly what user can create with it.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/chronicle.jpg" alt="" width="1200" height="660" class="alignnone size-full wp-image-1882" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/chronicle.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/chronicle-300x165.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/chronicle-1024x563.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/chronicle-768x422.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>The Craftsmen</strong><br />
Developers agency <a href="https://www.thecraftsmen.tech/">The Craftsmen</a> used bento box style predominantly to err.. craft their website. It’s quite of a visual treat scrolling their website, revealing their menus, work and even contact form at the bottom of the page. It almost made me think that “thinking inside a box” is not that bad after all.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/craftsmen.jpg" alt="" width="1200" height="660" class="alignnone size-full wp-image-1883" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/craftsmen.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/craftsmen-300x165.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/craftsmen-1024x563.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/craftsmen-768x422.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Nev Flynn</strong><br />
<a href="https://nevflynn.com/">Nev Flynn</a>, a developer and product designer from Ireland, spotted a bento box style in the home page. He used it to effectively segregate different content like a works, links to social media, map, his words of wisdom, and even a block to toggle light or dark mode. Bento box style certainly a refreshing way to present who you are!</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/nevflynn.jpg" alt="" width="1200" height="660" class="alignnone size-full wp-image-1886" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/nevflynn.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/nevflynn-300x165.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/nevflynn-1024x563.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/nevflynn-768x422.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Iconwerk</strong><br />
Similar to Nev, <a href="https://www.iconwerk.com/">Iconwerk</a> used bento box style to showcase their best icon designs. Each of the content boxes are kept very minimal so that when putting all of them together, it will not feel busy. Certainly Iconwerk did a marvellous job at this.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/iconwerk.jpg" alt="" width="1200" height="750" class="alignnone size-full wp-image-1884" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/iconwerk.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/iconwerk-300x188.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/iconwerk-1024x640.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/iconwerk-768x480.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Traf</strong><br />
One of my recent favourite portfolio site, <a href="https://tr.af/">Traf</a> used bento box to layout his portfolio works in a sleek dark themed design. Clicking to each work like the <a href="https://tr.af/icons">Icons</a>, you will see more grid inspired layout designs. Truly inspirational!</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/traf.jpg" alt="" width="1200" height="660" class="alignnone size-full wp-image-1887" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/traf.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/traf-300x165.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/traf-1024x563.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/traf-768x422.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Bento</strong><br />
<a href="https://bento.me/en/home">Bento</a> is one of the recently popular “Linktree” style website for anyone to create your own personal page. As the name suggested, it used grid to form the content blocks that formed the bento box UI design. You can be creative with forming the blocks with different sizes and emphasis.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/bento-me.jpg" alt="" width="1200" height="660" class="alignnone size-full wp-image-1879" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/bento-me.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/bento-me-300x165.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/bento-me-1024x563.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/bento-me-768x422.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Get started with designing in grid</h3>
<p>So above are some of the good examples of bento box UI design. As I mentioned above, this UI style can be achieved by layout out a grid system in your design tool. Framer in particular as a specific <a href="https://www.framer.com/learn/grids/">grid content</a> configuration that you can use right away. It also can be achieve with CSS too! Below are some links to learn about CSS grid:</p>
<ul>
<li><a href="https://web.dev/learn/css/grid/">Web.dev&#8217;s grid tutorial</a></li>
<li>Follow this <a href="https://twitter.com/iam_chonchol/status/1633731490637807616">Tweet thread</a> by Alamin to learn CSS grid visually</li>
</ul>
<h3>Credits and more</h3>
<p>I also would like to credit <a href="https://twitter.com/hckmstrrahul/status/1632018739523907584">@hckmstrrahul</a> and <a href="https://twitter.com/hellomuller/status/1630911575799263235">@hellomuller</a> for their Tweet on this visual trend that inspired me to write this article. And if you want to look for more examples, head on to One Page Love’s <a href="https://onepagelove.com/tag/bento">Bento tagged</a> web designs and <a href="https://godly.website/websites/grid">Grid websites</a> in Godly.</p>
<p>The post <a href="https://www.jay-han.com/2023/03/19/web-design-trend-bento-box/">Web design trend: bento box</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2023/03/19/web-design-trend-bento-box/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Q&#038;A with SMU students on Digital Product Design &#038; Solution</title>
		<link>https://www.jay-han.com/2023/03/11/smu-digital-product-design-solution/</link>
					<comments>https://www.jay-han.com/2023/03/11/smu-digital-product-design-solution/#respond</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Sat, 11 Mar 2023 14:47:58 +0000</pubDate>
				<category><![CDATA[Product Design]]></category>
		<guid isPermaLink="false">https://www.jay-han.com/?p=1868</guid>

					<description><![CDATA[<p>Recently I have the honour to share my experience working as a product designer with the SMU students online over the Zoom call with my product manager. As far as I can remember, this was my first time sharing with an audience, so I was pretty stoked and nervous at the same time. It was... <a class="view-article" href="https://www.jay-han.com/2023/03/11/smu-digital-product-design-solution/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2023/03/11/smu-digital-product-design-solution/">Q&#038;A with SMU students on Digital Product Design &#038; Solution</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/smu-1.jpg" alt="" width="1200" height="800" class="alignnone size-full wp-image-1869" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/smu-1.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-1-300x200.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-1-1024x683.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-1-768x512.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Recently I have the honour to share my experience working as a product designer with the SMU students online over the Zoom call with my product manager. As far as I can remember, this was my first time sharing with an audience, so I was pretty stoked and nervous at the same time.</strong></p>
<p>It was a short 30 minutes Q&#038;A session with three questions submitted by the students before the sharing session, and my product manager and I took turn to answer those three questions from the product management and design point of view respectively. In this post, I will share my thoughts to the three questions.</p>
<h3>Question 1</h3>
<p><strong>What are some common pitfalls to avoid when implementing a product design/digital solution in the business environment and how have successful companies navigated these challenges?</strong></p>
<p>There are three common pitfalls that I would like to share. The first one is to design based on HiPPO or Highest Paid Person’s Opinion. Essentially what this means is we design a product feature based on what our superior’s or CEO’s personal opinion. This is a common pitfall in a company that are not user-centric or has low <a href="https://www.nngroup.com/articles/ux-maturity-model/">UX maturity</a>. We shouldn’t be blindly following opinions of our bosses, but be open minded and test any assumptions with user interviews and testings, even if is coming from your very boss.</p>
<p>The second pitfall is thinking that “design is easy”. We shouldn’t go straight into hi-fidelity design without any research done to validate our assumptions, and to guide us to design the right thing. This can be avoided by implementing a design process, for example the famous <a href="https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/">Double Diamond Design Process</a> or the <a href="https://uxdesign.cc/design-is-not-a-process-its-an-odyssey-replacing-double-diamond-d6bc06965238">Design Odyssey framework</a>. </p>
<p>Lastly the third pitfall is not constantly tracking the performance or success metrics of the feature when launched to public. You can use analytic tool to get quantitative datas on how the app is being used, and then conduct user interviews for more in-depth insights. These datas will guide us to identify what wasn’t desirable that can be improved.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/smu-2.jpg" alt="" width="1200" height="800" class="alignnone size-full wp-image-1870" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/smu-2.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-2-300x200.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-2-1024x683.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-2-768x512.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Question 2</h3>
<p><strong>How do industry leaders approach user-centric design and UX when developing these digital solutions, and what strategies have proven most effective in ensuring a positive user experience?</strong></p>
<p>In order to foster a user-centric organisation, research plays a huge part. Before designing, we need to understand very well who are we designing this for, what are their needs and pain points. Research activities should also involve stakeholders in other departments, get them listening in the interview sessions, or participate in ideation workshops. Involving colleagues in part of the design process will surely increase the awareness in importance of user-centric design approach.</p>
<p>Besides that, research findings should be circulated and documented. I find research findings presented in a deck is an ideal way to get it shared and circulated. Besides that you may consider using tools like Notion, Confluence or Dovetail to store your researches online that can be easily accessed by anyone for reference. One strategy shared recently by a McKinsey Research Director that I worked with is that the research team may consider doing recurring email newsletter to share research insights to company wide. With this, the people in the company can subscribe and read, and thus building this great culture of user-centric design approach. </p>
<p>Another strategy I want to share is by having design principles. Design principles are a good tool to help guiding designers when comes to designing consistent experience, but also as a good tool to use to solve debates. When we are unsure about a certain design decisions or feedback from stakeholders, we can use the design principles to make decision making or effective and user-centric. Check out design principles from <a href="https://spotify.design/article/introducing-spotifys-new-design-principles">Spotify</a>, <a href="https://atlassian.design/resources/atlassian-design-principles">Atlassian</a> or <a href="https://principles.design/">Principles.Design</a> that aggregates many design principles in one place for inspiration.  [https://principles.design/](https://principles.design/)</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/03/smu-3.jpg" alt="" width="1200" height="800" class="alignnone size-full wp-image-1871" srcset="https://www.jay-han.com/wp-content/uploads/2023/03/smu-3.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-3-300x200.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-3-1024x683.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/03/smu-3-768x512.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Question 3</h3>
<p><strong>What steps can organisations take to ensure that their product design and digital solution efforts are scalable and can effectively meet the demands of their growing customer base?</strong></p>
<p>To make design scalable, designers should design with a design system from the start. It might be daunting as in early stage, designers are more focused on creating the product. But with a design system, even if is just a small one with a few basic components and style guides, it will set a good foundation for designers to create consistent experience faster.</p>
<p>Secondly is try not to reinvent the wheel. Designers should use common design patterns for more predictable experiences for the users, and then spend more time on crafting the specific experiences that are truly unique for your company. For example, for a ride hailing app, use common pattern for login flow, but design unique experience on book a ride journey.</p>
<p>Lastly, is to ship small. When designing a product feature, you should have a long term vision on how this product can be, however you should have milestones in between now and the end goal, and start shipping from a minimum viable/lovable product. This MVP/MLP usually contains only the bare minimum feature which is enough for users to use and get benefitted from. With this you can ship quicker, and also be able to pivot and tweak for the better faster.</p>
<h3>Final thought</h3>
<p>While I have made some tweaks to what I actually said during the Zoom call, the answers above carried most of the nuances. I enjoyed sharing my thoughts with people and aspiring designers. Here I would like to thank my company for such opportunity and I hope to do more in the future.</p>
<p>The post <a href="https://www.jay-han.com/2023/03/11/smu-digital-product-design-solution/">Q&#038;A with SMU students on Digital Product Design &#038; Solution</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2023/03/11/smu-digital-product-design-solution/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Should you name your layers?</title>
		<link>https://www.jay-han.com/2023/02/19/should-you-name-your-layers/</link>
					<comments>https://www.jay-han.com/2023/02/19/should-you-name-your-layers/#respond</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Sun, 19 Feb 2023 06:16:20 +0000</pubDate>
				<category><![CDATA[Art & Design]]></category>
		<guid isPermaLink="false">https://www.jay-han.com/?p=1859</guid>

					<description><![CDATA[<p>Recently on the design Twitter-sphere, there was a viral conversation over designers should organise and name the layers in Figma. In the original tweet, the Tweeter thinks that designers who organises the artwork in Figma without proper layer management are inexperienced and has no own style or ways of doing things, and he has no... <a class="view-article" href="https://www.jay-han.com/2023/02/19/should-you-name-your-layers/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2023/02/19/should-you-name-your-layers/">Should you name your layers?</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/name-your-layers.jpg" alt="Cover image of should you name your layers? article" width="1200" height="600" class="alignnone size-full wp-image-1861" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/name-your-layers.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/name-your-layers-300x150.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/name-your-layers-1024x512.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/name-your-layers-768x384.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Recently on the design Twitter-sphere, there was a viral conversation over designers should organise and name the layers in Figma. In the original tweet, the Tweeter thinks that designers who organises the artwork in Figma without proper layer management are inexperienced and has no own style or ways of doing things, and he has no problems calling them out for sloppy design files. In my opinion, the tweet was certainly carried slight unfriendly tone.</strong></p>
<p>When I first saw the tweet, it definitely captured my attention and many others. It became wildly discussed with two obvious camps: one that supports and one that against, though on the designers that I’m following, more of them think that designers shouldn’t spend their precious time on naming the layers. </p>
<h3>The argument and my initial reaction</h3>
<p>In the original tweet, the Tweeter (as of the time being, has locked his account) find designers that organises their Figma files in Groups with no clear naming, is a bad practice. And Figma as a collaborative tool by nature, such unorganised file will make it very difficult for other designers, engineers and product managers to work with. He attached a screenshot of a file showing multiple groups of layer depicting default naming with large number behind.</p>
<p>To be honest, I was partially triggered by this tweet initially because, considering myself as a more organised designer (a feedback that I received from time to time), I usually don’t spend so much time on properly naming all the layers. In my opinion, product designers move fast and create large amount screens iterations on day-to-day basis, so it’s pretty pointless to name all the layers. In fact, when I was working for a large design organisations in a tech company, it’s a common sight to see design files with default frame names with large number behind.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/aint-nobody-got-time-for-that.jpg" alt="" width="624" height="346" class="alignnone size-full wp-image-1860" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/aint-nobody-got-time-for-that.jpg 624w, https://www.jay-han.com/wp-content/uploads/2023/02/aint-nobody-got-time-for-that-300x166.jpg 300w" sizes="auto, (max-width: 624px) 100vw, 624px" /></p>
<h3>Make Figma a great design collaboration tool</h3>
<p>Taking a step back, we need to look at this from a wider perspective. I’m particularly intrigued by the image attached to the tweet. It only shows the layer panel with multiple level 1 Groups in it. What’s inside the groups and what it depicts? Are they screens? Are they a group of multiple screens? Or are they even screens? Obviously we wouldn’t know.</p>
<p>Let’s assume that that those are individual screen designs depicting a user flow, then this is a huge problem. As what the Tweeter claims, it will make other collaborators’ life hard. Designers will find it difficult to work with Groups, product managers will find it hard to understand the context of the screen, while engineers will find it hard to inspect and grab design assets.</p>
<p>Personally as a product designer, I believe in providing good UX externally to our customers and internally to the people we work closely with. Here are some of the things that I normally do when working in Figma:</p>
<p><strong>1. Use Frames whenever possible</strong><br />
This is pretty obvious. Every Frame represents a screen and it behaves pretty much like a container in developer tools. Use the constraints and auto layout function as you are creating your design in code. Only use Groups when dealing with illustrations. Figma has a good writeup on <a href="https://www.figma.com/best-practices/groups-versus-frames/">Groups vs Frames</a>, be sure to check it out.</p>
<p><strong>2. Name your screens meaningfully</strong><br />
I will no advocate for naming all the layers meaningfully, but at least it has to be properly named on the screen level. This will really help other to understand the function and the state of the screen. In the near future, I’m thinking to write more on organising Figma files and layers, so stay tuned!</p>
<p><strong>3. Name your layers in your design system components</strong><br />
For reusable components, be it local or global components, it should at least be constructed and named meaningfully so it’s scalable and customisable easily. I have encountered many times when I switch component variant, the overwrites get wiped off just because of poorly organised variants.</p>
<p><strong>4. Don’t nest groups and layers for no reasons</strong><br />
This is my extra take. Sometimes when I was working in some design files from other designers, a simple element in a component, are deeply nested in multiple levels Groups or Frames for no valid reason. Designers should keep the layers clean and lean for easier design handover for engineers to inspect.</p>
<h3>Twitter is interesting</h3>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/nameyourlayersdotcom.jpg" alt="NameYourLayers.com website screenshot" width="1200" height="750" class="alignnone size-full wp-image-1862" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/nameyourlayersdotcom.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/nameyourlayersdotcom-300x188.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/nameyourlayersdotcom-1024x640.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/nameyourlayersdotcom-768x480.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p>Well after all, every designers have their way of organising layers and files and we should just do what works best for the company and people that we are working with. There are no absolute rules, and as long as we are following the best practices we are all good! </p>
<p>It’s also very interesting that designers around the world participated in debating “should you name your layers or not” on Twitter. There’s even a tool coming out soon from the friends from Diagram to help you with naming layers: <a href="https://www.nameyourlayers.com/">https://www.nameyourlayers.com/</a>.</p>
<p>It’s nice to see that we care for our crafts. I have been a long time lurker on DesignerNews which is now pretty much a dead town, and I love to go on Twitter from time to time to check what’s trending in design universe out there.</p>
<p>The post <a href="https://www.jay-han.com/2023/02/19/should-you-name-your-layers/">Should you name your layers?</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2023/02/19/should-you-name-your-layers/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>8 excellent use of gradient in web designs and learn how to create it</title>
		<link>https://www.jay-han.com/2023/02/06/gradient-in-web-design/</link>
					<comments>https://www.jay-han.com/2023/02/06/gradient-in-web-design/#respond</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Mon, 06 Feb 2023 14:40:43 +0000</pubDate>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Web Design]]></category>
		<guid isPermaLink="false">https://www.jay-han.com/?p=1839</guid>

					<description><![CDATA[<p>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... <a class="view-article" href="https://www.jay-han.com/2023/02/06/gradient-in-web-design/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2023/02/06/gradient-in-web-design/">8 excellent use of gradient in web designs and learn how to create it</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/gradient-header.jpg" alt="" width="1200" height="600" class="alignnone size-full wp-image-1842" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/gradient-header.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/gradient-header-300x150.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/gradient-header-1024x512.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/gradient-header-768x384.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>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.</strong></p>
<p>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 <a href="https://stripe.com/">Stripe</a>, and <a href="https://linear.app/">Linear</a> 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.</p>
<h3>8 examples of gradients in web design</h3>
<p>In a few examples below, you can see the fluidic gradient background being the main element of the web design, and can be interacted by flowing around the cursor. This creates the sense of imaginative, dreamy like state like <a href="https://monopo.london/">Monopo London</a>, <a href="https://jellypepper.com/">Jelly Pepper</a>, and <a href="https://jant.fr/">Jantana Hennard</a>. </p>
<p>You also see gradients being applied on the dark-themed website, where it’s an effective way to communicate space and light like: <a href="https://wope.com/">Wope</a>, <a href="https://evervault.com/">Evervault</a> and <a href="https://www.create.video/">create.video</a>. Other examples like <a href="https://sally.doberman.co/">Sally</a> and <a href="https://highnote.com/">Highnote</a>, use gradient to fill up the empty space to create the sense of innovation and future state.</p>
<p><a href="https://monopo.london/"><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/monopo-london.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1847" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/monopo-london.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/monopo-london-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/monopo-london-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/monopo-london-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></a><br />
<small>Monopo London</small></p>
<p><a href="https://jellypepper.com/"><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/jellypepper.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1845" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/jellypepper.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/jellypepper-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/jellypepper-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/jellypepper-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></a><br />
<small>Jelly Pepper</small></p>
<p><a href="https://jant.fr/"><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/jantana.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1844" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/jantana.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/jantana-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/jantana-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/jantana-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></a><br />
<small>Jantana Hennard</small></p>
<p><a href="https://wope.com/"><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/wope.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1849" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/wope.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/wope-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/wope-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/wope-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></a><br />
<small>Wope</small></p>
<p><a href="https://evervault.com/"><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/evervault.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1841" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/evervault.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/evervault-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/evervault-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/evervault-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></a><br />
<small>Evervault</small></p>
<p><a href="https://www.create.video/"><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/create.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1840" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/create.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/create-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/create-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/create-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></a><br />
<small>Create.video</small></p>
<p><a href="https://sally.doberman.co/"><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/sally.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1848" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/sally.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/sally-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/sally-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/sally-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></a><br />
<small>Sally</small></p>
<p><a href="https://highnote.com/"><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/highnote.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1843" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/highnote.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/highnote-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/highnote-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/highnote-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></a><br />
<small>Highnote</small></p>
<p>There are many more examples out there, feel free to head over to my articles here on <a href="https://www.jay-han.com/2023/01/18/web-design-galleries-2023/">web galleries</a> to look for more best examples of gradient application in design.</p>
<h3>Resources and Tutorials</h3>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/02/mesh-gradient.jpg" alt="" width="1200" height="630" class="alignnone size-full wp-image-1846" srcset="https://www.jay-han.com/wp-content/uploads/2023/02/mesh-gradient.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/02/mesh-gradient-300x158.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/02/mesh-gradient-1024x538.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/02/mesh-gradient-768x403.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p>There are many techniques to create the gradient shown above using your favourite design tools like Figma, Photoshop or Illustrator. Here are some of the resources and tutorials you can check to create to achieve the gradient effect above.</p>
<ul>
<li>Figma plugin &#8211; <a href="https://www.figma.com/community/plugin/958202093377483021">Mesh Gradient</a></li>
<li>Figma plugin &#8211; <a href="https://www.figma.com/community/plugin/1174390287006360600/Noisy-Gradients">Noisy Gradient Generator</a></li>
<li>Figma tutorial &#8211; <a href="https://www.instagram.com/p/Cn2CmwnOHtg/">Learn to create “Linear gradients” by FonsMans</a></li>
<li>Figma tutorial &#8211; <a href="https://www.instagram.com/p/CnnZNnLP3iz/">Learn to create dreamy multi-colour gradient by FonsMans</a></li>
<li>Image &#8211; <a href="https://unsplash.com/s/photos/gradient">Gradient images on Unsplash</a></li>
<li>Web generator &#8211; <a href="https://meshgradient.in/">Generate beautiful mesh gradient with MeshGradient.in</a></li>
<li>Framer &#8211; <a href="https://framer.supply/">Copy and paste gradient effect code on Framer Supply</a></li>
</ul>
<p>The post <a href="https://www.jay-han.com/2023/02/06/gradient-in-web-design/">8 excellent use of gradient in web designs and learn how to create it</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2023/02/06/gradient-in-web-design/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Short thoughts on &#8220;How to Win Friends and Influence People&#8221; book</title>
		<link>https://www.jay-han.com/2023/01/24/short-thoughts-on-how-to-win-friends-and-influence-people-book/</link>
					<comments>https://www.jay-han.com/2023/01/24/short-thoughts-on-how-to-win-friends-and-influence-people-book/#respond</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Tue, 24 Jan 2023 06:05:07 +0000</pubDate>
				<category><![CDATA[Book]]></category>
		<guid isPermaLink="false">https://www.jay-han.com/?p=1833</guid>

					<description><![CDATA[<p>When I was browsing for books to read at the end of last year, I often saw many recommended “How to Win Friends and Influence People” by Dale Carnegie. The title arouses my interest and I was really curious and eager to learn if there are any tips that I can learn from. So I... <a class="view-article" href="https://www.jay-han.com/2023/01/24/short-thoughts-on-how-to-win-friends-and-influence-people-book/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2023/01/24/short-thoughts-on-how-to-win-friends-and-influence-people-book/">Short thoughts on &#8220;How to Win Friends and Influence People&#8221; book</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/cover.jpg" alt="Book cover of 'How to Win Friends and Influence People'" width="1200" height="800" class="alignnone size-full wp-image-1834" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/cover.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/cover-300x200.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/cover-1024x683.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/cover-768x512.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>When I was browsing for books to read at the end of last year, I often saw many recommended “How to Win Friends and Influence People” by Dale Carnegie. The title arouses my interest and I was really curious and eager to learn if there are any tips that I can learn from. So I went to a big bookstore while travelling back in hometown in Kuala Lumpur and bought the book.</strong></p>
<p>I bought the pocket size version and the book was really easy to read with many examples and i enjoyed reading it thoroughly. The tips on winning friends and influence people are practical and real. There are two main takeaways that I have from the book.</p>
<h3>Be human</h3>
<p>Before I started reading the book, my expectation is to learn new tips on ways of dealing with friends and co-workers. However, the more I progressed into the book, the tips are more like a reminders for all of us on how to be human. The tips are mainly on how to be nice to people, and how to be a decent, considerate human being.</p>
<p>The tips in the book are simple and can be easily picked up by anyone. Those simple tips make a lot of sense as being a genuine nice human where you care about your close ones, you’ll naturally be able attract people around you. </p>
<h3>Timeless tips</h3>
<p>I read this book without knowing who is the author and what year it was written in. I thought it was published fairly recent because it was a commonly recommended book to read for the year 2023 by many on social media. To my surprise, this book was first published in 1936! This book is more than 80 years old!</p>
<p>Then it got me thinking, because the tips suggested in the book of being a good human to your loved ones or your co-workers are easy to pick up and can be practiced daily, it made the book timeless and now even in the 21st century, it’s still a very relevant book to read.</p>
<p>In my opinion, this is a really good book and I would recommend to pick this up if you haven’t already. Let’s be a good human being and be nice to our friends, co-workers and family, and we will eventually be able to win friends and influence people.</p>
<p>The post <a href="https://www.jay-han.com/2023/01/24/short-thoughts-on-how-to-win-friends-and-influence-people-book/">Short thoughts on &#8220;How to Win Friends and Influence People&#8221; book</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2023/01/24/short-thoughts-on-how-to-win-friends-and-influence-people-book/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>14 inspirational web design galleries for 2023</title>
		<link>https://www.jay-han.com/2023/01/18/web-design-galleries-2023/</link>
					<comments>https://www.jay-han.com/2023/01/18/web-design-galleries-2023/#respond</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Wed, 18 Jan 2023 15:36:43 +0000</pubDate>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Web Design]]></category>
		<guid isPermaLink="false">https://www.jay-han.com/?p=1809</guid>

					<description><![CDATA[<p>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... <a class="view-article" href="https://www.jay-han.com/2023/01/18/web-design-galleries-2023/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2023/01/18/web-design-galleries-2023/">14 inspirational web design galleries for 2023</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/web-gallery-header.jpg" alt="" width="1200" height="800" class="alignnone size-full wp-image-1824" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/web-gallery-header.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/web-gallery-header-300x200.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/web-gallery-header-1024x683.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/web-gallery-header-768x512.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>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.</strong></p>
<p>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!</p>
<h3>Godly.website</h3>
<p><a href="https://godly.website/">Godly</a> has been rising to popularity recently and become one of the go-to websites for web design inspiration, especially for websites that utilise heavy motion design. Creating website with motion and scrolling effects has become easier and more accessible, so it’s refreshing to see how the web design has evolved til today. You can:</p>
<ul>
<li>View examples recorded in videos, effectively showcasing the motion and scrolling effect.</li>
<li>Check information on web technology and typeface used.</li>
<li>Browse by website types and design styles.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/godly.jpg" alt="" width="1200" height="635" class="alignnone size-full wp-image-1816" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/godly.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/godly-300x159.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/godly-1024x542.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/godly-768x406.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Landing Love</h3>
<p><a href="https://www.landing.love/">Landing Love</a> is a cool gallery with a focus on animation websites. There are currently more than 300+ examples, and you will be sure to find some examples that pushes story telling with web animation to the limit. You can:</p>
<ul>
<li>Browse animated websites and some static screenshots</li>
<li>Filter examples with categories</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/landinglove.jpg" alt="" width="1200" height="609" class="alignnone size-full wp-image-1818" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/landinglove.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/landinglove-300x152.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/landinglove-1024x520.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/landinglove-768x390.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Web3inspiration</h3>
<p><a href="https://web3inspiration.com/">Web3Inspiration</a> is a clean gallery to easily browse good landing page design. This gallery works best on a large monitor as the thumbnails are really big. However, the collections are limited and it’s not frequently updated. You can:</p>
<ul>
<li>View full length screenshots.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/web3inspiration.jpg" alt="" width="1200" height="635" class="alignnone size-full wp-image-1825" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/web3inspiration.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/web3inspiration-300x159.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/web3inspiration-1024x542.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/web3inspiration-768x406.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Landing Folio</h3>
<p><a href="https://www.landingfolio.com/">Landing Folio</a> is a growing library of inspiration focusing on landing pages, pricing pages, error pages or more, viewed either on desktop or mobile. However the layout might be a little bit busy, in my opinion, it’s a little bit hard to browse for the designs that I like.</p>
<ul>
<li>View full length screenshots</li>
<li>Browse by industries, page types or colours.</li>
<li>Switch between desktop and mobile view.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/landingfolio.jpg" alt="" width="1200" height="635" class="alignnone size-full wp-image-1817" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/landingfolio.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/landingfolio-300x159.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/landingfolio-1024x542.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/landingfolio-768x406.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>One Page Love</h3>
<p><a href="https://onepagelove.com/inspiration">One Page Love</a> is another destination for landing page inspiration. Browse through good web designs with the masonry style thumbnails, and click into it for full length screenshot.</p>
<ul>
<li>View full length screenshots</li>
<li>Browse by features and categories.</li>
<li>Browse and find what typefaces are being used in the design.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/onepagelove.jpg" alt="" width="1200" height="634" class="alignnone size-full wp-image-1821" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/onepagelove.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/onepagelove-300x159.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/onepagelove-1024x541.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/onepagelove-768x406.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>SAAS Landing Page</h3>
<p><a href="https://saaslandingpage.com/">SAAS Landing Page</a> is a gallery dedicated to Software-as-a-Service landing pages. The thumbnails are neatly arranged in a 3 column view for your quick glance. Clicking on one of the examples, you’ll see the design in full length.</p>
<ul>
<li>View full length screenshots</li>
<li>Filter with page types like landing page, pricing page, FAQ, contact us and more.</li>
<li>Find the dominant colours, typeface and the technology used for the design.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/saaslandingpage.jpg" alt="" width="1200" height="607" class="alignnone size-full wp-image-1823" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/saaslandingpage.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/saaslandingpage-300x152.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/saaslandingpage-1024x518.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/saaslandingpage-768x388.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Mobbin Web</h3>
<p><a href="https://mobbin.com/browse/web/apps">Mobbin</a> is known for the gallery for mobile app screenshots, but recently they also launch gallery for the web app category. In a typical Mobbin fashion, you’ll find many screenshots of web apps categorised in flows. For web app designers, Mobbin is indispensable.</p>
<ul>
<li>Browse by apps, page types, component or UI patterns and flows.</li>
<li>View of the step by step user journey.</li>
<li>Intuitive and powerful search bar for deeper filtering.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/mobbinweb.jpg" alt="" width="1200" height="609" class="alignnone size-full wp-image-1819" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/mobbinweb.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/mobbinweb-300x152.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/mobbinweb-1024x520.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/mobbinweb-768x390.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Refero Design</h3>
<p><a href="https://refero.design/">Refero Design</a> is another gallery similar to Mobbin, with a huge collection of screens consists of marketing pages and post-login screen flows. It has more than 9000 screen examples and currently it’s fully free of charge. It’s matter of time Refero will start to implement paywall in the future.</p>
<ul>
<li>Browse web apps with UX patterns and UI elements.</li>
<li>Powerful search functions for deeper filtering.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/referowebsite.jpg" alt="" width="1200" height="610" class="alignnone size-full wp-image-1822" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/referowebsite.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/referowebsite-300x153.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/referowebsite-1024x521.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/referowebsite-768x390.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>No Code Supply Co &#8211; Inspo</h3>
<p>No-code design tool is on the rise and has gotten really powerful and intuitive. <a href="https://www.nocodesupply.co/inspo">No Code Supply Co</a> is a new website that celebrates cool websites that are done with no-code tools like Framer and Webflow.</p>
<ul>
<li>Browse designs made with no-code tools.</li>
<li>Filter by tags and industries.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/nocodesupplyco.jpg" alt="" width="1200" height="609" class="alignnone size-full wp-image-1820" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/nocodesupplyco.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/nocodesupplyco-300x152.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/nocodesupplyco-1024x520.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/nocodesupplyco-768x390.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Awwwards</h3>
<p>Web designers shouldn’t feel strange to <a href="https://www.awwwards.com/">Awwwards</a>, a long time destination for good website designs. Each day, a site will be featured, and you may browse all the Site-of-the-day websites, and find the design details in it. However the pet peeves I have with Awwwards is the website loads really slow, and navigating the site is a tad hard.</p>
<ul>
<li>View examples and get details like the colours and fonts used.
<li>Browse with Technology, Elements or curated Collections.</li>
</ul>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/awwwards.jpg" alt="" width="1200" height="608" class="alignnone size-full wp-image-1814" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/awwwards.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/awwwards-300x152.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/awwwards-1024x519.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/awwwards-768x389.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Doing Cool Stuff</h3>
<p><a href="https://www.doingcoolstuff.xyz">Doing Cool Stuff</a> showcases the brand and digital product design studios that do cool design stuffs. You may find information about the studio by its size, location and studio type.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/doingcoolstuff.jpg" alt="" width="1200" height="606" class="alignnone size-full wp-image-1815" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/doingcoolstuff.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/doingcoolstuff-300x152.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/doingcoolstuff-1024x517.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/doingcoolstuff-768x388.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Dark Mode Design</h3>
<p>As the name suggests, <a href="https://www.darkmodedesign.com/">Dark Mode Design</a> showcases best web designs that are dark themed, or supports dark mode. The gallery was rather simple and without any category filter. Just scroll and get inspired!</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/darkmodedesign.jpg" alt="" width="1200" height="610" class="alignnone size-full wp-image-1831" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/darkmodedesign.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/darkmodedesign-300x153.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/darkmodedesign-1024x521.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/darkmodedesign-768x390.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Framer Gallery</h3>
<p>Lastly, let’s take a look into <a href="https://www.framer.com/gallery/">Framer Gallery</a>, a dedicated inspirational page for web designs made with Framer! Framer quickly rising to the stardom for being an enjoyable tool for making responsive web designs. If you’re eager to know more about what Framer can do, why not head to their gallery to take a look?</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/framergallery.jpg" alt="" width="1200" height="609" class="alignnone size-full wp-image-1827" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/framergallery.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/framergallery-300x152.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/framergallery-1024x520.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/framergallery-768x390.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<h3>Killer Portfolios</h3>
<p>As exactly what the title of the website suggests, <a href="https://killerportfolio.com/">Killer Portfolios</a> showcases some of the top quality portfolio websites around the world. Not only that, it also analyses the key design details that make the portfolio stands out.</p>
<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2023/01/killer-portfolios.jpg" alt="" width="1200" height="608" class="alignnone size-full wp-image-1837" srcset="https://www.jay-han.com/wp-content/uploads/2023/01/killer-portfolios.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2023/01/killer-portfolios-300x152.jpg 300w, https://www.jay-han.com/wp-content/uploads/2023/01/killer-portfolios-1024x519.jpg 1024w, https://www.jay-han.com/wp-content/uploads/2023/01/killer-portfolios-768x389.jpg 768w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p>The post <a href="https://www.jay-han.com/2023/01/18/web-design-galleries-2023/">14 inspirational web design galleries for 2023</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2023/01/18/web-design-galleries-2023/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>A lot has happened in this 6 years</title>
		<link>https://www.jay-han.com/2021/12/04/a-lot-has-happened-in-this-6-years/</link>
					<comments>https://www.jay-han.com/2021/12/04/a-lot-has-happened-in-this-6-years/#respond</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Sat, 04 Dec 2021 09:30:58 +0000</pubDate>
				<category><![CDATA[General]]></category>
		<guid isPermaLink="false">https://www.jay-han.com/?p=1802</guid>

					<description><![CDATA[<p>Minna-san, ohisashiburi desu. It&#8217;s been a while since I last wrote my article. 6 years ago I was 30 years old, I made many big change and decisions to y life including buying my own car, trying to start a new company and then the biggest change is to move to Singapore at the end... <a class="view-article" href="https://www.jay-han.com/2021/12/04/a-lot-has-happened-in-this-6-years/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2021/12/04/a-lot-has-happened-in-this-6-years/">A lot has happened in this 6 years</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="https://www.jay-han.com/wp-content/uploads/2021/12/junhan-in-singapore.jpg" alt="" width="1200" height="800" class="alignnone size-full wp-image-1803" srcset="https://www.jay-han.com/wp-content/uploads/2021/12/junhan-in-singapore.jpg 1200w, https://www.jay-han.com/wp-content/uploads/2021/12/junhan-in-singapore-300x200.jpg 300w, https://www.jay-han.com/wp-content/uploads/2021/12/junhan-in-singapore-768x512.jpg 768w, https://www.jay-han.com/wp-content/uploads/2021/12/junhan-in-singapore-1024x683.jpg 1024w" sizes="auto, (max-width: 1200px) 100vw, 1200px" /></p>
<p><strong>Minna-san, ohisashiburi desu. It&#8217;s been a while since I last wrote my article. 6 years ago I was 30 years old, I made many big change and decisions to y life including buying my own car, trying to start a new company and then the biggest change is to move to Singapore at the end of 2015. Moving to Singapore opened a new chapter in my life, I&#8217;m constantly learning and gaining new experience. Hence the interest in writing has been slowly fading out.</strong></p>
<p>During this 6 years, I continue working as a designer, but for financial institution. Singapore is one of the top financial and tech hub in Southeast Asia, I felt the tremendous opportunity to learn and to grow myself as a designer. I also started to be more active outdoor by having weekly runs and cyclings. I have ran several marathons including one in Osaka in 2018.</p>
<p>Moving to Singapore alone wasn&#8217;t easy, and I&#8217;m lucky to have caring friends and colleagues that help me and cheer me along the way. I appreciate all the new experiences and opportunities i gained in Singapore.</p>
<p>I&#8217;m thinking to restart my writing journey again and to share my discoveries, thoughts, and experiences gained, and hope to connect with like minded people like you again.  </p>
<p>The post <a href="https://www.jay-han.com/2021/12/04/a-lot-has-happened-in-this-6-years/">A lot has happened in this 6 years</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2021/12/04/a-lot-has-happened-in-this-6-years/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>8 Product Hunt-ish web design community that worth visiting</title>
		<link>https://www.jay-han.com/2015/07/08/8-product-hunt-web-design-community/</link>
					<comments>https://www.jay-han.com/2015/07/08/8-product-hunt-web-design-community/#comments</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Wed, 08 Jul 2015 15:02:23 +0000</pubDate>
				<category><![CDATA[Web Design]]></category>
		<guid isPermaLink="false">http://www.jay-han.com/?p=1749</guid>

					<description><![CDATA[<p>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&#8217;s popularity, many Product Hunt-ish websites are born, cater to different subjects and theme. We call this “Product... <a class="view-article" href="https://www.jay-han.com/2015/07/08/8-product-hunt-web-design-community/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2015/07/08/8-product-hunt-web-design-community/">8 Product Hunt-ish web design community that worth visiting</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/product-hunt-for-web-design.png" alt="Product Hunt for Web Design" width="1100" height="420" class="alignnone size-full wp-image-1754" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/product-hunt-for-web-design.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/product-hunt-for-web-design-300x115.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/product-hunt-for-web-design-1024x391.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></p>
<p><strong><a href="http://www.producthunt.com/">Product Hunt</a> 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&#8217;s popularity, many Product Hunt-ish websites are born, cater to different subjects and theme. We call this “<a href="http://www.producthunt.com/@kwdinc/collections/product-hunt-for-x">Product Hunt for X</a>”.</strong></p>
<p>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.</p>
<h3><a href="http://designernews.co/">Designer News</a></h3>
<p><a href="http://designernews.co/">Designer News</a> is my go-to-source for community uploaded design news. Now entering version 2.0, it has a more prominent upvote button. You can share link, ask questions and occasionally having Reddit-like AMA session allowing more community based interaction.</p>
<p><a href="http://designernews.co/"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/designernews.png" alt="Designer News" width="1100" height="700" class="alignnone size-full wp-image-1751" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/designernews.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/designernews-300x191.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/designernews-1024x652.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></a></p>
<h3><a href="http://www.webdesignernews.com/">Web Designer News</a></h3>
<p><a href="http://www.webdesignernews.com/">WebdesignerNews.com</a> provides web designers and developers with a single location to discover the latest and most significant stories on the Web.</p>
<p><a href="http://www.webdesignernews.com/"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/webdesignernews.png" alt="Web Designer News" width="1100" height="700" class="alignnone size-full wp-image-1758" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/webdesignernews.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/webdesignernews-300x191.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/webdesignernews-1024x652.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></a></p>
<h3><a href="http://frontendfront.com/">Front-end Front</a></h3>
<p><a href="http://frontendfront.com/">Front-end Front</a> is a place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community. This site was built by two brothers: <a href="http://twitter.com/stelian">Stelian</a> and <a href="http://twitter.com/sergiufirez">Sergiu Firez</a>.</p>
<p><a href="http://frontendfront.com/"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/frontendfront.png" alt="Front-end Front" width="1100" height="700" class="alignnone size-full wp-image-1752" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/frontendfront.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/frontendfront-300x191.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/frontendfront-1024x652.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></a></p>
<h3><a href="http://researchers.io/">Researches.IO</a></h3>
<p>Unlike many other, <a href="http://researchers.io/">Researches.IO</a> community post has a more focus on User Experience Design related articles. According to them, It’s the hub for everything user &#038; customer experience research.</p>
<p><a href="http://researchers.io/"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/researches-io.png" alt="Researches.IO" width="1100" height="700" class="alignnone size-full wp-image-1755" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/researches-io.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/researches-io-300x191.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/researches-io-1024x652.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></a></p>
<h3><a href="http://www.frontends.org/">Frontends</a></h3>
<p><a href="http://www.frontends.org/">Frontends</a> is another example, however it looks like it’s not very active at the moment.</p>
<p><a href="http://www.frontends.org/"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/frontends.png" alt="Frontends" width="1100" height="700" class="alignnone size-full wp-image-1753" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/frontends.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/frontends-300x191.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/frontends-1024x652.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></a></p>
<h3><a href="http://tutorialhunt.meteor.com/">Tutorial Hunt</a></h3>
<p>It can be quite frustrating when searching for good tutorials on particular web development and design topics but not with <a href="http://tutorialhunt.meteor.com/">Tutorial Hunt</a>, where you can find the best free tutorials of specific topic of your choice at one place.</p>
<p><a href="http://tutorialhunt.meteor.com/"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/tutotial-hunt.png" alt="Tutorial Hunt" width="1100" height="700" class="alignnone size-full wp-image-1757" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/tutotial-hunt.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/tutotial-hunt-300x191.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/tutotial-hunt-1024x652.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></a></p>
<h3><a href="http://alwayslearning.io/">Always Learning</a></h3>
<p>Similar to Tutorial Hunt, <a href="http://alwayslearning.io/">Always Learning</a> is also a good resources to look for best destination to learn a particular topic.</p>
<p><a href="http://alwayslearning.io/"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/always-learning.png" alt="Always Learning" width="1100" height="700" class="alignnone size-full wp-image-1750" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/always-learning.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/always-learning-300x191.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/always-learning-1024x652.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></a></p>
<h3><a href="http://shaped.io/">Shaped.IO</a></h3>
<p><a href="http://shaped.io/">Shaped.IO</a> is a friendly community of people interested in all aspects of experience design. We share and discuss the interesting things we come across. Whether you call it UX, CX, UI, IxD, strategy or just Design, it is all about creating great digital experiences.</p>
<p><a href="http://shaped.io/"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/shape-io.png" alt="Shape.IO" width="1100" height="700" class="alignnone size-full wp-image-1756" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/shape-io.png 1100w, https://www.jay-han.com/wp-content/uploads/2015/07/shape-io-300x191.png 300w, https://www.jay-han.com/wp-content/uploads/2015/07/shape-io-1024x652.png 1024w" sizes="auto, (max-width: 1100px) 100vw, 1100px" /></a></p>
<h3>You can build one!</h3>
<p>Community powered websites are really useful because you can filter through sea of articles easily and read the one that get many votes. Besides that, you can also participate by submitting links and also upvote links that you find it useful.</p>
<p>Actually, you can create one similar community website for yourself easily. The key is to use <a href="http://www.telescopeapp.org/">Telescope</a>, an open source social news app that was built with Meteor. It completes with member registration, upvote, social sharing, commenting system and much more. Why not using Telescope to build your own &#8220;Product Hunt for X” community?</p>
<p>The post <a href="https://www.jay-han.com/2015/07/08/8-product-hunt-web-design-community/">8 Product Hunt-ish web design community that worth visiting</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2015/07/08/8-product-hunt-web-design-community/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Find the best similar fonts with Font Matcherator</title>
		<link>https://www.jay-han.com/2015/07/03/find-font-matcherator/</link>
					<comments>https://www.jay-han.com/2015/07/03/find-font-matcherator/#respond</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Fri, 03 Jul 2015 04:59:22 +0000</pubDate>
				<category><![CDATA[Typography]]></category>
		<guid isPermaLink="false">http://www.jay-han.com/?p=1738</guid>

					<description><![CDATA[<p>When comes to finding the font name of the font that we came across on designs or images, usually What The Font by MyFonts would be the best tool to use. And now we have another new tool that can do similar thing, and that is the Font Matcherator from FontSpring. The function is pretty... <a class="view-article" href="https://www.jay-han.com/2015/07/03/find-font-matcherator/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2015/07/03/find-font-matcherator/">Find the best similar fonts with Font Matcherator</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/font-matcherator.png" alt="Font Matcherator" width="550" height="210" class="alignnone size-full wp-image-1739" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/font-matcherator.png 550w, https://www.jay-han.com/wp-content/uploads/2015/07/font-matcherator-300x115.png 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /></p>
<p><strong>When comes to finding the font name of the font that we came across on designs or images, usually <a href="https://www.myfonts.com/WhatTheFont/">What The Font</a> by MyFonts would be the best tool to use. And now we have another new tool that can do similar thing, and that is the <a href="http://www.fontspring.com/matcherator">Font Matcherator</a> from FontSpring.</strong></p>
<p>The function is pretty much similar: you upload an image with the font you want to find out, then Font Matcherator will do their best to find the fonts from their font database that have the closest match to the font.</p>
<h3>Testing the tool</h3>
<div id="attachment_1740" style="width: 560px" class="wp-caption alignnone"><img loading="lazy" decoding="async" aria-describedby="caption-attachment-1740" src="//www.jay-han.com/wp-content/uploads/2015/07/quote.jpg" alt="We will be using this inspirational quote as test." width="550" height="543" class="size-full wp-image-1740" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/quote.jpg 550w, https://www.jay-han.com/wp-content/uploads/2015/07/quote-300x296.jpg 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /><p id="caption-attachment-1740" class="wp-caption-text">We will be using this inspirational quote as test.</p></div>
<p>To get the best results, you have to upload images with big size text and have clear edges around the characters. Here I uploaded an inspiring quote image shown above. Notice that the text was overlayed on top of a photo, but the font edges are still crisp, allowing Font Matcherator to easily identifies the shape of each characters and thus finds the best match.</p>
<h3>Test Result</h3>
<p>Below is the top result produced, and the tool made a pretty good guess. The top result font looks really similar to the one in the picture. Of course the fonts suggested are premium fonts from FontSpring and you can buy the fonts if you want! Each results has its own unique link that you can refer to at later time. Click here to see the <a href="http://www.fontspring.com/matcherator?matcherator_img=3372628c0aefcc8f20c0daeab552353f">result page</a> of this test.</p>
<p><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/07/result.png" alt="Search Result" width="550" height="350" class="size-full wp-image-1741" srcset="https://www.jay-han.com/wp-content/uploads/2015/07/result.png 550w, https://www.jay-han.com/wp-content/uploads/2015/07/result-300x191.png 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /></p>
<p>As a conclusion, <a href="http://www.fontspring.com/matcherator">Font Matcherator</a> can be a good alternative to What The Font when comes to font identification and I hope that you will find it useful to you some day!</p>
<p>The post <a href="https://www.jay-han.com/2015/07/03/find-font-matcherator/">Find the best similar fonts with Font Matcherator</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2015/07/03/find-font-matcherator/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Beautiful Monogram Logo Designs</title>
		<link>https://www.jay-han.com/2015/06/29/beautiful-monogram-logo-designs/</link>
					<comments>https://www.jay-han.com/2015/06/29/beautiful-monogram-logo-designs/#comments</comments>
		
		<dc:creator><![CDATA[Jayhan Sim]]></dc:creator>
		<pubDate>Mon, 29 Jun 2015 04:44:32 +0000</pubDate>
				<category><![CDATA[Art & Design]]></category>
		<guid isPermaLink="false">http://www.jay-han.com/?p=1728</guid>

					<description><![CDATA[<p>When launching a brand you need to make sure that you make your mark with the logo that you choose. It says a lot about the message that you are trying to get across and it’s quite common for people to use monogramed logos to make things look more personal. They aren’t exactly modern they... <a class="view-article" href="https://www.jay-han.com/2015/06/29/beautiful-monogram-logo-designs/">View Article</a></p>
<p>The post <a href="https://www.jay-han.com/2015/06/29/beautiful-monogram-logo-designs/">Beautiful Monogram Logo Designs</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/06/header.jpg" alt="monogram" width="550" height="210" class="alignnone size-full wp-image-1730" srcset="https://www.jay-han.com/wp-content/uploads/2015/06/header.jpg 550w, https://www.jay-han.com/wp-content/uploads/2015/06/header-300x115.jpg 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /></p>
<p><strong>When launching a brand you need to make sure that you make your <a href="http://www.jay-han.com/2011/01/04/pick-the-right-font-for-your-logotype-with-wordmark-it/" title="Pick the right font for your logotype with Wordmark.it">mark with the logo</a> that you choose. It says a lot about the message that you are trying to get across and it’s quite common for people to use <a href="https://en.wikipedia.org/wiki/Monogram" target="_blank">monogramed</a> logos to make things look more personal.</strong></p>
<p>They aren’t exactly modern they have been about since ancient Greece, but they really started to become popular in the late 19th century. They don’t need to be a person’s initials which is what some people think, they could be any letters (usually 2) that will create an acronym that you will remember.</p>
<p>They were used initially by companies in the fashion industry, as it created the persona of an exclusive club or even a luxury brand, and they have now evolved to be used by companies in any industry.</p>
<p>Look at pgbingo for instant which is actually an acronym for Pay Great Bingo:</p>
<p><a href="http://www.pgbingo.com/" target="_blank"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/06/pgbingo.png" alt="PGBingo" width="550" height="210" class="alignnone size-full wp-image-1732" srcset="https://www.jay-han.com/wp-content/uploads/2015/06/pgbingo.png 550w, https://www.jay-han.com/wp-content/uploads/2015/06/pgbingo-300x115.png 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /></a></p>
<p>This logo is definitely one that will grab attention with its bright colours that contrast one another well and the use of stars and a funky looking bingo ball.<br />
Here’s one from the fashion industry which as mentioned where they were originally so popular.   Louis Vuitton:</p>
<p><a href="http://www.harpersbazaar.com/fashion/photography/g5031/louis-vuitton-1014/" rel="nofollow" target="_blank"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/06/louis-vuitton.png" alt="Louis Vuitton" width="550" height="210" class="alignnone size-full wp-image-1731" srcset="https://www.jay-han.com/wp-content/uploads/2015/06/louis-vuitton.png 550w, https://www.jay-han.com/wp-content/uploads/2015/06/louis-vuitton-300x115.png 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /></a></p>
<p>As soon as you look at this logo – you can tell straight away that it will suit people with expensive taste.  It’s elegant, sleek and classic and is perfectly in-keeping with the brand itself.  You can find Louis Vuitton wherever you go and on all of their products you will find this logo, including those signature handbags that everyone raves about.</p>
<p>Then there is Calvin Klein!  As well as boxer shorts, t-shirts and bags – you will find aftershave and perfume all with this logo on there:</p>
<p><a href="http://famouslogos.net/calvin-klein-logo/" rel="nofollow" target="_blank"><img loading="lazy" decoding="async" src="//www.jay-han.com/wp-content/uploads/2015/06/calvin-klein.png" alt="Calvin Klein" width="550" height="210" class="alignnone size-full wp-image-1729" srcset="https://www.jay-han.com/wp-content/uploads/2015/06/calvin-klein.png 550w, https://www.jay-han.com/wp-content/uploads/2015/06/calvin-klein-300x115.png 300w" sizes="auto, (max-width: 550px) 100vw, 550px" /></a></p>
<p>Again it is a classic design as there is no need for anything too fancy for what they are going for – all it is to be sophisticated.  Calvin Klein are one of the most recognised brands in the world and it is definitely in part to this fantastic monogram logo.</p>
<p>There we have it folks, there are 3 logo’s that are very much respected within their own industry. Of course you have heard of Louis Vuitton and Calvin Klein, unless you are a bingo fan you may not have hear of pgbingo but they are one of the best portals for finding out all of the best free bingo deals around. </p>
<p>If you want to see more good examples of monogram design, why not head over to Hong Kiat&#8217;s blog and check out his article on <a href="http://www.hongkiat.com/blog/classy-monogram-logos/" rel="nofollow">&#8220;40 classy uses of monogram logos&#8221;</a>.</p>
<p>The post <a href="https://www.jay-han.com/2015/06/29/beautiful-monogram-logo-designs/">Beautiful Monogram Logo Designs</a> appeared first on <a href="https://www.jay-han.com">Jayhan Loves Design &amp; Japan</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.jay-han.com/2015/06/29/beautiful-monogram-logo-designs/feed/</wfw:commentRss>
			<slash:comments>8</slash:comments>
		
		
			</item>
	</channel>
</rss>
