portfolio logo

THE BOULEVARD TATTOO

FULD GRÆNSEFLADE

  • HTML
  • CSS
  • JavaScript
  • UX/UI Design

Gennem UX-research og kundens kravspecifikation udvikler vi en grænseflade, der styrker The Boulevard Tattoos online tilstedeværelse og fremhæver butikkens værdier. Resultatet er en funktionel, intuitiv og visuelt tiltalende brugercentreret grænseflade, der er skabt med HTML, CSS og vanilla JavaScript.

Billede af realisering

UI Design

Min gruppe og jeg brugte Googles design sprint til at skabe de første produkt-skitser, hvor vi over fire dage fokuserede på ét område dagligt og endte med et færdigt mockup.

Skitserne er udviklet baseret på bruger- og kundedata fra kvalitative undersøgelser og standarddata. Disse skitser er omsat til wireframes med fokus på genanvendelige komponenter i tråd med atomic design.

Billede af forside Billede af alt text for teknisk SEO

Efter wireframes laver vi high-fidelity mockups med farver, typografi og indhold fra styleguiden, så grænsefladen fremstår sammenhængende. Genanvendelige komponenter effektiviserer arbejdet på tværs af siderne.

Vi følger vores wireframe, men små justeringer kan føre til afvigelser i mockups. Hero sections skaber visuel vægt og tydeliggør siden for brugerne. Jakob Nielsens 10 usability-principper anvendes gennem hele grænsefladen.

Billede af forside Billede af alt text for teknisk SEO

HTML

Vi opsætter kodemiljøet med en GitHub-template med basal styling og HTML. Vi sikrer semantisk HTML for bedre SEO og tilgængelighed og udfylder meta descriptions, titles, favicons og alt-tekster på alle undersider.

Billede af HTML Struktur

CSS

Vi opsætter CSS-variabler for konsistens i farver, spacing og border-radius, hvilket sikrer en ensartet stil og letter fremtidige ændringer. Utility classes centrerer indholdet på store skærme og gør udviklingen mere effektiv.

CSS variabler

Vi genbruger klasser for at sikre konsistens og følge atomic design-principperne. Layoutet er baseret på display: grid, hvilket giver fleksibilitet ved ændringer i indholdet.

CSS classes CSS classes

Vi bruger media queries til at optimere grænsefladen til mobile viewports, hvor elementer vises i én eller to kolonner. Containerbredden sættes til 90% for at skabe margin til viewportens kant.

Funktion til at tildele styling

JavaScript

Vi bruger JavaScript til funktionalitet, animationer og datahentning fra WordPress API. Funktionen toggleClassScroll animerer elementer, der glider op ved scroll, ved at ændre opacity og position.

funktion til mark as read

Funktionen til popup-chat og hamburger-menuen fanger HTML-elementer med document.querySelector og tilføjer en event listener, der toggler CSS-klasser ved klik, ændrer opacity og muliggør visning og lukning af elementerne.

funktion til mark as read

Vi bruger en funktion til at skifte indhold på to undersider ved klik på tabs. Event listeners tilføjes med et forEach loop, og ved at kalde klikmetoden på tabsBtns[0] simuleres et klik på den første tab for at gøre den aktiv ved sideindlæsning.

funktion til mark as read

Vi bruger funktionen filterProductsByCategory til at tilføje filtreringsmuligheder. Ved klik hentes data-category-id, og funktionens logik filtrerer elementerne baseret på matchende kategorier. Hvis ID'et matcher, vises elementerne, ellers skjules de.

Funktion til at tildele styling

Funktionen fetchKunsterID viser data i HTML ved at udtrække værdier fra JSON-objektet, gemme dem i variabler og opdatere indholdet med innerHTML og template literals. Den kaldes med ID'et for den valgte kunstner.

Funktion til at tildele styling Funktion til at tildele styling

BEGRÆNSINGER

Projektet var tidsbegrænset, og der er muligheder for optimering, som at minimere JavaScript, optimere filstørrelser og komprimere indhold. Ved et kundesamarbejde ville der blive foretaget finjusteringer for at opfylde standarden for en fuld grænseflade.