Blogg

• 08.10.2015 19:35

  Egen e-handelssida

  Som examinationsarbete i kursen Web-och interaktionsdesign skulle man skapa en egen e-handelsida med produktbilder, imagebild, affärsidé osv.
  Jag valde att göra en webshop som säljer smycken och tillhörande presentaskar/påsar. Anledningen till att jag valde detta var att jag själv gjort smyckena och har dessa presentaskar hemma sedan tidigare. 

  Målgruppen som jag anpassat till är tjejer/kvinnor som gillar smycken men vill skilja sig från mängden och ha något unikt som inte kostar alltför mycket pengar. Det finns bara ett fåtal av varje smycke vilket gör det extra viktigt att jag har en uppdaterad lagerstatus och ligger i framkant med nya designer som man snabbt kan ladda upp och börja sälja. Smyckena ska ha ett bra pris men inte för lågt för att verka för ”billigt”.

  Loggan är inspirerad av himlen varav den blåa färgen och namnet ”Steinar” lånade jag av en vän eftersom jag ansåg att Larsson var lite tråkigt.
  
  Här nedan ser du resultatet av e-handelssidan.
  Klicka på bilden och den öppnas i nytt fönster. 
  
  Startsida: 
  
  
  Produkter/Smycken:
  
  
  Produkter/Presentaskar:
  
  
  Om oss:
  
  
  Kontakta oss:
   
  
  Varukorg:
  
  
  Kassa:
  

  
  Klicka gärna på loggan för att ta dig vidare till sidan.
  

• 07.10.2015 12:00

  Såhär skapar du snygga produktbilder

  Produktbilder
  
  Att ha proffessionella prduktbilder på en e-handelssida är idag a och o. 
  Risken finns att om du har kassa bilder att kunden väljer en annan sida att shoppa från.
  
  Skapa en ministudio med ett vitt, tjockare papper (ju större desto bättre), en reflexskärm/extern blixt och ett fönster.
  Ställ in din kamera på lågt ISO, kort slutartid och ha gärna något högre bländartal för att produkten ska komma i fokus och bli så bra som möjligt på bilden. 
  Skulle rummet/vädret göra minlön mörkare kan du använda ett stativ och längre slutartid istället för att dra upp ISO.
  
  När du sedan ska göra en friläggning av bilden i Photoshop kan du använda dig av  (Magic Wand) eller  (Lasso).
  Magic Wand är ett bättre verktyg att använda om bilden har tydliga konturer medan Lasso är bättre vid finjustering. Självklart kan man jobba medverktygen samtidigt och få ut ännu mer utav bilden. Man kan t.ex göra själva grovmarkeringen med Magic Wand och sedan använda Lasso för att finjusterina markeringarna.
  
  Tips
  Använd aldrig  suddgummit för att frilägga en bild. Detta för att om man suddar på en bild kan man aldrig få tllbaka just den informationen man suddas ut. Man kan istället använda masker för att dölja/visa det man önskar i bilden.
  Video för vidare instruktioner finner du om du klickar här>>
  
  Nedan kan du se en friläggning jag gjort med hjälp av "Magic Wand"-verktyget.
  Jag valde även att ändra bilden till svartvit.
  
  Före:    
  
  
  Efter:
  

