CRH Studios

CRH Studios, a three-month academic project for an upper-year web design and development class, focused on analyzing user and client goals of an e-commerce business as well as designing and coding a corresponding responsive website.

As a fictional e-commerce website that sells unique, handcrafted ceramics crafted by two in-house artists, CRH Studios embraces the elegance of a home. The studio curates timeless, high-quality creations, emphasizing its originality while catering to the tastes of clients.

I took part in developing a high-level sitemap for CRH Studios, generating a structure that ensured users could reach their desired destination on the site as quick and efficient as possible. I considered the necessary information users want to know and have access to on each page. Thus, developing corresponding modules to feature under each page along with consistent elements such as the navigation bar and footer.

My design process began with generating wireframes for the product and checkout pages to outline a general structure. I found that taking advantage of the negative space on each page not only generates a minimal feel, but improves the legibility of the content. Proceeding through low-fidelity mockups to high-fidelity, the design process enabled my understanding on the significance of reiterations. Followed with additional feedback from the teaching team and fellow peers, our team gained valuable insight to improve the overall usability and appearance of our website.

Our team decided on a simple sans serif typeface, Karla, to exemplify modernity. Since our website emphasizes the authenticity and uniqueness of ceramics, we chose earth tones that highlight the raw, unglazed material, along with a coral pink accent colour for interactive elements such as buttons, links, and tabs.

After learning the process of the collaborative tool GitHub, our team integrated our coding knowledge in HTML/CSS and Javascript to produce our final website, CRH Studios. I was in charge of coding numerous stylized elements that I lacked familiarity in, which challenged me to explore available resources such as w3schools and Stack Overflow for guidance and further enlightenment.

The key takeaways from this project is the prioritization and considerations of potential users' expectations of web design. As we critically analyze their purpose when accessing specific web content, we can better develop and implement viable yet unique solutions to resolve our encountered problems.

In terms of the design procedure, I learned the value of maintaining consistency across pages and screens to ensure harmonization while improving experience and functionality for users. To learn more about our site elements, explore the style guide here.