Victor Rådefjäll

Projekt egen webshop

Posted on oktober 9, 2015 av Victor

Vi fick som uppgift att skapa en egen webbshop i enskilt arbete och jag valde att arbeta med plattformen Wix för det passade mig bäst.
Kravet på hemsidan var att man skulle ha med 30st bilder som man själv hade fotoredigerat eller manipulerat på ett eller annat sätt. Jag valde att ta mig an det genom att ta mina egna produktbilder i min hemmasnickrade studio. Efter lite letande på Pinterest under kategorierna product, photography, diy, så hittade jag en guide som hjälpte mig att bygga en egen studio. Det enda man behövde var:

Förvaringslådor
Folie, smörpapper, tejp (folie inne i lådorna för att ljuset ska sprida sig mer, smörpapper för mattare vitt ljus)
2st spotlights
1st tv-skärm som bakgrund
1st digitalsystemkamera

Vips så hade man en fotostudio hemma!:

Så med denna utrustningen på plats var det bara att börja fota, och bilderna blev ganska bra:

Jag skapade också min egna logga från scratch i Photoshop och den är anpassad efter stilen på hemsidan. Samtliga bilder på hemsidan har jag fotat och redigerat.
Tanken med hemsidan är att sälja virtuella headsets till en bred teknikintresserad målgrupp, produkterna är anpassade för att alla styras med hjälp av smartphones därav VR Mobil.

Länk till hemsidan

Alla bilder och former, texter, ikoner, loggor mm var enkelt att ladda upp på Wix-sidan och hantera i deras webb-redigerings verktyg. Produktsidan krånglade lite till en början men Wix har snabba resurser så det var ordnat dagen efter. Jag rekommenderar att arbeta med deras plattform!

HTML/CSS & Begrepp

Posted on oktober 9, 2015 av Victor

Del 2 i HTML/CSS

Vi hade nu som uppgift att skapa vår egna hemsdida från scratch och fick lära oss att arbeta i Notepad++ som är ett html/css kodningsprogram. Jag tyckte att programmet var enkelt att arbeta med och det var lätt att första för att bara använda till att bygga en vanlig html-hemsida med. Det man bör tänka på om man själv ska bygga en hemsida är följande:

Du ska ha en ursprungssida en så kallad index sida (index.html) denna sidan bygger du vidare på sen.
Relativa-sökvägar som styr mot undersidorna
Att samla alla kodade sidor i en och samma mapp för att de ska kunna hitta varandra (detsamma gäller bilderna)
Använd dig inte av ÅÄÖ i filnamnen
Använd helst dina egna bilder och inte referera till bilder på nätet
Om du vill publicera din hemsida vänder du dig till ett webhotell och laddar om din mapp där

Vi gick också igenom en hel del web-relaterade begrepp som kan vara bra att ha koll på och försöka implementera i vårat framtida arbete. Vi satte också taggar på vad vi hade gått igenom dagen innan, här är några av begreppen vi talade om:
Omnichannel
Gamification
Vloggare
BI/CI Business intelligence
Målgruppsanpassning
PR/Reklam
Affärsidéer/Visualisering
Bloggar
Workflow
Varumärkesetablering
Friläggning

Mfl.

Presentation och PSD-fördjupande

Posted on oktober 9, 2015 av Victor

Vi presenterade alla våra hemsidor och projektidéer för klassen och gav feedback på varandras presentationer.

Sedan var det dags för att sätta oss med Photoshop igen och gå igenom hur man frilägger bilder från bakgrunden och hur man använder sig av flera lager för att skapa en bild.

Hur gör man för att frilägga en bakgrund från en bild?
I photoshop finns det två bra verktyg för att enkelt frilägga bilder och det ena är ”lassot” som man kallar det och som gör att man på frihand kan markera området som man vill frilägga eller ta bort. Det andra alternativet är ”trollspöt” som man använder för en snabbare friläggning. den fungerar så enkelt som att man bara klickar på området som man vill ha bort så markerar den de stora ytorna och skapar en bild utan bakgrund. Detta är det bästa hjälpmedlet när man vill arbeta med fotoredigering och framförallt om man ska skapa en bild med flera lager. Ibland när man har frilagt bilden kan det fortfarande finnas grova kanter kvar som man kan behöva ta bort och då fungerar suddgummit bäst, man får zooma in och ut många gånger men det blir snyggt i slutändan.

Såhär blev min bild som jag valde att skapa flera olika lager i:

Grönbilen

Posted on oktober 8, 2015 av Victor

PROJEKT GRÖNBILEN
Pt.1

Grupparbetet Grönbilen drog igång på riktigt och vi arbetade tillsammans i grupp efter FIBA metoden. Val av plattform att ha hemsidan på landade på wix.com och med deras hjälp var det väldigt smidigt och enkelt att komma igång med Grönbilens hemsida.