• 06.10.2015 13:43

  Interaktionsdesign - Vad är det?

  Klick, attraction och gameification
  
  Interaktionsdesign handlar man ska få en bra användarupplevelse av en ehandelssida. Fokus är också att företaget som har ehandeln vill få besökaren att klicka på det man lagt upp. Det kan t.ex vara en köpknapp.
  Man delar upp ordet "interaktionsdesign" i tre delar: 
  
  Inter = Mellan
  Aktion = Handling
  Design = Förmedla/ge mening

  När man dras till något som skiljer sig t.ex i annan färg, form eller text kallas detta för "anomali". Att använda sig av detta gör det effektivt fångar besökarens uppmärksamhet.
  Här ser du ett exempel:
  
  Vilken knapp hade du valt? Sannolikheten är att du skulle valt den röda eftersom den skiljer sig från mängden.
  
  Gamification
  Detta menas med att besökaren får någon form av feedback från ehandelsföretaget t.ex hur långt man har kommit i en köpprocess. En annan sak kan vara att sidan uppmärksammar att "Du har produkter kvar i din kungkorg" osv.
  Detta typ av gränssnitt kan göras både med texter eller bilder. Att använda Gamification ger besökaren en trygghetskänsla.
  
  Semiotik
  Detta betyder (teckentolkning) och med hjälp av det kan man styra sina bilder på sidan utefter vad man vill förmedla. Alla bilder bör ha en anledning till varför den ligger där den ligger, men framförallt varför man valt just den bilden. "Bilder säger mer än tusen ord" har man ju hört tidigare och därför är dina bildval otroligt viktiga för att kunna stärka ditt buskap på ett korrekt sätt. Man måste tänka på att bilder "pratar".
  
  Tisp att tänka på:
  Ca 43% av alla som besöker en sida tittar uppe i vänstra hörnet av skärmen först. Därför kan detta vara ett smart ställe att placera det man vill att besökaren ska se först.

