För en tid sedan fick jag möjlighet att hålla en enkel workshop om ämnet "Webbutveckling vs. Webbdesign" för mina kollegor. Detta är mina tankar om ämnet, och om min erfarenhet av att leda passet.
I mer än ett halvt decennium har jag gått igenom otaliga processer, från att designa kundens idéer och drömmar till implementeringen av deras webbplatser, moderna webbapplikationer eller native-appar. Därför är jag övertygad om att jag har något att dela med mig av här.
Oj, det är ett sådant ämne som kan få hundar att slåss mot katter på ett ögonblick.
Eller inte.
Trots allt är vi alla människor med smaker, idéer, mål och vägar som kan vara så lika på så många sätt att de skillnader som kan finnas suddas ut. Pixlar förenar oss och olika uttryckssätt gör att vi kan säga samma sak – svart är undefined – istället för att skapa en klyfta mellan oss.
Det är det som är det fina med det. Olika människor, personligheter och färdigheter, i olika steg i en produkts arbetsflöde, men spelar alltid i samma lag. Samma kontor, samma datorer, samma stolar, förenade av respekt och vackra interaktioner som jämlikar.
I slutändan är det inte Utvecklare vs. Designers utan Utvecklare och Designers – ett talangfullt team.
Under workshopen fick designteamet möjlighet att förklara hur en design växer fram. Hur kundens idéer mognar på ett sådant sätt att även de börjar tänka ”det här är det!” – ja, ibland vet kunder inte exakt vad de egentligen vill ha eller behöver; i slutändan är det designers som förverkligar kundens drömmar.
Så det är inte bara färger, rutnät och layouter som gör dem stolta över att vara designers. Det finns en komplett process som börjar med några ord och meningar, går igenom idégenerering och mockups, och slutar i ett mästerverk av en design med all kärlek och alla finesser.
Vilka verktyg används? Kommer du ihåg Anteckningar? Ja, någon form av textredigerare behöver användas för att fånga orden som definierar kundens drömmar. Sedan finns det mer tekniska verktyg. Låt oss fokusera på det primära verktyget som används av designers i vårt företag – Sketch.
Det används för att skapa vektordesigner med samma enkelhet som att rita något på ett vitt papper. Din arbetsyta utvecklas till en rutnätsbaserad webbplatsmall med lätthet och hög precision. Det är också webb- och apporienterat, med den snabbaste bildexporten med alla nödvändiga finesser för att stödja alla typer av skärmar och upplösningar.
Och det är så enkelt att använda att vilken utvecklare som helst kan öppna det och börja samla dess första färger, avstånd och rutnätspecifikationer på ett par minuter.
”Hur är det med Adobe Illustrator eller Photoshop?” kanske du undrar. Tja, de används fortfarande i specifika situationer. Till exempel, Photoshop är fortfarande det bästa verktyget för att försköna och arbeta med bilder. Men, när det gäller full kreativitet är Sketch nummer ett.
Och nu börjar det roliga (designers svär i bakgrunden).
Implementering, 3, 2, 1… kör!
Hoppsan, lugna dig lite… innan du börjar skriva dina första rader kod måste du vara väl förberedd. Jag brukar säga till nykomlingar: "Börja inte om du inte vet tillräckligt om designen för att kunna förklara den för kollegan bredvid dig."
Innan något annat, granska och ta in designen. Du måste känna till rutnätet, den använda typografin, vanliga element som rubriker, ikonplacering och marginaler mellan element.
Viktiga frågor kan uppstå: Vad ska den här knappen trigga? Vilken sida ska visas efter att användaren gör det ena eller det andra? Vilka element upprepas på sidorna? Vilka är annorlunda? Är det enkelt att förstå varför de är annorlunda?
Glöm inte: Om du har frågor, fråga dina vänliga designexperter. De kommer att bespara dig lidande och köpa dig värdefull tid. Sedan kan du börja din magi!
Det är viktigt att du känner till webbutvecklingens grunder, särskilt när du skapar enastående webbsidor – vilket du alltid vill uppnå, eller hur?
Allt börjar med ett välstrukturerat dokument som skapas med HTML – ditt strukturlager. Istället för att dyka ner i stil eller någon form av önskat beteende, skapa dina sidsektioner som sidhuvud, sidfot, huvudinnehåll, stycken, listor och så vidare.
Vill du veta om ditt dokument är välstrukturerat? Ta bort alla stilar genom att inaktivera CSS och stilregler i din webbläsare, och kontrollera om du fortfarande kan se ett vackert dokument som du kan läsa och förstå.
Sedan kommer ditt presentationslager där du använder CSS för att uppnå den vackra design du implementerar. Försök att använda CSS till din fördel genom att komma ihåg att det står för Cascading Style Sheets, vilket innebär att varje regel kommer att kaskadera elegant genom hela ditt dokument.
Därför är det så viktigt att känna till din design väl.
Kommer du ihåg de där vanliga elementen som typografi och marginaler? Nu är det dags att omsätta dem i praktiken genom att skapa dina stilregler, till exempel för dina rubriker som skiljer sig i storlek men använder samma typsnitt, teckenavstånd och lite marginal för att andas.
Försök att inte ha mer än 3 kontrollnivåer. Till exempel, istället för att göra något i stil med undefined försök att leka med din markup och göra något så enkelt som undefined. Vill du lära dig att dela upp din kod i mappar och filer? Lär dig av mästerverk som Bootstrap. Kolla källkoden så kommer du att lära dig så mycket. Slutligen, älska din markup och få den att stråla med lite hederlig gammal CSS.
Slutligen har du beteendelagret, och när det gäller denna specifika fas, och särskilt beteendet hos elementen på din sida, är JavaScript (JS) definitivt din bästa gamla vän som står stadigt medan tiden går. Med det kan du tillföra den interaktivitet som din sida behöver, beräkna korrekt information när användare gör ett val, utlösa händelser när data skickas in, etc. Om du behöver komplexa datastrukturer och tunga beräkningar, kanske det är dags att titta på de där fantastiska JS-ramverken.
Om inte, håll dig till dina JS-filer, med funktioner som är korrekt namngivna, som enkla svarta lådor där du bara behöver ange din input och du vet säkert vad som kommer ut på andra sidan.
Ett annat enkelt tips är att du nu kan göra många animationer och övergångar med CSS3. Ibland kan svaret vara bara CSS och inte JS. Slutligen, försök att organisera dina funktioner i korrekt namngivna filer istället för att ha allt i en enda stor fil. Framför allt, var stolt över din kod.
Åh, frågan var: var ska jag börja?
Börja med Test Driven Development! Ja, börja med ditt test, koda, få grönt ljus och refaktorera när du kan. Försök att lära dig genom att titta på några mästares skärminspelningar som du kan hitta på Code School, till exempel. Du kommer att lära dig så mycket av dem.
Detta tar oss tillbaka till det första ämnet, det vi till slut kallade "utvecklare och designers – olika människor, samma team", minns du?
Ibland kan vi vara "lost in Translation" (bra film, du borde se den så snart som möjligt om du inte redan har gjort det) med olika människor som talar olika språk. En utvecklare kanske säger:
Jag kan mitt språk. Det är <div>, <a>, margin-left, var nav = $(".navbar"). Ge mig den designen så får jag den att glänsa.
Å andra sidan kan en designer säga saker som:
De där rubrikerna ska ha samma färg och storlek. Ser du inte att rutnätet har 12 kolumner? Den flyter inte, den är 3 kolumner bred.
Det var en väldigt positiv workshop, det var ett stort nöje att genomföra den och kunna dela detta med inte bara mina kära kollegor utan även med er. Jag hoppas att ni kan dra några lärdomar eller åtminstone få goda vibbar från dessa rader.
Baserad på en artikel ursprungligen skriven av Timóteo Bica för Imaginary Cloud
Tyckte du att den här artikeln var användbar? Då kanske du gillar dessa också!
En gruppperson som älskar att kommunicera och lära sig. Lugn och glad. Söker efter de bästa lösningarna och följer den senaste tekniken. Öppen för råd.
People who read this post, also found these interesting:
