Comprehensive Website for Design Future Academy (DFA)
Crafted as an independent project, this multi-page website for Design Future Academy (DFA) showcases my ability to manage all phases of web development—from concept to execution—delivering a modern, user-friendly platform that reflects DFA's innovative vision and educational excellence.
check code- Client:
- Design Future Academy
- Timeline:
- 3.5 months
- Project Type:
- Solo Independent Project
- Role:
- Web Designer and Developer
- Scope:
- This project involved the complete design and development of a bilingual, multi-page website for Design Future Academy
- Tools:
- WordPress dev, PHP, Figma, Illustrator, HTML5, SCSS, Javascript, Git
Project Overview
I designed and developed a bilingual, multi-page website for Design Future Academy (DFA) using a custom WordPress theme, ensuring a fully tailored and scalable solution. This independent project allowed me to take full ownership of every phase, from initial planning and design to development and deployment. The custom WordPress theme was built from scratch to meet DFA’s specific needs, providing a modern, responsive platform that supports both English and Chinese. This approach ensured a seamless user experience while maintaining a cohesive design that aligns with DFA’s innovative brand identity.
The website serves as a dynamic hub for DFA’s global audience, including prospective students, educators, and design enthusiasts. By leveraging the flexibility of WordPress, I implemented advanced features and a clean, intuitive interface to highlight DFA’s programs, values, and achievements. The result is a professional, bilingual website that not only meets DFA’s goals but also establishes a strong digital presence for their future growth.
Challenges & Goals
Challenges
- Learning and Implementing SCSS
Transitioning from CSS to SCSS was a key challenge. I had to quickly learn SCSS features like nesting, variables, and mixins to create a more organized and maintainable styling system. This shift not only improved code efficiency but also made future updates easier to manage. - Reusable Module Implementation
Creating reusable modules, such as the card-with-icon component, was another hurdle. The module needed to dynamically render data across sections like “Services” and “Why Choose Us.” Initially, the dynamic content didn’t display correctly, requiring multiple debugging sessions. Through persistent testing and adjustments, I resolved the issue, ensuring consistency and functionality across the site. - Permalink Configuration Issue
When the WordPress permalink was set to “Post Name,” the pages failed to display correctly. After researching, inspecting root folder files, and debugging, I identified and fixed the issue. This ensured the website functioned properly with clean, SEO-friendly URLs, enhancing both usability and search engine visibility.
Goals
- Brand Refresh & Redesign
Redesign the old website to refresh DFA’s brand identity, including creating a new logo and implementing a consistent color scheme. The goal was to modernize the visual appeal while maintaining alignment with DFA’s innovative and educational values. - Showcase Services & Programs
Highlight DFA’s services and programs in a clear and engaging way. The website needed to effectively communicate the value of DFA’s offerings, making it easy for users to explore and understand what the academy provides. - User-Centric Design & Business Goals
Design a user-friendly website that achieves both business objectives and user satisfaction. This involved integrating interactive modules like contact forms, CTAs, and mail subscriptions to encourage engagement. Additionally, the FAQ and blog sections were designed to foster seamless communication between users and the company, enhancing trust and accessibility.
Process
Communication
Collaborated with the client to define goals, target audience, and project scope, ensuring alignment with DFA's vision.
Design
Created wireframes and mockups to modernize DFA's brand with a new logo, consistent color scheme, and user-centric layout.
Development
Built a custom WordPress theme using SCSS and reusable modules in local environment, integrating interactive features like contact forms and dynamic content.
Test
Conducted thorough testing to debug issues, ensure responsiveness, and refine functionality based on client feedback.
Deploy
Successfully launched the website, optimized for performance, and provided documentation for easy maintenance.
Features Delivered
- Lightweight & Organized with Reusable Modules
Built for efficiency using reusable modules, ensuring a clean and maintainable codebase. - Custom WordPress Theme
Developed a tailored WordPress theme to meet DFA’s unique needs and brand identity. - Custom Copyright-Free Images & Sharp Icons
Enhanced visual appeal with custom, royalty-free images and high-quality icons. - Business & User-Centric Interactive Sections
Designed engaging features like FAQ, contact forms, and mail subscriptions to drive user interaction and business growth. - Bilingual Website for Global Reach
Supported English and [second language] to cater to a diverse, international audience.
Reflection
This project was a rewarding opportunity to showcase my ability to independently manage a full web development cycle—from concept to deployment. Designing and developing a bilingual, multi-page website for Design Future Academy (DFA) allowed me to refine my skills in custom WordPress theme development, SCSS implementation, and reusable module creation. Overcoming challenges like dynamic content rendering and permalink issues deepened my problem-solving abilities and technical expertise.
The project also highlighted the importance of balancing business goals with user-centric design. By integrating interactive features like contact forms, CTAs, and a bilingual interface, I was able to create a platform that not only reflects DFA’s innovative brand but also engages a global audience effectively. This experience reinforced my passion for creating functional, visually appealing websites that deliver real value to clients and users alike.