• 29.09.2015 12:00

  Att arbete med projekt i grupp

  Projektarbete i grupp
  När man ska göra ett arbete/projekt i grupp behöver man se till att alla är involverade och att alla får ta del av allt som ska göras i arbetet. I ”det riktiga arbetslivet” utser man oftast en projektledare som ser till att alla delar i arbetet blir gjort. Ofta jobbar man mot en deadline och därför är det viktigt att ha en som håller i alla trådar i gruppen.

  När det kommer till ett skolarbete kan man även där utse en projektledare men i detta fall var det mer viktigare att alla skulle få göra en liten del i alla uppgifter än att en och samma person gjorde en full del själv. På så vis får alla lära sig lite om varje del.
  
  Tips vid arbete i grupp:
  - Bestäm en plats, dag och tid när man ska träffas.
  - Fixa fika/lunch.Bryt av med pauser för att inte fastna i fel tänk i arbetet.
  - Låt alla få komma med idéer och tankar kring projektet.
  - Gör hellre fler utkast än att ”spika” första idén i projektet.
  - Tänk på vilken målgrupp man vänder sig till. Utgå alltid från: För vem? Vad? Vilken effekt ska uppnås?
  - Räkna alltid med att ett projektarbete kan ta flera timmar/dagar/år beroende på hur stort det är. Stressa inte igenom det.

  FIBA – en modell att använda vid projektarbeten.
  När man arbetar i projekt finns en from som vår utbildare lärde oss so även han har varit med och tagit fram, FIBA. Det står för Formulera – Idégenera – Bygga – Agera. Modellen bygger på att man först måste ta reda på om det finns ett problem eller vad det är man ska göra. Därefter spinna idéer och då gäller det att ta med alla idéer och även tänka på hur det skulle kunna se ut. Efter att man har gjort detta börjar man bygga på varandras idéer. I "agera" går man igenom vad som ska genomföras och vem gör/ansvarar för vad. 
  
  Nedan följer ett exempel på ett projekt som visar hur det skulle kunna se ut när man tar fram en ny webshop för ett nytt företag: 
   

  
  
   

  Målgrupp: Personer som äter spceialkost d.v.s. gluten-och laktosfria produkter. Målgruppen inlvolverar både familjer, sambos, singlar, barn osv. Alla som behöver specialkost. När man fått en klar bild på hur målgruppen är blir det lättare att ta fram ett företag med affärsidé och vision. Här nedan följer några punkter man ska tänka på att gå igenom för att inte missa något när man startar ett projekt i form av en webbshop för ett nytt företag. Använd denna som en liten ”To Do List”. Tänk på att alltid fylla på den ju längre man kommer i projektet.

  - Cirkulärt (Kom fram till en lösning/idé som kan konkurrera på e-handelsmarknanden)
  - Värdegrundsdrivet (vad ska företaget ha för värdegrunder?)
  - Företagsnamnet?
  - Vilken leverantör av webbsida ska användas?(Jämför innan man väljer)
  - Affärsidé/vision?Presentation (ex. powerpoint)
  - Logga (kanske även en slogan)
  - Vad är målet?
  - Hur stort utbud?
  - Utseende/design? (färger, teckensnitt, bilder osv)
  - Vilka leveransalternativ/betallösningar ska finnas?
  - Produkter (information, innehållsförteckning, valalternativ för produkten osv)
  - Företagsinformation (om oss och kontaktuppgifter)

  Det finns mycket mer och därför är det viktigt att hålla listan uppdaterad.
   

  När det gäller projektarbeten i skolan är det viktigt att alla är med och är involverade. Man behöver hjälpas åt och alla måste få göra en liten del i allt för att skaffa sig mer kunskap och färdigheter inom området.
  Nedan kan man se hur ett resultat efter en dags arbete i grupp kan se ut.
  En Powerpoint gjordes för att presentera företaget och hur man har tänkt med affärsidé/vison, betalsätt, varför man ska välja Intoleranaboxen, cirklurttänk osv. (klicka på bilden för större bild)

  

  

  

  

  

  Detta projekt valdes att göra i Wix (www.wix.com) som erbjuder en hel del verktyg gratis i att bygga upp en hemsida/webshop. Läs gärna lite mer om tips hur man kan välja ut en bra leverantör av hemsida/webshop under tidigare blogginlägg "Webshop - Vad ska man tänka på?".
  Resultatet av Intolerantaboxen.se blev såhär efter att man arbetat med det i Wix:
  
  Startsida
  Här ser man vilka boxar som är populärast och är anpassade till målgrupperna. Eftersom företaget vill vara en seriös aktör på marknaden har man valt att registrera sig hos Trygg E-handel och följer deras villkor. Kundkorgen finns längst uppe i högra hörnet och man ser alltid X antal artiklar som finns i den.
  Vill man prenumrera på en box finns det tydligt en knapp för detta på startsidan där man går vidare och fyller i formulär för detta. 

  
  
  Rullgardinsmeny
  Rullgardinsmenyn finns för att det ska bli enklare att orientera sig runt på sidan. Det finns i dagsläget enbart 4 kategorier vilket gör att det inte blir för "kladdigt" och för mycket "onödig information".
  
  
  Produktpresentation
  Här har man valt att gå in på "Familybox" från startsidan. Man ser en tydlig innehållsföretckning vad som ingår i boxen, pris och även en rullgardinsmeny där man an välja om man vill ha glutenfritt, laktosfritt eller både och.
  En kort produktbeskrivning finner man under bilden.
  
  
  Om oss
  Här kan man läsa om varför företaget startades och företages värdegrunder samt cirkulära tänk.
  
  
  Kontakta oss
  Här kan man som konsument kontakta företaget för att t.ex få svar på funderingar eller lämna feedback. 
  

• 10.09.2015 12:00

  CSS - Vad är det?

  CSS står för "Cascading Style Sheets" och är det som styr själva designen, bakgrunden, stilen m.m. i HTML-filerna när man lägger ut filerna för att bilda en webbsida på nätet.
  I CSS arbetar man med { } istället för <> som man använder i HTML när man arbetar med koder. 
  På www.w3schools.com finner man en s.k. WYSIWYG-Editor (What You See Is What You Get). I denna kan man enkelt koda HTML och CSS för att se hur resultatet ska komma att bli. På W3schools kan man även hitta färdiga koder som man kan använda sig utav för att formatera efter det man vill att utseendet ska ha. Hemsidan är uppbyggd så att det är väldigt enkelt att navigera sig runt och lära sig hur HTML och CSS fungerar. De erbjuder även att lära sig om andra dataprogram t.ex Javascript.
  
  Här nedan ser man ett exempel på 2st HTML-filer där det knyts samman med en CSS-fil som lägger grunden för bakgrund, text och färg etc.

  CSS-fil i programmet Notepad++
  
  
  Här ser man resultatet:

    

