Glana Draft One
Presenting the Initial Draft of the Rebuilt Glana* Website: A Testament to Dedication and Meticulous Craftsmanship
We are delighted to share the initial draft of the rebuilt Glana* website, a testament to the immense effort and meticulous craftsmanship invested in its creation. While this draft did not progress to the final version due to a change in design personnel, it stands as a powerful representation of our dedication and commitment to delivering excellence.
Project Summary
In this project, we embarked on creating a website based on a design crafted by an inhouse graphic designer. The primary objective was to ensure that the theme incorporated a highly customized design featuring rhombus-shaped categories and terms, closely aligned with the company’s branding, which prominently featured a rhombus design.
We placed great emphasis on capturing the unique essence of the company’s branding through the website’s visual elements. The incorporation of rhombus-shaped categories and terms not only reflected the company’s distinctive brand identity but also added a visually striking and cohesive element to the overall design.
To achieve this, we worked closely with the graphic designer to accurately translate their creative vision into a functional and visually appealing website. Attention was given to every detail, ensuring that the rhombus design elements seamlessly blended with the site’s layout, colors, and typography.
By aligning the website’s design with the company’s branding, we aimed to establish a strong visual identity that resonates with the target audience. The custom design elements, especially the rhombus-shaped categories and terms, serve as a distinctive and memorable representation of the company’s brand.
Technical Approach
In the technical approach for this project, we utilized a starter theme as the foundation for our development process. This allowed us to kickstart the project with a solid base and streamline the overall development workflow.
To ensure a responsive and visually consistent design, we integrated Bootstrap 5, a popular front-end framework. Leveraging the power of Bootstrap, we created a responsive grid system and utilized pre-styled components, resulting in a seamless user experience across various devices.
To optimize the styling process and maintain clean and organized stylesheets, we employed SCSS (Sassy CSS), a CSS preprocessor. SCSS provided advanced features such as variables, nesting, and mixins, enhancing productivity and allowing for more efficient stylesheet management.
Custom taxonomies were implemented to improve the organization and categorization of products and other content. By utilizing custom taxonomies, we enhanced the website’s browsing experience, enabling users to easily find relevant items through intuitive categorization.
For the e-commerce functionality, we customized WooCommerce templates to seamlessly integrate with the overall design and user experience. By modifying templates such as product pages, cart, and checkout, we ensured a consistent and visually appealing shopping journey for customers.
To enhance the flexibility and functionality of the website, we utilized hooks and actions provided by WordPress and WooCommerce. These hooks and actions allowed us to extend the default functionality of the platform, enabling customizations and integrations tailored to the specific needs of the project.
Additionally, we implemented a custom JavaScript “load more” functionality to dynamically load additional products without refreshing the page. This feature enhanced the browsing experience by providing a seamless and uninterrupted product discovery process.
To enable basic filtering functionality, we utilized PHP to develop a filtering system. This system allowed users to refine their search based on specific criteria, providing a more targeted and efficient browsing experience.
By leveraging these technical approaches, including the use of a starter theme, Bootstrap 5, SCSS, custom taxonomies, custom WooCommerce templates, hooks and actions, and custom JavaScript and PHP functionalities, we successfully developed a robust and visually appealing website that meets the specific requirements of the project.
Disclaimer
This portfolio website has been created by Miriam Walsh as a demonstration of web development skills and does not claim ownership of Glana's intellectual property or imply any affiliation with Glana. Any references made to Glana are for illustrative purposes only. For official information about Glana, please visit their official website at glana.ie.