Vecka 41 - torsdag

Starta en egen webbshop
1 del av vår examination i kursen webb & interaktionsdesign är att skapa en egen webbshop och det är vad detta inlägg kommer att handla om!

Mitt företag heter "Frostdax" och vi erbjuder allt till dina barns Frost-kalas!

Hur jag skapade min webbshop;
1. Valde E-handelsplattform.
2. Bestämde företagsnamn.
3. Segmenterade målgruppen.
4. Valde produkter som skulle säljas.
5. Skapade en logga i photoshop.
6. Skapade kampanjbilder.
7. Skrev informativ text på sidan. (om oss, kontakta oss etc.)
8. Lade in youtubeklipp och andra animeringar på sidan.
9. Frilade produkter i photoshop.
10. Skrev produkttexter, satte produkternas pris och lade till köpknappar.
11. Lade till varukorg.
12. Säkerställde utfallet av all layout på sidan.
13. Publicerade sidan.

Välkommen att klicka här så kommer du till min webbshop!

Vecka 40 - fredag

Examination fredag 9/10 -15
1. Skapa 4 stycken html-filer med 4 olika bilder + navigation
2. Skapa en CSS-fil.
3. Spara ner 4 stycken bilder i jpg-format. 

Nedan ser du min kombinerade HTML- och CSS-fil;

Webb & Interaktionsdesign - Examination i tre delar.
Saker att tänka på inför den slutgiltiga examinationen.

Blogg
Tänk på vem avsändaren och mottagaren är

Upplägg på blogg;
Stegvis 
Punktform

Varumärke - ambassadör
Roll - ambassadör
Flytta dig hit -  Designtänkande

Kunskapsbloggen
Formalia
Stil
Gränssnitt/design/färg
Helhet - Hur väl hänger hela bloggen ihop? Den röda tråden!
Smarta taggar
Visualisering - Vad? Hur? När? Vilka verktyg har vi använt i olika projekt (i vilket syfte) och vilka tycker vi är bra!
Täckningsgrad - Vilka program och övriga saker har vi jobbat med t.ex. photoshop, html + css etc. 

E-handelslösning med redigerade bilder
Teknik; Wix, Tictail, Woocommerce, weebly, hemsida24 
Bilder; 30 behandlade produktbilder. Lägg din egen logga på bilden och använd samma bakgrund på alla produktbilder. Samma bildstorlek på alla storlekar.
Namn + egen logga.
Helhet. 
Startsida + produktsida (Allt på startsidan skall vara klickbart)

Det Johan kommer titta på är hur varumärkestänket blir presenterat i layout (gränssnitt)

Detta skickas i ett brev med en ensidig formulering (kundskapsstegen) Detta innebär att man själv skall sammanfatta ett brev när du skickar in html + css, ehandelslösningen och blogguppdateringen till Johan. (max 1 sida)

Muntlig redovisningstid 3 min.

Vecka 40 - torsdag

Produktbildsredigering & repetition

Photoshop del 2

Under dagens andra genomgång av photoshop fokuserade vi på att frilägga 
och redigera produktbilder.

Först och främst bestämmer man vilken bildstorlek som produktbilden skall 
ha och det ändrar man under menyfliken "Image" och sedan väljer man "Image size".

För att kunna frilägga bilden motivet ifrån den svarta bakgrunden så 
drar man in orginalbilden i photoshop och sedan skapar du en kopia av bilden. 

Därefter väljer du verktyget "trollspö" i menyn och markera 
grisen med dess detaljer genom att trycka in skift. 
Sedan trycker du bara på delete och så försvinner bakgrunden. 

Man kan även använda "lasso"- verktyget för att markera motivet 
som man vill frilägga ifrån bakgrunden. Ett tips är då att välja 
"magnetiskt lasso" då det är lättare redskap att använda av de man kan välja mellan.

För att ta bort bakgrundsdetaljer som fortfarande finns kvar i det frilagda 
motivet så väljer man att använda radergummit som finns i menyn till vänster. 

Det går att anpassa storleken på själva radergummit.

Här kommer tydligare exempel på hur det ser ut i photoshop innan du tar bort bakgrunden och när du tagit bort bakgrunden;

Före

Efter

Ytterligare exempel på frilagda bilder;

Samma bild som jag har frilagt 2 gånger.

Genomgång av taggar ifrån gårdagens lektion

Systembyggande - taggar

E-handelssystem

Sociala media - kanalval

Omnichannel

Bloggar

Vloggare

Målgruppsanpassning

Mina val av prioriteringar 

E-strategier

BI/CI - Business intelligent

BI; Intern företagsstrategi. Hur kan man arbeta effektivare?

CI; Omvärldsanalys. Vad hände på marknaden just nu?

Affärsstrategi

Affärsidéer

Gamification

PR/reklam

Stora/små system

Visualisering

Vecka 40 - onsdag

Gränssnitt & interaktionsdesign
Det finns fler bildbehandlingsprogram som man kan använda sig av än Photoshop och några exempel på sådana program är;

www.pixlr.com (gratis)
www.pixelmator.com (engångskostnad 289:- )

Interaktionsdesign
Inter - Mellan
Aktion - Agerande/ handling
Design - "Ge mening"

Interaktionserbjudande - T.ex. en köpknapp som innebär att något händer efter man har klickat på denna knapp.

Har man 4 stycken knappar som nedan och en av knapparna särskiljer sig genom att ha en egen unik färg;

















Vilken av knapparna tror du kunden väljer att trycka på? Naturligtvis den med den unika färgen.


Det finns en benämning på detta och det är animali, det oemotståndliga med det som är annorlunda. Storleken på en bild eller vad man förmedlar i en text kan vara det som man avgör vart kunden eller besökaren riktar sitt intresse. Andra saker som påverkar intresset är
STORA vs. små bokstäver.

Vi läser från vänster till höger så därför är det oftast längst upp till vänster man riktar sin blick till först. Sedan särskiljer sig all animali från målgrupp till målgrupp.

Gamification - Man använder element ifrån spelens värld i en värld som inte är spelrelaterad. Detta kan man använda i köpprocessen på en E-handel i de antal steg som det tar i checkouten (Steg 1/4).

Placering på interface - Tänk på att alltid vara konsekvent i din placeringen av t.ex. en köpknapp på en webbshop så att kunden känner en trygg kring att knappen alltid finns på samma ställe.

Att knappen just skall placeras på det stället förstår man genom att testa sig fram.

Semiotik - teckentolkning (kopplat till unik målgrupp och sammanhang). 

Alla i klassen skulle söka upp olika bild som representerade utvalda ord och de var;