01. Mobile first, fortfarande

Vi fortsätter sitta allt mindre vid stationära datorer, vilket ökar kraven på webbdesignens tydlighet som i sin tur påverkar övriga trender. Mobile first innebär i kort att formen tas fram med mobila enheter i fokus, och att desktop-versionen blir en variant av mobilversionen.

02. Lättnavigerat och förenklat

När mobiltelefonen blir det medium där designprocessen startar faller det sig naturligt att formen blir mindre komplicerad, både typografi och illustrationer måste fungera även i små format. Dessutom är konsumenterna nu såpass vana vid det avskalade och lättnavigerade att många företag tar med sig estetiken hela vägen in i varumärket.
Ett exempel är det anrika modeföretaget Burberry, som gjort en helomvändning från sin eleganta och rikt dekorerade look till en tidlös linjär typografi. Men det är inte bara Burberry som förenklar, fler och fler företag väljer logotyper skrivna enbart i gemener med en enfärgad minimalistisk logotyp bredvid. Detta gör att många företag oavsett bransch har liknande typografi, från Burberry, till Airbnb, till Spotify.
Dessa mer avskalade och konservativa logotyper ger företag chansen att förändra den grafiska profilen och innehållet utan att behöva ändra själva logotypen. Stilgreppet ger en frihet att leka med uttryck och innehåll och ger upphov till vad vi berättar mer om i ”07. Vågad typografi och kontraster”.

03. User experience: förhållningssättet som håller kunden i handen

Begreppet User experience (UX) handlar om en persons känslor och attityd till en produkt, ett system eller en tjänst. Det handlar också om systemets nytta, hur enkelt det är att använda och dess effektivitet. Vikten av bra UX är i sig inget nytt, men att sätta användaren i fokus känns väldigt 2019 och därför får det en plats på vår trendspaning. När valmöjligheterna för konsumenten hela tiden blir fler, måste målet för en hemsida vara att bli det minst krångliga alternativet. Är utcheckningen av en varukorg för lång eller svår att förstå går kunden helt enkelt till en konkurrent med bättre UX och köper den där.
Bra UX uppstår när alla delar av en hemsida, från grafisk design till användarvänlighet och informationsarkitektur, samspelar med text.
Den trendsäkra produktiva skribenten (/copywritern/nyhetsbrevförfattaren/UX writern) Mattias Åkerbergs senaste nyhetsbrev UX Writing Summarized är det senaste tecknet på att användarens upplevelse av text på internet blir viktigare och att vi kommer se fler visitkort med titeln UX Writer under året.
PS. På Hamrén har vi under hösten uppdaterat våra kunskaper om UX Design via Berghs School of Communication, och vår nyanställda innehållsproducent Malin har koll på UX Writing. Är du också nyfiken på UX? Vi rekommenderar UX Writers Collectives onlinekurs!

04. Avancerad färg och form

Levande färger och drömmiga gradienter i bakgrunder och på objekt fortsätter vara en stor trend även under 2019. Denna trend är tätt sammanbunden både med den 3D-estetik som blivit allt vanligare, men också att kvalitén på våra skärmar blivit bättre vilket också är mer tillåtande när det kommer till färg.

via BrioRom

05. Levande koraller

Färginstitutet (och färgförsäljaren) Pantone har valt året efter den långa sommaren som gav svenskarna klimatångest att namnge sin kulör PANTONE 16-1546 Living coral (levande korall), om det är en pik mot turismen som dödar korallerna är svårt att veta eftersom Pantone inte själva kommenterat det. Kulören kan beskrivas som en energisk och varm orange-rosa med underton av guld. Den är framtagen som en reaktion mot vårt allt mer digitaliserade liv eftersom vi, enligt Pantone, nu söker autentiska och uppslukande erfarenheter för att få en känsla av kontakt och närhet. Färgen ska symbolisera vårt inre behov av optimism och upplyftande aktiviteter. Vi tycker att Pantone satt huvudet på spiken med denna kulör och vårt ökade behov av upplevelser som känns äkta och nära.

via Pantone

06. Rörliga delar

