Några fördelar med Mockingbird

• Det finns många ”widgets” eller kontroller för i stort sätt varje element man kan tänka sig.
• Den snappar / fastnar på jämna antal pixlar vilket gör det lättare att få mer konsekventa layouter.
• Det går att ändra storlek på alla ”widgets”.
• Det går att skapa flera olika sidor för varje projekt.
• Så enkelt att ingen manual behövs.

Vet du något bättre verktyg för layouter / wireframes? Mockingbird är när detta skrivs gratis så länge som det befinner sig i beta-stadiet men kommer snart att kosta en liten peng. Vet du något som är lika bra men gratis?

1. Undvik dropdown-menyer

Det finns många webbplatser som idag har dropdown-menyer. sxc.hu är en webbplats som har en dropdown-meny till vänster. Det går inte se att ”Browse” innehåller en dropdown-meny. När man håller över den täcks välkomst-texten över. Skulle man exempelvis vilja markera rubriken, är det lätt att råka röra musen över dropdown-menyn. Det är mycket irriterande.

Använd istället ett fliksystem. Det finns ett skäl till varför exempelvis Ribbon-systemet kom till (det som finns i MS Office). Även Microsoft har insett att flikar är bättre än dropdown-menyer.

Exempel på fliksystem finns på Boendetorget.

2. Undvik registreringar så långt som möjligt

När man låter någon registera sig på webbplatsen man bygger bör man fråga sig ”Vad får användaren ut av att registrera sig?”. Om det är en webbutik så kan det vara för att behålla sina adressuppgifter till nästa gång. Här kan det vara bättre att slå ihop köpet med registreringen så att användaren knappt märker att denne registrerar sig på sidan. Låt i så fall kunden handla och lägga saker i varukorgen innan denne måste fylla i något.

Exempel finns på Boendetorget där användaren aldrig registrerar sig för att lägga till en produkt.

3. Undvik intro-sidor

Finns det något mer irriterande än ett intro på 30 sekunder som inte går att avbryta? Flera studier pekar på att en besökare stannar kvar på en webbsida max 4 sekunder innan denne bestämt sig för att stanna eller gå. Hur snyggt ett intro än må vara är användaren mer stressad än att vilja titta på det.

4. Minimera antalet fält som ska fyllas i

Låt oss säga att du låter användaren fylla i ett formulär. Fundera noga igenom varje fält, vilka som verkligen behövs. Varje fält är nämligen en belastning för användaren. Tänk dig själv om du skulle behöva fylla i 10 fält. På nätet är 10 fält ganska mycket och få kommer orka ta sig tiden att fylla i dessa.

På Boendetorget – Lägg till produkt finns ett formulär men bara med de fält som verkligen kommer att användas.

5. Gör det lätt att komma i mål

Om användaren ska fylla i formulär eller ta sig vidare i olika steg, se till att underlätta processen så mycket som möjligt. Ett sätt kan vara att göra stegen tydliga, exempelvis genom att skriva att man är på steg 2/3. Ett annat sätt är att låta Javascript kontrollera om fälten är rätt ifyllda. Om fälten är fel ifyllda och informationen dessutom försvinner om man gjort fel är det inte säkert att användaren orkar fylla i dessa igen.

6. Låt designen främja användbarheten, inte tvärt om

Att skapa en snygg design kan skapa en bättre miljö för användaren, men man får se upp så att inte den snygga designen tar överhanden och försämrar användbarheten. För mycket färger kan ge ett rörigt intryck och försvåra för användaren. Använd rätt färg på rätt ställe. Har ni ett specialerbjudande som bara gäller just nu, sätt en stark färg på det så det verkligen sticker ut.

Var inte rädd för att använda riktigt stora eller små typsnitt. Det gör det enklare att överblicka sidan. Låt inte snygga grafiska element göra att navigeringen göms eller hamnar tokigt. En snygg webbplats säljer inte bättre om folk inte vet hur de ska använda den.

7. Låt användaren veta vart denne befinner sig i hierarkin

