Sitrus.ai was looking for website templates for their new AI platform. Each template would function as both a sample project for the AI to reference and as a website for users to make their own. Templates needed to be multiple pages, and feature interactive elements to showcase the platform's capabilities.
Sitrus.ai | 2024
UI/UX | Design | Development
Designer & UX Developer
This work was built with the help of AI to increase the speed of completion and integrate frontend functionality from the Figma design into the completed webpage.
During the strategy meeting the client was clear that they wanted websites that did not feel like basic templates. Although the final website would be used as a template, they wanted the content to look unique as if each was a client piece.
This meant that the templates should avoid basic layouts to avoid a cookie-cutter feeling, and include interactive content.
Having chosen a photography portfolio site from the list of templates needed, I began by researching portfolio sites to see what content was required. Typically these sites included the same sections: gallery, about, services, and contact.
Aside from the content of the websites, I also focused my efforts on finding unique layouts to help inspire me.
Much of this website's design process involved experimenting with layouts. Trying to achieve a balance between functional, eye-catching, and divergent from other sites. Part of this challenge was sectioning off the portions of each page into unique layouts, while still allowing the website to feel cohesive as a whole.
A textured background is used throughout the site to help add visual interest. This helps to create layouts that catch the eye and draw it around the page, helping to break free of the cookie-cutter white background so often seen on websites.
Elements such as the header, footer, cards, and galleries were all created as reusable components for the website. This way the page code itself is kept to a minimum, and the components can be updated in one place that takes effect across all use cases.
The theme toggle in the navbar (provided by the dev team) allows users to swap the site from a light to a dark theme. This meant that all design details had to be carefully balanced for accessibility in both themes.
