30-09-2015, Lektion 7. Interaktionsdesign

Interaktionsdesign betydelse:

Inter = Mellan

Aktion = Handling

Design = Förmedla budskapet/ ge mening

Interaktionserbjudande kan vara tex. en köpknapp. (En knapp att trycka på och det händer något)

Gamification gick vi genom. Det kan betyda att man får någon sorts ”spel känsla” på olika webbsidor, man ger info om vart du är eller hur långt du har kvar. Vilket skapar trygghet hos kunder och i gamification visar man detta i grafisk eller numerisk form, av gränssnitt. Tex. ” Du har nu 70% klar, bara 30% kvar att fylla i”, ” Steg 3 av 5 (3/5)” i en kassa lösning på nätet. Ett annat kanon exempel på detta är Coca Colas kampanj då de satte en kod under korken på colaflaskorna. Vilket ledde till att kunderna fick ett behov av att köpa en cola för att få vara med i tävlingen.

Gränssnitt: alltså layout, att du kan klicka på en knapp och det händer något. I verkligenheten tex. Ett handtag på en dörr. En symbol på en dörr som man kan ta/klicka på och det händer något och man kommer till ett nytt rum/sida.

Inläggstips! 

Nobel pristagaren, Thomas Shellings föreläsningar om – Game Theory.

Vart tittar användare på en skärm?

-Vad/vilket attrahera att klicka på knappen? Väst folk läser från vänster till höger mest och först tittar man uppe till vänster på en skärm. Dock olika för olika målgrupper även. vilket beror på olika vanor man har och vilka platser man brukar vara på. Tex. Äldre som har läst/läser mycket tidningar, läser böcker, korsord osv. Dom tittar oftast alltid direkt uppe till vänster av varna.

Så, hur kommer min målgrupp att se först på min hemsida?? – här kan man göra tester med hjälp av dagens teknik, finns även företag som gör detta åt dig för din hemsida. Så att du kan veta vart du vill placera vart på din hemsida.

Placering på Interface

• Etablera dina val, var konsekvent.
• Hitta ett mönster/behov för tex. knappar
• Animalier = det som skiljer sig

Inläggstips!

Anomali kan vara bra att tänka på. Animala betyder att något är annorlunda , alltså det som sticker ut dra sig ögat åt. Man kan använda sig av tex. text, färg, bild, form, storlekar m.m. Tex. Allt är stilla saker. En sak rör sig. Vilket talar direkt till vår uråldriga rovdjurs hjärna – att fånga det som rör sig / klicka på den knapp som rör sig = enkel väg att få kunden dit vi vill.

Semiotik: Beroende på målgrupp och sammanhang, teckentolkning i bild.

Lektion 5. E-handels verktyg & CSS

Vi pratade om olika e-handels verktyg;

Olika e-handels verktyg pratade vi om och vi i grupper gick in och letade upp 25 olika varianter för att sedan välja ut 10 att grotta ner oss i för att där efter ta fram dom 5 bästa alternativen och presentera muntligt. Det skulle vara allt till det lilla företaget med billiga lösningar till det stora med en dyra lösningar och affärsmodel.

Här kommer en mer uppdaterad lista ( du kan också läsa mer här);

Till WordPress finns pluginen Woo-commerce som gör att du kan koppla en e-handel till din WordPress-sida.

www.askas.se,www.ebutik.se,www.jetshopfree.se,www.nordiskehandel.se,www.litium.se,www.starweb.se,

www.sitedirect.se,www.textalk.se,www.tictail.com,www.argonova.se,www.c4media.se ,www.danaweb.se,

www.dynamicweb.se,www.e37.se,www.enferno.se,www.my123eshop.se,www.panagora.se,www.preemtech.se,

www.starrepublic.com,www.talex.se,www.startabutik.se,www.webcore.se,www.wikinggruppen.com.

Jag pratade om textalk i skolan.

Inläggs tips!

Det finns massa hemsidor som testar och jämför just e-handels lösningar. En som är super bra är www.jajja.se där hittar du all info.

CSS

CSS står för = stilen/designen medans html står för innehållet.

Min förklaring;

Css är ett annat språk/variant som underlättar för dig att designa stilen på dina html filer. Istället för att gå in på vart ända html sida du har i din mapp för att ända färg, text, typsnitt, utseende m.m så gå du bara in i css filen ( 1fil för stil/design ) och ändrar tex. Bakgrunds färgen. Och då ändras det i ALLA html filer för dig. Css är kopplat till alla dina html sidor, spara dom i samma mapp. Du ser skillnad på {css} och <html> och i filformat .css eller .html .

Inläggstips!

Glöm inte att spara css filen även i Notepad++ för PC eller i Textwrangler för Mac dator. Spara filen i filändelsen/filformat .css . För att det skall bli kopplat mellan css och html filer så lägger du in denna länk högt upp i början på varje html sida. Dock BYT UT filnamnet till din.css fil. Så datorn blir länkad till din css fil. Även här använd dig av w3schools!

Min Css sida försvann också tillsammans med min HTML sida på skoldatorn. Av enkelt dummt sparnings fel. Jag tyckte Css var lite svårare att förstå till en början men är ett enklare verktyg till HTML helt enkelt. Jag kunde lösa alla uppgifter som vi fick efter att har provat sig fram en stund. NÖJD TJEJ! 😀