I större webbplatser kan det vara lätt att inte veta vart man befinner sig i hierarkin. Det gäller speciellt om man hittat sidan genom en sökmotor. Därför är det viktigt att tydlig på ett eller flera sätt markera det. Ett sätt är att använda ”breadcrumbs” som visar vilka steg man tagit. Ett annat sätt är att markera varje steg, markera toppmenyvalet, sedan markera undermenyvalet och sedan sidomenyvalet. Då kan användaren enkelt gå tillbaka till tidigare sidor. Ytterligare ett sätt är att skapa en webbplatskarta någonstans på webbplatsen där hierarkin beskrivs tydligt.

Exempel på breadcrumbs finns på Boendetorget.

8. Utnyttja konvensioner

De vanor vi och andra människor har hjälper oss att snabbare hitta information om internet. Det bör vi utnyttja när vi skapar vår webbplats.

Några exempel

• Logotypen placeras i toppen
• Länkar är ofta blå och understrukna
• I sidfoten som placeras längst ner hittar vi oftast kontakt-information eller andra saker som inte behöver vara i fokus

9. Låt inte användaren tänka

Om användaren har 4 sekunder på sig att bestämma sig för att stanna eller gå finns knappast tid för att tänka. Därför är det viktigt att användaren direkt ser något att klicka på för att hamna rätt. Det är i många fall bättre att låta användaren klicka en gång för mycket än att låta denne tänka för att fundera över vilket val som är rätt.

10. Luft är en del av designen

Jag har sett webbplatser där webbproducenten varit rädd för luft och resonerat att all information ska ta så lite plats som möjligt för att få plats med så mycket som möjligt på skärmen. Faktum är att luft i många fall gör webbplatsen lättare att läsa. Var därför inte rädda för luft, mellan stycken, mellan rader och mellan text och bilder.

Folk drar sig inte för att scrolla om det skulle behövas. Stora tidningswebbplatser som Aftonbladet och Expressen låter användare scrolla hela tiden.

11. Gör webbplatsen sökbar

Om man nu inte hittar vad man söker på en webbplats kan en sökfunktion på sidan vara räddaren i nöden. Tänk dig att du sitter i en webbutik med tusentals produkter. Då kan det vara helt avgörande för försäljningen om användaren med en sökfunktion på sidan kan hitta det den söker.

Slutord

Utgå från att dina användare förväntar sig en snygg, snabb och enkel webbplats. Utgå också från att användaren aldrig har varit på din webbplats förut, att han / hon är stressad och dessutom är både lat och kräsen. Om man kan göra en sådan användare till en kund så har man kommit långt.

Vilka är dina bästa användbarhetstips?

Vilka är de snyggaste loggorna i Sverige? Jag har listat mina personliga favoriter samt skrivit om deras för- och nackdelar. Bidra gärna med dina egna svenska  favoriter i en kommentar.

J. Lindeberg

Fördelar

• Typsnittet – Enkelt och snyggt, även om jag inte brukar gillar uppercase på loggor.
• Symbolen – Genial med tanke på att J och L bildar symbolen.
• Association – Märket känns som ett klädesmärke, vilket det är.

Nackdelar

• Jag finner inga

Sveriges snyggaste logga för kläder?

Sony Ericsson

Fördelar

• Typsnittet – Enkelt och snyggt.
• Symbolen – Känns modernt, skönt med en grön färg.

Nackdelar

• Association – Symbolen känns som en boll med tvättmedel som man stoppar i tvättmaskinen.

Sveriges snyggaste logga för mobiltelefoner?

Alecta

Fördelar

• Typsnittet – Vågat och snyggt.
• Inramningen – Ovanlig men väl fungerande.

Nackdelar

• Hittar inget att anmärka på

Sveriges snyggaste logga för tjänstepension?

Pontuz Löfgren

Fördelar

• Typsnittet – Enkelt och snyggt.
• Symbolen – Enkel och genial.

Nackdelar

• Loggan jag hittade är väldigt liten. Jag hoppas snart att jag hittar en större variant.

Sveriges snyggaste logga för bostäder?

KSRR

Fördelar

• Typsnittet – Enkelt och snyggt. Färgklickarna ger typsnittet skönt liv.
• Symbolen – Känns modern.

Nackdelar

• Symbolen – Det vita ser ut som en tand som dras upp med roten.

Sveriges snyggaste logga för renhållning?

Telia

Fördelar

• Typsnittet – Enkelt och snyggt. Vågad färg ger ett plus i kanten.
• Symbolen – Härliga färger i ett skönt fraktal-liknande mönster