Vi valde att dela upp arbetet under vår första session , Jag och Alexander arbetade med layout, Kristina och Martin jobbade med texter och Linnéa bearbetade bilder och skapade våran logga.

Grupparbetet gick väldigt bra och jag tyckte att vi skötte oss bra som grupp och kom överens i det mesta så att hemsidan skulle spegla alla oss som grupp. Vi hade kommit långt redan första dagen och vi kände väl att vi var på rätt spår så till nästa gång skulle det mest bara finputsas lite..

PROJEKT GRÖNBILEN
Pt.2

Fortsättning av grupparbetet gjordes på Grönbilens kontor (Kristinas härliga kök). Arbetet fortsatte därifrån vi hade lämnat det efter första sittningen. Vi hade nu nya idéer och uppslag för hemsidan och vi satte oss ner för att göra produktsidorna samt produkt-texter, layout och interaktionsdesign efter våra idéer.

Vi turades nu om att alla göra de olika inslagen och testa på att göra layout samt textredigering. Efter flera timmar hade vi nått ett resultat vi alla var nöjda med och nu var det dags att presentera det i klassen.

Grupparbetet var riktigt roligt att arbeta med då man fick en inblick i hur det egentligen är att bygga och planera en bra hemsida. Arbetet i Wix underlättade mycket och det var enkelt att förstå, lätt att redigera och publicera.

FIBA, Bluewater, Redwater och Grupparbetet Grönbilen tar fart..

Posted on oktober 8, 2015 av Victor

Fredag

Första delen av dagen gick vi igenom nya begrepp där bland annat bluewater och redwater var på tal och vi diskuterade skillnader kring de båda.
Bluewater är ett begrepp för hur man på ett innovativt sätt tar sig an en ny marknad och testar sig fram med egna metoder, utvecklar och anpassar. En metod som lämpar sig bäst för nytänkande och entreprenöriella företag som vill vara med och skapa något nytt.
Redwater metoden är motsatsen och innebär att man lägger sig i redan beprövade och uttänkta arbetssätt, man följer sina konkurrenters spår och har en större trygghet då man vet att det redan fungerar.

Vi diskuterade även kring FIBA modellen, det är ett utmärkt verktyg att arbeta efter inom projekt och hur ett arbeta kan delas upp. Det står för Formulera Idégenerera Bygga Agera.

Hur kan man använda FIBA modellen och hur ska man tolka den?
Modellen funkar bra som en slags lathund när man ska erbeta med ett projekt från start- till slutfas.Man börjar med att Formulera, vad är syftet med projektet, varför, för vem och hur man ska arbeta.
sen går man vidare till att Idégenerera och då är det brainstorming som gäller, man tar med så mycket projektrelaterat innehåll och taggar man bara kan sen ”trattar” man ner detta till mindre material och utgår ifrån det, man kan sedan utgå från det mindre materialet och bredda utifrån det med nya aspekter.
Det är där Bygga blir aktuellt, att man med det ”ned trattade” materialet applicerar och bygger upp idén igen till en större och tydligare vision. När det är klart så Agerar man och delar upp sin projekt grupp i olika ansvarsområden och sätter igång.

Under eftermiddagen fick vi våra grupparbeten och där utgick vi ifrån olika målgrupper som vi skulle anpassa arbetet efter.
De olika målgrupper som klassen valde ut var:
– Män med skägg
– DINK (Double income no kids)
– Bridezilla
– Specialkost
– Pensionärer
– Miljöfolk
– Veganer

Vårt grupparbete utgick ifrån DINK, så gruppen satte sig ner och började brainstorma efter idéer och olika infallsvinklar, resultatet blev Grönbilen..

HTML & CSS, E-handelsverktyg och kaffe!

Posted on september 10, 2015 av Victor

Onsdagen

Började med att vi presenterade våra bloggar och tankarna bakom bloggen, vad vi ville nå ut med för budskap, vilken målgrupp och vad vi valde att berätta om.

Eftermiddagen präglades av HTML kodande och kaffedrickande (som i sin tur ledde till den nystartade Kaffe Klubben!)
2 hemsidor som underlättade HTML kodandet avsevärt var w3schools och webdesignskolan. Är man ny och behöver hjälp med koder, html betydelser, färgkoder mm så hittar man det mesta där!
Att koda i HTML är jag egentligen inte så förtjust i då jag hellre arbetar med design och utformningen av hemsidor i enklare former. Kodning finns det många andra som är duktigare än mig på men jag kan ändå föra mig lite inom HTML och det räcker.

Torsdagen
På förmiddagen delades vi in i grupper som skulle undersöka olika E-handelsverktyg och vilka plattformar man kan använda som ehandlare. Vi valde att presentera följande hemsidor, se nedan så finns länk till varje!

Hemsida24.se
Wikinggruppen.se
Starrepublic.com
Shopitoo.com

Efter lunch gick vi över på den mer stilbaserade kodningen CSS och lärde oss hur man styr HTML dokument genom CSS, även där så använde vi oss av w3schools & webdesignskolan.

