Veckans hemsida: Growing Together

Veckans hemsida tilldelas idag denna glädjefyllda sida med ett verkligt viktigt budskap.
Michelle och hennes två kollegor har gjort det enkelt  för besökarna att engagera sig i välgörenhetsprojektet med snygg layout, härliga bilder och informativa texter.
Läs mer om hur Michelle gjorde för att skapa hemsidan.
– Mina bästa tips för att göra en snygg hemsida är att ha tålamod och tillåta sig att lägga ner tid på den. Jag började med att skissa upp för hand vilket innehåll jag ville få med och därefter har jag spenderat åtskilliga timmar och dagar på att testa alla funktioner jag kunnat hitta.
Jag tycker att det är väldigt roligt att sitta och pilla med små detaljer och har därför många gånger varit väldigt missnöjd med utseendet, gjort om, fått göra om igen, men tillslut hittat det som passar vår organisation bäst.
Ha med andra ord tålamod och tillåt er att lägga ner tid till smådetaljer.

Den funktion jag tycker bäst om på Hemsida24 är nog hur lätt det är att skapa länkar från både bilder och texter till andra delar av hemsidan. Eftersom vi har kunnat länka bilderna har vi kunnat skapa snygga knappar istället för mängder av textlänkar och på så vis få in fler bilder på hemsidan.
Jag gillar också att man kan retuschera bilderna direkt på hemsidan. Det sparar mycket tid och arbete.

Michelle på Growing Together

Gilla och kommentera gärna på Hemsida24s FaceBook-sida!

Veckans hemsida tilldelas idag denna glädjefyllda sida med ett verkligt viktigt budskap.
Michelle och hennes två kollegor har gjort det enkelt  för besökarna att engagera sig i välgörenhetsprojektet med snygg layout, härliga bilder och informativa texter.
Läs mer om hur Michelle gjorde för att skapa hemsidan.

– Mina bästa tips för att göra en snygg hemsida är att ha tålamod och tillåta sig att lägga ner tid på den. Jag började med att skissa upp för hand vilket innehåll jag ville få med och därefter har jag spenderat åtskilliga timmar och dagar på att testa alla funktioner jag kunnat hitta.
Jag tycker att det är väldigt roligt att sitta och pilla med små detaljer och har därför många gånger varit väldigt missnöjd med utseendet, gjort om, fått göra om igen, men tillslut hittat det som passar vår organisation bäst.
Ha med andra ord tålamod och tillåt er att lägga ner tid till smådetaljer.

Den funktion jag tycker bäst om på Hemsida24 är nog hur lätt det är att skapa länkar från både bilder och texter till andra delar av hemsidan. Eftersom vi har kunnat länka bilderna har vi kunnat skapa snygga knappar istället för mängder av textlänkar och på så vis få in fler bilder på hemsidan.
Jag gillar också att man kan retuschera bilderna direkt på hemsidan. Det sparar mycket tid och arbete.

Michelle på Growing Together

Gilla och kommentera gärna på Hemsida24s FaceBook-sida!

Nio rena hemsidor

Vi gillar avskalade och rena hemsidor – inte bara för att de är snygga, utan också för att de är enkla att använda. En hemsideskapare som lyckas skala bort allt utom det viktigaste har således kommit långt – samtidigt vet du som har försökt att det inte är helt lätt att designa en hemsida som både är enkel och fyller sitt syfte. För att inspirera er har vi tittat närmre på nio lyckade, rena hemsidor.
Designerna på svenska BVD har förstått fördelen med att ha en, stor bild på hemsidans förstasida. Den enkla loggan och avskalade menyraden gör att det företaget ägnar sig åt hamnar helt i fokus.
Enkelhet i sin mest utpräglade form – Tobias Ahlin säger så kort som möjligt vad han gör, och var han delar med sig av sina tankar. Mer än så behövs egentligen inte.
Adam Mann visar hur effektivt det kan vara att sätta ihop bilder med varandra för att skapa en mosaik. Förutom storleken sammanbinds de av små färgdetaljer, som knappt är märkbara men ger sidan en balanserad känsla.
Roy Barbers hemsida är ett utmärkt exempel på hur man använder en bakgrundsfärg, och skapar sitt innehåll helt i vitt. Om den här hemsidan hade haft fler färgdetaljer hade det kunnat se plottrigt ut – nu är det bara enkelt, och snyggt.
Precis som Roy Barber har Lush Type arbetat med en tydlig färg, vit text och vita symboler i kontrast. För ett företag som gör typsnitt och ikoner passar det perfekt.
Made by Vadim är en designer med känsla för det avskalade. Bara för att hemsidan är enkel behöver den dock inte se modern ut – både loggan och texten andas tidigare epoker.
Schweiziska Helvetic Brands hemsida kan först se ganska vanlig ut, men tittar man noga så ser man hur väl man vägt text mot grafik och vita områden. Ingenting är det minsta komplicerat – allt som syns är relevant.
Alastaire Allday är en frilansande copywriter, och det vi gillar med hans avskalade sida är att han valt att fylla sitt vita tomrum med en bild på sig själv. Fördelen att exponera sig på det sättet är att alla ser vem du är, och att det redan känns som att man känner varandra när man kommer in på sidan. Smart!
Är det gråskala, eller är det inte gråskala? Whiteloupe har lyckats skapa en perfekt fotoatmosfär med sin rena, svart-vit-gråa sida. De små färgklickarna som ändå finns ger bara sidan en mer levande touch, samtidigt som fotografiet i mitten ger en retrokänsla till den moderna grafiken.

