Designprotokoll för AINNOVAs tabell och transparenta elipsbollar
Designprotokoll för tabellen
Översikt
Denna tabell används för att visa AINNOVAs prissättning på ett tydligt och organiserat sätt. Den är uppdelad i kategorier (t.ex. "Rådgivning & Utbildning") och visar tjänster, priser och beskrivningar. Tabellen är designad för att vara lättläst, responsiv och interaktiv, med klickbara knappar för varje tjänst.
Färger
Här är de färger som används i tabellen:
Rubriker (översta raden): Mörkblå (#007BBF) med vit text (#FFFFFF).
Rader: Varannan rad är vit (#FFFFFF) och varannan är ljusgrå (#E6EBF1).
Tjänstknappar: Ljusgrön (#9FE754) med mörkgrå text (#333333).
Hover på tjänstknappar: Mörkare grön (#3A8C2D) med vit text (#FFFFFF).
Fokusindikator: Mörkblå (#007BBF).
Beskrivningstext: Mörkgrå (#56585E).
Kategoritext: Mörkgrå (#333333).
Ramar runt celler: Ljusgrå (#D9D9D9).
Rubriktext ovanför tabellen: Ljusgrå bakgrund (#E6EBF1) med mörkgrå text (#333333).
Utseende
Tabellen har en tunn grå ram (#D9D9D9) runt varje cell för att separera innehållet.
Den har en subtil skugga runt hela tabellen för att ge ett lyft från bakgrunden.
Tjänstknapparna i andra kolumnen är rundade (5px hörnradie) och har padding för att se ut som klickbara knappar.
Kategorikolumnen (första kolumnen) har en liten ikon (48x48px på desktop, 40x40px på mobil) med en vit ram och skugga.
En rubriktext ("AINNOVAs prissättning för tjänster och paket (exkl. moms)") visas ovanför tabellen i en ljusgrå ruta (#E6EBF1) med mörkgrå text (#333333).
Text och typografi
Rubriker (översta raden):
Typsnitt: Lato (eller Arial som reserv).
Storlek: 16px på desktop, 14px på mobil.
Färg: Vit (#FFFFFF).
Stil: Versaler och fetstil.
Kategoritext (första kolumnen):
Typsnitt: Montserrat.
Storlek: 16px på desktop, 14px på mobil.
Färg: Mörkgrå (#333333).
Stil: Fetstil.
Tjänstknappar (andra kolumnen):
Typsnitt: Lato (eller Arial som reserv).
Storlek: 20px på desktop, 16px på mobil.
Färg: Mörkgrå (#333333), ändras till vit (#FFFFFF) vid hover.
Stil: Fetstil.
Pris och beskrivning (tredje och fjärde kolumnen):
Typsnitt: Lato (eller Arial som reserv).
Storlek: 16px på desktop, 14px på mobil.
Färg: Mörkgrå (#333333) för pris, något ljusare mörkgrå (#56585E) för beskrivning.
Interaktivitet
Tjänstknappar:
Klickbara knappar som öppnar en länk till tjänstens sida i en ny flik.
Vid hover ändras bakgrunden till mörkare grön (#3A8C2D) och texten blir vit (#FFFFFF).
Vid fokus får knappen en blå ram (#007BBF) runt sig.
Responsivitet:
På desktop och tablet visas alla kolumner (Kategori, Tjänst/paket, Pris, Beskrivning).
På mobil döljs Kategori- och Beskrivningskolumnerna, och tabellen fokuserar på Tjänst/paket och Pris, med en layout som staplar raderna för bättre läsbarhet.
Hur du kan se koden (för nyfikna)
Om du vill titta på koden bakom tabellen för att se hur den är byggd, kan du följa dessa steg. Det är ett enkelt sätt att lära sig mer om hur webbsidor fungerar!
Högerklicka på tabellen:
Om du vill se koden för hela tabellen, högerklicka någonstans på tabellen (t.ex. på en rad eller en cell).
Välj "Inspektera":
När du högerklickar dyker en meny upp. Välj "Inspektera" (på vissa webbläsare kan det heta "Inspektera element").
Detta öppnar webbläsarens utvecklarverktyg, där du kan se både HTML-koden (strukturen) och CSS-koden (stilen) för tabellen.
Obs: Välj inte "Visa sidkälla" – det alternativet visar bara den råa HTML-koden för hela sidan och är svårare att använda för att hitta specifika delar som tabellen. "Inspektera" är bättre eftersom det zoomar in på just den del du klickade på!
Hitta tabellens kod:
I utvecklarverktygen ser du en massa kod. Leta efter <table>taggen – det är starten på tabellen.
Du kan också titta efter klasser som .service-column (för tjänstknapparna), .price-column (för priserna), eller .category-cell (för kategorikolumnerna) för att se hur de är stylade.
Zooma in på en specifik del (valfritt):
Om du bara vill se koden för en viss del av tabellen, t.ex. en tjänstknapp, högerklickar du direkt på den knappen och väljer "Inspektera". Då hoppar utvecklarverktygen direkt till den delen av koden.
Tips: Om du ser en massa kod och det känns rörigt, prova att klicka på små pilar bredvid taggarna i utvecklarverktygen för att "fälla ut" eller "fälla ihop" olika delar. Det gör det lättare att hitta det du letar efter!
Designprotokoll för transparenta ellipsbollar
Översikt
Transparenta elipsbollar används för att visa tjänster eller erbjudanden på ett visuellt tilltalande sätt på AINNOVAs webbplats. De är runda, har en frostad glaseffekt, och alternerar mellan två färger för att skapa variation. Bollarna är responsiva, tillgängliga, och har subtila animationer för att fånga uppmärksamhet.
Färger
Här är de färger som används för elipsbollarna:
Primär: #007BBF (mörkblå) – används för bollar i udda positioner (1, 3) och för fokusindikatorer (outline).
Sekundär: #9FE754 (ljusgrön) – används för bollar i jämna positioner (2, 4).
Text i mörkblå bollar: Vit (#FFFFFF).
Text i ljusgröna bollar: Mörkgrå (#222222).
Hover: Mörkare grön (#3A8C2D) med vit text (#FFFFFF).
Fokusindikator: Mörkblå (#005F9F).
Utseende
Elipsbollarna är runda (border-radius: 50%) och har en frostad glaseffekt.
De alternerar mellan två färger: #007BBF (mörkblå) och #9FE754 (ljusgrön).
Bollarna är 120x120px på desktop och 80x80px på mobil.
De har en subtil pulserande animation för att dra till sig uppmärksamhet.
De har en liten skugga för att ge djup (box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)).
Text och typografi
Text i bollarna:
Typsnitt: Lato (eller Arial som reserv).
Storlek: 18px på desktop, 12px på mobil.
Färg: Mörkgrå (#222222) i ljusgröna bollar, vit (#FFFFFF) i mörkblå bollar, ändras till vit (#FFFFFF) vid hover.
Stil: Fetstil.
Interaktivitet
Elipsbollarna är klickbara och fungerar som länkar som öppnas i en ny flik.
De har en pulserande animation (skalning från 1 till 1.1 och tillbaka) för att fånga uppmärksamhet.
Vid hover ändras bakgrunden till mörkare grön (#3A8C2D) och texten blir vit (#FFFFFF), med en liten skalningseffekt (transform: scale(1.05)).
Vid fokus får de en blå ram (#005F9F) för tillgänglighet.
På mobil staplas bollarna två och två för bättre läsbarhet.
Hur du kan se koden (för nyfikna)
Om du vill titta på koden bakom de transparenta elipsbollarna för att se hur de är byggda, kan du följa dessa steg. Det är ett enkelt sätt att lära sig mer om hur webbsidor fungerar!
Högerklicka på elipsbollarna:
Om du vill se koden för hela sektionen med elipsbollar, högerklicka någonstans i området där bollarna visas (t.ex. mellan två bollar).
Om du bara vill se koden för en enskild elipsboll, högerklicka direkt på den bollen du är intresserad av.
Välj "Inspektera":
När du högerklickar dyker en meny upp. Välj "Inspektera" (på vissa webbläsare kan det heta "Inspektera element").
Detta öppnar webbläsarens utvecklarverktyg, där du kan se både HTML-koden (strukturen) och CSS-koden (stilen) för elipsbollarna.
Obs: Välj inte "Visa sidkälla" – det alternativet visar bara den råa HTML-koden för hela sidan och är svårare att använda för att hitta specifika delar som elipsbollarna. "Inspektera" är bättre eftersom det zoomar in på just den del du klickade på!
Hitta elipsbollarnas kod:
I utvecklarverktygen ser du en massa kod.
Om du högerklickade på hela sektionen, leta efter en <div>tagg med klassen .cta-circles – det är containern som håller alla elipsbollar.
Om du högerklickade på en enskild boll, leta efter en <a>tagg med klassen .cta-circle – det är koden för just den bollen.
Kolla på stilar och animationer (valfritt):
I utvecklarverktygen kan du också se CSS-stilarna till höger (eller längst ner, beroende på webbläsare). Titta efter saker som background-color, border-radius (som gör bollarna runda), eller animation (som styr pulseringseffekten).
Tips: Om du ser en massa kod och det känns rörigt, prova att klicka på små pilar bredvid taggarna i utvecklarverktygen för att "fälla ut" eller "fälla ihop" olika delar. Det gör det lättare att hitta det du letar efter!