selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectorsPhone
selectors landing image

Selectors

Designing and Developing a site to kickstart digital presence

2023

Developer

Selectors is a music and lifestyle company created to encapsulate the love for discovering, sharing and collecting art and music. I joined the team as a freelance designer, developer and project consultant to build out their site and kickstart their digital presence.

Research

Prior to working out the design and visual layout of the site, it was imperative that I gained a good concept of any ideas they had in mind to fully understand their vision. I held many in depth meetings with the team, to share ideas and aims and develop an understanding for the ethos and core passions of the company. In order to portray their values to end users. Following these initial meetings, mood boards were created and competitors were researched, resulting in some base guidelines and leaving me in a good position to structure out the site.

Design

I chose to design the site wireframes using Figma as I have extensive experience with the tool. Using the guidelines and current brand material, I created a colour palette and defined typography styles before fleshing out low-level wireframe designs. I was developing the site in collaboration with the rest of the team, who were themselves building out the other aspects of the company. Which was a new startup and therefore in the early days of development. This meant that I began developing the site before we had fully completed wireframes, as visual assets were still being created but allowed us to test ideas in production before having fully committed to them in the design stage. The designs were reworked many times as the company played around with different ideas before settling on a design the whole team agreed on.

Development

I developed the site in React with Bitbucket as a code repository. I used Netlify to deal with deploying stage and production branches using Node.js and webpack. I utilised the component structure of React to ensure code efficiency and legibility and opted to style the site using the program language Sass. The team wanted the public to be able to join their early supporters list, in order for them to be continually updated. To do this I developed a backend database on Sanity, which I then connected to the frontend site, resulting in the users submissions being sent and stored in the backend dashboard. Once the site visually matched the designs and shared vision, I began building out the interactivity of elements as well as ensuring the responsiveness of all components on various devices and browsers. Lastly, through completing a series of lighthouse reports, I ensured the site was optimised in its performance, SEO and overall best practices.

Result

The whole team at Selectors are incredibly pleased with the end result of the website. Stating it’s left them in a fantastic place to go and build their digital brand and gain a substantial customer base. Working on this project as a sole developer gave me autonomy over the development decisions. This has been a new way of working and brought me valuable experience and opportunities for growth and professional development. In ways that I’d not previously had when working in bigger teams and not in a freelance capacity.

selectors image desktopselectors image mobile

Explore

View Source