FORM reklam RSS Feed

Tips och råd för en lyckad hemsida

hans@formreklam.nu — 2009-12-22T08:38:21+01:00

SÅ GÖR MAN EN SNYGG WEBBPLATS

10 STEG TILL EN BÄTTRE DESIGN

Bakom denna djärva rubrik finns många goda tips och råd, men få är generella då skönheten ligger i betraktarens öga som man brukar säga. Vi har iallafall försökt hitta det vi anser är grundläggande i en bra webbdesign och lutar oss mot en artikel på ajaxflakes.com, en blog om modern webdesign.

Idag används ordet web 2.0 flitigt, men trots ordets många definitioner och otydlighet så sammanfattar det känslan i den design vi förespråkar på ett bra sätt. Ajaxflakes.com ger en bra definition på vad de menar med web 2.0 design: en nytillkommen formskola inom webbdesign knuten till de förändringar som webben genomgår idag mot starkare sociala strukturer och större interaktivitet . Man kan även se en annan trend mot ett rikare mediainnehåll (filmer och flashapplikationer), men denna inrikning har vi inte tagit upp här då den skiljer sig så mycket från övrig webbdesign och skulle behöva sin egen artikel.

Vad är då snygg web 2.0 design? En funktionell, social och interaktiv design? I slutändan handlar det om ett bra helhetsintryck som naturligtvis är större än de ingående delarna. Det kommer man aldrig ifrån. Men för att underlätta att nå fram till en bra design har vi fokuserat på antal punkter värda att ta fasta på. Det blir ingen formel för den ultimata webbdesignen och det går inte att följa punkterna slaviskt för att få en snygg webbplats. Tipsen utgör istället viktiga komponenter på väg mot en design som känns modern, är funktionell och attraktiv.

1. ENKELHET
Detta är det absolut viktigaste inom web 2.0 design. Men enkelhet är inte detsamma som torftighet eller extrem minimalism. Istället ska sidorna utformas med några få välarbetade element. Man kan uttrycka det som att man bör ta bort så mycket onödig information och effekter som möjligt, men det som finns kvar ska man arbeta noggrant med och göra så genomarbetat som möjligt. Jämför gärna med heminredning - nårga få vackra möbler ger bättre intryck än både många mindre vackra möbler eller för den sakens skull många vackra möbler som bara slåss om uppmärksamheten.

Se besökarens uppmärksamhet som en ändlig resurs - ju mer du lägger in i designen som inte uppfyller syftet destå mer av användarens uppmärksamhets slösas också på detta.

2. CENTRERAD LAYOUT
Webbplatser vars sidor ligger i mitten av webbläsaren har blivit lite av en trend idag. Det är inte bara en stilfråga utan en sida som ligger centrerad upplevs som enklare, rakare och ärligare. Man tar plats mitt i besökarens fokus och levererar sitt budksap på ett tydligt sätt.

Ibland fyller sidorna upp hela webbläsaren i sidled, oavsett hur bred eller smal man gör webbläsarfönstret. Men även i detta upplägg utgår man från mitten på webbläsaren och bygger sidan till webbläsarens kanter. Ajaxflakes.com sammanfattar idén om centrerad layout med att rekommendera att alltid positionera sidorna centrerat, om det inte finns något speciellt skäl till att inte göra det.

3. FÅ KOLUMNER
Få kolumner knyter an tanken om enkelheten. Antalet kolumner som används på webbplatser har fallit under de senaste åren. Från ett snitt på fyra till tre eller färre. För mycket information förvirrar ögat, blir svårtillgänglig och informationsflödena börjar störa varandra. Få kolumner upplevs också som tydligare och rakare i kommunikationen. Man bör alltid ställa sig frågan - hur många kolumner, flikar eller boxar behöver vi verkligen för att föra fram vårt budskap. När hela webbplatsens design går mot enkelhet i form, sidpositionering och annat bör inte detta motverkas av för många kolumner och för mycket information.

Man kan däremot delvis komma undan att tvingas ha få kolumner med hjälp av design. Finns t.ex. en vertikal undermeny kan rätt designelement ändå skilja bort den från sidans övriga textkolumner. Samma gäller för en kolumn med banners eller informationspuffar. Då kan det vara möjligt att använda fyra kolumner, men det är inte alltför enkelt att åstadkomma detta.