Vi gillar avskalade och rena hemsidor – inte bara för att de är snygga, utan också för att de är enkla att använda. En hemsideskapare som lyckas skala bort allt utom det viktigaste har således kommit långt – samtidigt vet du som har försökt att det inte är helt lätt att designa en hemsida som både är enkel och fyller sitt syfte. För att inspirera er har vi tittat närmre på nio lyckade, rena hemsidor.

Designerna på svenska BVD har förstått fördelen med att ha en, stor bild på hemsidans förstasida. Den enkla loggan och avskalade menyraden gör att det företaget ägnar sig åt hamnar helt i fokus.

Enkelhet i sin mest utpräglade form – Tobias Ahlin säger så kort som möjligt vad han gör, och var han delar med sig av sina tankar. Mer än så behövs egentligen inte.

Adam Mann visar hur effektivt det kan vara att sätta ihop bilder med varandra för att skapa en mosaik. Förutom storleken sammanbinds de av små färgdetaljer, som knappt är märkbara men ger sidan en balanserad känsla.

Roy Barbers hemsida är ett utmärkt exempel på hur man använder en bakgrundsfärg, och skapar sitt innehåll helt i vitt. Om den här hemsidan hade haft fler färgdetaljer hade det kunnat se plottrigt ut – nu är det bara enkelt, och snyggt.

Precis som Roy Barber har Lush Type arbetat med en tydlig färg, vit text och vita symboler i kontrast. För ett företag som gör typsnitt och ikoner passar det perfekt.

Made by Vadim är en designer med känsla för det avskalade. Bara för att hemsidan är enkel behöver den dock inte se modern ut – både loggan och texten andas tidigare epoker.

Schweiziska Helvetic Brands hemsida kan först se ganska vanlig ut, men tittar man noga så ser man hur väl man vägt text mot grafik och vita områden. Ingenting är det minsta komplicerat – allt som syns är relevant.

Alastaire Allday är en frilansande copywriter, och det vi gillar med hans avskalade sida är att han valt att fylla sitt vita tomrum med en bild på sig själv. Fördelen att exponera sig på det sättet är att alla ser vem du är, och att det redan känns som att man känner varandra när man kommer in på sidan. Smart!

Är det gråskala, eller är det inte gråskala? Whiteloupe har lyckats skapa en perfekt fotoatmosfär med sin rena, svart-vit-gråa sida. De små färgklickarna som ändå finns ger bara sidan en mer levande touch, samtidigt som fotografiet i mitten ger en retrokänsla till den moderna grafiken.

De senaste färgtrenderna inom webbdesign

Visst är det tråkigt när hösten närmar sig med stormsteg – men samtidigt innebär ju sommarens slut att man har både tid och energi åt att förnya sin hemsida. Varför inte börja med lägga till nya färger? Här tittar vi på tre av årets tydligaste färgtrender inom webbdesign, med inspirerande exempel. 
En grå bakgrund är ett tidlöst knep för att göra en hemsida lättnavigerad och lättläst. Med några färggranna detaljer ser sidan minimalistisk men ändå spännande ut. Det är också ett bra sätt att dra ögat till det som är viktigt: länkar eller knappar som ska synas bra.
Under the weather
Pastellfärger är på väg tillbaka, inte bara på webben. Fler och fler har börjat se fördelarna med att undvika starka färger – att designa hemsidor med en mer blygsam palett fungerar oväntat bra på skärmar och ger en snygg retrokänsla. 
Izumi
The Goodetime gals
Den som inte vill designa sin hemsida med matta färger kan välja spektrats motsatta sida – starka neonfärger. Visst finns det en risk att sidan ser skrikig ut, men om du använder dina neonfärger på ett smart sätt kommer din hemsida att stå ut på ett häftigt sätt.
Rogge & Pott design
Pollen London

Visst är det tråkigt när hösten närmar sig med stormsteg – men samtidigt innebär ju sommarens slut att man har både tid och energi åt att förnya sin hemsida. Varför inte börja med lägga till nya färger? Här tittar vi på tre av årets tydligaste färgtrender inom webbdesign, med inspirerande exempel. 

En grå bakgrund är ett tidlöst knep för att göra en hemsida lättnavigerad och lättläst. Med några färggranna detaljer ser sidan minimalistisk men ändå spännande ut. Det är också ett bra sätt att dra ögat till det som är viktigt: länkar eller knappar som ska synas bra.

Under the weather

Pastellfärger är på väg tillbaka, inte bara på webben. Fler och fler har börjat se fördelarna med att undvika starka färger – att designa hemsidor med en mer blygsam palett fungerar oväntat bra på skärmar och ger en snygg retrokänsla. 

Izumi

The Goodetime gals

Den som inte vill designa sin hemsida med matta färger kan välja spektrats motsatta sida – starka neonfärger. Visst finns det en risk att sidan ser skrikig ut, men om du använder dina neonfärger på ett smart sätt kommer din hemsida att stå ut på ett häftigt sätt.

Rogge & Pott design

Pollen London

7 snygga typsnitt som kan laddas ned gratis

Få saker lyfter en hemsidas design så mycket som snygga och passande typsnitt. Här har vi samlat några utvalda typsnitt som vi tycker om – och som går att ladda ned gratis.
Ladda ner VersaLadda ner AleoLadda ner CanterLadda ner Calendas PlusLadda ner IdealistLadda ner PalacioLadda ner Sintony

Få saker lyfter en hemsidas design så mycket som snygga och passande typsnitt. Här har vi samlat några utvalda typsnitt som vi tycker om – och som går att ladda ned gratis.

Ladda ner Versa

