Flowing in silence,
Fragrant cedar scent,
Cherry blossoms sway,
Cuts through the wood grain.
Blade of the Nokogiri saw,
Swiftly slicing through the wood,
Peaceful, quiet work,
Wood making art come alive.
Introducing Start-up with the ultimate tool for professionals in the precision woodworking industry - traditional Japanese hand saw. The website showcases this specialized tool in a modern, clean and responsive layout. With high-quality images and detailed specifications, website provides visitors with the necessary information they need to make an informed purchase.
Who:
A newcomer in the Japanese wood handsaw market - Nokogiri, needed a website to showcase its unique handcrafted products. Despite producing in small quantities, its reputation for top-notch quality was already well-established.
Why:
The website was developed to attract potential customers and to provide valuable information about Nokogiri's saws. Through the website, the company wanted to establish its brand and increase sales.
Employing the Double Diamond approach can prove invaluable in providing a clear visualization of the design process.
Specifically, it helps identify the optimal point of convergence between research and the decision of when to transition into the creation phase.
The initial user flow design is essential for organizing page content and determining information placement. Rather than overwhelming visitors with numerous pictures and specifications on a single page, creating a main product page is a better approach.
Once the page elements were accepted, they were placed on a low fidelity wireframe where the basic functionality of each element was noted. This served as the foundation for the front-end skeleton. Once the low fidelity wireframe was finalized, a high fidelity wireframe was created, which refined the design and added more detail. The high fidelity wireframe then formed the basis for the final design and development of the website.
*Screenshot of a Interactive html / css Prototype website page, Wireframe Content model
The Design System includes initial styling and descriptions of its components, along with their corresponding code. The primary objective of the Design System was to establish a clear understanding of the website's purpose, the process behind its creation, and the reasoning behind specific design choices.
•
The extended document consists of, among other things, a guide on how to expand the website while maintaining the current layout. It details how to re-use existing elements, code, and components for a redesign in case the layout needs to be changed.
•
This Design System places a greater emphasis on the philosophy guiding the design rather than rigid rules that must be strictly adhered to.
Information architecture a crucial aspect of effectively organizing pages, content, navigation and cms. It plays a vital role in understanding users and ensuring that information is presented in a clear way.
The interactive wireframes were used to test the concept, page elements, navigation, and responsivity. The html/css Interactive wireframes provide a more accurate representation of the final product and allow users to interact with the layout in different device sizes. This enables quick iterations and feedback before investing time in creating actual content.
* Screenshot High Fidelity html / css Wireframe recipe page
Interactive clickable html / css wireframe tested on different devices and resolutions to evaluate Proof of Concept, usability, content copy, imagery responsiveness, WCAG accessibility, and in general responsive layout. Through this testing process, issues can be identified and addressed ensuring that the final design meets the desired objectives and offers a user-friendly experience.
Completing the creative front-end development involves presenting an interactive HTML/CSS/JS prototype that serves simultaneously as a mock-up, template, and ready front-end page.This comprehensive solution is ready for integration with a selected framework, CMS, or back-end, or can be used as a standalone option by going Vanilla and uploading it to the server. With this versatile solution, further development and customization can be easily achieved, ensuring a smooth transition to the next stages of the project.
Design & content choices for this project were as follows;
*Screenshot of a Interactive html / css Prototype website page
Ready to take your project to the next level?
Fill out the form and let's get started.