Confront 2018 💜

Igår besökte jag Dev & Design-event Confront I Malmö. Detta är mitt första år på ett Confront event och kände att den kunde passa mig bra just för att den kombinerar både utveckling och webbdesign. Så jag tänkte skriva om några “Hot topics” från dagen nedan:

Design systems
Ett hett ämne var/är Design systems varför det är bra att ha ett, inte bara varför det är bra att ha ett mellan designers och utvecklare utan också för fler som jobbar i projektet. Kan vara projektledare, copywriters etc. Ett Design system är mer än bara skisser i Sketch, utan bör också innehålla förklaringar, komponenternas beteenden måste tydliggöras samt patterns. Dokumentation bör finnas med och självklart den visuella identiteten. Det finns såklart fler delar som ska finnas med, länkar till två bra exempel på Design systems från Airbnb och Trello:

https://airbnb.design/building-a-visual-language/
https://design.trello.com/

Mob programming
Och när det kommer till Design systems, talades det också om ett nytt och hype:at begrepp inom utveckling och design nämligen “Mob programming”. Mob programming går ut på att man tillsammans i sin projektgrupp jobbar på ett och samma projekt, på en och samma plats, under en och samma tid, på en och samma dator 🤓. På det sättet lär man sig av varandras kunskaper och effektiviserar sitt workflow.

CSS Houdini
Slutligen vill jag nämna den största anledningen till varför jag ville gå på just det här eventet. Och det var för att se Una Kravets (jag har i många år följt henne på Twitter) presentera sitt ämne, CSS Houdini. Ett supertips är verkligen att följa Una Kravets, hon är så inspirerande och grym på CSS! ✨

Och det får avsluta min bloggpost, ciao för denna gång! 💁🏻‍♀️

confront18-kollage-image.png

toDo-list i React ✨

En todo-list är ofta en enkel och bra övning att göra när man lär sig att koda. Här presenterar jag mitt andra React projekt som är just en toDo-list. Man skriver helt enkelt in sina toDos och vips förvandlas dessa till små fina post-its 💖

React är ett Javascript-ramverk som jag lärde mig grunderna på i Tjejerkodar-lägret i Barcelona 2016. Läs mer om kodningslägret här.

Jag gillar att designa och koda små webbappar som denna, då jag får kombinera just webbdesign med kodning. Som webbdesigner blir det allt mer viktigt och vanligt att lära sig fler språk än “bara” HTML och CSS. I mitt dagliga jobb är det användbart att ha en förståelse för Javascript så att man i alla fall kan tolka och felsöka kod. Sen skadar det inte heller att kunna skriva enklare funktioner såklart! ✌️🤓

Just toDo-listan finns på min GitHub, så kolla gärna in den här eller genom att klicka på bilderna här nedan 😀👇🏻

Nya projekt på Bubbleroom!

Jag har nu jobbat lite mer än ett år på fantastiska Bubbleroom som Art Director och har samlat några av de större projekten som varit under våren här.

Så om ni ska ta studenten, gå på bröllop eller bara är på jakt efter en lyxig klänning är denna sidan perfekt för er! ✨Självklart får ni kolla in landingssidan om ni bara är nyfikna också 😊

Stort tack till mitt team på Bubbleroom, både inköp och marknad som alltid ger 110% 💖👊🏻😘

Bröllopsinspiration!

För snart en månad sedan gifte jag mig med min fina Marcus Olsson, vilket också är anledningen till att webbsidan numera heter Hanna Olsson och inte Hanna Rajkovic. Jag är med andra ord Fru Olsson nu 😊 ✨

Bröllopet var ett överraskningsbröllop, som vi hade "förklätt" som en nyårsfest/födelsdagsfest. 
Så allt grafiskt material vi tog fram hade just temat nyår med en minimalistisk touch. 

Nyfikna? Spana in alla delar av festen så som, bröllopsinbjudan, drinkmenyn, drinkbiljetterna och bordsplaceringskorten - ja egentligen alla trycksaker samt andra glimtar från kvällen här.

Vem vet kanske får ni själva lite bröllopsinspiration? 💍😉

Hipster Kit ✌️

Min "favorite-person-of all-time" fyllde år förra veckan och det firades med ett Hipster Kit!

Hipster Kitet bestod av en Fjällräven kånken ryggsäck (med kamerainlägg) fylld med allt ifrån rutiga tofflor, fancy lakrits, NASA t-shirt 🚀 till ett modellflygplan i ek.✌️

Nedan ser ni hur badgen jag design:ade såg ut och även paketet 😍. Det är alltid kul att utmana sig själv typografiskt tycker jag och använda typsnitt/fonter man annars inte använder. En bra övning liksom. 🤓 

Ikonerna jag använt kommer från en webbsida som heter Noun project, där man kan ladda ner ikoner både som PNG och SVG (Yay!). Kolla gärna in sidan här som har ett riktigt stort bibliotek med ikoner. Dessutom finns Noun project numera som ett "add-on" för Adobe Creative Cloud! Så ett supertips verkligen. 😊

IMG_1411_square.jpg
IMG_1710.JPG
unnamed-1.jpg
IMG_1777.jpg

Glöggparty, say what!?

Äntligen är glöggfesternas tid här! Så varför inte använda ett roligt Glöggparty formulär, så att man enkelt kan samla ihop sina nära och kära till en mer opretentiös julfest? 😊

Tanken var att skapat ett nytt juligt projekt, med 'Glöggparty' som mitt tema. Designen är ganska “flat” och tydlig, sidan är trots allt ett formulär, med målet att få besökaren att anmäla sig. 

Typografin men framförallt 'Glöggparty-stämpeln' gör designen lite mer lekfull. 'Glöggparty-stämpeln' är en så kallad SVG-bild, och är ett bra filformat att spara bilder/loggor/grafiska element i. Detta eftersom bilden blir vektoriserad, och tappar då inte sin kvalité samt är skalbar och funkar i de flesta upplösningar. 

Även detta projekt är byggt med fantastiska Sass 🙌 . Formuläret är relativt validerat, där jag använt ett jQuery plugin för att kunna addera regler/reguljära uttryck. Dessutom är sidan responsiv 📱+ 💻 + 🖥 =✌️

Låter detta intressant? (Jaaa!) På dessa sidor kan ni läsa mer om projektet: 

Min GitHub (för att granska koden och hur man själv installerar gulp)
Min Medium artikel (för att läsa en lättsam artikel om projektet)
Demosida 'Glögg-party'  (för att testa sidan och faktiskt se den 😊)

Värt att notera är också att 'Glöggpartyt' är ett påhittat event och finns inte på riktigt 😢 samt att formuläret saknar back-end (det går inte att faktiskt skicka formuläret), så fortsättning följer…😉 God jul allesammans! 🎄