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;

Vecka 39 - tisdag

Starta en webbshop

Under vår första träff med vår grupp som skulle starta upp en egen webbshop så startade vi med att "brainstorma" idéer som vi sedan "trattade" ner för att sedan på ett enklare sätt kunna välja ut de bästa idéerna.

E-handelplattform: wix.com

Företagsnamn; Gammel dags

Målgrupp; Pensionärer i åldern 63-75

Affärsidé; Vi erbjuder unga pensionärer att skapa nya bekantskaper och tillsammans

med dem avnjuta god mat.

Sedan lade vi upp vårat arbete på så vis att några skrev den informativa texten som skulle finnas på sidan och övriga jobbade med layout. 

All layout och text skulle naturligtvis vara målgruppsanpassad så det var bara att se till att göra tydlig och läsvänlig text och layout.

Det som vi dock särskilde oss ifrån de övriga grupperna var att vi satte ihop en film som vi själva deltog i för att demonstrera vårt koncept!

Vecka 37 - fredag

Projekt - starta en webbshop
Dagen startade med att vi blev indelade i grupper, sedan blev vi tilldelade en uppgift som var att sammanställa en topp 25 - lista över de mest populära e-handelsplattformar som finns på marknaden just nu. Därefter skulle vi välja ut 5 - 10 stycken plattformar av de 25 och presentera för- och nackdelar med dessa inför klassen.

När presentationen var klar så skulle skriva ner så många målgrupper vi kunde komma på och sedan skulle varje grupp välja ut en av målgrupperna som vi rikta oss till i den sista uppgift vi fick den här dagen och det var att starta upp en kostnadsfri webbshop.

Målgruppen vår grupp valde var pensionärer 70+

Uppgiften skall presenteras om ca. 2 veckor så vår grupp bestämde oss för att träffas under kommande vecka och fram tills dess skulle alla ta fram olika förslag på vilken vara/tjänst som vi tycker att vår webbshop skall erbjuda.

Utgångspunkter i projektet är;

Cirkulärt - Komma fram till en lösningar/idéer som kan konkurrera på e-handelsmarknaden. En "Game changer".

Värdegrundsdrivet - Företaget skall vara värdegrundsdrivet

FIBA - projektmodell

För att kunna strukturera och planera arbetet av vårt projekt att starta en webbshop så gick vår lärare igenom en modell som kallas FIBA som just är ett hjälpmedel då man arbetar i projekt. Se beskrivning av FIBA som projektmodell nedan;

Formulera - Varför skall vi genomföra detta?

Sedan skall man;
Konvergera; Tratta ner
Divergera; Bredda
Idégenerera -  Brainstorming.
Bygga - Här bygger man på varandras idéer.
Agera - Vad skall genomföras? Vem gör och ansvarar för vad?

Vecka 37 - torsdag

CSS - kod
Efter gårdagens genomgång av HTML-kod var det nu dags att gå igenom CCS-kod, Cascading Style Sheets. Skillnaden mellan HTML och CSS är att HTML-koden styr innehållet på en webbsida och CSS-koden är stilmallen av själva innehållet (HTML-koden). All CSS-kod kännetecknas med tecknena { runt om respektive CSS-tagg }.

Dagens uppgift var att var att nu skapa en ny fil med CSS-kod i programmet Notepad++ som vi använde oss av under gårdagens lektion då vi skapade en HTML-fil och sedan skulle vi länka in vår CSS-kod i vår HTML-kod.

Här ser du hur en typisk CSS-kod ser ut i Notepad++

Så här går man tillväga;
1. Skapa ett nytt blad i Notepad
2. Skriv in CSS-taggarna som ville användas som stilmall.
3. Döp CSS-filen och spara den på skrivbordet.
4. Sök efter den länk som behövs för att länka CSS till HTML online och ändra filnamnet till det filnamn som sparats ner på skrivbordet. (<link rel="stylesheet" type="text/css" href="filnamnet.css">)
5. Klistra in CSS-länken på den placeringen i HTML-koden som nedan.

HTML-koden;
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="filnamnet.css">
</head>
<body>
<h1>This is a Heading</h1>

Så här blev resultatet online av min kombinerade HTML - och CSS-fil.