Ladda ner Aleo

Ladda ner Canter

Ladda ner Calendas Plus

Ladda ner Idealist

Ladda ner Palacio

Ladda ner Sintony

Förbättra din hemsidas design på 15 minuter

Här berättar vi om fem saker du kan göra för att förbättra designen på din hemsida, som var för sig tar mindre än femton minuter.Det har sagts förut, men tål att sägas igen: typsnitten är grunden för en bra webbdesign. För att få en snygg sida rekommenderar vi att du använder enkla, klassiska och rena typsnitt. Helvetica är ett av världens mest använda typsnitt och fungerar utmärkt för både mer eller mindre formella hemsidor. Även Verdana är ett säkert val, och Garamond är ett tips för den som vill ha en mer elegant design. Att byta typsnitt på dina texter och rubriker går snabbt, och kan på ett ögonblick göra din hemsida snyggare.Ett bra sätt att förvandla en platt, livlös hemsida till någonting roligare är att lägga till en bakgrundsbild. Använd en egen bild eller ladda ner en bild från exempelvis Amazing Textures eller Background City för att ge din hemsida en ny look.
Har du en hemsida som är överfull av bilder, knappar och block? Testa att ta bort två, tre saker på varje sida som du tycker är mindre viktiga. Kasta ut det onödiga helt enkelt – den där bilden som du kanske inte gillar eller ett textblock som inte innehåller viktig information. Som att rensa ur ett rum för att göra det renare och enklare alltså.Förvandla din hemsida till någonting helt nytt genom att byta ut hemsidans färger. Om du är vågad går du på känsla – testa lite olika kombinationer tills du hittar någonting intressant. Annars kan du alltid ta inspiration från existerande färgteman, som du bland annat kan hitta på Color Scheme Designer. 
Längst upp på din sida har du troligtvis en logga eller logotyp, och också kanske en bild. Om inte kan det vara en bra idé för att få mer att hända på din sida: leta efter en snygg bild och lägg in den i din toppmeny. Det går snabbt och ger hela hemsidan mer energi.

Här berättar vi om fem saker du kan göra för att förbättra designen på din hemsida, som var för sig tar mindre än femton minuter.

Det har sagts förut, men tål att sägas igen: typsnitten är grunden för en bra webbdesign. För att få en snygg sida rekommenderar vi att du använder enkla, klassiska och rena typsnitt. Helvetica är ett av världens mest använda typsnitt och fungerar utmärkt för både mer eller mindre formella hemsidor. Även Verdana är ett säkert val, och Garamond är ett tips för den som vill ha en mer elegant design. Att byta typsnitt på dina texter och rubriker går snabbt, och kan på ett ögonblick göra din hemsida snyggare.

Ett bra sätt att förvandla en platt, livlös hemsida till någonting roligare är att lägga till en bakgrundsbild. Använd en egen bild eller ladda ner en bild från exempelvis Amazing Textures eller Background City för att ge din hemsida en ny look.

Har du en hemsida som är överfull av bilder, knappar och block? Testa att ta bort två, tre saker på varje sida som du tycker är mindre viktiga. Kasta ut det onödiga helt enkelt – den där bilden som du kanske inte gillar eller ett textblock som inte innehåller viktig information. Som att rensa ur ett rum för att göra det renare och enklare alltså.

Förvandla din hemsida till någonting helt nytt genom att byta ut hemsidans färger. Om du är vågad går du på känsla – testa lite olika kombinationer tills du hittar någonting intressant. Annars kan du alltid ta inspiration från existerande färgteman, som du bland annat kan hitta på Color Scheme Designer

Längst upp på din sida har du troligtvis en logga eller logotyp, och också kanske en bild. Om inte kan det vara en bra idé för att få mer att hända på din sida: leta efter en snygg bild och lägg in den i din toppmeny. Det går snabbt och ger hela hemsidan mer energi.

Tänk utanför skärmen: 4 unika hemsidor att inspireras av

Varje dag fångas vår blick av tusentals intryck. Ett fåtal av dessa fastnar – de allra flesta gör det inte. Så vad är det där speciella som får oss att stanna upp och titta efter lite extra? Vi har besökt fyra hemsidor som har använt material och tekniker vi inte är vana vid för att skapa orginell och spännande design.Att designa en hemsida är dels att försöka skapa en överblickbar och lättanvänd plattform för besökaren: här ska man kunna hitta det man letar efter. Men utöver det finns det också en rent estetisk faktor, att man ska visa upp någonting vackert att se på. Lyckas man skapa en snygg hemsida som också sticker ut från mängden är chansen stor att människor stannar längre bara för att titta på den, eller delar med sig av den till vänner och bekanta.
 
Här är fyra hemsidesskapare som använt sig av papper, trä, textil och mat (!) för att förstärka sitt budskap.www.wingcheng.com
 
Om hemsidan: Wing Cheng är grafisk designer och webbdesigner, och på hennes hemsida fungerar ett ritblock som portfölj för hennes arbete, projekt och uppdrag. 
 
Inspireras: Det vi gillar med Wing Chengs hemsida är att hon har tagit in anteckningsblocket till nätet och lyckats skapa en sida som ser både digital och analog ut. Genom att placera sin information, sin text och sina illustrationer i ett öppet anteckningsblock känns det som att titta in i en bok när man bläddrar genom sidan. Även om det är något avancerat att göra en hemsida på samma sätt kan man gärna inspireras av Wing Chengs idéer: du kan exempelvis – istället för att skriva på hemsidan – skriva dina texter på ett papper, scanna in det och placera det på sidan som en bildfil. Eller så kan du självklart rita illustrationer och scanna in dem på samma sätt (har du ingen scanner går det bra att fotografera). Då får du inte bara in den snygga handskrivna stilen på din hemsida, utan också papprets textur. Testa dig fram med olika pennor och papper för att se vad som passar bäst.
www.duchyoriginals.com
 