• 10.09.2015 09:00

  Webshop - Vad ska man tänka på?

  Att starta upp en webshop
  När du ska starta en webshop bör du göra en research på vilka olika typer av leverantörer av webhandelssystem det finns.
  Det gäller att jämföra och googla sig runt för att få så mycket information som möjligt.

  Tips på vad du ska jämföra:
  - Pris (dyrt/billigt, paketpriser etc)
  - Uppbyggnadskostnad 
  - Support
  - Anpassad för stora/små företag
  - Kodar man i HTML/CSS
  - Hanteringen av sidan

  Gör en "brutto-lista" på alla webshopar du hittar på nätet och välj sedan ut 10st som du går djupare in på för att därefter välja ut 5st som du kontaktar och ber om offert osv. 

  Några exempel på sidor där du kan starta en webshop:
  - Tictail
  - Textalk
  - Smelink
  - Wikinggruppen

• 09.09.2015 12:00

  HTML - vad är det och hur gör man?

  HTML är förtkortning för HyperText Markup Language. Det är ett det språket som hanterar länkar och som man delvis kan bygga en hemsida med. Det vanligaste sättet man bygger upp detta på är: head, header, rightnav och footer. "Hyper Text" är det tekniska termen alltså själva länken.

  Exempel på hur det skulle kunna se ut på en e-handelssida:

  

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

   

  
   

  När man jobbar med HTML bör man tänka på följande:

  - Ladda ner Notepad++ (PC) eller Textwrangler (Mac). Dessa program är bättre att jobba i när man ska skriva dina HTML-koder än t.ex Word.
  Man har möjligheten att spara ner filen som HTML-fil på datorn som man sedan kan lägga in i browserfältet på webben och se hur HTML-koderna blev om de skulle synas online på webben.
   

  Här nedan ser man hur det kan se ut efter att man jobbat i HTML-koder.

  HTML-koder i Notepad:

  

  När HTML-filen läggs ut i browserfältet: 

  

• 04.09.2015 12:00

  Photoshop - Hur fungerar det?

  Photoshop är ett professionellt verktyg där du kan förbättra bilder, designa och retuschera m.m. Idag används detta vertktyg av fotografer, grafiska formgivare och även privatpersoner. Photoshop är ett gigantiskt verktyg men lär man sig "the basics" kan du bli förvånad av hur kul och enkelt det är att arbeta i det.
  En sak man kan tänka på vid val av språk på Photoshop är att det oftast är enklare att hitta hjälp på webben om man har sitt Photoshop på engelska. Detta är för att många utav ordet översätts inte på "rätt svenska".

  Bra att känna till och göra innan man börjar jobba i Photoshop:
  - Gå igenom rullgardinsmenyerna. På så vis orienterar du dig runt lättare efteråt.
  - Skapa gärna flera olika lager för att prova dig fram hur mycket du kan göra med bilden. Vill du sedan ta bort något är det enkelt att gå tillbaka till det lagret och radera istället för att radera i orginalet.
  - Att lägga in textlager är precis likadant som att infoga en textruta i Word eller Powerpoint. Du hittar textsymbolen på vänster sida i verktygsfältet. Klicka alltid på enter när du är klar så infogas den.
  - Du kan alltid ställa musknappen utanför bilden i "bakgrunden" om du vill avmarkera bilden som du håller på i.
  - Ångrar du något ta alltid CTRL + Z, då ångrar du det senaste du gjorde. Vill du ångra ännu längre bak kan du ta CTRL+ALT+Z.

  Du kan enkelt ladda ner Photoshop gratis i 30 dagar för att prova på det. Klicka här för att komma dit direkt.

  
  Nedan kan du se en bild där jag jobbat med två bildlager och även lagt in textlager.
  Är man mer hemmastadgad i Photoshop går detta sjävklart att göra mycket proffsigare men till en början är detta en bra övning. Versionen jag har arbetat i är CS3. 

    