Lektion 3, bildhantering

På fredagen kollade vi in i 3 olika bildhanterings program. Vi började med snapseed ( bäst som app på mobilen eller platta) där vi fick igenom olika inställningar och hur appen fungerar. Riktigt bra app jag rekommendera till verkligen ALLA, super enkel och roligt som tusan! Därefter gick vi över till fotor (alltså bäst på datorn) och såg på grunderna där på hur man kan göra för att få fram en bild bättre. Efter lunch började vi äntligen i PS – adobe photoshop och vi använder version PS CS3. Finns att ladda ner gratis i 1 månad på prov. Annars är det ganska dyrt att köpa. Vi gick genom rullgardinsmenyer alltså dom översta flikarna men tydligen bara det nödvändigaste ;P fanns hur många knappar som helst att lära sig! Gjorde bild övningar, klippa och klistra och i sådär 2 olika lager till en början. Jag blev tvungen att gå efter genomgången men har gjort lite i photoshop hemma, se nedanför…

Sånna här bilder tog jag i våras med min Canon 100D system kamera (kan inget om foto). I PS klippte jag ut blommorna..

Dom utklippta blommorna, drog jag in i en nya bild ( gardinerna), lade varje blomma i ett lager, så jag hade alltså 8 lager och en bild. ( lager är ofta genomskinliga, ett verktyg som fungerar som olika filter som ligger uppe på varandra, varje filter lägger du till något tex. en blomma. lager=filter= en blomma ) .

När jag var nöjd med min produkt lade jag ihop alla lager och bild till en gemensam vanlig bild, komprimerade ihop och valde vanligt bild format. jpg.

Inläggstips!

Som inrednings intresserad kan jag tipsa om en grymt kul app som heter Neybers där jag brukar leka/spela och inreda miljöer eller magasin. Ni kan följa mig på Neybers och lika mina designs.. följ; sofie_johansson_2

Jag ville inte bara göra en produkt utan också sätta in den i en miljö som är mer säljande.. jag gick in i min app, designade rummet.. tryckte på printscreen och la upp rummet bilden i PS. Jag la nu även in mina gardiner på rummet bilden.. voila! 😀

Lektion 2, taggcloud

På torsdagen tog det allt för länge att hämta låne datorer, logga in på dom, uppdatera olika webbläsare, uppdatera java eller silverlight program. Skolan wifi har inte tillräckligt starkt nog att låta hela klasser ladda ner samtidigt så vi fick göra allt i omgångar ( hade massa spring i benen egentligen). Vi gjorde en facebook grupp för klassen och vår lärare johan, johan har även gjort en blogg för klassen där han lägger upp nya uppgifter till oss tex. att göra den här bloggen 🙂 Vi gjorde ett tag cloud med klassens kompetenser. alltså alla fick 3 post-it lappar var att skriva ner en kompetens på. Alla samlades in och sattes upp på tavlan, satte liknade kompetenser ihop – ett tag cloud. Sedan fick vi i uppgift att göra detta digitalt men hjälp av olika tag cloud creators. vi skulle göra en billig, en dyr och en färgstark.  tips på olika sidor tex. edudemic. Vi gjorde också en marknadsundersöking på gratis reklam fria bloggar ( weebly, wordpress, blogger, metrobloggen, blogg123 m.fl.), vilket till slut resulterade till  jag valde att göra min här på wordpress. Vi skaffade också olika moln tjänster ( dropbox, onedrive, google drive, box m.fl.).

Ni kan väl gissa vilken av dessa som är den färgstarka, den dyra och den billiga.

Lektion 1, Appar

Ny kurs som är Webb & interaktionsdesign som blir nu i 2 veckor sedan 2 veckor break och där efter 2 nya veckor, totalt 4 veckor då! så ni får ha tålamod och se vad som händer när kursen är avslutat helt enkelt. Ny lärare Johan han verka som en snäll kreativ kille, verka kunna allt inom det digitala!! Hela dagen gick åt att lära känna varandra mest och så hade vi fått i läxa veckan innan att göra en presentation om oss själva på 30 sek, jag hade klippt ihop ett litet bild collage men baktanke att EN bild säger mer än 1000 ord. Vi hade också fått i läxa att ta fram 3 appar. En som du använder mycket själv, en som du använder men tror ingen annan känner till och en app som är helt ny! Jag visste att många skulle välja samma appar så jag valde istället  3 andra. 1password, craftsy och google översätt.

App tips värda att kolla upp och lägga på minnet.

Hej världen!

Första blogg inlägget blir  mer en test! Jag har valt att blogga via wordpress eftersom det både kan bli en utmaning att lära sig css kodning och för att det fanns massa enkla gratis alternativ, ingen reklam ( om du inte vill ) och i framtiden finns det möjlighet att köpa till massa funktioner också. Ännu längre fram i framtiden på en e-handel så kan det vara nice att veta lite hur en schyst blogg funka iaf. Jag har gjort och skrivit i (Om Mig) också. Osäker på hur ofta bloggandet kommer bli under dom närmsta veckorna under kursen men ca. 1-3 gånger i veckan tänker jag. Detta är en kurs för mig och blir ju även en gratis kurs för er…