4. TYDLIGT SIDHUVUD
Att ha en stort och tydligt sidhuvud är idag mycket populärt. Idén är visserligen inte ny, men den används nu mer än någonsin. Bildskärmar och skärmupplösningar blir större och formgivare tar för sig av den nya ytan med stora sidhuvuden. Sidhuvudet marknadsför logotypen, varumärket, och ger stadga åt hela sidan. Avsändaren, den som ligger bakom webbplatsen, blir tydlig.

Sidhuvudet talar om att här börjar sidan och allt som kommer sedan kan ta stöd i det tydliga taket. Sidhuvudet kan dessutom utnyttjas till grafiska ikoner och effekter (glöm bara inte enkelheten!) för att stärka intrycket av en väldesignad genomarbetad sida.

Många webbplatser har dessutom en horisontell meny i samband med sidhuvudet. Denna kan antingen läggas högst upp i sidhuvudet eller underst. I det senare fallet ligger logotypen överst vilket ger ett något mer fokuserat intryck och menyn är lättare att hitta. I sidhuvudet placeras också gärna generella och centrala funktioner som ska finnas tillgängliga på webbplatsens alla sidor.

5. ENKEL NAVIGATION
Denna punkt är relativt uppenbar. Navigationen på en webbplats ska vara lätt att hitta, förstå och nå. Använd tydliga menylänkar med hjälp av färgval och stor text. Markera vilken länk i menyn som är aktiv. Använd gärna vanlig text för att skriva länkarna, inte text som bild. Tydligheten gäller även för alla länkar på sidorna. Markera dem konsistent med färgval, understykning eller andra grafiska element. En länk behöver inte vara standardblå och understuken med solid linje. Bara det är uppenbar att det är en länk det är frågan om och att man inte bryter den stil man har valt för sidan.

Många sidor har undermenyer som även de behöver vara tydliga. Låt dina besökare förstå var de befinner sig i trädstrukturen. Placera eventuella undermenyer på samma ställe på sidorna och använd grafiska effekter för att markera aktiva menyval.

6. TILLVARATAGEN SIDAREA
Ett intressant begrepp som definierades av Edward Tufte är "data ink" och motsvarande "non-data ink ". Här ses sidans pixlar som en areal, lite som en bit mark, där man mäter hur mycket av ytan som används för att föra fram buskapet och kommunikationen och hur mycket som används till effekter, detaljer och annat som inte kommunicerar ut budskapet. Tufte skapar ett ratio mellan data ink och non-data ink, vilket kan mäta effektiviteten i en design. Ju högre del data ink destå troligare är det att designen är effektiv.

Det finns många exempel på hur sidor översållats med häftiga skuggningar, små linjer, ramar i ilika nivåer osv. Intrycket kan bli häftigt och intensivt, men kommunikationen blir dålig. Man slösar helt enkelt med besökarens uppmärksamhet vilken bara finns i en begränsad mängd. Ett exempel på för mycket non-data ink ges på Ajaxflakes.com: sidan http://www.yaxay.com/ använder många pixlar på effekter och överarbetade ytor och linjer.

7. STOR OCH LITEN TEXT
Balansen mellan stor och liten text har förändrats under åren. Förut var micro-typsnitt vanliga och rubrikerna var något större varianter av brödtexten. Idag är det istället vanligt att använda mycket stora typsnitt för rubriker och ingresser. Med större yta har fler möjligheter skapats och rubriker sätts i stora grader. För att motverka att det inte får plats med lika mycket text får författaren hålla sig kort vilket också vässar kommunikationen. Budskapet blir rakare och mer direkt. Rubriksättningen blir större och djärvare och det verkar också mot en tydligare kommunikation.

Denna utveckling skapar också en bättre balans mellan kommunicerande innehåll, data ink, och utfyllnad, non-data ink. Din text och det du vill säga hamnar mer i fokus. Det blir lättare att läsa dina budskap och dina texter. Även på sämre skärmar, platta skärmar i solljus, handdatorer, mobiler, når ditt budskap bättre fram.

8. VÄLARBETADE YTOR
Detta är en mer svårdefinierad punkt. Problemet grundar sig i att en datorskärm är en relativt stum och stel yta. Varje pixel lyser [förhoppningsvis] i samma styrka och med sitt ljus blir pixlarna inte beroende av omgivande ljus. Ett papper å andra sidan är en levande yta. Hur klorblekt det än är reflekterar pappret det omgivande ljuset och är aldrig lika vitt över hela ytan. Den är heller nästan aldrig 100% vit. De små nyanserna är vi vana vid eftersom hela den fysiska världen är full av dem. På skärmen försvinner detta helt och allt blir lika framträdande, lika starkt, lika exakt. Resultatet är att det känns livlöst och omänskligt.