Om hemsidan: Duchy Originals är ett brittiskt livsmedelsföretag som specialiserar sig på organiskt odlad mat. Här har man förstärt känslan av naturliga råvaror genom att använda en träbakgrund som går igen i den stora bilden med matvaror.
 
Inspireras: Med kamerans hjälp är det enkelt att använda saker du tycker om i exempelvis ditt hem på din hemsida. Om vill göra som Duchy kan du till exempel fotografera produkter på ett bord, och sedan fotografera själva bordet för att få en snygg bakgrund. Med lite kreativitet kan du komma långt: använd snygga tapeter, trägolv eller fönsternicher för att skapa helt unika bilder till din hemsida – kontrasten mot hemsidans tvådimensionella knappar, länkar och texter blir nästan alltid häftig.
www.emilywhitesmith.com
 
Om hemsidan: Emily Whitesmith är en frilansande textildesigner. Vad passar då bättre att använda som förstasida till hennes portfölj än ett snyggt tyg? Den tydliga texturen i tyget gör att det nästan känns som att man kan ta på skärmen, och gör hela sidan väldigt unik i i snitt.
 
Inspireras: Gamla mattor, kläder eller gardiner … Använd det du har hemma för att skapa egna bakgrunder eller bilder. Med hjälp av tyg är det lätt att få till häftiga effekter på din hemsida. Fota, redigera bilden om det behövs (förstärk exempelvis kontrasten för extra djup i tyget) och använd till vad du vill: knappar, bilder eller som bakgrundsbild.
www.kristinejanssen.com
 
Om hemsidan: Den här hemsidan tillhör också en grafisk designer och konstnär, som lyckas sticka ut tack vare en ovanlig, men snygg, design. Kristine Janssen har inspirerats av en sushitallrik för att skapa sin portfölj, där varje sushibit är en knapp. Vi gillar kanske inte riktigt typsnittet på länkarna, men i övrigt är idén genial.
 
Inspireras: Vi väntar framförallt på att en restaurang ska ta sig ur den klassiska, funktionella men heller inte så speciella designen och testa på någonting sådant här. Klickbara köttbullar? Tallriksmodellen med länkade sektorer? Vi vet inte, men hoppas få se fler tallrikar på nätet i framtiden.

Varje dag fångas vår blick av tusentals intryck. Ett fåtal av dessa fastnar – de allra flesta gör det inte. Så vad är det där speciella som får oss att stanna upp och titta efter lite extra? Vi har besökt fyra hemsidor som har använt material och tekniker vi inte är vana vid för att skapa orginell och spännande design.

Att designa en hemsida är dels att försöka skapa en överblickbar och lättanvänd plattform för besökaren: här ska man kunna hitta det man letar efter. Men utöver det finns det också en rent estetisk faktor, att man ska visa upp någonting vackert att se på. Lyckas man skapa en snygg hemsida som också sticker ut från mängden är chansen stor att människor stannar längre bara för att titta på den, eller delar med sig av den till vänner och bekanta.

 

Här är fyra hemsidesskapare som använt sig av papper, trä, textil och mat (!) för att förstärka sitt budskap.

www.wingcheng.com

 

Om hemsidan: Wing Cheng är grafisk designer och webbdesigner, och på hennes hemsida fungerar ett ritblock som portfölj för hennes arbete, projekt och uppdrag. 

 

Inspireras: Det vi gillar med Wing Chengs hemsida är att hon har tagit in anteckningsblocket till nätet och lyckats skapa en sida som ser både digital och analog ut. Genom att placera sin information, sin text och sina illustrationer i ett öppet anteckningsblock känns det som att titta in i en bok när man bläddrar genom sidan. Även om det är något avancerat att göra en hemsida på samma sätt kan man gärna inspireras av Wing Chengs idéer: du kan exempelvis – istället för att skriva på hemsidan – skriva dina texter på ett papper, scanna in det och placera det på sidan som en bildfil. Eller så kan du självklart rita illustrationer och scanna in dem på samma sätt (har du ingen scanner går det bra att fotografera). Då får du inte bara in den snygga handskrivna stilen på din hemsida, utan också papprets textur. Testa dig fram med olika pennor och papper för att se vad som passar bäst.

www.duchyoriginals.com

 

Om hemsidan: Duchy Originals är ett brittiskt livsmedelsföretag som specialiserar sig på organiskt odlad mat. Här har man förstärt känslan av naturliga råvaror genom att använda en träbakgrund som går igen i den stora bilden med matvaror.

 

Inspireras: Med kamerans hjälp är det enkelt att använda saker du tycker om i exempelvis ditt hem på din hemsida. Om vill göra som Duchy kan du till exempel fotografera produkter på ett bord, och sedan fotografera själva bordet för att få en snygg bakgrund. Med lite kreativitet kan du komma långt: använd snygga tapeter, trägolv eller fönsternicher för att skapa helt unika bilder till din hemsida – kontrasten mot hemsidans tvådimensionella knappar, länkar och texter blir nästan alltid häftig.

www.emilywhitesmith.com

 

Om hemsidan: Emily Whitesmith är en frilansande textildesigner. Vad passar då bättre att använda som förstasida till hennes portfölj än ett snyggt tyg? Den tydliga texturen i tyget gör att det nästan känns som att man kan ta på skärmen, och gör hela sidan väldigt unik i i snitt.

 

