Sonic Studios' Website

Initial Planning and Conceptualisation

Sonic Studios, a growing recording studio, provides online access to guitars, musical equipment, and branded merchandise. Its primary audience includes beginner and intermediate musicians, audio engineers, content creators, and independent artists seeking affordable, dependable products. As users search for suitable music gear from a single source, they begin browsing the website. This streamlined, organised platform allows them to purchase everything in one location. The e-commerce setup provides easy access to a wide range of products and facilitates secure, straightforward online transactions. During the studio's development phase, the website supports brand awareness and revenue growth.

Design Decisions and Rationale

With a clean, grid-based layout, the website enables users to quickly scan items and compare options, promoting efficient decision-making and encouraging purchases. (Samara, 2004). The colour palette of black, white, and grey creates a minimal, professional aesthetic often associated with hard rock and heavy metal music. They are enhanced by deeper tones such as navy blue and bordeaux, which add depth and sophistication. Metallic accents in gold and silver add contrast and reinforce a premium, high-quality appearance. Blue, purple, and red, secondary colours, add a high-energy, creative, and slightly mysterious atmosphere. Orange serves as an accent colour, highlighting buttons and badges to create an element prioritisation and improve usability (Salmond and Ambrose, 2013). Typography features Brandon Grotesque for clarity and Gazpacho for product names and prices, establishing visual hierarchy and emphasising important information. An intuitive, straightforward navigation structure makes it easy for users to find products. The mobile-responsive design ensures accessibility and a consistent user experience across all devices (Hay, n.d.).

Technical Challenges and Solutions

A major technical challenge was slow load times and difficulty navigating the Wix editor. Pages and design elements often take time to load, complicating content placement and delaying progress. Finding specific tools within the platform was initially confusing, affecting workflow efficiency. To overcome this, I familiarised myself with the interface using tutorials and regular practice. I also simplified page elements to reduce load demands and worked in smaller sections to better control the layout. This process enhanced both my technical understanding of the platform and my ability to troubleshoot design issues effectively.

Tools and Technologies Used

The website is being built with Wix, which suits e-commerce needs due to its integrated product management tools and responsive design. It allows efficient development without advanced coding skills while supporting structured layouts. During planning, I used Figma to organise ideas visually via a mood board, helping define the brand identity and layout approach. A basic understanding of HTML, CSS, and JavaScript informed decisions related to website structure, styling, and interactivity (Duckett, 2014). JavaScript contributes to dynamic website behaviour and interactive user experiences, complementing Wix’s built-in functionality. Together, these tools contribute to the development of an effective and user-friendly website.

Overall Development Process

The project evolved from an initial concept into a well-structured e-commerce site with a clear focus on product presentation and user experience. Throughout, I improved my design skills in layout organisation, visual hierarchy, and maintaining consistent branding. I also gained a better understanding of creating online product listings and how design influences user interaction. Working with Wix helped me to develop practical technical skills in website creation. In the future, I aim to organise the project more thoroughly from the outset to enhance efficiency, reduce adjustments, and ensure smoother workflow.

Sonic Studios