• 04.09.2015 09:00

  Snapseed och Fotor - Bildredigering

  Vi har gått igenom två olika appar som är gratis att ladda ner från Appstore/Google Play samt att man också kan jobba med dom online på webben. Dessa appar heter " Snapseed " och "Fotor". 
  
  Snapseed - Ett gratis bildbehandlingsverktyg som en app man kan använda i mobilen. För att vara en gratis app erbjuder den otroligt mycket verktyg att korrigera bilder med. Man kan ändra ljusstyrka, kontrast, sudda bort det man inte vill ha med på bilden m.m. Man kan även punktredigera vilket betyder att man kan välja ut vissa delar av bilden och ändra utan att resten av bilden påverkas. 

  Fotor - ett gratis bildbehandlingsprogram som man kan använda direkt på webben. Den fungerar i stort sätt som Snapseed men liknande vertyg och justeringsmöjligheter. Fördelen med Fotor är att du alltid har möjlighet att arbeta i programmet eftersom det finns på webben, det spelar ingen roll vilken typ av dator man använder. Fotor går även att ladda ner som app men vissa korringsverktyg behöver man betala en slant för att använda.
   

  Här nedan kan du se en bild som jag valt att redigera i "Snapseed":
  
  Före:                                                         Efter:
      
  Jag valde att göra en vinjettering (mörka ner runtom) för att bilda en liten ram. Därefter la jag lite extra värme i Marley's päls för att få en mjukare ton på honom. Jag mörkade även ner bilden lite för att få lite "starkare" färg.

  Tips på ordning hur du enklast redigerar ett foto:
  1. Ljus (ljusa upp bilden om den är för mörk).
  2. Gör rak (finns det en horisont i bakgrunden?).
  3. Beskär (om du anser att det behövs).
  4. Ljus (om du vill lägga till någon extra effekt, t.ex ljusa upp på ett specifikt ställe och inte hela bilden).
  5. Vinjettering (mörka/ljusa ner från yttre/inre på bilden).

• 03.09.2015 09:00

  Tag Cloud - Hur gör man?

  Tag Cloud är ett visuell design av textdata t.ex enstaka ord. Detta verktyg är användbart när man vill lokalisera och tydliggöra t.ex vilka färdigheter/kompetenser man behärskar iställer för att göra detta i en lång text. Du får en "etikett" på det helt enkelt.
  Genom att alla i klassen fick skriva upp 3 färdigheter/kompetenser som man ansåg sig att man behärskade fick vi ihop ca 108st POST-IT-lappar som vi monterade upp på tavlan. Vissa lappar hörde ihop, eftersom många arbetat med samma saker. Ett sådant exempel var SÄLJ som blev totalt 23st lappar. På så vis blir ordet "SÄLJ" stort i Tag Cloud eftersom det visar att det är den kompetensen klassen är som starkast i.
  Baserat på klassens färdigheter/kompetenser fick vi göra 3 olika Tag Cloud från olika webbsidor. Med hjälp utav dessa färdigheter/kompetenser skulle vi göra tre olika Tag Cloud utifrån formerna "billig, dyr och färgstark".Längre ner på sidan ser du min tolkning på dessa.
  

  Tips vid skapande av ett Tag Cloud: 
  - Googla "Create Tag Cloud" på webben för att få upp olika sidor där man kan skapa Tag Clouds.
  - Välj den sida du tycker känns bäst. Vissa sidor kräver att du laddar ner Java eller Silverlight.
  - Rekommendation på bra Tag Cloud-sidor: www.tagcrowd.com, www.tagul.com och www.jasondavies.com.
  - Fyll i alla ord du vill bilda en Tag Cloud på. Tänk på att om du haft fler antal gånger på ett ord måste du skriva in detta ord så många gånger för att just det ordet ska bli större än de andra.
  - Därefter väljer du färg, form och teckensnitt mm.
  - Därefter får du förhandsgranska bilden och välja hur du vill spara den. En rekommendation är att spara ner den i jpg-format. Formatet är vanligt på webben då det inte blir så många Mbits.

  Nedan ser du mina 3 olika Tag Cloud: