Hej AI - Nytt gränssnitt och utvärdering av stilverktyg: En praktisk jämförelse mellan Sass och Tailwind
2025 (Swedish)Independent thesis Basic level (degree of Bachelor), 10 credits / 15 HE credits
Student thesis
Abstract [sv]
Det här projektet gick ut på att förbättra användargränssnittet för Hej AI, en AI-chattjänst som underlättar för företag att enkelt integrera AI i sin verksamhet. Bakgrunden till projektet var att användare på plattformen visade ett behov av ett mobilanpassat gränssnitt med en design mer lik konkurrenternas. Utöver detta syftade projektet också till att jämföra olika metoder för att implementera gränssnittets stil, och därför valdes två populära verktyg: Sass och Tailwind. Det centrala målet med projektet var att bygga ett nytt gränssnitt som möter användarnas behov, samt att undersöka skillnaderna i att utveckla ett användargränssnitt med Sass jämfört med Tailwind i praktiken. Metoden gick ut på att designa och implementera ett nytt användargränssnitt med hjälp av båda verktygen. Jämförelsen baserades på faktorer som utvecklingstid, kodkvalitet, utvecklarupplevelse och skillnader i kodmängd. Resultatet visade att Sass-varianten tog längre tid att implementera och hade en större total kodmängd, men gav mer kontroll för utvecklaren och erbjöd en tydlig separation mellan stil och struktur, vilket underlättar underhåll i större projekt. Tailwind-varianten gick fortare att implementera och resulterade i en mindre kodmängd, men resulterade i en något rörigare struktur. Det är ett verktyg som fungerar bättre för att snabbt komma igång och bygga mindre prototyper. Slutsatsen är att inget av verktygen är perfekt, utan att valet beror på projektets specifika behov.
Abstract [en]
The aim of this project was to improve the user interface of Hej AI, an AI chat application that helps businesses easily integrate AI into their organization. The background of the project was that users on the platform expressed a need for a mobile-friendly user interface with a design more similar to the competitors. In addition, the project aimed to compare different methods for implementing the style of the user interface, which resulted in a comparison between two popular tools: Sass and Tailwind. The primary goal of the project was to build a new user interface that meets the users’ needs and to explore the practical differences between developing a user interface with Sass vs Tailwind. The method involved designing and implementing a new user interface using both tools. The comparison was based on factors such as development time, code quality, developer experience, and differences in code size. The results showed that the Sass version took longer to implement and had a larger overall codebase but offered more control for the developer and a clear separation between style and structure, which is a benefit for maintaining larger and more complex projects. The Tailwind version was quicker to implement and resulted in a smaller codebase but led to a somewhat messier structure. It is a tool that works better for quickly getting started and building smaller prototypes. The conclusion is that neither tool is perfect, and the choice depends on the specific needs of the project.
Place, publisher, year, edition, pages
2025. , p. 34
Keywords [en]
CSS, Sass, Tailwind, UI/UX
Keywords [sv]
CSS, Sass, Tailwind, UI/UX
National Category
Software Engineering
Identifiers
URN: urn:nbn:se:miun:diva-54810Local ID: DT-V25-G3-043OAI: oai:DiVA.org:miun-54810DiVA, id: diva2:1977051
Subject / course
Computer Engineering DT1
Educational program
Computer Science TDATG 180 higher education credits
Supervisors
Examiners
2025-06-252025-06-252025-09-25Bibliographically approved