Home » portfolio » Colour Tone Value

Colour Tone Value

UI/UX Figma

SASS

Bootstrap

About the project

The Advanced Printing Technology Centre (APTEC), under The Hong Kong Printers Association (HKPA), pioneers the innovative Colour Tone Value (CTV) method for superior printing colour control. CTV is an ISO-recognized standard that enhances consistency and print quality across various printing methods.

Challenges

➤ Project Scope

The client required a modern, bilingual website in English and Chinese to showcase their services and innovations. The key deliverables included:

Designing the Website in Figma: A user-centric, responsive design that effectively communicates APTEC’s technical expertise and innovative solutions.
Developing the Website with Bootstrap: Building a fully responsive website using HTML, CSS, and JavaScript to ensure cross-device compatibility.
Bilingual Support: Implementing English and Chinese languages, allowing seamless toggling for users.

➤ Project Challenges

Bilingual Integration: Ensuring proper alignment, readability, and UX consistency across both languages, especially when handling different character sets.
Technical Precision: Clearly presenting the complex CTV method while maintaining an engaging and user-friendly design.
Responsive Design: Ensuring optimal performance and aesthetics on various screen sizes, from desktops to mobile devices.

Solutions

➤ Solution and Implementation:

Design Phase:
- Developed wireframes and prototypes in Figma based on the client’s branding and content requirements.
- Focused on a clean and professional layout that highlights APTEC’s achievements and technical insights.
Development Phase:
- Utilized Bootstrap to build a responsive front end with clean HTML, CSS, and JavaScript code.
- Implemented language toggle functionality, ensuring both Chinese and English versions were user-friendly and accurately translated.
Testing and Optimization:
- Conducted thorough cross-browser and cross-device testing to ensure consistent performance.
- Optimized load times and navigation flow for an enhanced user experience.

➤ Results

Professional Online Presence: Delivered a modern, bilingual website that effectively communicates APTEC’s services and innovations.
Improved Accessibility: Users from diverse linguistic backgrounds can now access APTEC’s content seamlessly.
Enhanced User Engagement: The responsive and visually appealing design encourages longer site visits and better interaction with the content.

➤ Conclusion

This project not only strengthened my front-end development and bilingual integration skills but also demonstrated my ability to manage technical complexities while delivering an aesthetically pleasing and functional website. The client was highly satisfied with the result, and the website continues to support APTEC’s mission of advancing the printing industry.