Nackdelar

• Symbolen – Retrodots är inne just nu. Det kanske känns omodernt om några år.

Sveriges snyggaste logga för telefoni?

jenst.se

Här kommer min egen logga, som en liten bonus. Jag känner mig lite partisk så jag låter bli att kommentera för- och nackdelar här.

Slutord

Det här var mina personliga favoriter bland svenska loggor. Säkert har jag missat någon. Skulle jag hitta fler så kommer jag uppdatera den här artikeln längre fram. Vilka loggor tycker du tillhör sveriges snyggaste?

My vision was to create the best looking badges, with the minimal effort and layers. Because I like to share my work, you can use the badges for free.

Preview, blue badges

This is what the badges looks like in full size.

Preview, all badges

I created the badges in 3 different styles and 10 different colors. That will make it easier for you to have the right badge for your site.

Click on the preview image to see the image in full size.

Licence

The badges are free to use. I made them for fun and I hope you will have fun using them.

What you are allowed to do

• Use the badges for your own projects.
• Use the badges for commercial websites.

What you are not allowed to do

• Sell the badges.
• Take credit for my work.

In other cases the license terms below applies:

Download

Read the licence above before downloading. For most people, it should be common sense.

PSD

The image in PSD format contains folders, vector layers, text layers with blending options. That means you can easily change the appearance of the badges.

• Download all the badges as PSD

PNG

The image in PNG24 format is flat and does not contain any layers. There are no text on the badges, which means that you can add your own text.

• Download all the badges as PNG

Pricedown font

I like Pricedown font which is why it’s used for the text on the badges. If you want to change the text you need to download and install or run the font. The Pricedown font is created by Larabie Fonts.

• Download the Pricedown font

Support my work

For now, the best way to support my work is to spread the word.

Den här artikeln innehåller både information och tjänster för att underlätta bruket av typsnitt, främst i webbmiljö. Har du någon värdefull relevant information som inte tas upp i den här artikeln? Lämna en kommentar.

Typsnitt med stilmallar (CSS)

Är du nybörjare och vill lära dig allt om typsnitt med CSS, läs på W3Schools.

Alla egenskaper på en och samma rad

Man kan skriva in en ny rad för varje egenskap men man kan spara både tid och plats genom att skriva in allt på en och samma rad.

h1 {
   font: bold 14px/18px Arial;
}

Ovan visas h1-taggen med fet stil, 14 pixlar hög,  ett radavstånd på 18 pixlar samt att den tillhör Arial-familjen.

Standard-typsnitt

Som webbdesigner kan man ibland bli frustrerad över begränsningen som finns i HTML / CSS när det gäller valet av fonter. Det går att använda vilka typsnitt som helst, men de valda typsnitten visas bara om typsnittet finns installerat på användarens datorn. Därför kan det vara bra att veta vilka typsnitt som folk i allmänhet har installerade på sin dator för att få webbplatsen att se likadan ut på alla datorer.

Windows XP standard-typsnitt

De flesta använder idag Windows och har man många typsnitt installerade kan det vara svårt att veta vilka som var installerade från början.

wpdfd.com har gjort en utmärkt lista över de typsnitt som finns förinstallerade på Windows XP. Eftersom listan är skapad som en bild kan man se hur dessa typsnitt ser ut även om man inte skulle ha dessa installerade.

Vanliga typsnitt på Windows och OSX

Om man inte är nöjd med tjänsten ovan så kan man prova Ampsoft – Common Fonts istället. I mitten på sidan finns de vanligaste typsnitten listade, både i normal och fet stil. Dessa står som text och vill man som Windows-användare se hur typsnitten ser ut i OSX så finns det skärmdumpar längre ner på sidan för olika operativsystem med olika konfigurationer.

Ersätt typsnittet med Flash

sIFR

sIFR är en metod för skapa texter och rubriker för webbplatser, i andra typsnitt än de som följer med datorn.

En fördel med metoden är att om Javascript eller Flash saknas så visas de standard-typsnitt som finns på datorn. Det innebär att metoden är helt sökmotorvänlig.

Nackdelen är att sIFR kräver att både Javascript och Flash är installerat på surfarens dator för att det ska fungera.

