For nogen tid siden havde jeg mulighed for at gennemføre en simpel workshop om emnet“Webudvikling vs webdesign„Til mine kolleger. Dette er mine tanker om dette emne, og om min erfaring med at lede sessionen.
I mere end et halvt årti har jeg været igennem masser af processer med at komme fra design af klientens ideer og drømme til implementering af deres websteder, moderne webapplikationer eller native apps. Så jeg er overbevist om, at jeg har noget at dele her.
Åh, det er den slags emne, der kan få hunde til at kæmpe mod katte på et øjeblik.
Eller ikke.
Når alt kommer til alt er vi alle mennesker med smag, ideer, mål og rejser, der kan være ens i så mange aspekter, at de forskelle, der måtte eksistere, slettes væk. Pixels forener os og forskellige idiomer tillader os at sige det samme - sort er #000000 - i stedet for at skabe et hul mellem os.
Det er skønheden i sagen. Forskellige personer, personligheder og færdigheder på forskellige trin i et produkts arbejdsgangMen han spiller altid for det samme hold. Samme kontor, samme computere, samme stole, forenet af respekt og smukke interaktioner som lignende jævnaldrende.
I sidste ende er det ikke udviklere vs designere, men Udviklere og designere - et talentfuldt hold.
Under workshoppen havde designteamet tid til at forklare, hvordan et design kommer til live. Hvordan klientens ideer modnes på en sådan måde, at selv dem begynder at tænke „dette er det!“ - ja, nogle gange ved kunderne ikke nøjagtigt, hvad de virkelig ønsker eller har brug for; i sidste ende designere bringer oplysning til kundens drømme.
Så det er ikke kun farver, gitre og layout, der gør dem stolte af at være designere. Der er en komplet proces, der starter i nogle ord og sætninger, går gennem ideer og mockups og slutter i mesterværket af et design med al kærlighed og drys.
Hvilke værktøjer bruges? Kan du huske Notepad? Ja, en slags tekstredigerer skal bruges til at fange de ord, der definerer klientens drømme. Så er der flere tekniske værktøjer. Lad os fokusere på det primære værktøj, der bruges af designere i vores virksomhed - Skitse.
Det bruges til at skabe vektordesign med enkelheden som at tegne noget i et hvidt papirark. Dit lærred udvikler sig til en gitterbaseret webstedsskabelon med lethed og høj troværdighed. Det er også web- og app-orienteret, med den hurtigste billedeksport med alle klokker og fløjter, der er nødvendige for at understøtte alle slags skærme og opløsninger.
Og den er så enkel at bruge, at enhver udvikler kan åbne den og begynde at samle sine første farver, afstande og gitterspecifikationer på et par minutter.
„Hvad med Adobe Illustrator eller Photoshop?“ spørger du måske. Godt, de bruges stadig i specifikke situationer. For eksempel, Photoshop er stadig det bedste værktøj til at forskønne og arbejde med billeder. Men, med hensyn til fuld kreativitet er Sketch nummer et.
Og nu begynder det sjove (designere sværger i baggrunden).
Implementering, 3, 2, 1... gå!
Whoa der cowboy... før du begynder at skrive dine første kodelinjer, skal du være godt forberedt. Jeg fortæller normalt nyankomne: „Start ikke det, hvis du ikke ved nok om designet, så du kan forklare det for kollegaen på din side.“
Før noget skal du se og absorbere designet. Du skal kende gitteret, den anvendte typografi, almindelige elementer såsom overskrifter, ikonplacering og margener mellem elementer.
Vigtige spørgsmål kan opstå: Hvad skal denne knap udløse? Hvilken side skal vises, når brugeren gør dette eller det? Hvad er de elementer, der gentages gennem siderne? Hvilke er forskellige? Det er nemt at forstå, hvorfor de er forskellige?
Glem ikke: Hvis du har spørgsmål, så spørg dine venlige designeksperter. De vil spare dig for lidelse og købe dig dyrebar tid. Så kan du starte din magi!
Det er vigtigt, at du kender webudviklingens evangelium, især når du opretter fremragende websider - som du altid vil opnå, ikke?
Alt starter med et velstruktureret dokument opnået ved hjælp af HTML - dit strukturlag. I stedet for at dykke ned i stil eller en form for ønsket adfærd, skal du oprette dine sidesektioner som sidehoved, sidefod, hovedindhold, afsnit, lister og så videre.
Vil du vide, om dit dokument er struktureret på en god måde? Fjern eventuelle stilarter fra din vej, deaktiver CSS og stilregler i din browser, og kontroller, om du stadig kan se et smukt dokument, som du kan læse og forstå.
Så kommer dit præsentationslag Brug CSS til at opnå det smukke design, som du implementerer. Prøv at bruge CSS til din fordel ved at huske, at det står for Kaskaderende stilark, hvilket betyder, at hver regel vil kaskadere yndefuldt i hele dit dokument.
Derfor er det så vigtigt at kende dit design godt.
Kan du huske de almindelige elementer som typografi og margener? Nu er det tid til at praktisere dem ved at oprette dine stylingregler, for eksempel til dine overskrifter, der adskiller sig fra størrelse, men bruger den samme skrifttype, bogstavafstand og en vis margen til at trække vejret.
Prøv ikke at gå mere end 3 niveauer af kontrol. For eksempel i stedet for at gøre noget lignende #sidebar div p.sidebar span.venstre prøv at lege med din markup og gør noget simpelt som #sidebar p span:førstebarn. Vil du lære at adskille din kode i mapper og filer? Lær med store mesterværker som Bootstrap. Tjek kildekoden, og du vil lære så meget. I slutningen skal du elske din markering og sætte et smil på ansigtet ved hjælp af nogle gode gammeldags CSS.
Endelig har du adfærdslaget, og med hensyn til denne specifikke fase og specifikt opførslen af elementer på din side, er JavaScript (JS) bestemt din bedste gamle ven, der står fast, mens tiden går. Med det kan du bringe den interaktivitet, som din side har brug for, beregne nøjagtige oplysninger, når brugerne foretager en slags valg, udløse begivenheder, når de indsender data osv. Hvis du har brug for komplekse datastrukturer og tunge beregninger, er det måske tid til at se på de fantastiske JS-rammer.
Hvis ikke, hold dig til dine JS-filer, med funktioner, der er navngivet korrekt, som enkle sorte bokse, som du bare skal indstille dit input, og du ved med sikkerhed, hvad der kommer fra den anden side af dem.
Et andet simpelt tip er, at du nu kan lave mange animationer og overgange med CSS3. Nogle gange kan svaret bare være CSS og ikke JS. Til sidst skal du prøve at organisere dine funktioner på korrekt navngivne filer i stedet for at holde alt på en enkelt stor fil. Frem for alt skal du være stolt af din kode.
Åh, spørgsmålet var: hvor skal jeg starte?
Kom i gang med Test Driven Development! Ja, start med din test, kode, få grønt lys og refaktor, når du kan. Prøv at lære ved at se nogle masterminds' screencasts, som du kan finde i Kodeskole, for eksempel. Du vil lære så meget af dem.
Dette fører os tilbage til det første emne, det, vi endte med at kalde „udviklere og designere - forskellige mennesker, samme team“, husker du?
Nogle gange kan vi være „tabt i oversættelse“ (fantastisk film, du bør se den så hurtigt som muligt, hvis du ikke har gjort det endnu) med forskellige mennesker, der taler forskellige sprog. En udvikler kan sige:
Jeg kender mit sprog. Det er<div>,<a>, margin-left, var nav = $ („.navbar“). Giv mig det design, så får jeg det til at skinne.
I den anden ende kan en designer sige ting som:
Disse titler skal have samme farve og størrelse. Kan du ikke se, at gitteret har 12 kolonner? Det flyder ikke, det er 3 kolonner bredt.
Det var en virkelig positiv workshop, det var en stor fornøjelse at gøre det og kunne dele dette med ikke kun mine kære kolleger, men med dig. Jeg håber, du kan få nogle lektioner eller i det mindste gode vibber fra disse linjer.
Baseret på en artikel oprindeligt skrevet af Timóteo Bica for Imaginary Cloud
Fandt du denne artikel nyttig? Du kan måske også lide disse!
En gruppeperson, der elsker at kommunikere og lære. Rolig og glad. Søger efter de bedste løsninger og følger de nyeste teknologier. Åben for rådgivning.
People who read this post, also found these interesting:
