”Every artist gets asked the question, “Where do you get your ideas? ”The honest artist answers, “I steal them.”
En bok man återkommer till och som alla borde läsa. I boken ”Steal Like an Artist” utforskar Austin Kleon idén att varje konstnär får frågan ”Var får du dina idéer ifrån?” och att den ärliga konstnären svarar ”Jag stjäl dem”. Kleon ifrågasätter traditionella uppfattningar om originalitet och uppmanar istället till att aktivt söka inspiration från andras arbete för att utveckla och forma vårt eget kreativa uttryck.
Kleon menar att genom att vara öppna för influenser och tillåta oss själva att absorbera och transformera idéer från olika källor kan vi hitta vår unika röst och skapa något nytt och spännande. Istället för att kopiera rakt av handlar det om att kombinera, omforma och bygga vidare på det som redan finns.
Genom att stjäla inte bara idéer, utan också tekniker, stil och perspektiv från olika konstnärer och kreativa verktyg, kan vi berika vårt eget skapande och utvecklas som konstnärer.
”Steal Like an Artist” uppmanar oss att bryta ner konstgjorda hinder och istället omfamna en kultur av lärande, anpassning och kreativt utforskande. Genom att öppna våra sinnen och vara medvetna om vår omgivning kan vi hitta oväntad inspiration och utveckla vår egen unika konstnärliga röst.
Har du någon gång stört dig på den tidskrävande tiden det tar att få igång xampp eller vampp för att sedan skapa databaser för att sedan få det att synka med wordpress för att kunna jobba lokalt. Laragon erbjuder en mycket enklare lösning. De erbjuder en lokal server där wordpress och databas kan installeras med ett par klick så du snabbt kan börja utveckla. Inga mer bekymmer för att komma igång med dina projekt.
Laragon skapar även en virtuell host och vad de själva kallar pretty-link så du lättare kan komma åt dina projekt i webbläsaren på ett mer enklare sätt. Dina projekt lägger du helt enkelt under mappen laragon/www/
När du installerat Laragon så ser det ut så här:
Tryck på start all för att starta din lokala server. Om du nu vill installera wordpress på den så trycker du höger musknapp var som helst i det öppna fältet på bilden ovan och väljer quickapp – wordpress. Fyll sedan i project name och följ installationen. Nämnde jag att det går att installera många olika wordpress-installationer? Jo en mycket bra fördel med Laragon är att du kan skapa hur många wordpress installationer du vill. Supersmidigt ifall du håller på med flera sajter samtidigt.
Min webbutvecklar-bana började tidigt i högstadiet. Vi använde oss då av Microsofts egna notepad och skapade hemsidor utan någon syntax highlighting. Det var kul och spännande att man kunde skriva kod i ett textdokument. Funkade väl då men idag blir det svårt. Senare när man började på universitet installerade jag notepad++. Man tyckte den då var jättebra. Där hade man syntax highlighting och man kunde fysiskt se vad som skiljde koden man skrev. Notepad++ som idag anses vara en enkel texteditor har ändå ett stort plats i mitt hjärta för det var ändå där jag lärde mig mycket av vad jag kan idag.
Nästa steg i karriären blev jEdit. Fortfarande på högskolan då kursen man då läste ville att man skulle köra just den textredigeraren. Härligt nördig men kändes gammalmodig och inte så visuellt vackert att kolla på. Lämnade den efter kursens slut. Fortsatte med min notepad++ ett tag till medans man sökte för en mer visuellt finare texteditor. Hittade då en som hade fått bra kritik, nämligen. Sublime Text 2. Denna texteditor kändes nyskapande och man tyckte den hade allt. Skapat många projekt i den editorn. Den var visuellt snyggare och hade rätt många funktioner som underlättade. Multiple selections var nytt och spännande. Temat var mörkt och mer behagligt för ögonen.
Men som vanligt börjar man kolla på alternativ och hittade därefter en mycket trevlig texteditor som jag kan rekommendera än idag. Styrkan ligger i att den har ett stort användarnätverk och antal plugins som finns till Atom är idag många. Några som är värda att nämna är :
Emmet
Beautify
Snippets
Många bra plugins som hjälper och förenklar kodandet. Atom erbjuder mycket och kan mycket. Atom är en redigerare som man också arbetat mycket i. En redigerare som är kapabel till det mesta.
Däremot har jag nu gått över till Microsofts Visual Studio Code och låt mig förklara varför.
Den har ett stort användarnätverk.
Den har ett stort antal extensions och plugins.
Den har emmet inbyggt.
Den har en live-server som faktist fungerar.
Den är gratis
Den har också många bra extensions. Här kommer några som jag kan tipsa om.
Visual studio Code har numera blivit min nummer ett textredigerare. Men man vet aldrig när man vill byta igen.
Hur har er bana sett ut? Vilken textredigerare kör ni?
Vikten av att veta din besökares upplevelse och uppförande är viktigt för att din hemsida och dess innehåll skall nå fram till besökaren. Genom att låta någon vän eller dylikt besöka din hemsida eller kommentera dess design kan ge ledtrådar kring hur majoriteten kommer uppfatta din sida men räcker det? Många faktorer kan påverka besökarens upplevelse och hur de kommer navigera och söka på din hemsida. Frågor som du kan ställa dig är till exempel om besökaren bara kommer att besöka din hemsida enbart på mobilen eller bara på en dator. Fungerar hemsidan lika bra på båda saker och uppfattats designen och innehållet lika bra på båda?
Besökaren som en bil på motorvägen
Rollen som en webbdesigner är att hjälpa mottagaren att kunna identifiera vad det handlar om och vem avsändaren är, oavsett om det handlar om en hemsida, reklam, information eller bruksanvisningar. Ta till exempel vägskyltar, de skall uppfattas i en hastighet upp till 110 km/h. Skylten skall bland annat få förarens uppmärksamhet, ge ett tydligt budskap och skall kunna upptäckas i god tid. Man kan göra en liknelse när vi surfar på på internet. När vi designar hemsidor tror vi att besökaren kommer titta på alla element som finns på dem. Vad som egentligen händer (om vi har tur) är att besökaren blickar igenom hemsidan, skannar lite av texten och klickar på den första länken som fångar deras intresse eller vagt liknar saken de letar efter, och snabbt går det, likt bilen som går i 110 km/h på motorvägen.
Som du kanske börjar ana är det lite mer komplicerat att förstå hur en besökare till en hemsida kommer uppträda när de besöker er hemsida. Ofta men inte alltid antar vi webbdesigners, att besökaren kommer använda hemsidan som vi gör och vi tror ofta att vi har en stark vision på hur vår design kommer uppfattas av besökaren. Har vi det?
Lite grundfakta kring gemene internetanvändaren
För att vi ska kunna skapa bra användbarhet och en bra design när vi bygger hemsidor kan det vara bra att ha grundläggande information kring hur folk använder hemsidor.
Vi läser inte hemsidor. Vi skannar dem.
Jo du läste rätt. Ett av de få väldokumenterade fakta om webben är att människor spenderar väldigt lite tid att läsa hemsidor. Istället, skannar eller skummar vi dem, letandes efter ord eller fraser som fångar vår blick. Varför gör vi då detta?
Jo:
Vi har vanligtvis bråttom. Mycket av vårt webbsurfande är motiverande av önskan att få oss att spara tid. Webbanvändare tenderar att agera som hajar: De måste hålla sig rörande, annars dör de. Hur många gånger per dag slänger du upp mobilen för att snabbt söka upp något? Själv gör jag det ofta och snabbt likt hajen skummar jag igenom efter mitt mål.
Vi vet att vi oftast inte behöver läsa allting. På de flesta hemsidor, är vi ofta bara intresserade i en bråkdel av vad som finns på hemsidan. Vi söker endast efter bitar som matchar vårat intresse, resten blir irrelevant. Genom att skanna är hur vi fångar de relevanta bitarna.
Vi är bra på det. Vi har scannat tidningar, magasiner och böcker hela vårt liv för att hitta delarna vi är intresserade i, och vi vet att det fungerar.
Detta kan göra arbetet för en webbdesigner problematiskt ifall man inte har koll på det. Det kan vara många grafiska element som skall synas och en visuell hierarki skall följas. Klientens önskan kring design och hur mycket information som skall vara med kan göra jobbet för en webbdesigner extra besvärligt. Så hur skall vi agera därefter?
Punkter som kan vara värda att tänka på.
Vem? (Mottagare/målgrupp) Det är viktigt att veta så mycket som möjligt om mottagaren och hur hon/han tänker för att effektivt kunna nå fram med budskapet. Kom ihåg att man alltid kommunicerar på mottagarens villkor.
Vad? (Budskapet) Vad vill man säga måste framgå tydligt.
Hur? (På vilket sätt) Vilken är den bärande idén i budskapet? Hur skall budskapet utformas, både grafiskt och i text, för att bli uppmärksammat?
Var? (Vilken kanal) Vilken slags hemsida riktar sig designen till. Design som passar en viss typ av företag eller föreningen kanske inte kan tillämpas på det ena eller det andra.
Genom att i förväg sätta upp punkter och förhållningssätt kan vi utforma webbdesignen utifrån dessa mål som vi satt upp i ett tidigt skede. Genom att arbeta mer på detta sätt kan man dels spara tid men även jobba utifrån en plan efter hur folk kommer agera på din hemsida som du kan presentera för din klient.
Tips när det går undan.
Eftersom användaren snabbt skannar av och uppträder som en haj i havet finns det saker som gör att du kan få besökarens uppmärksamhet så att de ser och förstår så mycket av din webbdesign som möjligt. Här kommer fyra tips:
Skapa en klar visuell hierarki på varje sida – Detta för att fånga användarens uppmärksamhet och guida dem med hjälp av din design
Visa tydligt vad som är klickbart – Eftersom vad en stor del av internetanvändaren gör på nätet är att leta efter klickbara element är det viktigt att visa vad som är klickbart och inte.
Dela in sidan i tydliga definerade områden – Att dela sidan i tydligt definierade områden är viktigt eftersom det gör det möjligt för användare att snabbt bestämma vilka områden på sidan att fokusera på och vilka områden de på ett säkert sätt kan ignorera
Minimera visuellt brus – Att ha för många grafiska element på sidan kan ge motsatt effekt och göra användaren irriterad och välja att stänga ner hemsidan för att gå vidare i sökandet.
Värt att nämna är att människor har olika mycket tolerans för distraktioner och komplexitet. Vissa människor som surfar har inga problem alls med komplicerade hemsidor och mycket visuellt brus, men många har det och tröttnar fort och surfar vidare.
Slutord
Därav så är det en bra idé att utforska om hur folks surfvanor fungerar i verkligheten. Kommer de att titta på alla element som du designat fram? På vilket medium kommer de främst att titta på din hemsida? Frågorna kan bli många men att tidigt börja tänka på hur ens design kommer uppfattas och användas kan vara värt att tänka på för att öka användbarheten. Du kan själv göra ett snabbt test och besöka en hemsida du ej besökt förut där du söker något speciellt på just den hemsidan. Fokusera extra noga på vad du kollar på först och hur du navigerar dig på sidan. Fråga dig själv sen varför du gjorde på det viset du gjorde och hitta du det du sökte efter? Hur lång tid tog det?. Säkert fanns det olika element som sökte din uppmärksamhet och påverkande ditt sökande positivt och negativt.
Att skriva på webben är inte helt olikt som att skriva för tryck. Många principer stämmer för båda och kan tillämpas för respektive medium. Oavsett om du använder dig av pixlar, ems eller viewport width finns det några saker att tänka på och akta sig för så att inte texten blir svårläst för besökaren. Här kommer några tips för att förbättra typografin.
Tips nr 1: Gör inte dina textrader för långa.
Detta är något som ofta kan förekomma på hemsidor. Jämför dessa två texter, vilka anser du lättast att läsa?
En rekommendation är att hålla sig till max 75 tecken i bredd. Allt längre än det blir svårt att läsa och orsakar onödig belastning på ögonen på grund av avståndet ögat måste resa från vänster till höger och tillbaka igen. Hur gör vi detta med css? Jo, sätt en max-width på elementet paragrafen är i. Själv rekommenderar jag att ställa in en max-width separat i en container eller en grid-klass istället för på paragraf-elementet i din css för om man i framtiden vill ändra på textens bredd eller storlek blir det då lättare att korrigera.
Tips nr 2: Rätt radavstånd.
Titta på dessa tre paragrafer. Vilken tycker du är lättast att läsa?
Felaktig radavstånd bidrar till en svårläst text. Avståndet mellan raderna skall vara så stort att det bildas ett tydligt ljusrum. En bra tumregel är att hålla radavståndet mellan 140% till 180% av grundstorleken på fonten. Mindre gör det svårläst och känns trångt medans större gör att ögat kan förlora sin fokus och man blir vilsen i texten. Hur tillämpar vi detta med css då? Jo säg att du har en font-size på 18pixlar och du siktar på att ha ett radavstånd på 150% så multiplicerar du helt enkelt din font med 1.5 för att få rätt radavstånd: 27 pixlar.
Typsnittet själv kan avgöra vilket radavstånd som krävs. Ett typsnitt med långa upp- och nerstaplar behöver mycket luft för att staplarna inte skall kollidera. Titta på bilden nedan:
Tips nr 3: Undvik tunn font om inte designen kräver det.
Kanske ett av de vanligare problemen på nätet när det gäller typografi på webben. Nämligen användandet av extremt tunna sans-serif typsnitt för stycketext. Detta gör texten svårläst eftersom texten börjar blekna mot bakgrunden på grund av bristen på kontrast. Ett exempel på ett för tunt typsnitt:
Försök och läs texten där. Märker du att du kämpar för att läsa den? Mer fokus krävs för att läsa den. Läsbarheten minskar och läsningen blir mycket mer irriterande än den verkligen måste vara. Jag rekommenderar att du väljer en vanlig vikt för brödtext. Att läsa tunna fonter kan vara en fin effekt i korta partier men att läsa den i en längre form blir ansträngande.
Tips nr 4: Skapa en bättre hierarki med fetstil på dina Rubriker.
Kan kännas självklart men en tydlig hierarki är avgörande för att kontrollera läsarens fokus, särskilt i komplexa applikationer som visar massor av data. Även om det brukade vara vanligare för ett par år sedan, brukar jag fortfarande se att många använder mycket tunna vikter för rubriker på webbplatser. Hur svårt är det att se rubriken nedan?
Det finns ofantligt mycket böcker och artiklar om typografi om man vill lära sig mera men detta är enkla knep som ger en bra grund. Som webbdesigner är det en bra egenskap att ha grundläggande information om hur man ska presentera text på nätet. 95% av informationen på webben är nämligen text.