När man då gör en form för en webbplats är det viktigt att motverka denna stelhet och livlöshet. De block och ytor som sidan består av kan ges svaga toningar, mycket små rundningar, skuggor, högdagrar och annat för att skapa liv. Det är dock mycket lätt att snubbla och vräka på för mycket. Då blir resultatet inte subtilt och därmed overkligt för oss. Återigen har det artificiella tagit över och vi upplever det som onaturligt.

Arbeta därför försiktigt på att mjuka upp dina ytor med subtila effekter. Reflektioner, glaskänsla, välvningar, speglingar kan alla användas med varsam hand. Rätt utnyttjat kan den stumma känslan i skärmgrafiken minimeras.

9. GRAFISKA EFFEKTER
De grafiska effekterna är godislådan i web 2.0 designen. De välarbetade ytorna i förra punkten slår an detta. Det finns en rad komponenter att använda sig av - ikoner, toningar, fylliga ikoner, polerade bordsytor/reflektioner, skuggor, blanka knappar och blickfångande stjärnor med erbjudanden. Det generella för dessa effekter är att de måste vara välarbetade, hellre få och välgjorda än många sämre som bråkar om uppmärksamheten.

Ikoner ska vara lätta att känna igen och designade med detaljer och mjuka toningar. Ikoner ersätter inte menylänkar, men när sidorna blir renare och enklare så finns större utrymme för avancerade ikoner som kan förstärka viktig information. De polerade borden är också nära överanvändning på moderna webbplatser, men det är ett enkelt sätt att skapa en tredimensionell djupkänsla i en platt miljö. Skuggor lyfter fram innehållet. En sida med skuggor längs kanterna står ut bättre mot bakgrunden. Knappar görs ofta blanka med reflektioner och högdagrar vilket också ger en fysisk känsla, lite som om det faktiskt gick att ta på knappen. Stjärnor används som slags etiketter för att föra fram erbjudanden. De utformas också ofta med toningar, blänk och skuggor för att verka realistiska. Nästan som om man faktiskt satt ett blankt klistermärke på sidan.

Det finns många fler effekter än dessa och alla bör användas varsamt. Effekterna är som efterrätten i designen, ögongodiset. Man kan inte bara ta en stor portion effekter utan det behövs en bättre grund att stå på. Men när grunden är lagd är det mycket trevligt att avsluta med nåt sött.

10. MÅLGRUPPSANPASSNING
En apekt som inte blir belyst på Ajaxflakes.com är målgruppsanpassningen. Visserligen är detta inget hanfast designgrepp men all design måste anpassas till den målgrupp man vänder sig till. Alla tidigare nämnda tumregler för att åstadkomma en bra webbdesign är underkastade målgruppsfokuset. Är du en myndighet som mer eller mindre vänder sig till hela svenska folket eller en fin restaurang som riktar sig till kräsna gourméer, blir det naturligtvis skillnad i hur du använder ovanstående punkter. En myndighet kanske tonar ner effekterna och detaljerna för att ge ett mer stadigt och pålitligt intryck, medan restaurangen satsar mer på sobra toningar och tilltalande ikoner för en exklusivare känsla. Kopplingen mellan form och målgruppskommunikation får vi kanske djupdyka i längre fram i en annan artikel.

INSPIRATION
SE EXEMPEL PÅ DE OLIKA TIPSEN HÄR

Enkelhet: http://www.rubyonrails.com/

Centrerad layout: http://crazyegg.com/

Få kolumner: http://www.wakeinteractive.com/

Tydligt sidhuvud: http://popurls.com/

Enkel navigation: http://www.simplebits.com/

Tillvaratagen sidarea: http://www.mediatemple.net/

Stor och liten text: http://www.37signals.com/

Välarbetade ytor: http://www.enhancedlabs.com

Grafiska effekter: http://www.artypapers.com/

KÄLLA

Webbyrån happines

http://www.happiness.se/artiklar/sa-gor-man-en-snygg-webbplats.php

En av mina spellistor på Spotify

hans@formreklam.nu — 2009-12-16T08:15:49+01:00

Har du Spotify?
Om du har det så antar jag att du skulle uppskatta ifall någon annan kunde dela med sig av en "favoritlista"!
Klicka på länken nedan så kommer du till en spellista som jag gärna dela med mig av!
FORM reklam´s spellista <--

Att välja rätt e-handelssystem

hans@formreklam.nu — 2009-12-03T11:17:00+01:00