Inspireras: Gamla mattor, kläder eller gardiner … Använd det du har hemma för att skapa egna bakgrunder eller bilder. Med hjälp av tyg är det lätt att få till häftiga effekter på din hemsida. Fota, redigera bilden om det behövs (förstärk exempelvis kontrasten för extra djup i tyget) och använd till vad du vill: knappar, bilder eller som bakgrundsbild.

www.kristinejanssen.com

 

Om hemsidan: Den här hemsidan tillhör också en grafisk designer och konstnär, som lyckas sticka ut tack vare en ovanlig, men snygg, design. Kristine Janssen har inspirerats av en sushitallrik för att skapa sin portfölj, där varje sushibit är en knapp. Vi gillar kanske inte riktigt typsnittet på länkarna, men i övrigt är idén genial.

 

Inspireras: Vi väntar framförallt på att en restaurang ska ta sig ur den klassiska, funktionella men heller inte så speciella designen och testa på någonting sådant här. Klickbara köttbullar? Tallriksmodellen med länkade sektorer? Vi vet inte, men hoppas få se fler tallrikar på nätet i framtiden.

Förbättra dina bilder med bildredigering

Bilder är hemsidans bästa vän: om de har hög kvalitet, är bra beskurna och används rätt så kan de lyfta en hemsida otroligt mycket. Tyvärr kan på samma sätt dåliga bilder dra ner helhetsintrycket av en hemsida, därför ska vi i det här inlägget kort gå igenom hur du kan förbättra de bilder du redan har med verktyget Picmonkey.I Hemsida24:s verktyg finns ett inbyggt bildredigeringsverktyg, Picmonkey. Picmonkey är ett utmärkt verktyg för enklare redigering av bilder, som du inte behöver någon djupare kunskap för att använda.

Här ska vi visa några enkla saker man kan göra med bilder i Picmonkey. För enkelhetens skull använder vi webbsidans applikation. Gå in på www.picmonkey.com och ladda upp den bild du vill redigera – vi valde den här:
Det första vi ska göra är att beskära bilden. När du befinner dig i Picmonkeys fönster, klicka på “Crop” och rita en ruta över den delen av bilden du vill ha kvar. Klicka sedan på “Apply” i den vänstra menyraden, så försvinner allt runtomkring den markerade rutan.När du beskär en bild i Picmonkey så får du upp fyra linjer som bildar nio rutor. Dessa riktlinjer används ofta inom fotografi för att ge bilden rätt proportioner. En av fotografins gyllene regler säger att objekt som är i linjernas skärningspunkter syns bäst – här beskär vi bilden så att pingvinens huvud hamnar i den översta och vänstra linjens skärningspunkt, vilket ger bilden en bättre komposition.Om du har bilder med låg upplösning kan det ibland gå att öka skärpan något. Klicka på “Sharpen” i den vänstra menyn, och dra “Sharpness”-reglaget åt höger.Eftersom bilden vi arbetar med från början är ganska skarp ger ökningen av skärpa i det här fallet inte så mycket, men för mer oskarpa bilder kan de förbättra en hel del.Om du vill så kan du ändra färgsammansättningen på din bild. Det kan vara bra om du exempelvis har ett färgtema på din hemsida som du vill anpassa dina bilder till. Klicka på “Colors” och testa att dra i de två reglagen. “Saturation” styr färgernas mättnad – om du vill att bilden ska vara helt svartvit drar du den längst åt vänster, och om du vill ha rikare färg drar du den åt höger. “Temperature”-reglaget ger bilden varmare eller kallare toner beroende på hur du flyttar det – vi gav pingvinen en kylig, arktisk miljö:Med “Resize”-knappen i menyfältet kan du ändra bildens storlek, vilket kan vara bra om bilden är alldeles för stor för din hemsida. Att ändra en liten bild till större går också, men tänk på att det då finns en risk att bilden blir oskarp eftersom bildens pixlar då “dras isär”.

Bilder är hemsidans bästa vän: om de har hög kvalitet, är bra beskurna och används rätt så kan de lyfta en hemsida otroligt mycket. Tyvärr kan på samma sätt dåliga bilder dra ner helhetsintrycket av en hemsida, därför ska vi i det här inlägget kort gå igenom hur du kan förbättra de bilder du redan har med verktyget Picmonkey.

I Hemsida24:s verktyg finns ett inbyggt bildredigeringsverktyg, Picmonkey. Picmonkey är ett utmärkt verktyg för enklare redigering av bilder, som du inte behöver någon djupare kunskap för att använda.

Här ska vi visa några enkla saker man kan göra med bilder i Picmonkey. För enkelhetens skull använder vi webbsidans applikation. Gå in på www.picmonkey.com och ladda upp den bild du vill redigera – vi valde den här:

Det första vi ska göra är att beskära bilden. När du befinner dig i Picmonkeys fönster, klicka på “Crop” och rita en ruta över den delen av bilden du vill ha kvar. Klicka sedan på “Apply” i den vänstra menyraden, så försvinner allt runtomkring den markerade rutan.

När du beskär en bild i Picmonkey så får du upp fyra linjer som bildar nio rutor. Dessa riktlinjer används ofta inom fotografi för att ge bilden rätt proportioner. En av fotografins gyllene regler säger att objekt som är i linjernas skärningspunkter syns bäst – här beskär vi bilden så att pingvinens huvud hamnar i den översta och vänstra linjens skärningspunkt, vilket ger bilden en bättre komposition.

