<?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>Bento Graphics &#8211; Branding, Graphic Design &amp; Web Design Studio in Tokyo</title>
	<atom:link href="https://bentographics.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://bentographics.com/</link>
	<description>Bento Graphics is a Tokyo-based design studio crafting compelling experiences from fine branding, illustration, UI/UX design &#38; web development.</description>
	<lastBuildDate>Thu, 01 Jan 2026 02:43:01 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>2026: The Year of the Horse (and Questionable Food Handling)</title>
		<link>https://bentographics.com/blog/2026-year-of-the-horse/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Thu, 01 Jan 2026 01:03:38 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=21342</guid>

					<description><![CDATA[<p>2026 The Year of the Horse:<br />
To everyone who's put up with us: We promise to only play with our own food this year. Wishing you a perfectly decent year ahead.</p>
<p>The post <a href="https://bentographics.com/blog/2026-year-of-the-horse/">2026: The Year of the Horse (and Questionable Food Handling)</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!-- Added by Post/Page specific custom CSS plugin, thank you for using! -->
<style>.single .wide .entry .horse_2026 {
/* 	background-color: #efefef; */
	margin-bottom: 30px;
	margin-left: -6%;
 	width: 112%;
/* 	padding: 40px 56px; */
}
.single .wide .entry .horse_2026 p{
	text-align: center;
	font-size: 16px;
}


.single .wide .entry .horse_2026 img,
.single .wide .entry .horse_2026 video {
	display: block;
	width: calc(100% + 12%);
	max-width: calc(100% + 12%);
	height: auto;
}    
	
@media only screen and (max-width: 767px) {
	
	.single .wide .entry .horse_2026 img,
	.single .wide .entry .horse_2026 video {
		margin-left: -6% !important;
		max-width: 600px;
	}
	
}

@media only screen and (min-width: 768px) {
	
	.single .wide .entry .horse_2026 {
		margin: 0 auto 30px auto !important;
		margin-left: 0%;
		width: 100%;
	}
	
	.single .wide .entry .horse_2026 img,
	.single .wide .entry .horse_2026 video {
		max-width: 700px;
    margin: 0 auto;
		padding: 0;
    
	}
}</style>
<div class="horse_2026">
<video width="500" height="500" autoplay="true" muted="true" playsinline autoplay loop muted controlsList="nodownload" oncontextmenu="return false;"><source src="https://bentographics.com/wp-content/uploads/2026/01/sushi_derby_web_2.5mb.mp4" type="video/mp4"></video>
</div>
<p>Welcome to 2026, the year of the horse! Whoever said &#8220;don&#8217;t play with your food&#8221; clearly had more self-control than we do. </p>
<p>May the new year bring you ideas worth racing, deadlines that know when to finish, and victories that taste rather good (even if they&#8217;re gone in a bite).</p>
<p>To our friends, collaborators, clients and everyone who&#8217;s put up with us:<br />
We promise to only play with our own food this year.</p>
<p>Wishing you a perfectly decent year ahead.</p>
<p style="text-align: center;">今年も宜しくおねがいします！</p>
<div style="text-align: center;">
<p style="font-family: monospace; display: inline-block; letter-spacing: 0.32em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;"><span style="letter-spacing: 0.33em;">二〇二六</span> <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f434.png" alt="🐴" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
アケオメ <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f64c.png" alt="🙌" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
</div>
<p>The post <a href="https://bentographics.com/blog/2026-year-of-the-horse/">2026: The Year of the Horse (and Questionable Food Handling)</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></content:encoded>
					
		
		<enclosure url="https://bentographics.com/wp-content/uploads/2026/01/sushi_derby_web_2.5mb.mp4" length="2163083" type="video/mp4" />

			</item>
		<item>
		<title>Next Level Japan</title>
		<link>https://bentographics.com/work/next-level-japan/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Wed, 02 Jul 2025 03:21:01 +0000</pubDate>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[ID]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[Art Direction]]></category>
		<category><![CDATA[Bilingual Website Setup]]></category>
		<category><![CDATA[Branding]]></category>
		<category><![CDATA[Corporate Identity Design Development & Logo]]></category>
		<category><![CDATA[Creative Direction & Ideas]]></category>
		<category><![CDATA[Cross Browser Testing]]></category>
		<category><![CDATA[Elementor Website Builder]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Illustration and Icon Design]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Mobile Device Testing]]></category>
		<category><![CDATA[Mobile First Approach]]></category>
		<category><![CDATA[Multilingual Typography Guideline]]></category>
		<category><![CDATA[Multilingual Website Setup]]></category>
		<category><![CDATA[Performance Optimization]]></category>
		<category><![CDATA[Project Management]]></category>
		<category><![CDATA[QA (Quality Assurance)]]></category>
		<category><![CDATA[Responsive Web Design]]></category>
		<category><![CDATA[SEO Optimization]]></category>
		<category><![CDATA[Style Guide Manual]]></category>
		<category><![CDATA[UI (User Interface Design)]]></category>
		<category><![CDATA[UX (User Experience Design)]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wireframe Design]]></category>
		<category><![CDATA[Wordpress Implementation]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=20654</guid>

					<description><![CDATA[<p>Branding refresh and SEO-optimized bilingual website for Next Level Japan, a sustainability-focused marketing agency based in Tokyo.</p>
<p>The post <a href="https://bentographics.com/work/next-level-japan/">Next Level Japan</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></description>
										<content:encoded><![CDATA[<img decoding="async" fetchpriority="high" width="2400" height="1260" class="alignnone size-full wp-image-21309" src="https://bentographics.com/wp-content/uploads/2025/05/cover_next-level-japan_branding_UI_UX_design_web_development-1.jpg" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/cover_next-level-japan_branding_UI_UX_design_web_development-1.jpg 2400w, https://bentographics.com/wp-content/uploads/2025/05/cover_next-level-japan_branding_UI_UX_design_web_development-1-580x305.jpg 580w, https://bentographics.com/wp-content/uploads/2025/05/cover_next-level-japan_branding_UI_UX_design_web_development-1-1280x672.jpg 1280w, https://bentographics.com/wp-content/uploads/2025/05/cover_next-level-japan_branding_UI_UX_design_web_development-1-1536x806.jpg 1536w, https://bentographics.com/wp-content/uploads/2025/05/cover_next-level-japan_branding_UI_UX_design_web_development-1-2048x1075.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<p>Branding refresh and SEO-optimized bilingual website for Next Level Japan, a sustainability-focused marketing agency based in Tokyo.</p>
<h2>Overview</h2>
<p>Next Level Global is a sales development and digital marketing agency based in Tokyo. They approached us with the vision to modernize and streamline their brand presence to better reflect their mission of supporting sustainability, and responsible business practices. Their existing visual identity had become saturated and inconsistent, prompting a full-scale brand refresh and website relaunch.</p>
<h2>Goals</h2>
<p>During the requirement gathering phase a few key priorities emerged:</p>
<ul data-spread="false">
<li>Streamline and simplify the visual identity</li>
<li>Unify brand language across digital touchpoints</li>
<li>Enhance clarity and focus in the communication of services</li>
<li>Improve SEO and accessibility</li>
<li>Introduce a dynamic News Feed on the website</li>
<li>Ensure mobile-first, performant user experience</li>
</ul>
<h3>Brand Refresh</h3>
<p>We first led a redesign of the brand’s visual identity, starting with:</p>
<ul data-spread="false">
<li>Logo refinement and adding flexible, responsive versions</li>
<li>A pared-back semi &#8220;Dark Mode&#8221; color palette, moving from multi-color saturation to a focused visual tone with an electric Lime green brand color</li>
<li>New typographic system that emphasizes clarity and professionalism</li>
<li>Custom visual motifs like the “Double Disk” and “Energy Circle” to reflect the brand&#8217;s emphasis on balance and sustainability</li>
<li>A comprehensive brand style guide covering logos, colors, typography, visual assets, and UI tokens</li>
</ul>
<p>This phase was executed collaboratively through multiple client checkpoints and concluded with delivery of production-ready brand assets.</p>
<h3>Website Redesign &amp; Development</h3>
<p>Following the brand refinement, the focus shifted to the website, where we provided:</p>
<ul data-spread="false">
<li>UI/UX design in Figma: a clean, minimal layouts with some highlight colors that reflect the brand&#8217;s clarity and values</li>
<li>Responsive frontend development using WordPress with Elementor Pro</li>
<li>SEO-optimized structure with improved page speed, semantics, and CMS flexibility</li>
<li>A dynamic &#8220;Insights&#8221; news feed for updates and thought leadership, alongside with &#8220;Micro News&#8221; which are short form news snippets</li>
<li>Localization-ready setup for Japanese and English audiences</li>
</ul>
<h3>Outcome</h3>
<p>The result is a reenergized brand and digital platform that positions Next Level Global as a focused, values-driven organization in the field of sales development and digital marketing. The new design authentically expresses their commitment to clarity, sustainability, and purposeful transformation for a global and Japan-based audience.</p>
<hr />
<h2>Branding &amp; Corporate Identity Development</h2>
<img decoding="async" width="1920" height="1325" class="alignnone size-full wp-image-21246" src="https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding-visual-corporate-identity-design.png" alt="Next Level Japan - Branding, Visual Identity, Corporate Identity, Logo Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding-visual-corporate-identity-design.png 1920w, https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding-visual-corporate-identity-design-580x400.png 580w, https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding-visual-corporate-identity-design-1280x883.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding-visual-corporate-identity-design-1536x1060.png 1536w" sizes="(max-width: 1920px) 100vw, 1920px" />
<img decoding="async" width="1920" height="1325" class="alignnone size-full wp-image-21249" src="https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding-visual-corporate-identity-design.png" alt="Next Level Japan - Branding, Visual Identity, Corporate Identity, Logo Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding-visual-corporate-identity-design.png 1920w, https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding-visual-corporate-identity-design-580x400.png 580w, https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding-visual-corporate-identity-design-1280x883.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding-visual-corporate-identity-design-1536x1060.png 1536w" sizes="(max-width: 1920px) 100vw, 1920px" />
<img decoding="async" width="1920" height="1325" class="alignnone size-full wp-image-21250" src="https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding-visual-corporate-identity-design.png" alt="Next Level Japan - Branding, Visual Identity, Corporate Identity, Logo Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding-visual-corporate-identity-design.png 1920w, https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding-visual-corporate-identity-design-580x400.png 580w, https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding-visual-corporate-identity-design-1280x883.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding-visual-corporate-identity-design-1536x1060.png 1536w" sizes="(max-width: 1920px) 100vw, 1920px" />
<img decoding="async" width="2880" height="1988" class="alignnone size-full wp-image-21247" src="https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding-visual-corporate-identity-design.png" alt="Next Level Japan - Branding, Visual Identity, Corporate Identity, Logo Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding-visual-corporate-identity-design.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding-visual-corporate-identity-design-580x400.png 580w, https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding-visual-corporate-identity-design-1280x884.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding-visual-corporate-identity-design-1536x1060.png 1536w, https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding-visual-corporate-identity-design-2048x1414.png 2048w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" width="1920" height="1555" class="alignnone size-full wp-image-21248" src="https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding-visual-corporate-identity-design.png" alt="Next Level Japan - Branding, Visual Identity, Corporate Identity, Logo Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding-visual-corporate-identity-design.png 1920w, https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding-visual-corporate-identity-design-580x470.png 580w, https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding-visual-corporate-identity-design-1280x1037.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding-visual-corporate-identity-design-1536x1244.png 1536w" sizes="(max-width: 1920px) 100vw, 1920px" />
<img decoding="async" width="2656" height="1415" class="alignnone size-full wp-image-21252" src="https://bentographics.com/wp-content/uploads/2025/05/4_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg" alt="Next Level Japan - Branding, Visual Identity, Corporate Identity, Logo Development, Design Guideline, Style Guide" srcset="https://bentographics.com/wp-content/uploads/2025/05/4_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg 2656w, https://bentographics.com/wp-content/uploads/2025/05/4_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-580x309.jpg 580w, https://bentographics.com/wp-content/uploads/2025/05/4_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1280x682.jpg 1280w, https://bentographics.com/wp-content/uploads/2025/05/4_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1536x818.jpg 1536w, https://bentographics.com/wp-content/uploads/2025/05/4_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-2048x1091.jpg 2048w" sizes="(max-width: 2656px) 100vw, 2656px" />
<figure id="attachment_21256" class="wp-caption alignnone" ><img decoding="async" class="wp-image-21256 size-full" src="https://bentographics.com/wp-content/uploads/2025/05/6_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" width="2400" height="1600" srcset="https://bentographics.com/wp-content/uploads/2025/05/6_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg 2880w, https://bentographics.com/wp-content/uploads/2025/05/6_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2025/05/6_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2025/05/6_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1536x1024.jpg 1536w, https://bentographics.com/wp-content/uploads/2025/05/6_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-2048x1365.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>Poster sample application of the new Next Level branding.</figcaption></figure>
<figure id="attachment_21251" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-21251 size-full" src="https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding-visual-corporate-identity-design-style-gulde.png" alt="Next Level Japan - Branding, Visual Identity, Corporate Identity, Logo Development" width="2400" height="3055" srcset="https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding-visual-corporate-identity-design-style-gulde.png 2400w, https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding-visual-corporate-identity-design-style-gulde-580x738.png 580w, https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding-visual-corporate-identity-design-style-gulde-1280x1629.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding-visual-corporate-identity-design-style-gulde-1207x1536.png 1207w, https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding-visual-corporate-identity-design-style-gulde-1609x2048.png 1609w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>UI design style guide and typographic scale.</figcaption></figure>
<h2>UI/UX Design &amp; Web Development</h2>
<img decoding="async" width="2400" height="1260" class="alignnone size-full wp-image-21300" src="https://bentographics.com/wp-content/uploads/2025/05/10_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/10_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg 2400w, https://bentographics.com/wp-content/uploads/2025/05/10_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-580x305.jpg 580w, https://bentographics.com/wp-content/uploads/2025/05/10_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1280x672.jpg 1280w, https://bentographics.com/wp-content/uploads/2025/05/10_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1536x806.jpg 1536w, https://bentographics.com/wp-content/uploads/2025/05/10_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-2048x1075.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<img decoding="async" width="2880" height="3102" class="alignnone size-full wp-image-21263" src="https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding_UI_UX_design_web_development.png" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding_UI_UX_design_web_development.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding_UI_UX_design_web_development-580x625.png 580w, https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding_UI_UX_design_web_development-1280x1379.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding_UI_UX_design_web_development-1426x1536.png 1426w, https://bentographics.com/wp-content/uploads/2025/05/1_next-level-japan_branding_UI_UX_design_web_development-1901x2048.png 1901w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" width="2880" height="4707" class="alignnone size-full wp-image-21264" src="https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding_UI_UX_design_web_development.png" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding_UI_UX_design_web_development.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding_UI_UX_design_web_development-580x948.png 580w, https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding_UI_UX_design_web_development-1280x2092.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding_UI_UX_design_web_development-940x1536.png 940w, https://bentographics.com/wp-content/uploads/2025/05/2_next-level-japan_branding_UI_UX_design_web_development-1253x2048.png 1253w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" width="2880" height="1955" class="alignnone size-full wp-image-21265" src="https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding_UI_UX_design_web_development.png" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding_UI_UX_design_web_development.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding_UI_UX_design_web_development-580x394.png 580w, https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding_UI_UX_design_web_development-1280x869.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding_UI_UX_design_web_development-1536x1043.png 1536w, https://bentographics.com/wp-content/uploads/2025/05/3_next-level-japan_branding_UI_UX_design_web_development-2048x1390.png 2048w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" width="2400" height="1600" class="alignnone size-full wp-image-21274" src="https://bentographics.com/wp-content/uploads/2025/05/5_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/5_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg 2400w, https://bentographics.com/wp-content/uploads/2025/05/5_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2025/05/5_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2025/05/5_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1536x1024.jpg 1536w, https://bentographics.com/wp-content/uploads/2025/05/5_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-2048x1365.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<img decoding="async" width="2880" height="3390" class="alignnone size-full wp-image-21267" src="https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding_UI_UX_design_web_development.png" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding_UI_UX_design_web_development.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding_UI_UX_design_web_development-580x683.png 580w, https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding_UI_UX_design_web_development-1280x1507.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding_UI_UX_design_web_development-1305x1536.png 1305w, https://bentographics.com/wp-content/uploads/2025/05/4_next-level-japan_branding_UI_UX_design_web_development-1740x2048.png 1740w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" width="2880" height="1904" class="alignnone size-full wp-image-21268" src="https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding_UI_UX_design_web_development.png" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding_UI_UX_design_web_development.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding_UI_UX_design_web_development-580x383.png 580w, https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding_UI_UX_design_web_development-1280x846.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding_UI_UX_design_web_development-1536x1015.png 1536w, https://bentographics.com/wp-content/uploads/2025/05/5_next-level-japan_branding_UI_UX_design_web_development-2048x1354.png 2048w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" class="line alignnone wp-image-21269 size-full" src="https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding_UI_UX_design_web_development.png" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" width="2880" height="4620" srcset="https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding_UI_UX_design_web_development.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding_UI_UX_design_web_development-580x930.png 580w, https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding_UI_UX_design_web_development-1280x2053.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding_UI_UX_design_web_development-958x1536.png 958w, https://bentographics.com/wp-content/uploads/2025/05/6_next-level-japan_branding_UI_UX_design_web_development-1277x2048.png 1277w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" width="2400" height="1776" class="alignnone size-full wp-image-21293" src="https://bentographics.com/wp-content/uploads/2025/06/9_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website" srcset="https://bentographics.com/wp-content/uploads/2025/06/9_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup.jpg 2400w, https://bentographics.com/wp-content/uploads/2025/06/9_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-580x429.jpg 580w, https://bentographics.com/wp-content/uploads/2025/06/9_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1280x947.jpg 1280w, https://bentographics.com/wp-content/uploads/2025/06/9_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-1536x1137.jpg 1536w, https://bentographics.com/wp-content/uploads/2025/06/9_Next-Level-Japan-sales-development-digitial-marketing-brand-guildeline-mockup-2048x1516.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<h3>Localized Japanese Website</h3>
<img decoding="async" class="line alignnone wp-image-21270 size-full" src="https://bentographics.com/wp-content/uploads/2025/05/7_next-level-japan_branding_UI_UX_design_web_development.png" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" width="2880" height="3768" srcset="https://bentographics.com/wp-content/uploads/2025/05/7_next-level-japan_branding_UI_UX_design_web_development.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/7_next-level-japan_branding_UI_UX_design_web_development-580x759.png 580w, https://bentographics.com/wp-content/uploads/2025/05/7_next-level-japan_branding_UI_UX_design_web_development-1280x1675.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/7_next-level-japan_branding_UI_UX_design_web_development-1174x1536.png 1174w, https://bentographics.com/wp-content/uploads/2025/05/7_next-level-japan_branding_UI_UX_design_web_development-1565x2048.png 1565w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" width="2880" height="3914" class="alignnone size-full wp-image-21271" src="https://bentographics.com/wp-content/uploads/2025/05/8_next-level-japan_branding_UI_UX_design_web_development.png" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/8_next-level-japan_branding_UI_UX_design_web_development.png 2880w, https://bentographics.com/wp-content/uploads/2025/05/8_next-level-japan_branding_UI_UX_design_web_development-580x788.png 580w, https://bentographics.com/wp-content/uploads/2025/05/8_next-level-japan_branding_UI_UX_design_web_development-1280x1740.png 1280w, https://bentographics.com/wp-content/uploads/2025/05/8_next-level-japan_branding_UI_UX_design_web_development-1130x1536.png 1130w, https://bentographics.com/wp-content/uploads/2025/05/8_next-level-japan_branding_UI_UX_design_web_development-1507x2048.png 1507w" sizes="(max-width: 2880px) 100vw, 2880px" />
<img decoding="async" width="2400" height="1704" class="alignnone size-full wp-image-21273" src="https://bentographics.com/wp-content/uploads/2025/05/3_Next-Level-Japan-sales-development-digitial-marketing-mockup.jpg" alt="Next Level Japan - Branding, Visual Identity, UI/UX Design, Website Development" srcset="https://bentographics.com/wp-content/uploads/2025/05/3_Next-Level-Japan-sales-development-digitial-marketing-mockup.jpg 2400w, https://bentographics.com/wp-content/uploads/2025/05/3_Next-Level-Japan-sales-development-digitial-marketing-mockup-580x412.jpg 580w, https://bentographics.com/wp-content/uploads/2025/05/3_Next-Level-Japan-sales-development-digitial-marketing-mockup-1280x909.jpg 1280w, https://bentographics.com/wp-content/uploads/2025/05/3_Next-Level-Japan-sales-development-digitial-marketing-mockup-1536x1091.jpg 1536w, https://bentographics.com/wp-content/uploads/2025/05/3_Next-Level-Japan-sales-development-digitial-marketing-mockup-2048x1454.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<blockquote><p>We engaged Bento Graphics Inc. for a comprehensive brand refresh, UI/UX design, and the development of our bilingual English-Japanese corporate website. Their team demonstrated exceptional professionalism and creativity.</p>
<p>We requested a friendly and approachable design, maintaining innovation as a pillar, but encompassing it in a wider context of sustainable development, resulting in the use of green and lime gradients, and a smooth complementary brand font. We also refined and slimmed down the logomark to convey a lighter, more environmentally friendly, and efficient future design. The new framework also gives us much more flexibility as we highlight new services or share insights. Our site is again, of course bilingual, ensuring an engaging experience for both our English and Japanese-speaking audiences. They further adjusted and optimized the typography for both English and Japanese writing systems.<br />
The new brand guideline is now rolled out to all our corporate materials and social platforms.<br />
We believe that this new forward-looking identity is a better fit with our company’s current positioning, and a much stronger contributor to our sales process than the previous one.</p>
<p>Bento Graphics Inc.&#8217;s attention to detail, customer requests, and their commitment to excellence are always appreciated. We highly recommend their services.</p>
<p>Stéphane Zadounaïsky, CEO, Next Level Japan</p></blockquote>
<p>The post <a href="https://bentographics.com/work/next-level-japan/">Next Level Japan</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>The Year of the Snake 2025: Loading…</title>
		<link>https://bentographics.com/blog/happy-new-snake-year-2025/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Wed, 01 Jan 2025 02:19:52 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=21151</guid>

					<description><![CDATA[<p>Welcome to 2025, the year of the snake! Wishing our friends, collaborators and clients a happy, healthy and flavourful new year!</p>
<p>The post <a href="https://bentographics.com/blog/happy-new-snake-year-2025/">The Year of the Snake 2025: Loading…</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!-- Added by Post/Page specific custom CSS plugin, thank you for using! -->
<style>.single .wide .entry .snake {
	background-color: #efefef;
	margin-bottom: 30px;
	margin-left: -6%;
 	width: 112%;
	padding: 40px 56px;
}
.single .wide .entry .snake p{
	text-align: center;
	font-size: 16px;
}


.single .wide .entry .snake img,
.single .wide .entry .snake video {
	display: block;
	width: calc(100% + 12%);
	max-width: calc(100% + 12%);
	height: auto;
}    
	
@media only screen and (max-width: 767px) {
	
	.single .wide .entry .snake img,
	.single .wide .entry .snake video {
		margin-left: -6% !important;
	}
	
}

@media only screen and (min-width: 768px) {
	
	.single .wide .entry .snake {
		margin: 0 auto 30px auto !important;
		margin-left: 0%;
		width: 100%;
	}
	
	.single .wide .entry .snake img,
	.single .wide .entry .snake video {
		max-width: 500px;
    margin: 0 auto;
		padding: 0;
    
	}
}



/* .single .wide .entry .snake img {
	width: 500px !important;
	height: auto;
	display: block;
	margin: 0 auto !important;
	padding: 0 !important;
}
 */</style>
<div class="snake">
<video width="500" height="500" autoplay="true" muted="true" playsinline autoplay loop muted controlsList="nodownload" oncontextmenu="return false;"><source src="https://bentographics.com/wp-content/uploads/2024/12/bento_graphics_2025_square-ezgif.com-resize-video.mp4" type="video/mp4"></video>
</div>
<p style="text-align: center;">Welcome to 2025, the year of the snake! May your year be loaded up with satisfying bites of inspiration, tasty collaborations, and a feast of achievements — but don’t let the tail tangle your tempura! Wishing our friends, collaborators and clients a happy, healthy and flavorful 2025!</p>
<p style="text-align: center;">今年も宜しくおねがいします！</p>
<div style="text-align: center;">
<p style="display: inline-block; letter-spacing: 0.32em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;"><span style="letter-spacing: 0.32em;">二〇二五</span> <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f64c.png" alt="🙌" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
アケオメ <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f40d.png" alt="🐍" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
</div>
<p>The post <a href="https://bentographics.com/blog/happy-new-snake-year-2025/">The Year of the Snake 2025: Loading…</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></content:encoded>
					
		
		<enclosure url="https://bentographics.com/wp-content/uploads/2024/12/bento_graphics_2025_square-ezgif.com-resize-video.mp4" length="292213" type="video/mp4" />

			</item>
		<item>
		<title>Citadel AI &#8211; Trustworthy AI</title>
		<link>https://bentographics.com/work/citadel-ai/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Fri, 02 Aug 2024 01:28:09 +0000</pubDate>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[ID]]></category>
		<category><![CDATA[Illus]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[Art Direction]]></category>
		<category><![CDATA[Branding]]></category>
		<category><![CDATA[Charts and Diagrams]]></category>
		<category><![CDATA[Corporate Identity Design Development & Logo]]></category>
		<category><![CDATA[Creative Direction & Ideas]]></category>
		<category><![CDATA[Cross Browser Testing]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Illustration and Icon Design]]></category>
		<category><![CDATA[Infographic]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Mobile Device Testing]]></category>
		<category><![CDATA[Project Management]]></category>
		<category><![CDATA[QA (Quality Assurance)]]></category>
		<category><![CDATA[Responsive Web Design]]></category>
		<category><![CDATA[Storytelling]]></category>
		<category><![CDATA[Style Guide Manual]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[UI (User Interface Design)]]></category>
		<category><![CDATA[UX (User Experience Design)]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wireframe Design]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=20534</guid>

					<description><![CDATA[<p>Trustworthy AI startup Citadel AI partnered with us to create their new corporate Identity, Japanese-English bilingual corporate website, and custom illustrations &#038; animations.</p>
<p>The post <a href="https://bentographics.com/work/citadel-ai/">Citadel AI &#8211; Trustworthy AI</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!-- Added by Post/Page specific custom CSS plugin, thank you for using! -->
<style>/* ----------------------- Black BG Styling */

#sidebar,
section.block.wide {
    background: black;
/*     margin-top: 10px; */
    cursor: url(https://bentographics.com/wp-content/themes/bento-graphics/lib/img/cursor/cursor_white.png) 6 6, auto;
    cursor: url(https://bentographics.com/wp-content/themes/bento-graphics/lib/img/cursor/cursor_white.svg) 6 6, auto;
    cursor: -webkit-image-set(url(https://bentographics.com/wp-content/themes/bento-graphics/lib/img/cursor/cursor_white.png) 1x, url(https://bentographics.com/wp-content/themes/bento-graphics/lib/img/cursor/cursor_white@2x.png) 2x) 6 6, auto;
	
}

@media only screen and (max-width: 600px) {
	section.block.wide {
			padding: 32px 0 24px 0;
	}
}

#sidebar,
section.block.wide * {
    color: #777 !important;
}

.block.wide *::selection{
   color: #000 !important;
  background: #666 !important;
}

@media only screen and (min-width: 960px) {
    section.block.wide {
        margin-top: 60px;
    }
}

img.line {
	border: 1px solid #333 !important;
}

#sidebar {
	margin-top: 0;
}

.project_details.padding_block,
.single .project_details ul li{
    border-color: #333 !important;
}

/* .entry img {
   border: 1px solid #777 !important;
} */

/* .animation {
	padding: 80px 0; 
	background: black;
} */

/* ----------------------- Image Fixes */

.entry img.mobile-no-margin {
	margin-left: 0;
	width: 100%;
}



/* ----------------------- Columns */

.section {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin-bottom: 20px;
}

.section figure, 
.section figcaption {
	margin: 0 !important;
	font-style: normal !important;
	text-align: left !important;
	width: 100%;
}

.section figcaption {
	line-height: 1.5 !important;
	margin-top: 4px !important;
}

.section.image {
	gap: 20px;
}

.column {
	width: calc(50% - 10px);
	box-sizing: border-box;
	line-height: 0 !important;
}

.column:nth-child(1) {
	margin-bottom: 20px;
}

@media only screen and (min-width: 600px) {
	.section img,
	.section .column img{
		margin: 0 !important;	
		border-radius: 8px;
		width: 100%;
		max-width: 100%;
	}
	.column:nth-child(1) {
		margin-bottom: 0;
	}
}

.column small {
	line-height: 1.2;	
}
@media only screen and (max-width: 600px) {
	.column {
		width: 100%;
		padding: 0;
	}
}</style>
<img decoding="async" class="line alignnone wp-image-20961 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI_cover.jpg" alt="Citadel AI logo, a trustworthy AI startup from Tokyo, Japan. Bento Graphics a Tokyo/Japan based design studio, provided Branding, Logo Design, Style Guide, Corporate Identity Design, Illustrations, Animations, Graphic Design, Web Design, UI Design, UX Design and Web Development." width="2400" height="1260" srcset="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI_cover.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI_cover-580x305.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI_cover-1280x672.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI_cover-1536x806.jpg 1536w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI_cover-2048x1075.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<p>Trustworthy AI startup <em>Citadel AI</em> partnered with us to launch their new brand Identity, Japanese-English bilingual corporate website, custom illustrations and animations.</p>
<h3>Trustworthy AI</h3>
<p>The concept of <em>Trustworthy AI</em> refers to artificial intelligence that is implemented in a way that is reliable, ethical, and beneficial to society, emphasizing transparency, fairness, accountability, privacy, and security. With the boom of AI systems and their not always reliable outputs, Citadel AI was established to promote these principles in AI development and implementation.</p>
<h3>Client</h3>
<p>Citadel AI is a Tokyo based startup data security company assisting other companies to safely implement and monitor their AI applications.<br />
Their flagship apps are Citadel Lens &amp; Citadel Radar. With Lens one can test AI models and datasets against industry standards and improve AI performance. In contrast, Radar can monitor production AI models and data quality to improve real-world AI performance.<br />
In October 2021 Citadel AI raised 100 million JPY in seed funding from UTokyo IPC and ANRI. In 2023 BSI (British Standards Institution), the leading global standards and business improvement company partnered with Citadel AI.</p>
<h2>Corporate Identity Design</h2>
<h3>Logomark &amp; Logotype</h3>
<p>The grid-based logomark of &#8220;data blocks&#8221; was inspired by a continous cycle of monitoring and data sanitation, protecting the core data in the center. Alternatively the minimal logotype with the blue colored dot on the letter &#8220;i&#8221; can be used.</p>
<figure id="attachment_20973" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-20973 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logomark-logo-white.png" alt="The grid-based 'Citadel AI' logomark was designed of &quot;data blocks&quot;. It was inspired by a continous cycle of monitoring and data sanitation, protecting the core data in the center." width="2880" height="1512" srcset="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logomark-logo-white.png 2880w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logomark-logo-white-580x305.png 580w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logomark-logo-white-1280x672.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logomark-logo-white-1536x806.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logomark-logo-white-2048x1075.png 2048w" sizes="(max-width: 2880px) 100vw, 2880px" /><figcaption>Logomark design for Citadel AI.</figcaption></figure>
<figure id="attachment_21130" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-21130 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logotype-on-dark.png" alt="The logotype of Citadel AI." width="2880" height="1512" srcset="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logotype-on-dark.png 2880w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logotype-on-dark-580x305.png 580w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logotype-on-dark-1280x672.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logotype-on-dark-1536x806.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-AI-logotype-on-dark-2048x1075.png 2048w" sizes="(max-width: 2880px) 100vw, 2880px" /><figcaption>Logotype design for Citadel AI.</figcaption></figure>
<h3>Brand Style Guide</h3>
<img decoding="async" class="mobile-no-margin alignnone wp-image-20968 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-AI_corporate-identity-design-style-guide.gif" alt="Citadel AI - Brand style guide with logo versions, logo construction and safe space, Roman and Japanese font selection &amp; typography, color palette and color distribution. " width="2400" height="1424" />
<h3>Key Visual Illustrations</h3>
<figure id="attachment_21029" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-21029 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-1.png" alt="Citadel AI - Trustworthy AI - Data-Inspired Key Visual Illustrations by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="873" srcset="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-1.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-1-580x211.png 580w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-1-1280x466.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-1-1536x559.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-1-2048x745.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>An abstract, data-inspired key visual illustration for Citadel AI symbolizing AI data streams, highlighting the occasional “bad actor,” which is then sanitized from a corrupted (red) to a clean data block (green).</figcaption></figure>
<figure id="attachment_21030" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-21030 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-1.png" alt="Citadel AI - Trustworthy AI - Data-Inspired Key Visual Illustrations by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="873" srcset="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-1.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-1-580x211.png 580w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-1-1280x466.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-1-1536x559.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-1-2048x745.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>Key visual illustration for Citadel Lens, a software product that can target, isolate and clean bad data in AI models. It was visualized using circular lens shapes zooming in on affected data.</figcaption></figure>
<figure id="attachment_21031" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-21031 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-key-visual-data-illustration-1.png" alt="Citadel AI - Trustworthy AI - Data-Inspired Key Visual Illustrations by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="873" srcset="https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-key-visual-data-illustration-1.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-key-visual-data-illustration-1-580x211.png 580w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-key-visual-data-illustration-1-1280x466.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-key-visual-data-illustration-1-1536x559.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-key-visual-data-illustration-1-2048x745.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>Key visual illustration for Citadel Radar, a software product that can continously monitor production AI models and data quality. It was visualized using a data stream which filtered at the blue threshhold and converted to sanitized data.</figcaption></figure>
<figure id="attachment_21033" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-21033 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/5_citadel-ai-key-visual-data-illustration-1.png" alt="Citadel AI - Trustworthy AI - Data-Inspired Key Visual Illustrations by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="873" srcset="https://bentographics.com/wp-content/uploads/2024/06/5_citadel-ai-key-visual-data-illustration-1.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/5_citadel-ai-key-visual-data-illustration-1-580x211.png 580w, https://bentographics.com/wp-content/uploads/2024/06/5_citadel-ai-key-visual-data-illustration-1-1280x466.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/5_citadel-ai-key-visual-data-illustration-1-1536x559.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/5_citadel-ai-key-visual-data-illustration-1-2048x745.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>Misc AI data-inspired key visual illustration for Citadel AI.</figcaption></figure>
<figure id="attachment_21032" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-21032 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-key-visual-data-illustration-1.png" alt="Citadel AI - Trustworthy AI - Data-Inspired Key Visual Illustrations by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="873" srcset="https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-key-visual-data-illustration-1.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-key-visual-data-illustration-1-580x211.png 580w, https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-key-visual-data-illustration-1-1280x466.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-key-visual-data-illustration-1-1536x559.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-key-visual-data-illustration-1-2048x745.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>Misc AI data-inspired key visual illustration for Citadel AI.</figcaption></figure>
<div class="section image">
<div class="column">
<figure><img decoding="async" width="2400" height="993" class="alignnone size-full wp-image-21020" src="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-white.png" alt="Citadel AI - Trustworthy AI - Data-Inspired Key Visual Illustrations by Bento Graphics, Tokyo/Japan based design studio" srcset="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-white.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-white-580x240.png 580w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-white-1280x530.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-white-1536x636.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-key-visual-data-illustration-white-2048x847.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>Color inverted variants of the key visuals.</figcaption></figure>
</div>
<div class="column">
<figure><img decoding="async" width="2400" height="993" class="alignnone size-full wp-image-21021" src="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-white.png" alt="Citadel AI - Trustworthy AI - Data-Inspired Key Visual Illustrations by Bento Graphics, Tokyo/Japan based design studio" srcset="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-white.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-white-580x240.png 580w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-white-1280x530.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-white-1536x636.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-key-visual-data-illustration-white-2048x847.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption></figcaption></figure>
</div>
</div>
<h3>Animation &amp; Storyboard</h3>
<p>As eye-catcher for the homepage an animation was developed based on the initial data stream key visual.</p>
<figure id="attachment_20981" class="wp-caption alignnone" ><img decoding="async" class="wp-image-20981 size-full" style="border-radius: 0;" src="https://bentographics.com/wp-content/uploads/2024/06/citadel_long_1920_24_compressed.gif" alt="Citadel AI - Trustworthy AI - Animated hero banner made up of data streams moving right to left while sanitizing bad data blocks." width="1920" height="583" /><figcaption>Animated hero banner for Citadel AI&#8217;s homepage.</figcaption></figure>
<figure id="attachment_21052" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-21052 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-AI_animation-storyboard.png" alt="Citadel AI - Trustworthy AI - Storyboard for animated Hero Banner by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="1310" srcset="https://bentographics.com/wp-content/uploads/2024/06/citadel-AI_animation-storyboard.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/citadel-AI_animation-storyboard-580x317.png 580w, https://bentographics.com/wp-content/uploads/2024/06/citadel-AI_animation-storyboard-1280x699.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/citadel-AI_animation-storyboard-1536x838.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/citadel-AI_animation-storyboard-2048x1118.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>Storyboard directions of the hero banner animation.</figcaption></figure>
<h3>Infographics &amp; Diagrams</h3>
<p>As part of the branding package a range of infographics, diagrams and spot illustrations were created to further explain Citadel AI&#8217;s projucts and certain AI model challenges.</p>
<img decoding="async" class="alignnone" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-diagrams_1-1.png" alt="Citadel AI - Diagram illustrating the workflow of Citadel Lens and Citadel Radar. It shows steps from dataset and model input, through testing to model reporting, and production modeling to monitoring and continuous training." width="2400" height="1200" />
<img decoding="async" class="alignnone" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-diagrams_2-1.png" alt="Citadel AI - Trustworthy AI - Diagram illustrating the workflow of Citadel Lens how it automatically tests your AI models and datasets against industry standards and improve AI performance. Infographic Diagrams &amp; Charts by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="1200" />
<img decoding="async" class="alignnone" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-diagrams_3-1.png" alt="Citadel AI - Trustworthy AI - Diagram illustrating the workflow of Citadel Radar how it automatically monitors your production AI model and data quality to improve real-world AI performance. Infographic Diagrams &amp; Charts by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="1350" />
<img decoding="async" class="alignnone wp-image-21069 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-spot-illustration-diagrams.png" alt="Citadel AI - Trustworthy AI - Spot illustrations about the challenges of AI evaluation and monitoring e.g. Black Box Models, Limited Test Suites, Model and Data Drift, No Ground Truth and AI Compliance. Infographic Diagrams &amp; Charts by Bento Graphics, Tokyo/Japan based design studio" width="2400" height="1999" srcset="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-spot-illustration-diagrams.png 2400w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-spot-illustration-diagrams-580x483.png 580w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-spot-illustration-diagrams-1280x1066.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-spot-illustration-diagrams-1536x1279.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-spot-illustration-diagrams-2048x1706.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<h2>UI/UX Design &amp; Web Development</h2>
<p>After a phase of research and wireframing we provided the UI/UX design in Figma which also included a digital design system.</p>
<img decoding="async" class="line alignnone wp-image-21083 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-UI-UX-design.jpg" alt="Citadel AI - Trustworthy AI. A mobile phone mockup with the UI/UX design of the homepage layout. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, web design and web development." width="2400" height="1744" srcset="https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-UI-UX-design.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-UI-UX-design-580x421.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-UI-UX-design-1280x930.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-UI-UX-design-1536x1116.jpg 1536w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-UI-UX-design-2048x1488.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><img decoding="async" class="alignnone wp-image-21134 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-digitial-style-guide.png" alt="Citadel AI - Digital Style Guide and Typography Presets for UI/UX Design." width="2800" height="2034" srcset="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-digitial-style-guide.png 2800w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-digitial-style-guide-580x421.png 580w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-digitial-style-guide-1280x930.png 1280w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-digitial-style-guide-1536x1116.png 1536w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-digitial-style-guide-2048x1488.png 2048w" sizes="(max-width: 2800px) 100vw, 2800px" />
<img decoding="async" class="mobile-no-margin alignnone wp-image-21109 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-homepage.jpg" alt="Citadel AI - Trustworthy AI. A desktop browser mockup with the UI/UX design of the website. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, responsive web design and web development." width="2400" height="2820" srcset="https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-homepage.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-homepage-580x682.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-homepage-1280x1504.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-homepage-1307x1536.jpg 1307w, https://bentographics.com/wp-content/uploads/2024/06/1_citadel-ai-homepage-1743x2048.jpg 1743w" sizes="(max-width: 2400px) 100vw, 2400px" /><img decoding="async" class="mobile-no-margin alignnone wp-image-21116 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design.jpg" alt="Citadel AI - Trustworthy AI. A mobile/smartphone browser mockup with the UI/UX design of the website. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, responsive web design and web development." width="2400" height="3088" srcset="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-580x746.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1280x1647.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1194x1536.jpg 1194w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1592x2048.jpg 1592w" sizes="(max-width: 2400px) 100vw, 2400px" />
<img decoding="async" class="mobile-no-margin alignnone wp-image-21110 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-lens-radar-product-landing-pages.jpg" alt="Citadel AI - Trustworthy AI. A desktop browser mockup with the UI/UX design of the website. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, responsive web design and web development." width="2400" height="3676" srcset="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-lens-radar-product-landing-pages.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-lens-radar-product-landing-pages-580x888.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-lens-radar-product-landing-pages-1280x1961.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-lens-radar-product-landing-pages-1003x1536.jpg 1003w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-lens-radar-product-landing-pages-1337x2048.jpg 1337w" sizes="(max-width: 2400px) 100vw, 2400px" /><img decoding="async" class="line alignnone wp-image-21082 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-UI-UX-design.jpg" alt="Citadel AI - Trustworthy AI. A laptop mockup with the UI/UX design of the website. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, responsive web design and web development." width="2400" height="1600" srcset="https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-UI-UX-design.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-UI-UX-design-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-UI-UX-design-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-UI-UX-design-1536x1024.jpg 1536w, https://bentographics.com/wp-content/uploads/2024/06/2_citadel-ai-UI-UX-design-2048x1365.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<img decoding="async" class="mobile-no-margin alignnone wp-image-21111 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-careers-about-news-contact.jpg" alt="Citadel AI - Trustworthy AI. A desktop browser mockup with the UI/UX design of the website. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, responsive web design and web development." width="2400" height="4654" srcset="https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-careers-about-news-contact.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-careers-about-news-contact-580x1125.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-careers-about-news-contact-1280x2482.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-careers-about-news-contact-792x1536.jpg 792w, https://bentographics.com/wp-content/uploads/2024/06/3_citadel-ai-careers-about-news-contact-1056x2048.jpg 1056w" sizes="(max-width: 2400px) 100vw, 2400px" /><img decoding="async" class="mobile-no-margin alignnone wp-image-21115 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1.jpg" alt="Citadel AI - Trustworthy AI. A mobile/smartphone browser mockup with the UI/UX design of the website. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, responsive web design and web development." width="2400" height="4726" srcset="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1-580x1142.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1-1280x2521.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1-780x1536.jpg 780w, https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-mobile-smartphone-ui-ux-design-1-1040x2048.jpg 1040w" sizes="(max-width: 2400px) 100vw, 2400px" />
<img decoding="async" class="mobile-no-margin alignnone wp-image-21113 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/citadel-ai-UI-UX-design_about-modal-popup.gif" alt="Citadel AI - Trustworthy AI. A desktop browser mockup with the UI/UX design of the modal window interactions on the teams page. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, responsive web design and web development." width="2400" height="2108" />
<img decoding="async" class="mobile-no-margin alignnone wp-image-21112 size-full" src="https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-news-blog-article-template.jpg" alt="Citadel AI - Trustworthy AI. A desktop browser mockup with the UI/UX design of a sample article page showing the optimized typography. Tokyo based design studio Bento Graphics provided research &amp; strategy, wireframing, UI/UX design, responsive web design and web development." width="2400" height="4338" srcset="https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-news-blog-article-template.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-news-blog-article-template-580x1048.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-news-blog-article-template-1280x2314.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-news-blog-article-template-850x1536.jpg 850w, https://bentographics.com/wp-content/uploads/2024/06/4_citadel-ai-news-blog-article-template-1133x2048.jpg 1133w" sizes="(max-width: 2400px) 100vw, 2400px" />
<img decoding="async" width="2400" height="1600" class="alignnone size-full wp-image-21142" src="https://bentographics.com/wp-content/uploads/2024/06/8_citadel-ai-UI-UX-design.jpg" alt="" srcset="https://bentographics.com/wp-content/uploads/2024/06/8_citadel-ai-UI-UX-design.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/06/8_citadel-ai-UI-UX-design-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2024/06/8_citadel-ai-UI-UX-design-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/06/8_citadel-ai-UI-UX-design-1536x1024.jpg 1536w, https://bentographics.com/wp-content/uploads/2024/06/8_citadel-ai-UI-UX-design-2048x1365.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<hr />
<blockquote><p>Citadel AI worked with Bento Graphics on a full redesign of our company website, and we were quite impressed with their work! There aren&#8217;t many agencies in Japan that can design websites in English and Japanese, and we were impressed by Bento Graphics’ track record working on bilingual projects and with other tech companies.</p>
<p>The team at Bento Graphics was collaborative and efficiently managed the entire process across wireframes, Figma mockups, animation storyboards, and implementation. They kept our team updated during regular check-ins and incorporated our design input and business requirements throughout the process, and we were able to successfully hit our target launch date.</p>
<p>After launch, Bento Graphics helped us monitor each page on the new website for unexpected issues, and trained our team so we can effectively maintain the website over time.</p>
<p>Overall, we’d gladly work with Bento Graphics again and would highly recommend their team!</p>
<p><small>Kenny Song<br />
Co-Founder &amp; CTO, Citadel AI<small> </small></small></p></blockquote>
<p>The post <a href="https://bentographics.com/work/citadel-ai/">Citadel AI &#8211; Trustworthy AI</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Asial &#8211; Software Development</title>
		<link>https://bentographics.com/work/asial/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Sat, 27 Apr 2024 02:00:56 +0000</pubDate>
				<category><![CDATA[ID]]></category>
		<category><![CDATA[Illus]]></category>
		<category><![CDATA[Misc]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[Art Direction]]></category>
		<category><![CDATA[Branding]]></category>
		<category><![CDATA[Charts and Diagrams]]></category>
		<category><![CDATA[Copywriting]]></category>
		<category><![CDATA[Corporate Identity Design Development & Logo]]></category>
		<category><![CDATA[Creative Direction & Ideas]]></category>
		<category><![CDATA[Cross Browser Testing]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Illustration and Icon Design]]></category>
		<category><![CDATA[Infographic]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Mobile Device Testing]]></category>
		<category><![CDATA[Photo Direction]]></category>
		<category><![CDATA[Project Management]]></category>
		<category><![CDATA[QA (Quality Assurance)]]></category>
		<category><![CDATA[Responsive Web Design]]></category>
		<category><![CDATA[Storytelling]]></category>
		<category><![CDATA[Style Guide Manual]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[UI (User Interface Design)]]></category>
		<category><![CDATA[UX (User Experience Design)]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wireframe Design]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=20035</guid>

					<description><![CDATA[<p>Global Japanese software company Asial commissioned us with their web presence through UI/UX design, storytelling, illustration &#038; animation.</p>
<p>The post <a href="https://bentographics.com/work/asial/">Asial &#8211; Software Development</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></description>
										<content:encoded><![CDATA[<!-- Added by Post/Page specific custom CSS plugin, thank you for using! -->
<style>.section {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin-bottom: 20px;
/* 	  display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    margin-bottom: 20px;
    margin-left: -6%;
    width: 112%;
    max-width: 112%; */
}

.section figure, 
.section figcaption {
	margin: 0 !important;
	font-style: normal !important;
	text-align: left !important;
	width: 100%;
}

.section figcaption {
	line-height: 1.5 !important;
	margin-top: 4px !important;
/* 	margin: 0 6% !important; */
}

.section.image {
	gap: 20px;
}

.column {
	width: calc(50% - 10px);
	box-sizing: border-box;
	line-height: 0 !important;
}

.column:nth-child(1) {
	margin-bottom: 20px;
}

/* .section img {
		border-radius: 8px;
} */

@media only screen and (min-width: 600px) {
	.section img,
	.section .column img{
		margin: 0 !important;	
		border-radius: 8px;
		width: 100%;
		max-width: 100%;
	}
	.column:nth-child(1) {
		margin-bottom: 0;
	}
}

.column small {
	line-height: 1.2;	
}
@media only screen and (max-width: 600px) {
	.column {
		width: 100%;
		padding: 0;
	}
}

.lottie-player {
	width: 100%;
	height: auto;
	padding: 0 20px;
	background: black;
	aspect-ratio: 1/0.7;
	margin-left: -6%;
	width: 112%;
	max-width: 112%;
	overflow: hidden;
}

.olive .lottie-player {
	background-color: #253826;
}

/* .grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 16px;
}
.grid img {
	background: black;
	width: 100%;
	margin: 0 0;
} */
@media only screen and (min-width: 600px) {
	.lottie-player {
		padding: 0 80px; 
		border-radius: 8px;
		margin-left: 0;
    width: 100%;
    max-width: 100%;
	}
/* 	.grid_7 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-gap: 32px;
		padding: 64px 0;
	} */
}</style>
<img decoding="async" width="2400" height="1600" class="alignnone size-full wp-image-20681" src="https://bentographics.com/wp-content/uploads/2024/03/asial_uiux-design_cover.jpg" alt="Asial - UI/UX Design" srcset="https://bentographics.com/wp-content/uploads/2024/03/asial_uiux-design_cover.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/03/asial_uiux-design_cover-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2024/03/asial_uiux-design_cover-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/03/asial_uiux-design_cover-1536x1024.jpg 1536w, https://bentographics.com/wp-content/uploads/2024/03/asial_uiux-design_cover-2048x1365.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<p>Global Japanese software company Asial commissioned us to design their international website presence. The project included the provision of a copywriter, information architecture &#038; wireframing, UI/UX design, custom illustration &#038; web animation, and quality assurance.</p>
<h3>About Asial</h3>
<p>With over 20 years of experience, Asial Corporation has served 200+ customers in Japan and globally. They pioneered Monaca and Onsen UI, Japan’s #1 cloud-based mobile app development tools with 300,000+ users. Their 60+ strong global team blends Japanese and international expertise, focusing on UX-driven development. Their skills span industries like software development and education, with specializations in AI, IoT, and Industry 4.0. </p>
<h2>The Project</h2>
<p>Asial commissioned Bento Graphics as Tokyo based graphic design, web design and web development studio to direct and design their international web presence. One of the primary objectives of the project was also to establish the brand identity of Asial for the international market.</p>
<p>Asial&#8217;s core aim for its website relaunch was to attract international clients and global talent in the IT sector while also creating a sense of pride among existing members.</p>
<p>After researching and selecting a new brand font and secondary color palette, we extended their branding throughout the UI design using elements derived from the logo.<br />
We designed a clean intuitive UI design in a minimalist grid-based style. The generally black background of the website creates a strong contrast with the colorful visual elements using their orange brand color. We also made the decision to synchronize section background colors with the page scroll position instead of using static colors.<br />
To generate eyeballs, however, we used storytelling and a visual concept to create a large range of custom illustrations and web animations throughout the site. Additionally, we created playful interactive sections such as the company history timeline or the animated process &#038; workflow chart.</p>
<h2>Information Architecture, Wireframing &amp; UI/UX Design</h2>
<figure id="attachment_20689" class="wp-caption alignnone" ><img decoding="async" class="wp-image-20689 size-full" src="https://bentographics.com/wp-content/uploads/2024/03/1_asial-homepage_desktop_v3.jpg" alt="Asial - UI/UX Design, Custom Illustration, Animation and Quality Assurance" width="2400" height="1600" srcset="https://bentographics.com/wp-content/uploads/2024/03/1_asial-homepage_desktop_v3.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/03/1_asial-homepage_desktop_v3-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2024/03/1_asial-homepage_desktop_v3-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/03/1_asial-homepage_desktop_v3-1536x1024.jpg 1536w, https://bentographics.com/wp-content/uploads/2024/03/1_asial-homepage_desktop_v3-2048x1365.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>The homepage with an animated hero section and company milestone timeline below.</figcaption></figure>
<figure id="attachment_20693" class="wp-caption alignnone" ><img decoding="async" class="wp-image-20693 size-full" src="https://bentographics.com/wp-content/uploads/2024/03/1_asial-homepage_desktop.jpg" alt="Asial - UI/UX Design, Custom Illustration, Animation and Quality Assurance" width="2880" height="4061" /><figcaption>The homepage template follows a logical sequence introducing Asial, what they do, services &#038; products, recent projects, client credentials and latest news.</figcaption></figure>
<figure id="attachment_20694" class="wp-caption alignnone" ><img decoding="async" class="wp-image-20694 size-full" src="https://bentographics.com/wp-content/uploads/2024/03/2_asial-process.jpg" alt="Asial - UI/UX Design, Custom Illustration, Animation and Quality Assurance" width="2880" height="1839" /><figcaption>The process &#038; methodology page explains about Asial&#8217;s workflow and features interactive sections and animations.</figcaption></figure>
<figure id="attachment_20880" class="wp-caption alignnone" ><img decoding="async" width="2400" height="1600" src="https://bentographics.com/wp-content/uploads/2024/03/2_asial-about.jpg" alt="Asial - UI/UX Design, Custom Illustration, Animation and Quality Assurance" class="alignnone size-full wp-image-20880" srcset="https://bentographics.com/wp-content/uploads/2024/03/2_asial-about.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/03/2_asial-about-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2024/03/2_asial-about-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/03/2_asial-about-1536x1024.jpg 1536w, https://bentographics.com/wp-content/uploads/2024/03/2_asial-about-2048x1365.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>The About page greets the user with an animated holographic business card giving reference to their Japanese roots.</figcaption></figure>
<figure id="attachment_20709" class="wp-caption alignnone" ><img decoding="async" class="wp-image-20709 size-full" src="https://bentographics.com/wp-content/uploads/2024/03/asial_tech-solutions_v2.png" alt="Asial - UI/UX Design, Custom Illustration, Animation and Quality Assurance" width="2880" height="3332" srcset="https://bentographics.com/wp-content/uploads/2024/03/asial_tech-solutions_v2.png 2880w, https://bentographics.com/wp-content/uploads/2024/03/asial_tech-solutions_v2-580x671.png 580w, https://bentographics.com/wp-content/uploads/2024/03/asial_tech-solutions_v2-1280x1481.png 1280w, https://bentographics.com/wp-content/uploads/2024/03/asial_tech-solutions_v2-1328x1536.png 1328w, https://bentographics.com/wp-content/uploads/2024/03/asial_tech-solutions_v2-1770x2048.png 1770w" sizes="(max-width: 2880px) 100vw, 2880px" /><figcaption>The technology solutions landing page explains about Asial&#8217;s core software development areas.</figcaption></figure>
<figure id="attachment_20867" class="wp-caption alignnone" ><img decoding="async" width="2400" height="1602" src="https://bentographics.com/wp-content/uploads/2024/03/3_asial-industry-solutions.jpg" alt="Asial - UI/UX Design, Custom Illustration, Animation and Quality Assurance" class="alignnone size-full wp-image-20867" srcset="https://bentographics.com/wp-content/uploads/2024/03/3_asial-industry-solutions.jpg 2400w, https://bentographics.com/wp-content/uploads/2024/03/3_asial-industry-solutions-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2024/03/3_asial-industry-solutions-1280x854.jpg 1280w, https://bentographics.com/wp-content/uploads/2024/03/3_asial-industry-solutions-1536x1025.jpg 1536w, https://bentographics.com/wp-content/uploads/2024/03/3_asial-industry-solutions-2048x1367.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>The industry solutions landing page is catered towards key client industries.</figcaption></figure>
<figure id="attachment_20701" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-20701 size-full" src="https://bentographics.com/wp-content/uploads/2024/03/4_case-studies-listing.jpg" alt="Asial - UI/UX Design, Custom Illustration, Animation and Quality Assurance" width="2880" height="4005" /><figcaption>The case study listing is interspersed with client testimonials.</figcaption></figure>
<figure id="attachment_20705" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-20705 size-full" src="https://bentographics.com/wp-content/uploads/2024/03/6_case-studies-details.jpg" alt="Asial - UI/UX Design, Custom Illustration, Animation and Quality Assurance" width="2880" height="3038" /><figcaption>Case study template covers an overview, challenges, solutions and results supported by hard stats.</figcaption></figure>
<h2>Brand Style Exploration &amp; Style Guide</h2>
<p>As part of the project, there was a need to explore the Asial brand and figure out how it could be smartly incorporated into a UI design. This involved researching and selecting a new font for the brand, as well as developing a visual design system for navigation elements that were derived from its logo.</p>
<img decoding="async" width="2400" height="1260" class="alignnone size-full wp-image-20691 line" src="https://bentographics.com/wp-content/uploads/2024/03/0_asial-digital-style-guide.png" alt="Outtake from the digital style guide for the new Asial UI design." srcset="https://bentographics.com/wp-content/uploads/2024/03/0_asial-digital-style-guide.png 2400w, https://bentographics.com/wp-content/uploads/2024/03/0_asial-digital-style-guide-580x305.png 580w, https://bentographics.com/wp-content/uploads/2024/03/0_asial-digital-style-guide-1280x672.png 1280w, https://bentographics.com/wp-content/uploads/2024/03/0_asial-digital-style-guide-1536x806.png 1536w, https://bentographics.com/wp-content/uploads/2024/03/0_asial-digital-style-guide-2048x1075.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<h2>Visual Concept, Custom Illustrations &amp; Web Animations</h2>
<p>One of the most exciting parts of this project was the development of the visual illustration concept. Initially, we presented 3 directions: </p>
<ul>
<li>Portals</li>
<li>Japanese Craftsmanship</li>
<li>Impossible Objects</li>
</ul>
<p>&#8220;Impossible Objects&#8221; came out on top as the winning concept, but details of the other concepts were also incorporated:</p>
<blockquote><p><strong>Impossible Objects:</strong> Technology is changing the world around us every day, this concept looks at how things might look in the future. Taking a sci-fi angle we can bend the rules of physics and peek in to the science-driven future.</p></blockquote>
<p>In total we created 18 illustrations, 12 icons, and 8 animations for use on the website. The development of the illustrations and animations also involved drafting a compelling storyline for each of them.<br />
An interesting detail is that most of the illustrations cleverly incorporate three orange orbs as a reference to the Asial logo. This is not only visually attractive but also an effective way to reinforce the brand&#8217;s identity.</p>
<figure id="attachment_20858" class="wp-caption alignnone" ><img decoding="async" width="2400" height="1679" src="https://bentographics.com/wp-content/uploads/2024/03/0_asial_illustration_concept.png" alt="Asial - Visual Illustration Concept - Impossible [Future] Objects" class="alignnone size-full wp-image-20858" srcset="https://bentographics.com/wp-content/uploads/2024/03/0_asial_illustration_concept.png 2400w, https://bentographics.com/wp-content/uploads/2024/03/0_asial_illustration_concept-580x406.png 580w, https://bentographics.com/wp-content/uploads/2024/03/0_asial_illustration_concept-1280x895.png 1280w, https://bentographics.com/wp-content/uploads/2024/03/0_asial_illustration_concept-1536x1075.png 1536w, https://bentographics.com/wp-content/uploads/2024/03/0_asial_illustration_concept-2048x1433.png 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>A screenshot of the our illustration concept presentation with 3 different visual directions.</figcaption></figure>
<h2>Lottie/SVG Animations</h2>
<p><script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script></p>
<div class="section">
<figure>
<dotlottie-player src="https://bentographics.com/wp-content/uploads/2024/04/asial_1_HEADER_ver1.json" class="lottie-player" background="#000000"  speed="1" loop autoplay></dotlottie-player><figcaption>A futuristic software development workspace with floating semi-transparent screens operated with smooth touch gestures.</figcaption></figure>
</div>
<div class="section">
<div class="column">
<figure>
<dotlottie-player src="https://bentographics.com/wp-content/uploads/2024/04/asial_3_ABOUT.json"  class="lottie-player" background="#000000"  speed="1"  loop autoplay></dotlottie-player><figcaption>A holographic business card projecting the Asial orbs.</figcaption></figure>
</div>
<div class="column olive">
<figure>
<dotlottie-player src="https://bentographics.com/wp-content/uploads/2024/04/asial_5_PROCESS_AGILE.json"  class="lottie-player" background="#253826"  speed="1"  loop autoplay></dotlottie-player><figcaption>An animated chart to visualize an agile work cycle and feedback loop.</figcaption></figure>
</div>
</div>
<div class="section">
<figure>
<dotlottie-player src="https://bentographics.com/wp-content/uploads/2024/04/asial_7_INDUSTRY.json"  class="lottie-player" background="#000000"  speed="1"  loop autoplay></dotlottie-player><figcaption>An futuristic city with flying cars, floating transport capsules and billboards and holographic projections.</figcaption></figure>
</div>
<div class="section">
<figure>
<dotlottie-player src="https://bentographics.com/wp-content/uploads/2024/04/asial_6_SOLUTIONS.json"  class="lottie-player" background="#000000"  speed="1"  loop autoplay></dotlottie-player><figcaption>Asial as the futuristic do-it-all machine which can help you in areas of AI, IoT, Web Development, industry applications and much more.</figcaption></figure>
</div>
<div class="section">
<div class="column">
<figure>
<dotlottie-player src="https://bentographics.com/wp-content/uploads/2024/04/asial_2_HOW-WE-DO-IT.json"  class="lottie-player" background="#000000"  speed="1"  loop autoplay></dotlottie-player><figcaption>Drones assembling a website, from UI/UX design, coding to infrastructure.</figcaption></figure>
</div>
<div class="column olive">
<figure>
<dotlottie-player src="https://bentographics.com/wp-content/uploads/2024/04/asial_8_FOOTER.json"  class="lottie-player" background="#253826"  speed="1"  loop autoplay></dotlottie-player><figcaption>A future device projecting holographic contact messages.</figcaption></figure>
</div>
</div>
<div class="section">
<figure>
<dotlottie-player src="https://bentographics.com/wp-content/uploads/2024/04/asial_4_PROCESS.json" class="lottie-player" background="#000000"  speed="1" loop autoplay></dotlottie-player><figcaption>The history of user interfaces, from current screen based ones to floating panels to 3D manipulated UI elements.</figcaption></figure>
</div>
<h3>Custom Illustrations</h3>
<div class="section image">
<div class="column">
<figure>
<img decoding="async" width="1416" height="1020" src="https://bentographics.com/wp-content/uploads/2024/04/15_asial_contact_hero.png" alt="Asial - Custom Illustrations - The contact page features an illustration with a helping hand reaching out from the 'tech side.'" class="alignnone size-full wp-image-20824" srcset="https://bentographics.com/wp-content/uploads/2024/04/15_asial_contact_hero.png 1416w, https://bentographics.com/wp-content/uploads/2024/04/15_asial_contact_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/15_asial_contact_hero-1280x922.png 1280w" sizes="(max-width: 1416px) 100vw, 1416px" /><figcaption>Contact page: A helping hand reaching out from the &#8220;tech side.&#8221;</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1704" height="1227" src="https://bentographics.com/wp-content/uploads/2024/04/14_asial_careers_hero.png" alt="Asial - Custom Illustrations - The careers page welcomes potential hires with a space helmet and a journey through uncharted tech adventures." class="alignnone size-full wp-image-20823" srcset="https://bentographics.com/wp-content/uploads/2024/04/14_asial_careers_hero.png 1704w, https://bentographics.com/wp-content/uploads/2024/04/14_asial_careers_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/14_asial_careers_hero-1280x922.png 1280w, https://bentographics.com/wp-content/uploads/2024/04/14_asial_careers_hero-1536x1106.png 1536w" sizes="(max-width: 1704px) 100vw, 1704px" /><figcaption>Careers page: Potential hires are enticed with a space helmet and an exciting journey through tech adventures.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1716" height="1236" src="https://bentographics.com/wp-content/uploads/2024/04/13_asial_industry_manufacturing_hero.png" alt="Asial - Custom Illustrations - The manufacturing page illustration visualizes a assembly machine which is under constant monitoring for refinement and identifying new efficiencies to reduce costs" class="alignnone size-full wp-image-20822" srcset="https://bentographics.com/wp-content/uploads/2024/04/13_asial_industry_manufacturing_hero.png 1716w, https://bentographics.com/wp-content/uploads/2024/04/13_asial_industry_manufacturing_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/13_asial_industry_manufacturing_hero-1280x922.png 1280w, https://bentographics.com/wp-content/uploads/2024/04/13_asial_industry_manufacturing_hero-1536x1106.png 1536w" sizes="(max-width: 1716px) 100vw, 1716px" /><figcaption>Manufacturing industry page: A assembly machine is under constant monitoring for refinements and identifying new efficiencies to reduce costs.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1620" height="1167" src="https://bentographics.com/wp-content/uploads/2024/04/12_asial_industry_education_hero.png" alt="Asial - Custom Illustrations - Education industry page: A new type of notepad device which includes multimedia capabilities." class="alignnone size-full wp-image-20821" srcset="https://bentographics.com/wp-content/uploads/2024/04/12_asial_industry_education_hero.png 1620w, https://bentographics.com/wp-content/uploads/2024/04/12_asial_industry_education_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/12_asial_industry_education_hero-1280x922.png 1280w, https://bentographics.com/wp-content/uploads/2024/04/12_asial_industry_education_hero-1536x1106.png 1536w" sizes="(max-width: 1620px) 100vw, 1620px" /><figcaption>Education industry page: A new type of notepad device which includes multimedia capabilities.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1662" height="1197" src="https://bentographics.com/wp-content/uploads/2024/04/11_asial_industry_finance_hero.png" alt="Asial - Custom Illustrations - Finance Industry page: A Japanese style Bento box (lunch box) is filled delicious 3D financial &#038; stock charts." class="alignnone size-full wp-image-20820" srcset="https://bentographics.com/wp-content/uploads/2024/04/11_asial_industry_finance_hero.png 1662w, https://bentographics.com/wp-content/uploads/2024/04/11_asial_industry_finance_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/11_asial_industry_finance_hero-1280x922.png 1280w, https://bentographics.com/wp-content/uploads/2024/04/11_asial_industry_finance_hero-1536x1106.png 1536w" sizes="(max-width: 1662px) 100vw, 1662px" /><figcaption>Finance Industry page: A Japanese style Bento box (lunch box) is filled delicious 3D financial &#038; stock charts.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1626" height="1173" src="https://bentographics.com/wp-content/uploads/2024/04/10_asial_industry_media_hero.png" alt="Asial - Custom Illustrations - Media Industry page: Future TV broadcast which features interactive choices which path of the story to follow, supported by social media integration." class="alignnone size-full wp-image-20819" srcset="https://bentographics.com/wp-content/uploads/2024/04/10_asial_industry_media_hero.png 1626w, https://bentographics.com/wp-content/uploads/2024/04/10_asial_industry_media_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/10_asial_industry_media_hero-1280x923.png 1280w, https://bentographics.com/wp-content/uploads/2024/04/10_asial_industry_media_hero-1536x1108.png 1536w" sizes="(max-width: 1626px) 100vw, 1626px" /><figcaption>Media Industry page: Future TV broadcast which features interactive choices which path of the story to follow, supported by social media integration.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1533" height="1107" src="https://bentographics.com/wp-content/uploads/2024/04/9_asial_industry_hero.png" alt="Asial - Custom Illustrations - Industry Overview page: Asial can help industries such as finance, manufacturing, education or media visualized as a futuristic city." class="alignnone size-full wp-image-20818" srcset="https://bentographics.com/wp-content/uploads/2024/04/9_asial_industry_hero.png 1533w, https://bentographics.com/wp-content/uploads/2024/04/9_asial_industry_hero-580x419.png 580w, https://bentographics.com/wp-content/uploads/2024/04/9_asial_industry_hero-1280x924.png 1280w" sizes="(max-width: 1533px) 100vw, 1533px" /><figcaption>Industry Overview page: Asial can help industries such as finance, manufacturing, education or media visualized as a futuristic city.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1617" height="1164" src="https://bentographics.com/wp-content/uploads/2024/04/7_asial_solutions_iot_hero.png" alt="Asial - Custom Illustrations - IoT (Internet of Things) Industry page: IoT devices such as an autonomous lawnmower, sprinkler or bird feeder connected by a satellite network." class="alignnone size-full wp-image-20816" srcset="https://bentographics.com/wp-content/uploads/2024/04/7_asial_solutions_iot_hero.png 1617w, https://bentographics.com/wp-content/uploads/2024/04/7_asial_solutions_iot_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/7_asial_solutions_iot_hero-1280x921.png 1280w, https://bentographics.com/wp-content/uploads/2024/04/7_asial_solutions_iot_hero-1536x1106.png 1536w" sizes="(max-width: 1617px) 100vw, 1617px" /><figcaption>IoT (Internet of Things) Industry page: IoT devices such as an autonomous lawnmower, sprinkler or bird feeder connected by a satellite network.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1416" height="1020" src="https://bentographics.com/wp-content/uploads/2024/04/6_asial_solutions_mobile_hero.png" alt="Asial - Custom Illustrations - Mobile Industry page: A future mobile device consisting of projected apps and widget panels." class="alignnone size-full wp-image-20815" srcset="https://bentographics.com/wp-content/uploads/2024/04/6_asial_solutions_mobile_hero.png 1416w, https://bentographics.com/wp-content/uploads/2024/04/6_asial_solutions_mobile_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/6_asial_solutions_mobile_hero-1280x922.png 1280w" sizes="(max-width: 1416px) 100vw, 1416px" /><figcaption>Mobile Industry page: A future mobile device consisting of projected apps and widget panels.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1416" height="1020" src="https://bentographics.com/wp-content/uploads/2024/04/5_asial_solutions_ai_hero.png" alt="Asial - Solutions Page - Custom Illustrations - AI (artificial intelligence) Industry page: A 'data shredder' creates valuable refined datasets from random data strings" class="alignnone size-full wp-image-20814" srcset="https://bentographics.com/wp-content/uploads/2024/04/5_asial_solutions_ai_hero.png 1416w, https://bentographics.com/wp-content/uploads/2024/04/5_asial_solutions_ai_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/5_asial_solutions_ai_hero-1280x922.png 1280w" sizes="(max-width: 1416px) 100vw, 1416px" /><figcaption>AI (artificial intelligence) Industry page: A &#8220;data shredder&#8221; creates valuable refined datasets from random data strings.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1671" height="1203" src="https://bentographics.com/wp-content/uploads/2024/04/8_asial_solutions_monaca-onsen_hero.png" alt="Asial - Custom Illustrations - Monaca &#038; Onsen page: Asial's inhouse development frameworks Monaca &#038; Onsen visualized as futuristic tools in a tool belt." class="alignnone size-full wp-image-20817" srcset="https://bentographics.com/wp-content/uploads/2024/04/8_asial_solutions_monaca-onsen_hero.png 1671w, https://bentographics.com/wp-content/uploads/2024/04/8_asial_solutions_monaca-onsen_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/8_asial_solutions_monaca-onsen_hero-1280x922.png 1280w, https://bentographics.com/wp-content/uploads/2024/04/8_asial_solutions_monaca-onsen_hero-1536x1106.png 1536w" sizes="(max-width: 1671px) 100vw, 1671px" /><figcaption>Monaca &#038; Onsen page: Asial&#8217;s inhouse development frameworks Monaca &#038; Onsen visualized as futuristic tools in a tool belt.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1416" height="1020" src="https://bentographics.com/wp-content/uploads/2024/04/4_asial_solutions_hero.png" alt="Asial - Solutions Page - Custom Illustrations - Solutions Overview page: Asial as a multipurpose miracle machine assisting clients in various areas such as AR, VR, IOT, AI, Mobile/Development and others." class="alignnone size-full wp-image-20813" srcset="https://bentographics.com/wp-content/uploads/2024/04/4_asial_solutions_hero.png 1416w, https://bentographics.com/wp-content/uploads/2024/04/4_asial_solutions_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/4_asial_solutions_hero-1280x922.png 1280w" sizes="(max-width: 1416px) 100vw, 1416px" /><figcaption>Solutions Overview page: Asial as a multipurpose miracle machine assisting clients in various areas such as AR, VR, IOT, AI, Mobile/Development and others.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1442" height="1039" src="https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_icons.png" alt="Asial - Process Page - Custom Illustrationen - Process page: Elements used for an interactive experience to convey the process and workflow of Asial's software development." class="alignnone size-full wp-image-20812" srcset="https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_icons.png 1442w, https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_icons-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_icons-1280x922.png 1280w" sizes="(max-width: 1442px) 100vw, 1442px" /><figcaption>Process page: Elements used for an interactive experience to convey the process and workflow of Asial&#8217;s software development.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1500" height="1080" src="https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_hero.png" alt="Process page: A journey through the history of user interfaces: Current screen based UI, near future: UI with floating semi-transparent floating panels, far future: 3 dimensional interface which can be manipulated." class="alignnone size-full wp-image-20810" srcset="https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_hero.png 1500w, https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_hero-1280x922.png 1280w" sizes="(max-width: 1500px) 100vw, 1500px" /><figcaption>Process page: A journey through the history of user interfaces: Current screen based UI, near future: UI with floating semi-transparent floating panels, far future: 3 dimensional interface which can be manipulated. </figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1428" height="1028" src="https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_agile_diagram.png" alt="Asial - Process Page - Custom Illustrations - Process page: Agile Development Diagram visualized as one iteration or 'loop' of the agile development cycle." class="alignnone size-full wp-image-20809" srcset="https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_agile_diagram.png 1428w, https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_agile_diagram-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/3_asial_process_agile_diagram-1280x921.png 1280w" sizes="(max-width: 1428px) 100vw, 1428px" /><figcaption>Process page: Agile Development Diagram visualized as one iteration or &#8216;loop&#8217; of the agile development cycle.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1493" height="1075" src="https://bentographics.com/wp-content/uploads/2024/04/2_asial_about_hero.png" alt="Asial - About Page: A holographic business card projects the three orange Asial orbs." class="alignnone size-full wp-image-20808" srcset="https://bentographics.com/wp-content/uploads/2024/04/2_asial_about_hero.png 1493w, https://bentographics.com/wp-content/uploads/2024/04/2_asial_about_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/2_asial_about_hero-1280x922.png 1280w" sizes="(max-width: 1493px) 100vw, 1493px" /><figcaption>About Page: A holographic business card projects the three orange Asial orbs.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1416" height="1020" src="https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_how-we-do-it.png" alt="Asial - Homepage - Custom Illustrationen - Homepage: Skill Set and Experience - Drones assembling a website, each one takes care of certain areas such as UI design, software code and infrastructure." class="alignnone size-full wp-image-20807" srcset="https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_how-we-do-it.png 1416w, https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_how-we-do-it-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_how-we-do-it-1280x922.png 1280w" sizes="(max-width: 1416px) 100vw, 1416px" /><figcaption>Homepage: Skill Set and Experience &#8211; Drones assembling a website, each one takes care of certain areas such as UI design, software code and infrastructure.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1416" height="1020" src="https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_hero.png" alt="Asial - Homepage: A future mobile software development workspace with floating panels and operated with smooth touch interactions." class="alignnone size-full wp-image-20806" srcset="https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_hero.png 1416w, https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_hero-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_hero-1280x922.png 1280w" sizes="(max-width: 1416px) 100vw, 1416px" /><figcaption>Homepage: A future mobile software development workspace with floating panels and operated with smooth touch interactions.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1436" height="1035" src="https://bentographics.com/wp-content/uploads/2024/03/1_asial_homepage_company_milestones.png" alt="Asial - " class="alignnone size-full wp-image-20798" srcset="https://bentographics.com/wp-content/uploads/2024/03/1_asial_homepage_company_milestones.png 1436w, https://bentographics.com/wp-content/uploads/2024/03/1_asial_homepage_company_milestones-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/03/1_asial_homepage_company_milestones-1280x923.png 1280w" sizes="(max-width: 1436px) 100vw, 1436px" /><figcaption>Homepage: A company milestone timeline with icons.</figcaption></figure>
</div>
<div class="column">
<figure>
<img decoding="async" width="1623" height="1170" src="https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_contact.png" alt="Asial - Custom Illustrationen - Contact page: A device lost in time projects holographic contact messages." class="alignnone size-full wp-image-20805" srcset="https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_contact.png 1623w, https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_contact-580x418.png 580w, https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_contact-1280x923.png 1280w, https://bentographics.com/wp-content/uploads/2024/04/1_asial_homepage_contact-1536x1107.png 1536w" sizes="(max-width: 1623px) 100vw, 1623px" /><figcaption>Contact page: A device lost in time projects holographic contact messages.</figcaption></figure>
</div>
</div>
<h2>Screencast Walkthrough</h2>
<div class="video-container line" style="padding-top: 0; padding-bottom: 66.5%; background-color: white;"><iframe src="https://www.youtube.com/embed/j7EYWRJP-PQ?autoplay=1&#038;playlist=j7EYWRJP-PQ&#038;loop=1&#038;mute=1" width="1280" height="835" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay;"></iframe></div>
<hr/>
<h3>Testimonial</h3>
<blockquote><p>Asial Corporation is immensely pleased with our collaboration with Bento Graphics for our corporate website development. Their team&#8217;s ability to conceptualize and execute a globally appealing website, while operating from Japan, has been particularly noteworthy. Their international perspective has been crucial in creating a platform that effectively communicates to both our local and global audience.<br />
Bento Graphics stands out for their comprehensive design skills, innovation, seamless communication, and quick responsiveness. These qualities have not only met but surpassed our expectations, making them an ideal partner for any organization looking to develop a globally-oriented web presence without compromising on quality and efficiency.</p>
<p><small>Masahiro Tanaka, CEO, Asial Corporation</small></p></blockquote>
<p>The post <a href="https://bentographics.com/work/asial/">Asial &#8211; Software Development</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Noodling around with the Year of the Dragon 2024</title>
		<link>https://bentographics.com/blog/happy-new-year-of-the-dragon-2024/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Sun, 31 Dec 2023 23:54:15 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=20631</guid>

					<description><![CDATA[<p>Welcome to 2024, the year of the dragon! Wishing our friends, collaborators and clients a happy, healthy and flavourful 2024!</p>
<p>The post <a href="https://bentographics.com/blog/happy-new-year-of-the-dragon-2024/">Noodling around with the Year of the Dragon 2024</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></description>
										<content:encoded><![CDATA[<img decoding="async" width="2560" height="1400" class="alignnone size-full wp-image-20637" src="https://bentographics.com/wp-content/uploads/2023/12/bento_graphics_2024.gif" alt="Happy New Year 2024 - Year of the Dragon" />
<p style="text-align: center;">Welcome to 2024, the year of the dragon! Here&#8217;s to an exciting year, where Udon noodle dragons keep things slurpily delightful. Wishing our friends, collaborators and clients a happy, healthy and flavourful 2024!</p>
<p style="text-align: center;">今年も宜しくおねがいします！</p>
<div style="text-align: center;">
<p style="display: inline-block; letter-spacing: 0.32em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;"><span style="letter-spacing: 0.3em;">二〇二四</span> <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f64c.png" alt="🙌" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
アケオメ <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f432.png" alt="🐲" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
</div>
<p>The post <a href="https://bentographics.com/blog/happy-new-year-of-the-dragon-2024/">Noodling around with the Year of the Dragon 2024</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Rapyuta Robotics</title>
		<link>https://bentographics.com/work/rapyuta-robotics-logistic-automation/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Tue, 14 Nov 2023 06:30:47 +0000</pubDate>
				<category><![CDATA[Dev]]></category>
		<category><![CDATA[Featured]]></category>
		<category><![CDATA[ID]]></category>
		<category><![CDATA[Illus]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[Art Direction]]></category>
		<category><![CDATA[Bilingual Website Setup]]></category>
		<category><![CDATA[Branding]]></category>
		<category><![CDATA[Creative Direction & Ideas]]></category>
		<category><![CDATA[Cross Browser Testing]]></category>
		<category><![CDATA[Elementor Website Builder]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Mobile Device Testing]]></category>
		<category><![CDATA[Multilingual Typography Guideline]]></category>
		<category><![CDATA[Multilingual Website Setup]]></category>
		<category><![CDATA[Performance Optimization]]></category>
		<category><![CDATA[Project Management]]></category>
		<category><![CDATA[Responsive Web Design]]></category>
		<category><![CDATA[SEO Optimization]]></category>
		<category><![CDATA[Server Setup & CMS Installation]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[UI (User Interface Design)]]></category>
		<category><![CDATA[UX (User Experience Design)]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wireframe Design]]></category>
		<category><![CDATA[Wordpress Implementation]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=19480</guid>

					<description><![CDATA[<p>Design and web development of a new bilingual corporate website for Rapyuta Robotics, a leading Tokyo based robotics and automation company.</p>
<p>The post <a href="https://bentographics.com/work/rapyuta-robotics-logistic-automation/">Rapyuta Robotics</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></description>
										<content:encoded><![CDATA[<img decoding="async" width="2400" height="1260" class="alignnone size-full wp-image-20488" src="https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_v2.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" srcset="https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_v2.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_v2-580x305.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_v2-1280x672.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_v2-1536x806.jpg 1536w, https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_v2-2048x1075.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<p>Design and web development of a new bilingual corporate website for Rapyuta Robotics, a leading Tokyo based robotics and automation company.</p>
<h2 style="text-align: left;">Rapyuta Robotics?</h2>
<p><strong>Rapyuta Robotics (<span style="font-size: 90%;">ラピュタロボティクス</span>) </strong>was founded in 2014 by two Indian entrepreneurs. In 2023 it has reached Japan’s top market share of 67.4% with their Pick Assist Autonomous Mobile Robot (PA-AMR). They further extended their robot line-up to an Autonmous Forklift (AFL) and a fully Automated Storage and Retrieval Systems (ASRS) for entire warehouses.<br />
Their success is also based on their innovative and advanced AI rapyuta.io cloud platform. Meanwhile Rapyuta Robotics has increased its head count to 170 members across 4 offices, two in Tokyo, one in India and one in the USA. Numerous top awards and government funding rounds cumulated in a USD 51 Million investment by Goldman Sachs in 2022. In 2023 Rapyuta Robotics won a GOOD DESIGN award for their PA-AMR robot.</p>
<img decoding="async" class="alignnone wp-image-20489 size-full" style="padding: 0 16px;" src="https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_pa-amr-robot.jpg" alt="Rapyuta Robotics PA-AMR Robot" width="2200" height="743" srcset="https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_pa-amr-robot.jpg 2200w, https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_pa-amr-robot-580x196.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_pa-amr-robot-1280x432.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_pa-amr-robot-1536x519.jpg 1536w, https://bentographics.com/wp-content/uploads/2023/06/cover_rapyuta-robotics_pa-amr-robot-2048x692.jpg 2048w" sizes="(max-width: 2200px) 100vw, 2200px" />
<h2 style="text-align: left;">The Works</h2>
<p>Rapyuta Robotics approached Bento Graphics as Tokyo based graphic design, web design and development studio.</p>
<p>Their main goal was to elevate the design and user experience of their bilingual English-Japanese language corporate websites. But specifically they wanted to transition from a restrictive template website to a flexible UI design framework of modules and sections. Something which would allow them to create blog posts and marketing landing pages in a fraction of the time.</p>
<p>To this end we designed a clean modular block framework of functional website sections. These can be swiftly picked, arranged and published as new pages.</p>
<p>The clean interface design emphasizes simplicity, crisp typography and intuitive navigation. We were also responsible for research and selection of a new brand font for their web presence. It has since been incorporated in their corporate brand guidelines.</p>
<p>Another challenge was tackled by successfully migrating all of their existing blog posts and inserting new landing page contents.</p>
<h2 style="text-align: left;">Key Deliverables</h2>
<ol>
<li>Planning, information architecture and wireframing.</li>
<li>Design system and style guide incl. English and Japanese web typography rules.</li>
<li>Design of a modular content block &amp; section framework.</li>
<li>UI/UX design and interaction mock-ups.</li>
<li>Illustration exploration (unused)</li>
<li>Oversight of web development and implementation.</li>
<li>Migration of legacy blog posts and input of new contents.</li>
<li>Quality assurance and cross browser and device testing.</li>
<li>SEO and performance enhancements.</li>
</ol>
<h2 style="text-align: left;">Outcome</h2>
<p>The end result of the project was a modern, intuitive, and user-friendly website that greatly improved the user experience for Rapyuta Robotics’ customers. The new website not only allows for quick and easy updates, but also saved the Rapyuta Robotics marketing team time and resources and ensured that the website remains up-to-date and relevant.</p>
<h3 style="text-align: left;">Website Features</h3>
<ul>
<li>English and Japanese language website versions</li>
<li>Build on content block framework to add pages in minutes</li>
<li>Introduction of robots line-up with features, benefits, timelines</li>
<li>Custom design concepts for immersive product landing pages, often partially animated</li>
<li>Blog section with various filter options.</li>
<li>Case study section and custom template for case study content</li>
<li>Integrated jobs listing via workable.com</li>
<li>Hubspot integration</li>
<li>Robotics Academy with video based learning content (subscriber locked)</li>
</ul>
<p>We are further assisting Rapyuta Robotics with ongoing monthly website maintenance to build new features, renew landing pages, apply security patches or correct browser issues.</p>
<hr />
<h2>Website Style Guide &amp; Modular UI/UX Design Block Framework</h2>
<img decoding="async" class="line alignnone wp-image-20510 size-full" style="border-color: #252525;" src="https://bentographics.com/wp-content/uploads/2023/06/0_rapyuta-robotics-design-system-guideline-ui-ux-design_2500px_40pct_new.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="7611" srcset="https://bentographics.com/wp-content/uploads/2023/06/0_rapyuta-robotics-design-system-guideline-ui-ux-design_2500px_40pct_new.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/0_rapyuta-robotics-design-system-guideline-ui-ux-design_2500px_40pct_new-580x1839.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/0_rapyuta-robotics-design-system-guideline-ui-ux-design_2500px_40pct_new-1280x4059.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/0_rapyuta-robotics-design-system-guideline-ui-ux-design_2500px_40pct_new-484x1536.jpg 484w, https://bentographics.com/wp-content/uploads/2023/06/0_rapyuta-robotics-design-system-guideline-ui-ux-design_2500px_40pct_new-646x2048.jpg 646w" sizes="(max-width: 2400px) 100vw, 2400px" />
<h2>Web Design &amp; Web Development</h2>
<h3>Homepage in English and Japanese</h3>
<img decoding="async" class="alignnone wp-image-20492 size-full" src="https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop_mockup.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="1600" srcset="https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop_mockup.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop_mockup-580x387.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop_mockup-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop_mockup-1536x1024.jpg 1536w, https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop_mockup-2048x1365.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<img decoding="async" class="alignnone wp-image-20493 size-full" src="https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="5231" srcset="https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop-580x1264.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop-1280x2790.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop-705x1536.jpg 705w, https://bentographics.com/wp-content/uploads/2023/06/1_rapyuta-robotics-homepage_desktop-940x2048.jpg 940w" sizes="(max-width: 2400px) 100vw, 2400px" />
<h3>Product Page: PA-AMR R/XL (Pick Assistant Robot)</h3>
<figure id="attachment_20513" class="wp-caption alignnone" ><img decoding="async" class="wp-image-20513 size-full" src="https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_desktop_ja.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="1828" srcset="https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_desktop_ja.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_desktop_ja-580x442.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_desktop_ja-1280x975.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_desktop_ja-1536x1170.jpg 1536w, https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_desktop_ja-2048x1560.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>The PA-AMR landing page design concept uses large beautiful product imagery and is inspired by consumer product landing pages.</figcaption></figure>
<img decoding="async" class="line alignnone wp-image-20580 size-full" src="https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_mobile_ja_new.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="3894" srcset="https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_mobile_ja_new.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_mobile_ja_new-580x941.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_mobile_ja_new-1280x2077.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_mobile_ja_new-947x1536.jpg 947w, https://bentographics.com/wp-content/uploads/2023/06/2_rapyuta-robotics-AMR-PA_mobile_ja_new-1262x2048.jpg 1262w" sizes="(max-width: 2400px) 100vw, 2400px" />
<h3>Product Page: AFL (Autonomous Forklift)</h3>
<img decoding="async" width="2500" height="1812" class="alignnone size-full wp-image-20454" src="https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-japan-automation-autonomous-forklift_ja_mockup.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" srcset="https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-japan-automation-autonomous-forklift_ja_mockup.jpg 2500w, https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-japan-automation-autonomous-forklift_ja_mockup-580x420.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-japan-automation-autonomous-forklift_ja_mockup-1280x928.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-japan-automation-autonomous-forklift_ja_mockup-1536x1113.jpg 1536w, https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-japan-automation-autonomous-forklift_ja_mockup-2048x1484.jpg 2048w" sizes="(max-width: 2500px) 100vw, 2500px" />
<figure id="attachment_20516" class="wp-caption alignnone" ><img decoding="async" class="line wp-image-20516 size-full" style="border-color: #666;" src="https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-autonomous-forklift_desktop_ja.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="3288" srcset="https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-autonomous-forklift_desktop_ja.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-autonomous-forklift_desktop_ja-580x795.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-autonomous-forklift_desktop_ja-1280x1754.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-autonomous-forklift_desktop_ja-1121x1536.jpg 1121w, https://bentographics.com/wp-content/uploads/2023/06/3_rapyuta-robotics-autonomous-forklift_desktop_ja-1495x2048.jpg 1495w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>The landing page design concept for the AFL was based on the red stripe which adorns the automatic forklift. We reused this element throughout the landing page.</figcaption></figure>
<h3>Product Page: ASRS<br />
(Automated Storage and Retrieval Systems)</h3>
<img decoding="async" class="alignnone wp-image-20517 size-full" src="https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja_mockup.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="2133" srcset="https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja_mockup.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja_mockup-580x515.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja_mockup-1280x1138.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja_mockup-1536x1365.jpg 1536w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja_mockup-2048x1820.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<figure id="attachment_20518" class="wp-caption alignnone" ><img decoding="async" class="wp-image-20518 size-full" src="https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="4015" srcset="https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja-580x970.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja-1280x2141.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja-918x1536.jpg 918w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_desktop_ja-1224x2048.jpg 1224w" sizes="(max-width: 2400px) 100vw, 2400px" /><figcaption>The landing page concept for the ASRS is based on the tracking patterns which is used by small robots to navigate &amp; deliver bins deep within the structure.</figcaption></figure>
<img decoding="async" class="alignnone wp-image-20519 size-full" src="https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_mobile_ja.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="4836" srcset="https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_mobile_ja.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_mobile_ja-580x1169.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_mobile_ja-1280x2579.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_mobile_ja-762x1536.jpg 762w, https://bentographics.com/wp-content/uploads/2023/06/4_rapyuta-robotics-asrs_mobile_ja-1016x2048.jpg 1016w" sizes="(max-width: 2400px) 100vw, 2400px" />
<h3>Blog Article Template</h3>
<img decoding="async" class="line alignnone wp-image-20520 size-full" style="border-color: #666;" src="https://bentographics.com/wp-content/uploads/2023/06/5_rapyuta-robotics-blog-article_desktop_en.jpg" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" width="2400" height="2274" srcset="https://bentographics.com/wp-content/uploads/2023/06/5_rapyuta-robotics-blog-article_desktop_en.jpg 2400w, https://bentographics.com/wp-content/uploads/2023/06/5_rapyuta-robotics-blog-article_desktop_en-580x550.jpg 580w, https://bentographics.com/wp-content/uploads/2023/06/5_rapyuta-robotics-blog-article_desktop_en-1280x1213.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/06/5_rapyuta-robotics-blog-article_desktop_en-1536x1455.jpg 1536w, https://bentographics.com/wp-content/uploads/2023/06/5_rapyuta-robotics-blog-article_desktop_en-2048x1940.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />
<h3>Website Screencast</h3>
<div class="video-container line" style="padding-top: 0; padding-bottom: 65.252%; background-color: white;"><iframe src="https://www.youtube.com/embed/OJDSTbkJj4A?autoplay=1&amp;rel=0&amp;mute=1" width="1280" height="835" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<p>&nbsp;</p>
<blockquote><p>Bento Graphics has been an exceptional partner in our journey of website renewal. Their expertise extends beyond mere design; they offer comprehensive monthly support, which has been instrumental in the dynamic growth and evolution of our online presence. Their proficiency in creating an appealing visual system, coupled with their skills in content development and backend maintenance, has proven invaluable.</p>
<p>What sets Bento Graphics apart is their meticulous attention to detail. They have consistently met our needs, efficiently handling a variety of challenging requests.</p>
<p>Their problem-solving skills and willingness to go above and beyond have greatly contributed to enhancing the functionality and aesthetic appeal of our website.</p>
<p><small>Juho Viitasalo, Creative Director<br />
Rapyuta Robotics<small></small></small></p></blockquote>
<p>&nbsp;</p>
<img decoding="async" class="aligncenter size-full wp-image-19045" style="width: 120px; height: auto; margin: 0 auto; display: block;" src="https://bentographics.com/wp-content/uploads/2023/01/rapyuta-robotics_sootball_character.png" alt="Rapyuta Robotics - UI/UX Design, Web Design &amp; Development - Bento Graphics - Tokyo based design studio" />
<p>The post <a href="https://bentographics.com/work/rapyuta-robotics-logistic-automation/">Rapyuta Robotics</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Dignified Professional Network</title>
		<link>https://bentographics.com/work/dignified-professional-network/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Thu, 26 Jan 2023 16:42:47 +0000</pubDate>
				<category><![CDATA[ID]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[Art Direction]]></category>
		<category><![CDATA[Branding]]></category>
		<category><![CDATA[Corporate Identity Design Development & Logo]]></category>
		<category><![CDATA[Creative Direction & Ideas]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Multilingual Typography Guideline]]></category>
		<category><![CDATA[Project Management]]></category>
		<category><![CDATA[Style Guide Manual]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[UI (User Interface Design)]]></category>
		<category><![CDATA[UX (User Experience Design)]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wireframe Design]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=19473</guid>

					<description><![CDATA[<p>The Dignified Professional Network (DPN) hired us for visual identity development and UI/UX design of their new membership site.</p>
<p>The post <a href="https://bentographics.com/work/dignified-professional-network/">Dignified Professional Network</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
<div class='yarpp yarpp-related yarpp-related-rss yarpp-template-list'>
<!-- YARPP List -->
<h3>Related posts:</h3><ol>
<li><a href="https://bentographics.com/work/asial/" rel="bookmark" title="Asial &#8211; Software Development">Asial &#8211; Software Development</a></li>
<li><a href="https://bentographics.com/work/tokyo-cheapo-website-network-redesign-web-design-branding/" rel="bookmark" title="Tokyo Cheapo Redesign">Tokyo Cheapo Redesign</a></li>
<li><a href="https://bentographics.com/work/dele-gaming-accessory-retailer/" rel="bookmark" title="DELE &#8211; Gaming Retailer">DELE &#8211; Gaming Retailer</a></li>
<li><a href="https://bentographics.com/work/atilika-language-ai/" rel="bookmark" title="Atilika | Language + AI">Atilika | Language + AI</a></li>
</ol>
</div>
]]></description>
										<content:encoded><![CDATA[<style>.line {border-color:#D9D6C3 !important;}</style>
<img decoding="async" width="2160" height="1485" src="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_cover_2160.jpg" alt="Dignified Professional Network (志士ネットワーク) - Visual Identity Design (VI/CI), Logo &amp; Design Guideline, UI/UX Design" class="alignnone size-full wp-image-20267" srcset="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_cover_2160.jpg 2160w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_cover_2160-1280x880.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_cover_2160-580x399.jpg 580w" sizes="(max-width: 2160px) 100vw, 2160px" />
<p>Dignified Professional Network (<span style="font-size: 85%">志士ネットワーク</span>) entrusted us with visual identity development and interface design (UI/UX) of their new membership website.</p>
<h2>Client</h2>
<p>The Dignified Professional Network aka DPN is a new kind of business network based on trusted partners in various countries.</p>
<p>Founded in 2021, DPN is a global network of organizations and individuals committed to business collaboration that also contributes to the common good. The members of the network, known as Shishi (<span style="font-size: 85%">志士</span>), are company representatives, private individuals, and public officials who are selected for their integrity, their expertise in diverse professional realms, and their synergies in contributing to the network’s goals.</p>
<img decoding="async" width="2160" height="1401" src="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_concept.png" class="alignnone size-full wp-image-20233" alt="Dignified Professional Network (志士ネットワーク) - Concept (SanPoYoshi, HaPoYoshi, 八方良し, 三方良し)" srcset="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_concept.png 2160w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_concept-1280x830.png 1280w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_concept-580x376.png 580w" sizes="(max-width: 2160px) 100vw, 2160px" />
<p>DPN&#8217;s founding principle is happo-yoshi (<span style="font-size: 85%">八方良し</span>: literally, “good in eight directions”) for the benefit of all. Derived from sanpo-yoshi (<span style="font-size: 85%">三方良し</span>: ”good in three directions&#8221;), a time-honored Japanese approach to business that is &#8220;good for the seller, good for the buyer, and good for society.” Happo-yoshi embraces eight stakeholders: customers, business partners, employees, shareholders, management, local communities, the nation, and society. The aim is to serve the interests of everyone involved. In this sense, happo-yoshi works along lines similar to true “win-win” but recognizes a much broader set of stakeholders.</p>
<h2>The Works</h2>
<p>DPN approached Bento Graphics as Tokyo based graphic design, web design and web development studio. The main goals of their project was the design and development of a visual identity and website interface design (UI/UX) for their new business network.</p>
<h3>Visual Identity Design</h3>
<p>In the first part we developed the visual identity based on DPN’s unique “happo-yoshi” business approach. In their philosophy 8 stakeholders are vital to the successful business liaisons they facilitate.<br />
Based on this we submitted 4 initial logo and branding directions. The winning logo draft features a hexagonal outline which represents the 8 stakeholders. It evokes an image of interpersonal connections of members, as well as the appearance of a Sakura flower, an iconic Japanese symbol. Additionally a branding pattern was derived from the logo which represents continues collaboration with its looping shape.<br />
The color palette and font selection support the overall visual identity with a fresh and modern appearance suitable for a contemporary business network.<br />
The final deliverable is a visual identity guideline with English and Japanese logo versions in various arrangements, color palette, font selection and branding patterns.</p>
<img decoding="async" width="2160" height="2348" src="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_logo_insitu.jpg" alt="Dignified Professional Network (志士ネットワーク) - Visual Identity Design (VI/CI), Logo &amp; Design Guideline" class="alignnone size-full wp-image-20272" srcset="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_logo_insitu.jpg 2160w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_logo_insitu-1280x1391.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_logo_insitu-580x630.jpg 580w" sizes="(max-width: 2160px) 100vw, 2160px" /><img decoding="async" width="2160" height="2160" src="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_logo.png" class="alignnone size-full line wp-image-20229" alt="Dignified Professional Network (志士ネットワーク) - Visual Identity Design (VI/CI), Logo &#038; Design Guideline" srcset="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_logo.png 2160w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_logo-1280x1280.png 1280w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_logo-580x580.png 580w" sizes="(max-width: 2160px) 100vw, 2160px" /><img decoding="async" width="2160" height="1598" src="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_brand-ci-vi-guideline.png" class="alignnone size-full line wp-image-20228" alt="Dignified Professional Network (志士ネットワーク) - Visual Identity Design (VI/CI), Logo &#038; Design Guideline" srcset="https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_brand-ci-vi-guideline.png 2160w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_brand-ci-vi-guideline-1280x947.png 1280w, https://bentographics.com/wp-content/uploads/2023/01/dignified-professional-network_brand-ci-vi-guideline-580x429.png 580w" sizes="(max-width: 2160px) 100vw, 2160px" />
<h3>UI/UX Design</h3>
<p>An important aspect of the bilingual English-Japanese website, apart from introducing the network, is the members only content. To this end, a subscriber lock mechanism was designed. Depending on the login state several new features become available, such as member-only articles, more in-depth stats and opportunities about each participating country, as well as contact option for a dedicated representative for each country.<br />
Initially planning, information architecture and wireframing was carried out to define all core templates. In an second step the final interface design was applied to all templates in Desktop and Mobile screen sizes. Further several key templates were designed with Japanese typography as reference.<br />
For this project the web development was carried out by a third-party selected by the client.</p>
<img decoding="async" width="2160" height="1502" src="https://bentographics.com/wp-content/uploads/2023/01/8_dignified-professional-network-homepage_en_macbook.jpg" alt="Dignified Professional Network (志士ネットワーク) - Visual Identity Design (VI/CI), Logo &amp; Design Guideline, UI/UX Design" class="alignnone size-full wp-image-20280" srcset="https://bentographics.com/wp-content/uploads/2023/01/8_dignified-professional-network-homepage_en_macbook.jpg 2160w, https://bentographics.com/wp-content/uploads/2023/01/8_dignified-professional-network-homepage_en_macbook-1280x890.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/01/8_dignified-professional-network-homepage_en_macbook-580x403.jpg 580w" sizes="(max-width: 2160px) 100vw, 2160px" /><img decoding="async" width="2160" height="3727" src="https://bentographics.com/wp-content/uploads/2023/01/1_dignified-professional-network-homepage_en_ja.jpg" alt="Dignified Professional Network (志士ネットワーク) - Homepage - UI/UX Design, Responsive Web Design" class="alignnone size-full wp-image-20259" srcset="https://bentographics.com/wp-content/uploads/2023/01/1_dignified-professional-network-homepage_en_ja.jpg 2160w, https://bentographics.com/wp-content/uploads/2023/01/1_dignified-professional-network-homepage_en_ja-1280x2209.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/01/1_dignified-professional-network-homepage_en_ja-580x1001.jpg 580w" sizes="(max-width: 2160px) 100vw, 2160px" /><img decoding="async" width="2160" height="3326" src="https://bentographics.com/wp-content/uploads/2023/01/4_dignified-professional-network-pages_mobile.jpg" alt="Dignified Professional Network (志士ネットワーク) - Multiple Pages Layout - UI/UX Design, Mobile, Responsive Design" class="alignnone size-full wp-image-20247" srcset="https://bentographics.com/wp-content/uploads/2023/01/4_dignified-professional-network-pages_mobile.jpg 2160w, https://bentographics.com/wp-content/uploads/2023/01/4_dignified-professional-network-pages_mobile-1280x1971.jpg 1280w, https://bentographics.com/wp-content/uploads/2023/01/4_dignified-professional-network-pages_mobile-580x893.jpg 580w" sizes="(max-width: 2160px) 100vw, 2160px" />
<p>The post <a href="https://bentographics.com/work/dignified-professional-network/">Dignified Professional Network</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
<div class='yarpp yarpp-related yarpp-related-rss yarpp-template-list'>
<!-- YARPP List -->
<h3>Related posts:</h3><ol>
<li><a href="https://bentographics.com/work/asial/" rel="bookmark" title="Asial &#8211; Software Development">Asial &#8211; Software Development</a></li>
<li><a href="https://bentographics.com/work/tokyo-cheapo-website-network-redesign-web-design-branding/" rel="bookmark" title="Tokyo Cheapo Redesign">Tokyo Cheapo Redesign</a></li>
<li><a href="https://bentographics.com/work/dele-gaming-accessory-retailer/" rel="bookmark" title="DELE &#8211; Gaming Retailer">DELE &#8211; Gaming Retailer</a></li>
<li><a href="https://bentographics.com/work/atilika-language-ai/" rel="bookmark" title="Atilika | Language + AI">Atilika | Language + AI</a></li>
</ol>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Hop into the New Year: 2023, the Year of the Rabbit</title>
		<link>https://bentographics.com/blog/happy-new-year-2023-rabbit/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Sun, 01 Jan 2023 01:11:47 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=19916</guid>

					<description><![CDATA[<p>Welcome to 2023, the year of the rabbit! Wishing our friends, collaborators and clients a happy, healthy and flavourful 2023! 今年も宜しくおねがいします！</p>
<p>The post <a href="https://bentographics.com/blog/happy-new-year-2023-rabbit/">Hop into the New Year: &lt;br/&gt;2023, the Year of the Rabbit</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></description>
										<content:encoded><![CDATA[<img decoding="async" class="alignnone size-full wp-image-19999" src="https://bentographics.com/wp-content/uploads/2022/12/bento_graphics_greeting_2023_1600px.gif" alt="Happy New Year 2023 - Year of the Rabbit" />
<p style="text-align: center;">Welcome to 2023, the year of the rabbit! As we say goodbye to the old and hello to the new, let&#8217;s grab life by the chopsticks and make this year a tasty one. Wishing our friends, collaborators and clients a happy, healthy and flavourful 2023!</p>
<p style="text-align: center;">今年も宜しくおねがいします！</p>
<div style="text-align: center;">
<p style="display: inline-block; letter-spacing: 0.32em; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;"><span style="letter-spacing: 0.3em;">二〇二三</span> <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f64c.png" alt="🙌" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
アケオメ <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f430.png" alt="🐰" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
</div>
<p>The post <a href="https://bentographics.com/blog/happy-new-year-2023-rabbit/">Hop into the New Year: &lt;br/&gt;2023, the Year of the Rabbit</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Pipeline &#8211; A Cyber Security Company</title>
		<link>https://bentographics.com/work/pipeline-cyber-security-company/</link>
		
		<dc:creator><![CDATA[Benjamin Thomas]]></dc:creator>
		<pubDate>Fri, 30 Sep 2022 06:00:09 +0000</pubDate>
				<category><![CDATA[ID]]></category>
		<category><![CDATA[UI/UX]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[Art Direction]]></category>
		<category><![CDATA[Branding]]></category>
		<category><![CDATA[Corporate Identity Design Development & Logo]]></category>
		<category><![CDATA[Creative Direction & Ideas]]></category>
		<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Photo Direction]]></category>
		<category><![CDATA[Photoshop Visual Collaging & Image Processing]]></category>
		<category><![CDATA[Project Management]]></category>
		<category><![CDATA[Storytelling]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[UI (User Interface Design)]]></category>
		<category><![CDATA[UX (User Experience Design)]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wireframe Design]]></category>
		<guid isPermaLink="false">https://bentographics.com/?p=19482</guid>

					<description><![CDATA[<p>Fresh new identity design, visual concept and UI/UX design for cyber security company Pipeline. As a Tokyo based branding, UI/UX design and web design studio Pipeline Inc. approached us about revamping their outdated visual identity and web presence. In essence Pipeline is a company which can review your existing data and derive actionable insights and threat intelligence [&#8230;]</p>
<p>The post <a href="https://bentographics.com/work/pipeline-cyber-security-company/">Pipeline &#8211; A Cyber Security Company</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
<div class='yarpp yarpp-related yarpp-related-rss yarpp-template-list'>
<!-- YARPP List -->
<h3>Related posts:</h3><ol>
<li><a href="https://bentographics.com/work/atilika-language-ai/" rel="bookmark" title="Atilika | Language + AI">Atilika | Language + AI</a></li>
<li><a href="https://bentographics.com/work/tokyo-cheapo-website-network-redesign-web-design-branding/" rel="bookmark" title="Tokyo Cheapo Redesign">Tokyo Cheapo Redesign</a></li>
<li><a href="https://bentographics.com/work/asial/" rel="bookmark" title="Asial &#8211; Software Development">Asial &#8211; Software Development</a></li>
<li><a href="https://bentographics.com/work/dele-gaming-accessory-retailer/" rel="bookmark" title="DELE &#8211; Gaming Retailer">DELE &#8211; Gaming Retailer</a></li>
</ol>
</div>
]]></description>
										<content:encoded><![CDATA[<img decoding="async" width="1920" height="1008" class="alignnone size-full wp-image-19797" src="https://bentographics.com/wp-content/uploads/2022/07/1_pipeline-cyber-security_cover_1920-1.jpg" alt="Pipeline - Cyber Security Company - Corporate Identity Design, Branding and UI/UX Design" srcset="https://bentographics.com/wp-content/uploads/2022/07/1_pipeline-cyber-security_cover_1920-1.jpg 1920w, https://bentographics.com/wp-content/uploads/2022/07/1_pipeline-cyber-security_cover_1920-1-1280x672.jpg 1280w, https://bentographics.com/wp-content/uploads/2022/07/1_pipeline-cyber-security_cover_1920-1-580x305.jpg 580w" sizes="(max-width: 1920px) 100vw, 1920px" />
<p class="intro_text">Fresh new identity design, visual concept and UI/UX design for cyber security company Pipeline<em>.</em></p>
<p>As a Tokyo based branding, UI/UX design and web design studio <em>Pipeline Inc.</em> approached us about revamping their outdated visual identity and web presence. In essence Pipeline is a company which can review your existing data and derive actionable insights and threat intelligence from it.</p>
<img decoding="async" width="1920" height="1280" class="alignnone size-full wp-image-19833" src="https://bentographics.com/wp-content/uploads/2022/07/9_pipeline-cyber-security_imagery.jpg" alt="Pipeline - Cyber Security Company - Image Direction" srcset="https://bentographics.com/wp-content/uploads/2022/07/9_pipeline-cyber-security_imagery.jpg 1920w, https://bentographics.com/wp-content/uploads/2022/07/9_pipeline-cyber-security_imagery-1280x853.jpg 1280w, https://bentographics.com/wp-content/uploads/2022/07/9_pipeline-cyber-security_imagery-580x387.jpg 580w" sizes="(max-width: 1920px) 100vw, 1920px" />
<h2>Corporate Identity Design</h2>
<blockquote><p>From raw data to structured data</p></blockquote>
<p>Our key targeting phrases revolved around “review/view data”, “process data”, “extract intelligence” and similar.<span class="Apple-converted-space"> </span></p>
<p>Initially a set of mood boards were prepared to get a feeling for the design direction. After multiple design drafts we settled on the circular eye/iris shape created from bracket characters often found in software code.<span class="Apple-converted-space"> </span>Also the new corporate font &#8211; <em>Neue Machina </em>by foundry PangramPangram &#8211; evokes code and data, but with an organic twist. We completed the corporate identity development with a design guideline for client perusal.</p>
<p>For the brand visuals something impactful and unusual was requested by the client. Staying clear of clichés like virtual assistants with intercoms or tacky 3D cyber networks was a must. From a range of concept ideas the winning one was <em>outer space </em>which coincidentally also matched with <em>cyber space</em>. Additionally we mixed in data noise imagery to achieve a more digital feel.</p>
<img decoding="async" src="https://bentographics.com/wp-content/uploads/2022/07/0_pipeline-cyber-security_visual-corporate-identity-design.png" alt="Pipeline - Cyber Security Company - Corporate Identity Design, Branding and UI/UX Design" />
<img decoding="async" src="https://bentographics.com/wp-content/uploads/2022/07/3_pipeline-cyber-security_cover_1920.jpg" alt="Pipeline - Cyber Security Company - Corporate Identity Design, Branding and UI/UX Design" />
<img decoding="async" src="https://bentographics.com/wp-content/uploads/2022/07/2_pipeline-cyber-security_cover_1920.jpg" alt="Pipeline - Cyber Security Company - Corporate Identity Design, Branding and UI/UX Design" />
<img decoding="async" src="https://bentographics.com/wp-content/uploads/2022/07/10_pipeline-cyber-security_image-photo-direction.jpg" alt="Pipeline - Cyber Security Company - Corporate Identity Design, Branding and UI/UX Design" />
<img decoding="async" src="https://bentographics.com/wp-content/uploads/2022/07/11_pipeline-cyber-security_imagery.jpg" alt="Pipeline - Cyber Security Company - Image Direction" />
<h2>Information Architecture, Wireframing and UI/UX Design</h2>
<p>We agreed on a limited scope of two key templates for the UI/UX design part: Homepage and Page Template. To create a meaningful connection with the new corporate identity we introduced <span class="Apple-converted-space">brand elements </span><span class="Apple-converted-space">such as code </span>brackets<span class="Apple-converted-space"> or logo shapes </span>throughout<span class="Apple-converted-space"> the web </span>layout. As part of the web layout design for desktop and mobile templates we also created interaction mock-ups, a typographic guideline and a visual concept (as mentioned above). The design of other templates and web development was handled on the client side.</p>
<img decoding="async" width="1920" height="1294" class="alignnone size-full wp-image-19800" src="https://bentographics.com/wp-content/uploads/2022/07/4_pipeline-cyber-security_homepage.jpg" alt="" srcset="https://bentographics.com/wp-content/uploads/2022/07/4_pipeline-cyber-security_homepage.jpg 1920w, https://bentographics.com/wp-content/uploads/2022/07/4_pipeline-cyber-security_homepage-1280x863.jpg 1280w, https://bentographics.com/wp-content/uploads/2022/07/4_pipeline-cyber-security_homepage-580x391.jpg 580w" sizes="(max-width: 1920px) 100vw, 1920px" /><img decoding="async" class="alignnone size-full line wp-image-19801" src="https://bentographics.com/wp-content/uploads/2022/07/5_pipeline-cyber-security_homepage.jpg" alt="" width="1920" height="2325" srcset="https://bentographics.com/wp-content/uploads/2022/07/5_pipeline-cyber-security_homepage.jpg 1920w, https://bentographics.com/wp-content/uploads/2022/07/5_pipeline-cyber-security_homepage-1280x1550.jpg 1280w, https://bentographics.com/wp-content/uploads/2022/07/5_pipeline-cyber-security_homepage-580x702.jpg 580w" sizes="(max-width: 1920px) 100vw, 1920px" />
<img decoding="async" class="alignnone size-full line wp-image-19829" src="https://bentographics.com/wp-content/uploads/2022/07/6_pipeline-cyber-security_article.jp_.jpg" alt="Pipeline - Cyber Security Company - Corporate Identity Design, Branding and UI/UX Design" width="1920" height="2325" srcset="https://bentographics.com/wp-content/uploads/2022/07/6_pipeline-cyber-security_article.jp_.jpg 1920w, https://bentographics.com/wp-content/uploads/2022/07/6_pipeline-cyber-security_article.jp_-1280x1550.jpg 1280w, https://bentographics.com/wp-content/uploads/2022/07/6_pipeline-cyber-security_article.jp_-580x702.jpg 580w" sizes="(max-width: 1920px) 100vw, 1920px" />
<img decoding="async" width="1920" height="1080" class="alignnone size-full wp-image-19857" src="https://bentographics.com/wp-content/uploads/2022/07/17_pipeline-cyber-security_imagery.gif" alt="Pipeline - Cyber Security Company - Image Direction" />
<img decoding="async" class="alignnone size-full line wp-image-19822" src="https://bentographics.com/wp-content/uploads/2022/07/6_pipeline-cyber-security_homepage_mobile.jpg" alt="Pipeline - Cyber Security Company - Corporate Identity Design, Branding and UI/UX Design" width="1920" height="4293" srcset="https://bentographics.com/wp-content/uploads/2022/07/6_pipeline-cyber-security_homepage_mobile.jpg 1920w, https://bentographics.com/wp-content/uploads/2022/07/6_pipeline-cyber-security_homepage_mobile-1280x2862.jpg 1280w, https://bentographics.com/wp-content/uploads/2022/07/6_pipeline-cyber-security_homepage_mobile-580x1297.jpg 580w" sizes="(max-width: 1920px) 100vw, 1920px" />
<img decoding="async" class="alignnone size-full line wp-image-19825" src="https://bentographics.com/wp-content/uploads/2022/07/7_pipeline-cyber-security_article.jpg" alt="Pipeline - Cyber Security Company - Corporate Identity Design, Branding and UI/UX Design" width="1920" height="2514" srcset="https://bentographics.com/wp-content/uploads/2022/07/7_pipeline-cyber-security_article.jpg 1920w, https://bentographics.com/wp-content/uploads/2022/07/7_pipeline-cyber-security_article-1280x1676.jpg 1280w, https://bentographics.com/wp-content/uploads/2022/07/7_pipeline-cyber-security_article-580x759.jpg 580w" sizes="(max-width: 1920px) 100vw, 1920px" />
<img decoding="async" width="1920" height="1278" class="alignnone size-full wp-image-19840" src="https://bentographics.com/wp-content/uploads/2022/07/16_pipeline-cyber-security_imagery.jpg" alt="Pipeline - Cyber Security Company - Image Direction" srcset="https://bentographics.com/wp-content/uploads/2022/07/16_pipeline-cyber-security_imagery.jpg 1920w, https://bentographics.com/wp-content/uploads/2022/07/16_pipeline-cyber-security_imagery-1280x852.jpg 1280w, https://bentographics.com/wp-content/uploads/2022/07/16_pipeline-cyber-security_imagery-580x386.jpg 580w" sizes="(max-width: 1920px) 100vw, 1920px" />
<h3>Testimonials</h3>
<blockquote><p>We are glad having received positive client mentions for our work over at Linkedin <a href="https://www.linkedin.com/feed/update/urn:li:activity:6948407205578584064/" target="_blank" rel="noopener noreferrer">here</a> and <a href="https://www.linkedin.com/pulse/introducing-wwwpplnco-allan-w-/" target="_blank" rel="noopener noreferrer">here</a>.</p></blockquote>
<p>The post <a href="https://bentographics.com/work/pipeline-cyber-security-company/">Pipeline &#8211; A Cyber Security Company</a> appeared first on <a href="https://bentographics.com">Bento Graphics - Branding, Graphic Design &amp; Web Design Studio in Tokyo</a>.</p>
<div class='yarpp yarpp-related yarpp-related-rss yarpp-template-list'>
<!-- YARPP List -->
<h3>Related posts:</h3><ol>
<li><a href="https://bentographics.com/work/atilika-language-ai/" rel="bookmark" title="Atilika | Language + AI">Atilika | Language + AI</a></li>
<li><a href="https://bentographics.com/work/tokyo-cheapo-website-network-redesign-web-design-branding/" rel="bookmark" title="Tokyo Cheapo Redesign">Tokyo Cheapo Redesign</a></li>
<li><a href="https://bentographics.com/work/asial/" rel="bookmark" title="Asial &#8211; Software Development">Asial &#8211; Software Development</a></li>
<li><a href="https://bentographics.com/work/dele-gaming-accessory-retailer/" rel="bookmark" title="DELE &#8211; Gaming Retailer">DELE &#8211; Gaming Retailer</a></li>
</ol>
</div>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>

<!-- plugin=object-cache-pro client=phpredis metric#hits=4475 metric#misses=9 metric#hit-ratio=99.8 metric#bytes=1482482 metric#prefetches=331 metric#store-reads=24 metric#store-writes=4 metric#store-hits=346 metric#store-misses=8 metric#sql-queries=25 metric#ms-total=901.98 metric#ms-cache=53.32 metric#ms-cache-avg=1.9750 metric#ms-cache-ratio=5.9 sample#redis-hits=3149786 sample#redis-misses=454938 sample#redis-hit-ratio=87.4 sample#redis-ops-per-sec=12 sample#redis-evicted-keys=315641 sample#redis-used-memory=99558008 sample#redis-used-memory-rss=58712064 sample#redis-memory-fragmentation-ratio=0.6 sample#redis-connected-clients=1 sample#redis-tracking-clients=0 sample#redis-rejected-connections=0 sample#redis-keys=32909 -->