För dig som går i tankarna med att starta upp en e-shop rekommenderar jag att kolla in denna länk - mycket nyttig läsning!

MYCKET smart och snyggt utfört!

hans@formreklam.nu — 2009-11-18T15:34:46+01:00

Klicka på denna länk så förstår ni varför!

Statoils nya logo

hans@formreklam.nu — 2009-11-05T10:43:22+01:00

Källa: market

Video i tryckta medier

hans@formreklam.nu — 2009-09-23T09:40:19+02:00

Tidskriften Entertainment Weekly, som ges ut i USA, kommer att ha rörliga bilder i ett kommande nummer.En av tidningssidorna har en liten tunn videospelare inmonterad som kan visa upp till 40 minuter långa filmer.Premiärvideon består av reklam för läskeblask och olika tv-program från CBS, som även är tidningens ägare.Videospelaren är 2,7 millimeter tjock och har en TFT LCD-skärm med upplösningen 320x240 bildpunkter. Det inbyggda batteriet räcker en dryg timma och kan laddas upp via en usb-kabel, skriver Cnet. Men det är inte alla läsare av tidningen, som kommer ut 18 september, som får rörliga bilder. Videoupplagan skickas bara ut till prenumeranter i New York och Los Angeles. Videospelaren för tryckta tidningar som heter Video-in-Print är utvecklad av USA-företaget Americhip.
Källa: Ny Teknik

Ledord för en Grafisk formgivare

hans@formreklam.nu — 2009-09-17T10:08:28+02:00

All reklam är image. Allt ett företag gör, vad chefen har på sig för kläder, hur kontoret ser ut, vad medarbetarna säger, är imagereklam eftersom det säger något om företaget.
-Låt din marknadsföring stämma överens med vad kunderna möter i verkligheten.

Vad är en grafisk profil?

Företagets identitet
Alla företag har en identitet gentemot sina kunder. Antingen den är medvetet framtagen eller inte, så finns den där. Man kan säga att identiteten är den bild omvärlden har av ditt företag. Den kan vara stark eller svag, positiv, negativ eller neutral och uppstår genom personlig kontakt med representanter för ditt företag, era besökslokaler, visitkort, korrespondens, annonsering, hemsidan mm.

Grafisk profil – en viktig del av identiteten
En stor del av företagets indentitet består av den visuella delen, den grafiska profilen. Är den ogenomtänkt eller bristfällig är det risk att företaget inte syns så bra i sin kommunikation, att det helt enkelt försvinner i mängden. Om en grafisk profil istället är genomtänkt och målmedvetet framtagen är mycket vunnet. Företagslogotypen har en stor roll i en grafisk profil.

Designprogram
En grafisk profil som medvetet tas fram för ett företag kan kallas för Profilprogram eller Designprogram. Detta är riktlinjer för hur logotypen och andra eventuella grafiska element ska placeras på visitkort, brevpapper, skyltar, bilar mm för att bilda en stark helhet. Vilket typsnitt och färger som ska användas brukar också kunna ingå i desigprogrammet.

Grafisk manual
För att kunna hålla ordning på Designprogrammet, internt och gentimot sina grafiska leverantörer, kan man skriva ner reglerna i en grafisk manual. Den grafiska manulen brukar dokumenteras i form av en trycksak, där tydliga bilder visar hur man ska och inte göra. Omfattningen på denna kan variera från ett par sidor till en tjock pärm, beroende på företagets storlek och profilens omfattning.

Vad är en logo?

Vad är en logo?
Logotypen visar företagets själ. Den är egentligen företagets namn satt i ett speciellt utvalt typsnitt. Ibland är detta typsnitt unikt framtaget för ett företags logo. Typsnittets tjocklek, spärrning och färg är också fastställda. Ofta ingår en unik symbol, speciellt framtagen för företaget och dess affärsidé. I dagligt tal säger man ofta logo eller logga istället för logotype. Företagsmärke är ett annat namn.

Så ser en bra logo ut
En bra logo är enkel. Så enkel att alla lätt kan uppfatta och känna igen den. Den är unik och genomtänkt och den säger någonting om företagets verksamhet. Den har oftast 2-3 färger men ska även fungera att tryckas i svart-vitt. Den ska kunna uppfattas i såväl små som stora format, på allt från visitkort till utomhusskyltar.

Källor: Logofabriken, Originalet

Googles korståg rullar vidare

hans@formreklam.nu — 2009-09-15T09:24:58+02:00