Om du har bilder med låg upplösning kan det ibland gå att öka skärpan något. Klicka på “Sharpen” i den vänstra menyn, och dra “Sharpness”-reglaget åt höger.

Eftersom bilden vi arbetar med från början är ganska skarp ger ökningen av skärpa i det här fallet inte så mycket, men för mer oskarpa bilder kan de förbättra en hel del.

Om du vill så kan du ändra färgsammansättningen på din bild. Det kan vara bra om du exempelvis har ett färgtema på din hemsida som du vill anpassa dina bilder till. Klicka på “Colors” och testa att dra i de två reglagen. “Saturation” styr färgernas mättnad – om du vill att bilden ska vara helt svartvit drar du den längst åt vänster, och om du vill ha rikare färg drar du den åt höger. “Temperature”-reglaget ger bilden varmare eller kallare toner beroende på hur du flyttar det – vi gav pingvinen en kylig, arktisk miljö:

Med “Resize”-knappen i menyfältet kan du ändra bildens storlek, vilket kan vara bra om bilden är alldeles för stor för din hemsida. Att ändra en liten bild till större går också, men tänk på att det då finns en risk att bilden blir oskarp eftersom bildens pixlar då “dras isär”.

4 tips från Hemsida24:s frågestund

För ett par veckor sedan anordnade vi en frågestund på vår Facebooksida där vi gav live-feedback på era hemsidor. Här kommer en sammanfattning av de tips vi gav.
Startsidan är den absolut viktigaste delen av hemsida. Den ska både intressera besökaren, göra att han eller hon vill läsa mer samtidigt som den inte får innehålla för mycket information och vara för rörig.
 

Begränsa informationen – allt som står på startsidan bör göra besökaren intresserad och vilja veta mer.
Berätta direkt och kortfattat om vad hemsidan handlar om, så att besökaren genast förstår var han eller hon har kommit.
Berätta med knappar och uppmaningar, och låt det viktigaste stå överst på startsidan.

 
Läs mer här: Fem saker du behöver på din förstasida
En andra lärdom från frågestunden är att det är viktigt att den text man har på sin hemsida faktiskt är läsbar. Om besökaren har svårt att läsa dina texter spelar det ingen större roll hur bra de är – risken är ändå att läsaren kommer att tappa intresset snabbt.
 

Svart text på vit bakgrund är lättast att läsa.
Använd lättlästa typsnitt för dina “vanliga” texter.
Välj ut ett par, tre typsnitt, och håll dig till dem över hela hemsidan.

 
Läs mer här: Välj rätt typsnitt
En besökare på en hemsida undrar först och främst var hon eller han har hamnat. Därför är det viktigt att hela tiden vara tydlig på din hemsida.

Sammanfatta din verksamhet i tre eller fyra meningar och sätt texten högt upp på din startsida.
Om du har mycket material är ett tips att peka besökaren vidare genom korta uppmaningar: “Gå in i vår webbshop här” eller “Läs mer om oss här”.
Var direkt i ditt språk, och undvik onödiga omskrivningar. Förklara vad du gör, men på ett enkelt sätt.

 
Läs mer här: Så skriver du en enkel text för din hemsida
Det är också viktigt att du visar informationen på din hemsida i rätt ordning, alltså att det viktigaste kommer först och det mindre viktiga längre ner, eller på en annan sida.
 

Prioritera dina texter och bilder: bestäm dig för vad du tycker är centralt, och vad som kan visas senare på hemsidan.
Undvik att skriva ut detaljerad information eller nyheter direkt på startsidan.
Länka till saker du tycker är extra viktiga med hjälp av länkar och knappar.

 
Läs mer här: Planera din hemsida: 3 kreativa tips

För ett par veckor sedan anordnade vi en frågestund på vår Facebooksida där vi gav live-feedback på era hemsidor. Här kommer en sammanfattning av de tips vi gav.

Startsidan är den absolut viktigaste delen av hemsida. Den ska både intressera besökaren, göra att han eller hon vill läsa mer samtidigt som den inte får innehålla för mycket information och vara för rörig.

 

  • Begränsa informationen – allt som står på startsidan bör göra besökaren intresserad och vilja veta mer.
  • Berätta direkt och kortfattat om vad hemsidan handlar om, så att besökaren genast förstår var han eller hon har kommit.
  • Berätta med knappar och uppmaningar, och låt det viktigaste stå överst på startsidan.

 

Läs mer här: Fem saker du behöver på din förstasida

En andra lärdom från frågestunden är att det är viktigt att den text man har på sin hemsida faktiskt är läsbar. Om besökaren har svårt att läsa dina texter spelar det ingen större roll hur bra de är – risken är ändå att läsaren kommer att tappa intresset snabbt.

 

  • Svart text på vit bakgrund är lättast att läsa.
  • Använd lättlästa typsnitt för dina “vanliga” texter.
  • Välj ut ett par, tre typsnitt, och håll dig till dem över hela hemsidan.

 

Läs mer här: Välj rätt typsnitt

En besökare på en hemsida undrar först och främst var hon eller han har hamnat. Därför är det viktigt att hela tiden vara tydlig på din hemsida.

  • Sammanfatta din verksamhet i tre eller fyra meningar och sätt texten högt upp på din startsida.
  • Om du har mycket material är ett tips att peka besökaren vidare genom korta uppmaningar: “Gå in i vår webbshop här” eller “Läs mer om oss här”.
  • Var direkt i ditt språk, och undvik onödiga omskrivningar. Förklara vad du gör, men på ett enkelt sätt.

 

Läs mer här: Så skriver du en enkel text för din hemsida

