Såhär blev mitt slutresultat, Screen Eyes. Klicka på bilden. Mer info finns i Lektion 10.
Idag hade alla i klassen sina presentationer, väldigt kul och få höra allas idéer och vad alla har lärt sig. Jätte duktiga allihop!
Fix; Jag har fixat till lite i min blogg idag, osynligt för er kanske. På detta temat som jag har så är det en hel del begränsningar därför jag har bråkat lite med wordpress och widgets men har lagt till länkar till alla i klassen som också gjort bloggar, Om mig, taggar finns om man går in på inläggen, försökt rättstavat inlägg och letat efter särskrivningar och mycket sånt smått. Scrolla gärna ned och tar dig en titt .
Nu har jag mycket mer kunskaper att fylla i ett taggcloud efter kursen, ser väldigt mycket annorlunda ut än vad det gjorde i början av kursen. Kul har det varit!
Prova och gör ett taggcloud här du också för att se vad du har fått för nya kunskaper av att följa min kunskapsblogg.
Kursen närmar sig slutet och jag har lärt mig massor på bara dessa veckorna, hoppas ni har gjort det också? Som sista inlämningsuppgifter skall vi skicka in vår hemsida byggd i Css & Html, enskild e-handelslösning plus presentation på 3 min utav den, bloggen och ett sammanfattnings brev.
Inläggstips!
Snabbast och enklast för att få en e-butik på webben. Så här gör du på Wix;
Du blir skapar ett konto.
Välj mall.
Såklart om du vill kan du enkelt byta färg och typsnitt osv.
Alla funktioner är enkla och på svenska med tips rutor (dra och släpp funktion). Finns även appar att lätt ladda ner på Wix med olika special funktioner.
Byt ut bilderna och text till dina bilder och textstycken.
Det finns redan ifyllt på vad rutorna kan innehålla.
Lägg till betalningslösningar som du önskar.
Förhandsvisa och se om allt funkar, vill du ändra något gå tillbaka och jobba i redigeraren igen.
Mitt arbete: På grund av sjukdom i x antal dagar så blev det intensivt plugg dessa två dagarna med att göra min E-handel. Mitt koncept är kanon bra som jag har uppfunnit och ligger före vår tid och sidan är nästan klar för imorgon (man kan alltid finputsa) . Kortfattat gick uppgiften ut på att designa en e-handelslösning efter målgruppen. Jag har valt att arbeta i WIX och göra en multi e-butik, både för privat personer och till företag. Jag hade velat göra sidan annorlunda men eftersom uppgiften var att göra en e-butik med varukorg och så vidare så fick jag ändra och anpassa min ide.
Kom på iden på tåget när en kvinna satt med glasögon och läste på sin iPad med 5 cm avstånd. Jag skalade ner min målgrupp för människor i Sverige, alla åldrar, båda könen, människor med synfel, människor med behov av glasögon/linser vid ansträngning och framför skärmar. Syftet är att underlätta livet för människor med en fin gåva att se utan krångel till en mindre peng. Vidare utveckling av företaget kan bli att sedan eventuellt sälja in tekniken som en produkt till ex. Apple, Samsung m.m. Mitt företag fick tillslut heta Screen Eyes som är taget från just symtomen av trötta ögon framför en skärm på engelska, Iscreen eller Eyescreen var också alternativ men allt för lik Apple. Våra forskare, optiker och tekniker, sökes! Har tagit fram och testat vår unika produkt. En app som gör att din skärm anpassar sig efter ditt synfel. Mer om affärs iden håller jag för mig själv och till mina klasskamrater och lärare så länge. Denna marknaden är ännu inte fullt utforskad men det finns forskade som har tagit fram själva skärmarna som produkter istället för min app då, läs mer här. Jag tror dock att detta kommer bli populärt och en mängd olika varianter på inom dom närmsta åren.
Smakprov från under processen.. EJ KLAR. Version 1. Klicka på bilden för mer färdigt resultat.
Designtänk och skapande; Jag har satt ihop och gjort en logga, redigerat bilder i PS bland annat produktbilder och även 24 stycken glada ansikten som skall vara recensioner som förut hade glasögon men nu skänkt bort dom och glatt använder Screen Eyes istället. Det bildspelet längre ned på sidan är mer riktade mot hela min målgrupp och är från nöjda kunder, skapar två vägs kommunikation, trygghet och seriositet. Vi samarbetar med ex. Optiker Utan Gränser och hjälper till att samla in kundernas skänkta glasögon. Jag valde att fokusera på förstasidan och inte så mycket på text överallt. Bakgrunden är modern och rörlig och liknar min loggsymbol som flyger som kring som lyckliga bublor. Jag valde blåa piggare toner för att det ger min breda målgrupp att känna av trygghet, forskning, ögonläkare i alla åldrar, hel vit och fräsch sida känns bara opersonligt. Eftersom min målgrupp är bred så valde jag att överst ha en större banner med 3 bilder i, nyhet är tv app, kommunikation som vi erbjuder tjänster för företag och att vi hjälper till och skänker dina gamla glasögon. På mina produkter kan man klicka på och lägga i varukorgen direkt från startsidan för få, få klick till köp. Enkelhet. Det är lätt att kommunicera med oss via sociala medier och även bra kundservice alternativ för min målgrupp som email, live chat, telefon just för att det skall finnas ett bekvämt sätt för den breda målgruppen att använda sig av med det hen känner sig bekväm med. Företag och privatperson har varsina produktsidor eftersom det är en multikanal men dom båda målgrupperna skiljer sig åt. Jag har ändå försökt få ihop dom båda grupperna B2b och B2C på en sida och kommunicera till dom båda bra tycker jag.
Under denna kursen har jag lärt mig massvis och några utav punkterna kommer här;
Mitt lexikon har fått massor utav nya ord och nya begrepp inom ämnet.
Att arbeta i grupp.
Lärt mig och arbetat i många olika program.
Grunderna och förståelse i Photoshop, bäst på vissa saker nu efter gjort x antal bilder.
Grunderna och förståelse i Css och HTML, hur det är uppbyggt och fungerar med relativa sökvägar. Ett eget språk.
Olika vettiga appar som jag inte visste om.
Bildhantering i andra program än PS.
Grunder i hur man tar foto på människor, produktbilder.
Vid produkt fotografering behöver man en studio med rätt bakgrund och rätt ljus gärna tagen med en systemkameran. DIY = Do It Yourself varianter för dig med litet företag med ingen foto budget ännu.
Inläggstips!
Idag jobbade vi mer i ps – photoshop med att ta fram produktbilder. Välj en bild från tex. google och klipper ut bakgrunden för att få en transparent bakgrund.
Så här gör du:
Klistra in en valfri bild i ps.
Är bilden stor och rörig? – Beskär bilden så du får så lite bakgrundsyta som möjligt. Du får en mindre bild än originalet.
Använd verktyget till vänster i verktygsmenyn som heter Magic Wand Tool
Markera nu bakgrunden på din nya mindre bild, klicka runt tills markering lägger sig nära kanter runt objektet.
När du har markerat bakgrunden med Magic Wand Tool så trycker du på backspace eller delete på tangentbordet.
Nu ser du endast objektet och bakgrunden är nu bort klippt.
Känner du att du inte fick bort allt tex. runt kanterna eller delar av bakgrunden. Använd verktyget Eraser Tool (E). Vänsterklicka på verktyget och välj Magic Eraser Tool. Zooma bilden med ctrl+ . Zooma in på bilden ser du tydligare vad som behövas suddas.
När du är klar och vill ändra storleken på bilden/antal pixlar beroende på vart bilden ska användas till. gå du till – Image, – Imagesize. Ställ in önskad storlek.
När du är klar och vill spara din bild, gå in på – File, – Save for web and divises, – presetPNG24.
ALLT finns också att lära sig enkelt med bilder och videos osv. Lär dig mer PS här.
Mina Ps bilder.
Original produkt bild
Frilagd sko med transparent bakgrund
Transparent bild lagd på ny egenskapad bakgrund med text.
Inläggstips!
Handlar nu om företags områden och uppbyggnad.
BI- Business Intelligent=system inom tekniker, applikationer, processer och metoder för organisationer att bättre förstå sin egen verksamhet och sin omvärld.
Interaktionserbjudande kan vara tex. en köpknapp. (En knapp att trycka på och det händer något)
Gamificationgick 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.
-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.
Uppgift: För två veckor sedan fick varje grupp en målgrupp tilldelad att göra från en tanke till ide, koncept, sälja en produkt eller tjänst och till en prototyp till en e-handels butik färdig med presentation.
Gammeldags.se riktat till målgruppen, pensionärerna.
( I projekt gruppen; Andreas, Emma, Sanna, Linn, Patrik och mig själv, Sofie )
Målgrupp: Vi blev tilldelade målgruppen Pensionärerna, vilket var en bred och svår målgrupp till en början. Då dom flesta i den åldern inte är så vana med att handla på nätet. Vi fokuserade oss på åldern 63-75 och valde att göra tjänster. Vi ville göra något för pensionärer helt enkelt. Det diskuterades och brainstormade en hel del men blev ned trattat till att vi tog ett känt koncept från tv ”halv åtta hos mig”.
Vår affärsmodel: Som singelindivid, par eller som grupp kan köpa in sig i en fyradagars period under en vecka. En eftermiddag kommer en kock kommer hem till dig med mat och meny på ett tema, man står själv som värd för en eftermiddag, man får ny lärdom av nya maträtter som lagas tillsammans med en kock under dessa fyra dagar och får nya bekantskaper.
Tanken bakom är att när man har nått den åldern skall kunna känna att det finns ett forum för människor i samma ålder, livstil med ett matintresse att utveckla tillsammans och skaffa nya vänner. Knyta ihop fyra pensionärer med lärdom av ny mat.
Upplägg av sidan: Vi samlades vid 2 tillfällen och kom fram till att vår målgrupp inte är allt för erfarna vid dator användning. Vi valde att göra sidan på e-handelsplattformen Wix, med stor textgränssnitt, stora bilder och video som talar för sig självt, få tydliga knappar, enkla funktioner, kunden behöver göra så lite som möjligt, hemma känsla från tillbaka i tiden, enkel design.
Vad är lättare och tydligare förklaring än ett videoklipp?? 🙂
Plattformen:www.Wix.com som var en hyfsat enkel e-handels system att arbeta i, det fanns även tilläggs tjänster att köpa till av olika slag som var enkelt och enkelt att installera tex. varukorg, widgets m.m.
Arbetandet i gruppen: Här ville vi alla lära oss lite av allt men samtidigt vara effektiva. Efter Fiba metoden, koncept, infovideo och upplägg var klart som vi alla gjorde gemensamt . Så delade vi upp oss på hälften och skapade utseende och anda innehållet, då ena gruppen satt bildredigering, skapandet av hemsidans design medans andra halvan tog fram och skapade rubriker, säljande produkter/tjänst texter m.m. Efter en stund så bytte vi alla så att alla fick känna på hur det var att skapa olika delar när man bygger en e-handel. Vi publicerade aldrig sidan offentligt utan gjorde det som ett utkast/klar prototyp och inför presentationen loggade vi bara in på Wix och visade upp förhandsvisning av sidan.
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.
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! 😀
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! 😀
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.
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…