Kolla in Googles nyhetstjänst här

Tjänsten ger direkttillgång till material från trettiotalet medier som BBC, The New York Times och The Washington Post.

Google hävdar att det är lika lätt att bläddra bland nyheter med Fast Flip som i en tidskrift. "Riktigt snabbt utan onödig fördröjning" tar man sig fram bland artiklarna med hjälp av rejäl pil, sa företaget i sin presentation i måndags. Det ska gå fortare än det gör att ladda ner en webbsida.

Nu lovar Google, som tidvis haft ett ansträngt förhållande till publicister i USA, att dela med sig av reklaminkomsterna från sin nyhetstjänst.

Fast Flip presenterades vid teknikkongressen Tech Crunch 50 i San Francisco.

Källa: Di

DÖD! :(

hans@formreklam.nu — 2009-06-26T09:34:14+02:00

...artisten, Michael Joseph Jackson, är död!

Trist! Mycket trist!

Jag som såg fram emot att få se honom uppträda än en gång!

Må han vila i frid!

Sköna moves!

hans@formreklam.nu — 2009-06-11T09:02:38+02:00

Minst sagt annorlunda!

hans@formreklam.nu — 2009-05-27T14:20:18+02:00

...http://www.whoswestudios.com/flashsite.html

Istället för Powerpoint

hans@formreklam.nu — 2009-04-24T09:34:16+02:00

SlideRocket heter det webbaserade presentationsprogrammet. Snygga mallar och smart integrering med bildcommunityn Flickr gör det roligt att bygga snygga presentationer.

www.sliderocket.com

Inspiration

hans@formreklam.nu — 2009-04-17T13:39:31+02:00

Exempelbild från hemsidan: FFFFOUND

Idag hade jag lite tid över och surfade runt och ärligt talat minns jag inte riktigt hur jag hamnade på denna sida - FFFFOUND!?
Min passion för det vackra är stor och det finns inget bättre då man helt oförberedd "trillar över" en sådan hemsida. För mig är denna sida ett givet bomärke i min browser!

:)

Mailchimp

hans@formreklam.nu — 2009-02-26T14:56:56+01:00

Mailchimp
"E-postutskick är den mest kostnadseffektiva marknadsföring som finns. Detta trots att de svenska leverantörerna av nyhetsbrevsverktyg tar bra betalt för sina tjänster. Vi snackar tusenlappar i månaden om du har många mejladresser.

Men det finns en riktigt bra amerikansk nyhetsbrevtjänst Mailchimp som är billigare än jämförbara svenska tjänster. De har till och med en gratistjänst för mindre utskick. Här får du fantastiska funktioner som möjligheten att optimera utskick i realtid. Du kan exempelvis skicka en mindre mängd mejl med två olika ärenderader och sedan väljer Mailchimp att skickar resten av mejlen med den ärenderad som störst andel öppnade i provutskicket."

Källa: Jajja Magazine

Läs mer på: www.mailchimp.com

Framtiden är här

hans@formreklam.nu — 2009-02-05T07:44:31+01:00

Bambuser

Vad är nu det för något?
Jo, det är ett Malmöbaserat företag som tagit fram ett program som låter dig streama film live via din mobilkamera till en hemsida.
Besök deras hemsidan och botanisera mer i ämnet! En mycket smart affärsidé som andas FRAMTID.

Google fortsätter utvecklingen
En annan nyhet som jag också fick nys om igår är att Google Maps och Google Earth har uppdaterats med riktigt snygga funktioner. Har du inte redan sett det så är det ett måste. Ladda hem den senaste uppdateringen av Google Earth här.

Inte nog med det utan ännu en ny tjänst från Google, kallad Google Latitude, lanserade i dagarna. Med hjälp av ”Google latitud” kan dina vänner se på en karta i sin mobiltelefon eller på sin persondator var du är!!!

-Holy smoke! :)

Översättningshjälp

hans@formreklam.nu — 2009-01-15T11:39:49+01:00

Kanske du sitter och knepar och knåpar och försöker formulera dig på engelska!?
Hoppa över det, skriv in din svenska text på nedan sida/länk och klicka på översätt så är allt löst (nästan).

Eller kanske du har surfat in på en engelskspråkig sida där du inte riktigt får grepp om vad de menar. -Enkelt! Kopiera adressen och klistra in den i översättningsrutan och klicka på översätt - så översätter Google hela sidan åt dig, precis som den ser ut.

Google Översättning - Rekommenderas starkt! :)

-Fantastiskt!