Det är också viktigt att du visar informationen på din hemsida i rätt ordning, alltså att det viktigaste kommer först och det mindre viktiga längre ner, eller på en annan sida.

 

  • Prioritera dina texter och bilder: bestäm dig för vad du tycker är centralt, och vad som kan visas senare på hemsidan.
  • Undvik att skriva ut detaljerad information eller nyheter direkt på startsidan.
  • Länka till saker du tycker är extra viktiga med hjälp av länkar och knappar.

 

Läs mer här: Planera din hemsida: 3 kreativa tips

Ska man använda vertikal eller horisontell navigation?

Om du har byggt en hemsida så har du kanske någon gång funderat över om du ska använda en horisontell eller vertikal meny när du väljer din mall. Det är en bra fråga: beroende på vilken menylösning du väljer kommer sidan att se annorlunda ut och fungera olika bra. Men hur ska man välja mellan de två menylösningarna? I den här artikeln skriver vi om för- och nackdelar med sido- och toppmenyer.Ett av många val du måste göra när du skapar din hemsida är huruvida du ska ha en toppmeny (horisontell) eller en sidomeny (vertikal), eller en kombination av båda. Kanske har du inte funderat så mycket över skillnaden, men om du tittar på internetsidor kommer du se att de att vissa sidor har sina menyknappar på kanten, medan andra har dem längst upp på hemsidan. Skillnaden mellan de här två lösningarna är att de ger hemsidan olika karaktär; den ena tenderar att fungera bra på informationstunga hemsidor, medan den andra tycks föredras av hemsidor med tydligt innehåll och relativt få menyval.En vertikal meny, eller sidomeny, är en navigationslösning där dina länkknappar ligger till vänster eller till höger på hemsidan. Ditt huvudmaterial finns i mitten, alltså all din text, alla dina bilder eller varor (om du har en e-butik).
 
Fördelar:
 

En vertikal meny ger dig mer utrymme för många menyval, eftersom texten tar mindre utrymme i höjd än i längd. Därför kan du också visa upp underkategorier och sidstrukturer utan att behöva kompromissa med utrymmet.
Undersökningar visar att framför allt högerhänta internetanvändare fokuserar på skärmens vänstra del i första hand. Om du vill locka besökare till din meny kan det därför vara effektivt att lägga din navigation där.
Till skillnad från den vertikala menyn ligger den horisontella menyn (nästan alltid) överst på sidan. Antingen kan den ligga över sidhuvudet, alltså ovanför den plats där du har din logotyp eller titel, eller så kan den rymmas under sidhuvudet men över huvudmaterialet.
 
Fördelar:
 

Horisontella menyer tar lite utrymme i anspråk, vilket ger mer plats till hemsidans innehåll.
Besökare behöver inte röra sin muspekare lika stora avstånd när en hemsida använder en horisontell meny, vilket faktiskt spelar en viss roll för helhetsupplevelsen.
Om du har väldigt många undersidor med varierande sektioner så kan det vara en bra idé att använda sig av kombinerad vertikal/horisontell navigation. Då kan du lägga dina huvudsidor högst upp, och sedan låta underkategorier visas på vänster eller höger sida.
 
Drop-down-menyer är också ett bra sätt att visa många menyval utan att ta upp för mycket plats. I en drop-down-meny ryms flera underkategorier under en navigationsknapp, som visas när du klickar på knappen eller håller din muspekare över den.Så vad ska man då välja – vertikal eller horisontell meny?
 
Ett generellt råd när du arbetar med design är att utgå från ditt material: fundera först över vilken typ av hemsida du vill skapa, och hur ditt material ser ut. Har du många sidor med flera underkategorier kan en sidomeny hjälpa till att visa för besökaren var allt finns, men om du har ett fåtal, väldefinierade, sidor kan sidan se bätter ut med en toppmeny.
 
Titta på andra företag eller verksamheter som gör det du gör – hur har de använt sina menyfält? Tänk sedan igenom din hemsida som om du inte visste någonting om den: var börjar du läsa först? Är det tydligt var alla menyknappar leder?Wikipedia använder sig av en lång sidomeny, som hjälper till att hålla ordning på ämnen och de många språkvalen. Notera att man använt underflikar i sin sidomeny, som gör att kategorierna kan förstoras och förminskas.
Horisontella menyer har blivit allt mer populära; en bidragande orsak är som nämnt studier som tyder på att hemsidebesökare oftast tittar till vänster på skärmen. Därför anser vissa webb-designers att det är bättre att placera huvudmaterialet – såsom en presentationstext – på hemsidans viktiga vänstra sida, och inte störa läsaren med menyknappar.

 

Tänk också på att menyn inte är det viktigaste. Trots allt är det ju ditt innehåll som du vill marknadsföra – inte dina olika sidor. Om du har en väl utformad navigation, där det tydligt framgår vilka knappar som leder var och knapparna syns bra, finns det ingen anledning att låta menyn ta allt för mycket utrymme i anspråk.

 

När det gäller andra skärmar än datorskärmar, såsom mobiler och iPads, tenderar också den horisontella navigationen att fungera bättre, eftersom ditt huvudmaterial då inte hamnar för långt åt höger.

 

Du kan alltid lägga in länkar och “puffar” i ditt huvudmaterial. Om du till exempel har en e-butik vill du självklart att besökare så snart som möjligt ska gå in till varudelen; om du inte vill lägga den delen på startsidan kan du då lägga in en stor knapp, eller markera just det menyvalet med färg, så att besökare har lätt att se din viktigaste sida.