WP sIFR – WordPress plugin

Använder du WordPress kan du prova WP sIFR plugin, vilket gör det hela betydligt enklare. Det är bara att installera och sedan aktivera den sIFR-font som ska användas.

Inga programmerings-kunskaper krävs men det kan vara bra att ha använt stilmallar (CSS) tidigare.

sIFR med Font Burner

För att förenkla skapandet av kod för sIFR finns Font Burner. Det hela sker i tre steg:

1. Hitta ett typsnitt.
2. Kopiera den inbäddade koden.
3. Klistra in koden på din webbplats.

Font Burner finns också som plugin till WordPress och heter Font Burner Control Panel.

Fonter / typsnitt till sIFR

• Isare – sIFR Flash Fonts Library
• sIFRvault

Ersätt typsnittet med Javascript och PHP

Typsnitten som finns på datorn laddas in från början och sedan ersätts de med hjälp av Javascript. Det gör att om Javascript inte är aktiverat visas de lokalt installerade typsnitten istället. Även sökmotorer och textläsare kommer då utan problem kunna läsa dem.

Facelift

Facelift är ett populärt skript som har många exempel, utförlig dokumentation och ett forum. De har också en blogg där man kan följa utvecklingen.

Använder du WordPress så kan du istället använda ett plugin som kallas för Facelift Image Replacment.

Andra metoder

• Typeface
• TTFTitles WordPress Plugin

Förhandsgranska texten i realtid

CSS Type Set

Det kan vara smidigt att ha något verktyg för att testa olika text-attribut och hur de påverkar helheten. CSS Type Set har ett både enkelt, effektivt och snyggt verktyg.

Man skriver in den text man vill använda. I mitt fall har jag använt en dummy-generator för att skapa texten, som också beskrivs i den här artikeln. Man behöver inte klicka på ”Generera” som på många andra tjänster, utan texten förändrar sig direkt när man ändrar på någonting.

Andra tjänster

• CSS Type
• Type Tester
• Font Tester
• CSS TXT

Bläddra bland typsnitt

På webben

My Fontbook

Det finns många program för att lista fonterna som ligger på hårddisken. Att visa typsnitten direkt i webbläsaren kan vara smidigt. Man slipper då installera ett program för det. My Fontbook har just en sådan tjänst.

Tjänsten är enkel att använda och ser ut att ha tagit inspiration från OSX, men tjänsten fungerar lika bra i Windows.

Font Shaker

Ett annat sätt att visa typsnitten som ligger på hårddisken är att köra Font Shaker. Likt My Fontbook får man upp alla typsnitt som är installerade. Skillanden är att den här tjänsten är byggd i Flash och visar upp typsnitten i 3D.

Andra Tjänster

• Font Picker
• Flipping Typical

I ett vanligt program

Trivs man bättre med att lista fonterna genom ett installerat program listar jag här några stycken som fungerar bra (i Windows).

• AMP Font Viewer
• The Font Thing
  

Portaler med typsnitt

Dafont

En av världens mest populära webbplatser för typsnitt är Dafont. Det är en mycket lättnavigerad webbplats och det kommer hela tiden in nya typsnitt. Det finns möjlighet att testa sin egen text med de typsnitten som finns.

Vill man förlita sig på den stora massan så finns det en topp 100-lista. För att hitta ett specifikt typsnitt kan man använda deras sökfunktion.

Urbanfonts

En uppstickare som kommer starkt är Urbanfonts. En av de stora skillnaderna mot Dafont är att Urbanfonts använder sig av Ajax i stor utsträckning. Det gör att sidan inte behöver laddas om igen ifall man ändrar några inställningar. Även här finns möjligheten testa sin egen text med valt typsnitt.

Andra portaler

• Font Squirrel

Generera dummy-text

Som webbdesigner så finns det situationer då man behöver text för att testa hur den kommer bete sig tillsammans med exempelvis en stilmall. Att skriva ihop en tillfällig text om ingenting är ofta slöseri med tid.

Lorem Ipsum

Lorem Ipsum är en bra metod för att generera en dummy-text. Här är ett exempel på hur texten kan se ut:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius nisl eu ligula. Sed tincidunt, arcu in pellentesque euismod, arcu odio tincidunt neque, ut imperdiet eros arcu a velit. Proin magna. Nam nibh.