Med bättre uppkoppling både hemma och på jobbet blir det allt vanligare med relativt tungt innehåll, som videor och GIF/SVG-animationer. Även så kallade mikrointeraktioner (MI) som till exempel genomtänka hover-effekter blir vanligare.

via Femme & Fierce

07. Vågad typografi och kontraster

Fler och fler väljer bort bilder till förmån för större rubriker, vilket tillsammans med bättre skärmar gör att den tidigare så ogillade seriffen nu blir allt vanligare på webben. Även om linjära teckensnitt fortsätter vara det självklara valet för brödtext kommer 2019 bli seriff-rubrikens år. Dessutom kommer rubrikerna rent designmässigt kunna breda ut sig på nya vis, 3D-rubriker, metall-liknande effekter och känslan av att texten kan rinna iväg kommer ge kreatörer stor frihet med det visuella uttrycket.

via Mailchimp

Formgivningen kommer kommer alltså under 2019 utmärka sig genom att tilltala sinnet, pigga upp och att den kommer ha ett lekfullt förhållningssätt till färg och form. Dessutom blir kundens behov av äkta och autentiskt bemötande från företag allt större. Att ha en produkt eller tjänst som är toppen räcker inte, kunden vill också redan när de kommer in på hemsidan få en känsla av att den här produkten eller tjänsten är personlig, autentisk och till för just hen. Därför blir också begrepp som UX Writing ett buzzword för 2019.

TL;DR Webbtrender 2019: Målet är att vara lätt att förstå och rolig att titta på.

I slutet av 2017 hoppade vi på Hamrén på XD-tåget, och nu börjar vi göra fler och fler av våra designskisser i programmet. Det blir nu enklare för oss, och våra kunder, att dela och kommunicera kring designskisserna. Tack vare möjligheten att interagera med designskissen och kommentera direkt på specifika element gör det enklare för oss att dela och kommunicera kring designskisser med våra kunder.

Varför underlättar Adobe XD arbetet för Hamrén och för våra kunder?

Fördelarna med designskisser i Adobe XD är flera, men framför allt är det ett enkelt och intuitivt verktyg som låter oss skapa designskisser som efterliknar webbsidor mer än andra skissformat och därför underlättar hela designprocessen.
Flera komponent-bibliotek, så som Bootstrap och Google Material, finns dessutom förinstallerade, eller tillgängliga för nedladdning, vilket banar vägen för snabbare skissarbete.

Ett verktyg med potential

Fortfarande finns en hel del kvar att önska funktionsmässigt, så som fixerade element och hover-effekter, men som skissverktyg håller programmet verkligen måttet. Än så länge har responsen från våra kunder varit positiv, och vi hoppas att det fortsätter i den riktningen!

Även som webbdesigner kan det ibland vara svårt att acceptera att regler som är självklara för tryckt material, inte alltid är lika applicerbara på digital plattformar. Ett av de områden som skiljer sig åt mellan de båda medierna är layout, där tabeller, floats och olika positioneringsproperties lämnar mycket i övrigt att önska – speciellt när det kommer till vertikal positionering.  Det klassiska 12 kolumns-griddet har varit väldigt osmidigt att återskapa på webben. Tills nu!

CSS Grid Layout – ett enklare sätt att layouta på

I mars i år introducerades CSS Grid Layout, och vi på kontoret kända att våra drömmar besannades. Till skillnad från till exempel flexbox – en personlig favorit när det kommer till layout – kan CSS Grid hantera både en X och en Y-axel, samtidigt. Detta innebär att du kan jobba med både rader och kolumner på ett mycket smidigare sätt än tidigare.

CSS Grid för med sig en ny enhet för bredd och höjd, nämligen fraction (fr). En fraction är helt enkelt en del av helheten. Detta möjliggör för responsiv layout, även om pixlar också accepteras som enhet.

Så hur fungerar CSS Grid?

Rent krasst handlar det om ett omslutande element med display: grid; samt ett gäng barn-divar (där det dessutom fungerar jättebra att använda flexbox, för ytterligare layoutmöjligheter!)

