118 lines
3.1 KiB
Markdown
118 lines
3.1 KiB
Markdown
|
# Design Audit — Sammanfattning för Erik
|
||
|
|
|
||
|
|
**Datum:** 2026-07-06
|
||
|
|
**Scope:** Alla Landvex & quiXzoom sajter
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎯 Huvudfynd
|
||
|
|
|
||
|
|
### 1. EMOJIS — 4 202 st överallt ❌
|
||
|
|
|
||
|
|
**Bryter mot:** Design Constitution (professionell B2B-identitet)
|
||
|
|
|
||
|
|
**Exempel på problem:**
|
||
|
|
- Admin-panel: `🔄 Rotera lösenord`, `⚠️ Anställd slutar`, `🏢 LandveX`, `⚡ QuiXzoom`
|
||
|
|
- Dashboard: `✓ Full AI orchestration`, `❌ Missing feature`
|
||
|
|
- Landing pages: `🚀 Launch`, `📷 Photos`, `🏢 Enterprise`
|
||
|
|
|
||
|
|
**Varför detta är ett problem:**
|
||
|
|
- Ser olika ut på iOS/Android/Windows (ingen kontroll)
|
||
|
|
- Skärmläsare läser "rocket" istället för vad det betyder
|
||
|
|
- Ser oprofessionellt ut för enterprise-kunder
|
||
|
|
- Bryter mot Landvex "Decision Intelligence"-positionering
|
||
|
|
|
||
|
|
**Åtgärd:** Ersätt med SVG-ikoner eller CSS-pseudo-element
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 2. INLINE STYLES — 5 637 st 🎨
|
||
|
|
|
||
|
|
**Bryter mot:** Engineering Constitution (separation of concerns)
|
||
|
|
|
||
|
|
**Konsekvens:**
|
||
|
|
- Omöjligt att ändra tema globalt
|
||
|
|
- Varje element stylas individuellt
|
||
|
|
- Cachning fungerar sämre
|
||
|
|
- Teknisk skuld
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 3. !IMPORTANT — 3 364 st ⚠️
|
||
|
|
|
||
|
|
**Bryter mot:** CSS best practices
|
||
|
|
|
||
|
|
**Konsekvens:**
|
||
|
|
- Specificity hell
|
||
|
|
- Omöjligt att overrida
|
||
|
|
- Visar på dålig CSS-arkitektur
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 4. OGILTIG CSS — `#10007` används 167 ggr
|
||
|
|
|
||
|
|
Detta är en ogiltig hex-färg (5 tecken). Borde vara `#100007` eller `#107`.
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 5. INKONSEKVENT FÄRGPALETT
|
||
|
|
|
||
|
|
**landvex-site:** `#1d1d1f`, `#0066ff`, `#888`, `#0a0a0a`
|
||
|
|
**quixzoom-landing:** iOS-färger (`#34c759`, `#007aff`, `#ff9500`) istället för Landvex-brandfärger
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📊 Statistik per sajt
|
||
|
|
|
||
|
|
| Sajt | Filer | Emojis | Inline Styles | !important | Status |
|
||
|
|
|------|-------|--------|---------------|------------|--------|
|
||
|
|
| landvex-site | 195 | 1 270 | 4 570 | 1 388 | 🔴 |
|
||
|
|
| quixzoom-landing | 46 | 1 355 | 592 | 636 | 🔴 |
|
||
|
|
| landvex-all | 190 | 1 250 | 2 | 1 339 | 🔴 |
|
||
|
|
| quixzoom-market | 327 | 323 | 325 | 1 | 🟡 |
|
||
|
|
| landvex-market | 32 | 4 | 148 | 0 | 🟢 |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## ✅ Rekommendationer
|
||
|
|
|
||
|
|
### Omedelbart (denna vecka)
|
||
|
|
1. **Ta bort alla emojis** — Ersätt med SVG-ikoner
|
||
|
|
2. **Fixa ogiltig hex-färg** `#10007` → `#100007`
|
||
|
|
|
||
|
|
### Kortsiktigt (denna månaden)
|
||
|
|
3. **Standardisera färgpalett** — Definiera CSS-variabler enligt Design Constitution
|
||
|
|
4. **Inför spacing-skala** — 4px base unit
|
||
|
|
5. **Standardisera typografi** — rem-enheter, minimum 12px
|
||
|
|
|
||
|
|
### Medellång sikt (nästa kvartal)
|
||
|
|
6. **Refactor inline styles** → extern CSS
|
||
|
|
7. **Eliminera !important** → bättre specificity-hierarki
|
||
|
|
8. **Konsolidera duplicerade sajter** (landvex-site vs landvex-all)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 🎨 Visuell granskning
|
||
|
|
|
||
|
|
### Landvex.com (live)
|
||
|
|
- ✅ Rent, minimalistiskt
|
||
|
|
- ✅ Konsekvent typografi
|
||
|
|
- ✅ Bra whitespace
|
||
|
|
- ⚠️ "Get in touch"-knappen avrundad, andra knappar inte — inkonsekvent
|
||
|
|
|
||
|
|
### quiXzoom.com (live)
|
||
|
|
- ✅ Mobil-first design
|
||
|
|
- ✅ iPhone-mockup i hero
|
||
|
|
- ⚠️ "Register as a Zoomer"-knappen klippt (texten får inte plats)
|
||
|
|
- ⚠️ Mörk bakgrund på mobil-mockup — konflikt med ljust tema-default
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 📁 Detaljerad rapport
|
||
|
|
|
||
|
|
Full rapport finns i: `design-audit-report.md`
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
*Sammanställt av Bernt — 2026-07-06*
|