Dummy Lipsum – Firefox tillägg

Använder du Firefox kan du istället installera  Dummy Lipsum. Den genererar dummy-text på samma sätt som

Lorem Ipsum, men det går snabbare att komma åt, då den läggs till i navigeringsfältet.

Andra dummytext-generatorer

• Lorem Ipsum
• Malevole

Konvertera pixlar till em

Många webbdesigners använder sig av pixlar när de sätter storlek på typsnitten i stilmallen. Många vet hur stor en pixel är och av den anledningen är det lätt att göra det till en vana. Vissa webbläsare kan inte skala om storleken på texten om den angetts i pixlar så därför är det rekommenderat att den skrivs till formatet ”em”.

Em Calculator och PXtoEM

En bra tjänst för att konvertera pixlar till em är Em Calculator. En annan tjänst är PXtoEM. De är väldigt olika så det kan finnas fördelar att prova båda.

Övrigt

Lek med texter i Wordle

En spännande tjänst är Wordle. Man skriver in den text man vill använda och klickar på en knapp.

Beroende på vilka inställningar man använder får man olika effekter.

Efter lite testande fick jag fram den här vackra skapelsen (till höger).

Slutord

Självklart finns det både mer information och fler tjänster därute. Saknar du någonting? Skriv en kommentar så kikar jag på det.

Jag kommer att hålla liv i den här artikeln och uppdatera den när jag får fatt i fler bra tjänster eller information.

Använd vanliga typsnitt

Det första man bör tänka på är att undvika ovanliga typsnitt, eftersom de flesta inte har det installerat. Här kommer en lista på de typsnitt som finns i Windows XP, där man även får se hur de ser ut (eftersom de visas som bilder). Det är dock inte säkert att Linux och OSX har alla dessa typsnitt som standard.

sIFR – möjliggör ovanliga typsnitt

Om man ändå vill envisas med att använda udda typsnitt som systemet normalt sätt saknar finns det alternativ. Det jag känner till är sIFR som med hjälp av Flash och Javascript skapar texter. Man behöver dock inte ha några kunskaper i något av dessa för att kunna använda det. För den som använder sig av sökmotoroptimering kan jag nämna att texten fortfarande ses som text av webbläsaren vilket gör att den fortfarande är sökbar för sökmotorerna. Saknas Flash eller Javascript för användaren visas texten som med standardtypsnitt.

Stora och små typsnitt

Georgia, är ett relativt snirkligt typsnitt. Typsnitt av den typen lämpar sig bäst i lite större format, som t ex rubriker. För små texter lämpar sig enklare typsnitt för att förbättra läsbarheten. Arial är enligt mig det bästa typsnittet för små eller riktigt små texter på webben, men många föredrar Verdana.

Undvik standard-texter

Något som jag tycker att man ska försöka undvika är standard-texter och standard-färger på text och länkar. Blå och lila länkar (som är standard) kan lätt se lite amatörmässigt ut. Om man beslutat sig för att använda svart text mot exempelvis vit bakgrund så kan ett tips vara att inte sätta färgen till helsvart. Färgen #333333 som är en gråton nära svart kan ge en mjukare och behagligare läsupplevelse.

FontFinder – Ta reda på vad andra använder

Ibland kan man inspireras av andras texter på nätet. Om du använder Firefox så kan i så fall FontFinder vara ett bra tillägg. Du markerar en text, högerklickar och väljer FontFinder. Då visas all den information du kan tänkas behöva om den text du just markerat t ex färg, storlek och typsnitt.

UrbanFonts och DaFont – Bästa fontsidorna

Ska man göra loggor och bilder för webben, kan man behöva lite snyggare typsnitt än vad som finns att tillgå i systemet från början. Då kan UrbanFonts eller DaFont. vara två bra ställen att hitta gratis typsnitt på. Båda sidorna har bra förhandsvisning på sina typsnitt.

Prova först i bildbehandlingsprogram

En tidsbesparning kan vara att prova typsnitt och dess färg i ett bildbehandlingsprogram innan koden skrivs för att se hur de harmonerar med varandra. Mina tips här är bara en fingervisning om vad som skulle kunna vara bra. Låt ögat ha sista ordet!