Barnen i sig behöver inte komma i ordning eftersom layouten styrs helt i CSS. Detta gör i teorin att du kan ändra grid helt och hållet, utan att behöva gå in och rota i din HTML-struktur, vilket jag tycker är intressant.

Dessutom kan du döpa rader och kolumner, för att lättare hålla isär dem. Du kan se exempel på detta i mitt kodexempel nedan.

Detta är bara några av de många funktioner som CSS Grid för med sig. För komplett förståelse kan jag verkligen rekommendera CSS-tricks kompletta guide till CSS Grid, som innehåller allt du behöver veta. Om du hellre lär dig av en tutorial på YouTube så är den här jättebra.

Ett praktiskt exempel på CSS Grid layout

Jag kodade ihop ett exempel på en tidningsinspirerad layout, bara för att ge er en idé av hur det kan se ut. Du hittar exemplet på CSS Grid på CodePen.

Ett utsnitt av ett kodexempel av CSS Layout Grid. Bilden visar en tidningsartikel med platshållartext. Artikeln använder et 6-kolumnsgrid.

Notera den ändrade element-ordningen i mobilversionen; att bilden ligger ovanför rubriken. Detta har tidigare inte varit möjligt att åstadkomma via CSS.

Webbläsarstöd

CSS Grid stöds i alla större webbläsare för desktop, inklusive IE och Edge. När det kommer till mobila enheter finns stöd i alla de större webbläsarna, utom Opera och Opera Mini. Du kan läsa mer om webbläsarstöd för CSS Grid på caniuse.com.

Hamrén Webbyrå börjar använda CSS Grid direkt

Sammanfattningsvis tycker jag att CSS Grid är ett riktigt spännande tillskott i CSS-djungeln. Framför allt tror jag att CSS Grid är användbart när det kommer till gallerifunktioner eller liknande, där CSS Grid nu möjliggör mer spännande designmöjligheter. Nästa vecka går en av de större projekt vi arbetat på under hösten live, och där kommer du kunna se att vi använt CSS grid för visning av relaterat innehåll, till exempel.

Så, om du själv har en hemsida där du gärna vill efterlikna ”analoga” layoutmetoder, eller om du helt enkelt vill ha ett enklare och framför allt responsivt sätt att visa data i kolumner – då tycker jag verkligen att du ska ta en titt på CSS Grid Layout!

1. Får dina besökare förtroende för ditt företag när de kommer till din hemsida?

Tips: Ett enkelt sätt är att tydligt visa vart ni finns geografiskt och visa bilder från företaget. Visa även bilder på personalen med tydliga namn och kontaktuppgifter. Det visar att ni är ett öppet företag som är enkelt att komma i kontakt med.

2. Inne på en sida som beskriver en produkt eller tjänst, vem ska kunden kontakta om de är intresserade?

Tips: Säljer du exempelvis batteriladdare så på sidan som beskriver batteriladdare visa även en bild och kontaktuppgifter direkt till den personen på ditt företag som bäst kan svara på frågor om just batterladdare. Det uppmanar till kontakt och troligen ett köp.

3. Hur tydligt är det på din sida att man ska kontakta eller köpa från dig?

Tips: Var övertydlig när det gäller att få besökaren att kontakta dig eller att köpa direkt från sidan. Använd inte små subtila länkar som knappt syns utan länkar och knappar som leder till kontakt och köp ska skilja ut sig och vara mycket tydliga.

4. När såg du över och uppdaterade informationen på din hemsida senast?

Tips: Se över innehållet på din sida med jämna mellanrum och se till att informationen är relevant och aktuell. Många gånger kan man hitta innehåll som är flera år gammal och som bara ligger kvar för att fylla ut på en sida … Ta bort det på en gång!

5. Har du kunskap som dina kunder behöver?

Tips: Med största sannolikhet har du kunskap inom ditt område som dina kunder behöver. Exemplet med batteriladdaren i tips 2 ovan, på hemsidan, ge även tips på hur man bäst laddar batterier, vad man ska tänka på med mera. Då skapar du en attraktiv sida som flera kommer länka till. Det är bra även ur sökmotorsynpunkt och du kommer få en bättre placering på exempelvis Google.

