Webbdesign som håller i flera år
Av CodexierPublicerad 5 min läsning
En företagshemsida byggs om med några års mellanrum, oftast för att den ser omodern ut snarare än för att den slutat fungera. Den kostnaden går att undvika. Det mesta som får en sajt att se gammal ut är en liten uppsättning modeval som lagts ovanpå, medan besluten därunder, om struktur, typografi och hur innehållet läggs upp, knappt ändras. Den här guiden skiljer de två åt så att er nästa sajt fräschas upp i stället för att bytas ut.
Struktur och hierarki
Struktur är ordningen och grupperingen av saker på en sida: vad som är rubrik, vad som hör ihop, vad som kommer först. Den går inte ur modet eftersom den följer hur människor läser, vilket inte har ändrats. En sida där huvudbudskapet är det största elementet, sektionerna är tydligt avgränsade och blicken leds från rubrik till bevis till handling läser likadant i alla epoker. Sajter som ser daterade ut bröt oftast hierarkin för att ge plats åt en trend: tre konkurrerande hjälteelement, rubriker i samma storlek som brödtexten, dekorativa sektioner som trycker ner innehållet. Startsidans ordningsföljd i vår guide till vad som ska finnas på startsidan är ett exempel på struktur som inte går ut.
Läsbar typografi
Typografin är den största delen av varje sida och den del besökarna tillbringar mest tid med. Det är också där de flesta sajter kan förbättras utan omgörning.
| Val | Åldras väl | Dateras snabbt |
|---|---|---|
| Typsnitt | En välgjord sans eller serif med fullt teckenstöd, inklusive å, ä och ö | Displaytypsnitt i brödtext, årets nyhetstypsnitt |
| Brödtextstorlek | Stor nog att läsa på mobil utan att zooma | Liten text för att få plats med mer |
| Radlängd | Ungefär sextio till sjuttiofem tecken | Stycken i full bredd på desktop |
| Radavstånd | Öppet nog att raderna inte nuddar | Tätt för kompakt utseende |
| Antal stilar | Två familjer, några vikter | Fem typsnitt, alla vikter |
| Färg | Mörk neutral text på ljus bakgrund med uppmätt kontrast | Ljusgrå text för att den ser mjuk ut |
Kontrast är mätbart och juridiskt relevant. Se vår guide till profilfärger som klarar kontrastkraven.
Återhållsamhet med effekter
Varje epok har sina effekter: skuggor och blanka knappar ett decennium, platt allt nästa, sedan glasig oskärpa, enorma gradienter, scrollstyrd animation. Var och en ser aktuell ut i ett eller två år och stämplar sedan sajten som tillhörande just det ögonblicket. Effekter kostar dessutom fart och tillgänglighet, vilket är skäl att begränsa dem oavsett mode.
- Använd rörelse för att förklara, inte för att dekorera: en meny som öppnas, ett tillstånd som ändras. Allt som rör sig utan skäl blir det första ni ångrar.
- Håll en accentbehandling för knappar och länkar och använd den konsekvent. Konsekvensen åldras bättre än själva behandlingen.
- Undvik helskärmsfilm och parallax på sidor som finns för att läsas. De är långsamma, distraherande och omisskännligt av sin tid.
- Föredra riktiga foton av riktiga människor och platser framför illustrationsstilar, som dateras snabbt, och framför stockbilder, som aldrig såg ut som ni.
- Respektera användarens inställning för minskad rörelse. Det är både ett tillgänglighetskrav och ett stilla tecken på omsorg.
Innehållet först
En layout som designas innan innehållet finns designas runt platshållartext, och platshållartext har alltid rätt längd. Riktiga rubriker är längre, riktiga listor har sju punkter, riktiga kundcase behöver en tabell. Sajter som åldras väl lades upp för det faktiska innehållet, så de håller ihop även när innehållet ändras.
Skriv först
Utkast till de riktiga sidorna innan designen börjar. Layouten tjänar då texten i stället för att texten klipps för att passa layouten.
Designa komponenterna, inte sidorna
En rubrik, ett stycke, en lista, en tabell, ett kort, ett formulär. Sidor sätts ihop av dem, och nya sidor ärver utseendet utan nytt designarbete.
Lämna plats att växa
En meny som rymmer fem punkter i dag ska fortfarande fungera med åtta. Ett rutnät som fungerar med tre tjänster ska fungera med fyra.
Håll bilderna utbytbara
Foton byts oftare än layouter. Använd konsekventa beskärningar och storlekar så att ett nytt foto glider in utan omgörning.
Fräscha upp utan att göra om
Med ett sunt skelett är en uppfräschning vartannat år ett litet projekt: uppdatera fotona, justera accentfärgen eller knappstilen, byt den enda dekorativa effekten, stram upp texten. Strukturen, typsystemet och komponentuppsättningen står kvar. Det är skillnaden mellan en uppfräschning ni gör på en vecka och en ombyggnad som tar ett kvartal och riskerar sökplaceringarna. En UX-granskning är den vanliga startpunkten: den visar vilka delar som faktiskt kostar förfrågningar och vilka som bara ser ut som sin ålder.
När en ombyggnad ändå är rätt: om strukturen aldrig var sund, plattformen inte underhålls eller sajten inte kan redigeras utan utvecklare rättar ingen uppfräschning det, och det säger vi hellre än att sälja en granskning först. Är ni osäkra på vilken situation ni är i, boka ett kostnadsfritt 15-minuterssamtal och skicka adressen. Svaret syns oftast på några minuters titt.
Vanliga frågor
Hur ofta bör en företagshemsida göras om?
Är strukturen sund behövs en fullständig omgörning sällan oftare än vart femte till sjunde år. En lättare uppfräschning av foton, accentfärger och text vartannat år håller den aktuell däremellan.
Är minimalistisk design samma sak som tidlös design?
Nej. Minimalism är själv en stil och kan se daterad ut när den görs som ett utseende. Tidlös design handlar om hierarki, läsbar typografi och innehållet först, vilket kan vara minimalistiskt eller rikt på detaljer.
Behöver vi ett eget typsnitt?
Sällan. Ett välvalt system- eller öppet typsnitt med fullt stöd för nordiska tecken och flera vikter tjänar de flesta företag i åratal. Eget typsnitt är en varumärkesinvestering som betalar sig först vid en viss storlek.
Kan en gammal sajt fräschas upp i stället för att byggas om?
Ofta, om innehållsstrukturen är rätt och plattformen underhålls. Uppdatera textstorlekar, kontrast, foton och knappar, ta bort daterade effekter och behåll allt annat. Underhålls inte plattformen eller kräver redigering en utvecklare, bygg om.
Ser er sajt äldre ut än den är?
Skicka adressen. På femton minuter säger vi vilka delar som är daterat skinn, vilka som är strukturella och om uppfräschning eller ombyggnad är det ärliga svaret.
Boka ett kostnadsfritt 15-minuterssamtal