Om du har byggt en hemsida så har du kanske någon gång funderat över om du ska använda en horisontell eller vertikal meny när du väljer din mall. Det är en bra fråga: beroende på vilken menylösning du väljer kommer sidan att se annorlunda ut och fungera olika bra. Men hur ska man välja mellan de två menylösningarna? I den här artikeln skriver vi om för- och nackdelar med sido- och toppmenyer.

Ett av många val du måste göra när du skapar din hemsida är huruvida du ska ha en toppmeny (horisontell) eller en sidomeny (vertikal), eller en kombination av båda. Kanske har du inte funderat så mycket över skillnaden, men om du tittar på internetsidor kommer du se att de att vissa sidor har sina menyknappar på kanten, medan andra har dem längst upp på hemsidan. Skillnaden mellan de här två lösningarna är att de ger hemsidan olika karaktär; den ena tenderar att fungera bra på informationstunga hemsidor, medan den andra tycks föredras av hemsidor med tydligt innehåll och relativt få menyval.

En vertikal meny, eller sidomeny, är en navigationslösning där dina länkknappar ligger till vänster eller till höger på hemsidan. Ditt huvudmaterial finns i mitten, alltså all din text, alla dina bilder eller varor (om du har en e-butik).

 

Fördelar:

 

  • En vertikal meny ger dig mer utrymme för många menyval, eftersom texten tar mindre utrymme i höjd än i längd. Därför kan du också visa upp underkategorier och sidstrukturer utan att behöva kompromissa med utrymmet.
  • Undersökningar visar att framför allt högerhänta internetanvändare fokuserar på skärmens vänstra del i första hand. Om du vill locka besökare till din meny kan det därför vara effektivt att lägga din navigation där.

Till skillnad från den vertikala menyn ligger den horisontella menyn (nästan alltid) överst på sidan. Antingen kan den ligga över sidhuvudet, alltså ovanför den plats där du har din logotyp eller titel, eller så kan den rymmas under sidhuvudet men över huvudmaterialet.

 

Fördelar:

 

  • Horisontella menyer tar lite utrymme i anspråk, vilket ger mer plats till hemsidans innehåll.
  • Besökare behöver inte röra sin muspekare lika stora avstånd när en hemsida använder en horisontell meny, vilket faktiskt spelar en viss roll för helhetsupplevelsen.

Om du har väldigt många undersidor med varierande sektioner så kan det vara en bra idé att använda sig av kombinerad vertikal/horisontell navigation. Då kan du lägga dina huvudsidor högst upp, och sedan låta underkategorier visas på vänster eller höger sida.

 

Drop-down-menyer är också ett bra sätt att visa många menyval utan att ta upp för mycket plats. I en drop-down-meny ryms flera underkategorier under en navigationsknapp, som visas när du klickar på knappen eller håller din muspekare över den.

Så vad ska man då välja – vertikal eller horisontell meny?

 

Ett generellt råd när du arbetar med design är att utgå från ditt material: fundera först över vilken typ av hemsida du vill skapa, och hur ditt material ser ut. Har du många sidor med flera underkategorier kan en sidomeny hjälpa till att visa för besökaren var allt finns, men om du har ett fåtal, väldefinierade, sidor kan sidan se bätter ut med en toppmeny.

 

Titta på andra företag eller verksamheter som gör det du gör – hur har de använt sina menyfält? Tänk sedan igenom din hemsida som om du inte visste någonting om den: var börjar du läsa först? Är det tydligt var alla menyknappar leder?

Wikipedia använder sig av en lång sidomeny, som hjälper till att hålla ordning på ämnen och de många språkvalen. Notera att man använt underflikar i sin sidomeny, som gör att kategorierna kan förstoras och förminskas.

  • Horisontella menyer har blivit allt mer populära; en bidragande orsak är som nämnt studier som tyder på att hemsidebesökare oftast tittar till vänster på skärmen. Därför anser vissa webb-designers att det är bättre att placera huvudmaterialet – såsom en presentationstext – på hemsidans viktiga vänstra sida, och inte störa läsaren med menyknappar.

 

  • Tänk också på att menyn inte är det viktigaste. Trots allt är det ju ditt innehåll som du vill marknadsföra – inte dina olika sidor. Om du har en väl utformad navigation, där det tydligt framgår vilka knappar som leder var och knapparna syns bra, finns det ingen anledning att låta menyn ta allt för mycket utrymme i anspråk.

 

  • När det gäller andra skärmar än datorskärmar, såsom mobiler och iPads, tenderar också den horisontella navigationen att fungera bättre, eftersom ditt huvudmaterial då inte hamnar för långt åt höger.

 

  • Du kan alltid lägga in länkar och “puffar” i ditt huvudmaterial. Om du till exempel har en e-butik vill du självklart att besökare så snart som möjligt ska gå in till varudelen; om du inte vill lägga den delen på startsidan kan du då lägga in en stor knapp, eller markera just det menyvalet med färg, så att besökare har lätt att se din viktigaste sida.

Inspirerande webbdesign för våren

Stora, vita ytor eller mycket färg? Mönster eller bildbakgrunder? Om du letar efter inspiration för ditt hemsideskapande har vi här samlat 10 kreativa, smarta och vackra hemsidor. Se, njut och bli inspirerad av hur man kan använda färger, text och grafik för att skapa häftiga effekter.

Stora, vita ytor eller mycket färg? Mönster eller bildbakgrunder? Om du letar efter inspiration för ditt hemsideskapande har vi här samlat 10 kreativa, smarta och vackra hemsidor. Se, njut och bli inspirerad av hur man kan använda färger, text och grafik för att skapa häftiga effekter.