6. Vad säger dina befintliga kunder om ditt företag

Tips: Besökare vill se vad andra som har anlitat ditt företag säger och tycker. Var tydlig med en referenssida där du visar namn och bild på personer och företag som anlitat dig. Detta bygger förtroende och kommer få fler av dina besökare att våga prova ditt företag.

Det finns hundratals små saker att tänka på när man bygger en hemsida. Det mesta mynnar ut i att du ska få fler och bra kunder till ditt företag. Är du intresserad av att ta en dialog kring vad som kan förbättras eller göras på din sida så tveka inte att kontakta mig för ett förutsättningslöst första samtal! Hoppas vi hörs! Rickard Hamrén Vd, Hamrén Media AB 070-694 98 92 rickard@hamrenmedia.se

Skulle du ha nytta av att exempelvis låta dina återförsäljare, leverantörer eller kunder handla och samla sina beställningar på nätet istället för att ringa, maila eller skicka in dem på annat sätt? Ni kanske har kunskap, dokument eller andra tillgångar i bolaget som skulle gå att samla och sälja på nätet? Möjligheterna är många när man vrider och vänder på det.

Har du tankar och funderingar på om e-handel i någon form kan vara intressant för er så kontakta oss så hjälps vi åt att se över vilka möjligheter som finns. Vi har haft förmånen att i över 10 år sitta med dessa frågor med kunder från vitt skilda branscher så en diskussion brukar vara mycket givande.

Efter en tid börjar det dåliga samvetet gnaga över att du borde uppdatera hemsidan. Du borde lägga in bilder på de nyanställda eller de nya kundreferenserna men det är fredag och familjen väntar hemma med middagen.

Vi hjälper dig före, under och efter lansering.

Om du känner igen dig i något av det ovanstående så är du inte ensam. Som tur är finns det  en enkel lösning på detta. Vi hjälper dig före, under och efter lansering av din hemsida. Flera av våra kunder nyttjar oss redan på samma sätt som om de har en intern webbansvarig.

Fördelarna är många, du har en och samma kontaktperson hos oss som lär känna ditt företag väl. Du arbetar med en person som kan webben på sina fem fingrar så du kan vara säker på att resultatet blir bra. Vår erfarenhet visar att uppdateringar som kan ta flera dagar att göra internt kan vi i vissa fall göra på någon timme. Du kan alltså spara pengar och fokusera på det du är bra på. Med stor sannolikhet kan du även öka intäkterna med en hemsida som blir levande och professionell, samt uppskattas av Google.

Är det intressant att titta på?

Slå mig en signal eller skicka ett mail så ser vi vilka behov du har och vad vi skulle kunna hjälpa dig med. Självklart är detta helt förutsättningslöst.

Rickard Hamrén
Telefon: 011-400 98 92

Hamrén Media AB

Ord om oss från våra kunder:

”Hamrén Media har från dag ett överträffat våra högt ställda förväntningar. Alltid snabb support och de har levererat högklassig hemsida och grafiska presentationer vilka har drivit vår affär framåt. Vi kan varmt rekommendera Hamrén Media till andra företag.”
Joachim Lindström, VD, iDeal AB

Vi behövde lyfta vår hemsida till en ny och modern nivå, hos Hamrén Media fick vi vad vi önskade samt lite till på grund av deras erfarenhet och engagerade personal.”
Hans Lassbo, VD, MiLi Däck & Service AB

”Hamrén Media ska ha en guldmedalj! Proffsig och kunnig personal.”
Roberto Bonardi, Romabo

”Hamrén media är mycket lyhörda, kvalitativa samt engagerade och har kunnat förverkliga och också utveckla våra design-idéer gällande vår hemsida. Det ger oss en långsiktig trygghet som vi värdesätter och vi kan verkligen rekommendera Hamrén Media!”
Susanne M.Wahlqvist, Informationsdesigner, GAIDA

Behöver du hjälp? Tryck här för att komma till vår support.

support

Redo att starta
ditt projekt?

Har ett projekt i åtanke eller idé som du vill bolla? Hör av dig! Vi ses gärna på en kopp kaffe i Norrköping eller Malmö.