Jag visste inte att CSS styrde stilen på ett HTML dokument och lärde mig massor av nyttiga saker genom att laborera med CSS. Det gjorde det enklare att koda för det krävs inte lika mycket i HTML om man använder sig av CSS där man styr färger, fonter, storlek på text, placering mm.

Om man inte har upptäckt CSS eller bara vill lära sig mer om det så rekomenderar jag att man gör ett besök på w3schools och tar del av deras tutorial där!

Sjuk, sick, syk, enfermo, malde.. Kärt barn har många namn

Posted on september 9, 2015 av Victor

Faktumet att förkylningen satt som en krocket-klubba över ansiktet lagom till min andra dag in i den nya kursen gjorde att jag självömkande, mansfebrig och skev kastade in handuken för den veckan.

Men vad jag har förstått så har klassen arbetat med lite med photoshop, skapat tag clouds och spanat in andra fräcka saker på nätet.

Som tex. http://fotor.com som jag för första gången använde idag och det blev såhär:Väldigt smidig och enkel lösning för fotoredigering direkt i webbläsaren! Ska bli kul att använda den vidare och se vad man kan skapa för verk!

Jag har lite erfarenhet tidigare inom photoshop och har tillsammans med en polare gjort en tavla som jag har hängandes hemma och som jag är LAGOM stolt över! Har dessvärre ingen bild på den här men ni får lita på mig!

Jag vill tipsa om bra hemsidor som är gratis att använda och som guidar en steg-för-steg genom en PSD session där man får hjälp med att skapa nästan vad som helst från början till slut! Kolla in följande tutorials:

I denna tutorialen får man hjälp med att skapa en banner logotyp med snygga stilrena effekter och som man kan använda till vad man vill!

Banner Logotyp

Lär dig skapa dubbelt exponerade bilder i PSD i denna tutorial

PSD Dude, steg-för-steg i Photoshop

Eller skapa fräcka porträtt i denna stilen

Porträtt i kantig stil, PSD tutorial

Man kan sitta flera timmar och hitta roliga och inspirerande tutorials på dessa sidor och jag rekommenderar er som har lite tid över att välja ut en man gillar och genomför den!
Då har ni kanske också något att rama in och sätta upp som gör er LAGOM stolta!

Första dagen med Web och interaktionsdesign!

Posted on september 8, 2015 av Victor

Vi hade introduktionsdag i nya kursen Webb och interaktionsdesign där vi hade som uppgift att kunna presentera oss på 30 sekunder och att introducera klassen för 3 saker som man gillar på webben.
Det skulle vara en som man använde dagligen, en som man gillade mycket och en som man inte trodde att klassen visste något om.

Jag valde att presentera saker som följer mina intressen och som ligger mig nära.

Det första jag pratade om var WIMP som är en musiktjänst som låter dig streama musik och även musikvideos genom appen.
Wimp är likt Spotify en musiktjänst med månadsabonnemang och har även en gratisversion.

Nyligen så blev Wimp en del av Tidal som också är en musiktjänst skapad av artister som dragit sig ur Spotify för att skapa en tjänst med bättre förutsättningar för artister. Sammanslagningen av dessa två gör att de skapade sig en konkurrensfördel i att de kan erbjuda inte minst ett brett sortiment av musik utan också att prenumenanten kan ta del av musikvideos i HD och lyssna på musik i HIFI kvalitet. http://wimpmusic.se

Det andra jag presenterade var bildbloggen TUMBLR, där jag berättade lite om mitt egna användande och hur stort det har vuxit sig i USA. Trendande mode, musik, festivaler, mat, företag, uppfinningar, miljömedvetenhet, tekniska lösningar, lifehacks och massor mer går att återfinna på TUMBLR. Det är lite som Pintrest fast mer bloggkänsla. De som missade vad min tumblr hette så var det http://herrsnigel.tumblr.com

Det tredje och sista som jag visade på webben var den hypade trenden VIrtuell Verklighet som sprids från Usa som en löpeld.
Företag efter företag inom teknikbranchen, filmbranchen, spelbranchen och livsstilsindustrin hänger på trenden virtual reality (VR).
Google har såklart varit snabba med att släppa en mobilapp som gör det möjligt för alla smartphone användare att uppleva VR. Deras app Google Cardboard har en enkel meny med än så länge enklare VRanimerade filmer, rundturer och demos.

De har också en direktkanal till Youtubes 360 video channel som öppnar upp för en större VR upplevelse! Det senaste jag har sett från svensk VRproduktion är Gina Tricots 360 musikvideo. https://www.google.com/get/cardboard/

Men Google Cardboard är inte bara en app utan också en produkt som är en DIY VRheadset som är gjort av wellpapp och som man viker ihop efter instruktionerna sen stoppar man in sin smartphone startar cardboard appen och kliver in i det virtuella!