Global Japanese software company Asial commissioned us to design their international website presence. The project included the provision of a copywriter, information architecture & wireframing, UI/UX design, custom illustration & web animation, and quality assurance.
About Asial
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.
The Project
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.
Asial’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.
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. 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. 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 & workflow chart.
Information Architecture, Wireframing & UI/UX Design
The homepage with an animated hero section and company milestone timeline below.The homepage template follows a logical sequence introducing Asial, what they do, services & products, recent projects, client credentials and latest news.The process & methodology page explains about Asial’s workflow and features interactive sections and animations.The About page greets the user with an animated holographic business card giving reference to their Japanese roots.The technology solutions landing page explains about Asial’s core software development areas.The industry solutions landing page is catered towards key client industries.The case study listing is interspersed with client testimonials.Case study template covers an overview, challenges, solutions and results supported by hard stats.
Brand Style Exploration & Style Guide
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.
Visual Concept, Custom Illustrations & Web Animations
One of the most exciting parts of this project was the development of the visual illustration concept. Initially, we presented 3 directions:
Portals
Japanese Craftsmanship
Impossible Objects
“Impossible Objects” came out on top as the winning concept, but details of the other concepts were also incorporated:
Impossible Objects: 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.
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. 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’s identity.
A screenshot of the our illustration concept presentation with 3 different visual directions.
Lottie/SVG Animations
A futuristic software development workspace with floating semi-transparent screens operated with smooth touch gestures.
A holographic business card projecting the Asial orbs.
An animated chart to visualize an agile work cycle and feedback loop.
An futuristic city with flying cars, floating transport capsules and billboards and holographic projections.
Asial as the futuristic do-it-all machine which can help you in areas of AI, IoT, Web Development, industry applications and much more.
Drones assembling a website, from UI/UX design, coding to infrastructure.
A future device projecting holographic contact messages.
The history of user interfaces, from current screen based ones to floating panels to 3D manipulated UI elements.
Custom Illustrations
Contact page: A helping hand reaching out from the “tech side.”
Careers page: Potential hires are enticed with a space helmet and an exciting journey through tech adventures.
Manufacturing industry page: A assembly machine is under constant monitoring for refinements and identifying new efficiencies to reduce costs.
Education industry page: A new type of notepad device which includes multimedia capabilities.
Finance Industry page: A Japanese style Bento box (lunch box) is filled delicious 3D financial & stock charts.
Media Industry page: Future TV broadcast which features interactive choices which path of the story to follow, supported by social media integration.
Industry Overview page: Asial can help industries such as finance, manufacturing, education or media visualized as a futuristic city.
IoT (Internet of Things) Industry page: IoT devices such as an autonomous lawnmower, sprinkler or bird feeder connected by a satellite network.
Mobile Industry page: A future mobile device consisting of projected apps and widget panels.
AI (artificial intelligence) Industry page: A “data shredder” creates valuable refined datasets from random data strings.
Monaca & Onsen page: Asial’s inhouse development frameworks Monaca & Onsen visualized as futuristic tools in a tool belt.
Solutions Overview page: Asial as a multipurpose miracle machine assisting clients in various areas such as AR, VR, IOT, AI, Mobile/Development and others.
Process page: Elements used for an interactive experience to convey the process and workflow of Asial’s software development.
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.
Process page: Agile Development Diagram visualized as one iteration or ‘loop’ of the agile development cycle.
About Page: A holographic business card projects the three orange Asial orbs.
Homepage: Skill Set and Experience – Drones assembling a website, each one takes care of certain areas such as UI design, software code and infrastructure.
Homepage: A future mobile software development workspace with floating panels and operated with smooth touch interactions.
Homepage: A company milestone timeline with icons.
Contact page: A device lost in time projects holographic contact messages.
Screencast Walkthrough
Testimonial
Asial Corporation is immensely pleased with our collaboration with Bento Graphics for our corporate website development. Their team’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. 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.
![Asial - Visual Illustration Concept - Impossible [Future] Objects](https://dev.bentographics.com/wp-content/uploads/2024/03/0_asial_illustration_concept.png)
