Žiniatinklio kūrimo koncepcijos Visi žiniatinklio dizaineriai turėtų suprasti

Yra daug ką pasakyti skirtumas tarp dizainerių ir kūrėjų. Suteikta, kad yra daug dizainerių / kūrėjų hibridų suprasti abi monetos puses, bet jie yra nedaug ir toli.

Kūrybiniai projektai klesti tinkamą ryšį. Tačiau tai gali būti sunku, kai dizaineriai ir kūrėjai nėra tikri, kaip tai padaryti kalbėkite vienas su kitu. Nemanau, kad dizaineriai turi žinoti, kaip parašyti tinkamą „JavaScript“, o kūrėjai neturėtų rinktis tipografijos pasirinkimo. Tačiau yra keletas pagrindinėmis temomis manau, kad eiti abiem kryptimis.

Toliau išvardytos temos yra mano paties asmeninė veikla svarbios žiniatinklio kūrimo idėjos, kurias turi suprasti visi dizaineriai. Kaip pats dizaineris / kūrėjas, žinau, kaip paini ji gali būti abiejų sričių studijavimas. Tačiau visada verta mokytis, nes aiškus supratimas pagerina bendravimą ir daro dizainerį kur kas vertingesnį kūrybinei komandai.

Priekinio kodo elgesys

Web dizaineriai dažnai manoma, kad turi frontend įgūdžius kartu su savo dizaino talentus. Tai karštai diskutuojama tema, daugiausia dėl to, kad yra nėra teisingo atsakymo.

Dizaineriai turėtų daryti tai, ką jie daro patinka. Jei tai reiškia tik vizualinio dizaino kūrimą, tai taip. Tačiau trumpas supratimas apie „frontend“ technologijas gali padaryti tą patį dizainerį labiau intuityvus kuriant kūrėjams kūrinius.

Manau, kad kiekvienas dizaineris turėtų bent jau suprasti trys pagrindinės frontendo raidos kalbos (HTML, CSS ir JS) kartu su tuo, kaip jie naudojami. Pavyzdžiui, dauguma išskleidžiamųjų meniu priklauso nuo „JavaScript“, bet yra ir CSS-alternatyvų.

Kai dizaineris sukuria išskleidžiamąjį meniu, jie gali galvoti apie jį įgyvendinti taikant kodą. Dizaineris, kuris supranta, kuriuos elementus reikia „JavaScript“, gali būti geriau pasirengęs suprasti, ką jie prašo kūrėjams kurti.

Tai įmanoma be mokymosi rašyti vieną eilutės kodą.

CSS yra sukurta stiliaus svetainėje. Tai daugiausia statinis, išskyrus CSS animaciją ir CSS sukuria daugumą vaizdų puslapyje. Dauguma dinaminių funkcijų yra sukurta naudojant „JavaScript“.

Jei suprasite šią atskirtį, ji įkvepia sąmoningas pastangas į projektavimo darbus. Ji taip pat privers UX judesio dizainerius apsvarstyti, kiek darbo pereina į sąsajos animaciją.

Reaguojantys metodai

Kiekvienas žiniatinklio dizaineris turėtų žinoti bent jau terminą jautrus dizainas. Tai leidžia svetainėms prisitaikyti prie skirtingų ekrano dydžių, kiekvienam iš jų priklauso kitoks išdėstymas. Įrenginio matmenys, kai taikomas naujas išdėstymas apibrėžti pagal taškus, pridėtas (vienas iš) CSS failo (-ų).

Lūžio taškai nurodomi a tam tikro pikselio pločio (ir (arba) kartais aukštis), mažiausias arba maksimalus, kuriame išdėstymas prisitaiko prie to ekrano dydžio. Taigi, 1080px monitoriuje atrodys kitoks vaizdas nei 320px išmaniajame telefone.

Norėdami pamatyti, kaip taškų trūkumai veikia realiose svetainėse, patikrinkite žiniasklaidos užklausų svetainę.

Jūsų, kaip dizainerio, darbas yra apsvarstyti, kaip kiekvienas išeities taškas gali būti įtakos maketui. Jums gali būti pavesta sukurti kelis kompasus pritaikyti skirtingiems ekrano matmenims.

Supratę, kad CSS lūžio taškas apibrėžia sąlygas, kai išdėstymas keičiasi, turėsite daug lengviau pristatyti šiuos turtą „dev“ komandai.

Pagalvokite apie modulinius modelius

Kūrėjai visada nori pakartotinio naudojimo kodas kiek įmanoma, nes šis požiūris leidžia vystytis mažiau verbose ir sumažina failo dydį - iš tikrųjų tai yra svarbus kodo optimizavimo metodas.

Modulinis dizainas aprašo svetainių kūrimo būdą “modulius” tai gali būti laikui bėgant. Pagalvokite mygtukus, formuokite įvesties, antraštės stilius arba bloknotus su išgalvotais stiliais.

Jei tu dizaino elementai, kūrėjams lengviau koduoti išdėstymą pakartotinai naudojamos CSS klasės. Visada yra gera mintis galvoti apie tai, kur galite pagrįstai pakartotinai naudoti tos pačios spalvos, tekstūros ir puslapio elementai, tačiau jūs turite būti protingi nepažeisti bendros estetikos.

Tai dar geriau, jei jūs komentuoti kokie elementai nukopijuoti skirtinguose maketuose, kad kūrėjai galėtų pažymėkite šias svetainės dalis pakartotiniu kodu - greitesnis ir paprastesnis vystymasis.

Modulinis dizainas susijęs su atominis dizainas, abu požiūriai yra labiau orientuoti į kūrėjus. Tačiau vizualizacija gali padėti jums suprasti, kaip veikia kodas, taigi, jei stengiatės vizualizuoti modulinį dizainą peržiūrėkite šį pranešimą, kad pamatytumėte keletą pavyzdžių.

Suprasti „Retina“ vaizdus ir SVG

Paprastai dizainerio darbas yra paruošti vaizdus, ​​užfiksuoti visas būtinas nuotraukas ir dizaino piktogramas nuo nulio. Tai reiškia, kad už dizainerius atsako tik vizualinio turto pristatymas kad kūrėjai galiausiai koduoja į išdėstymą. Štai kodėl svarbu suprasti tinklainės dydis ir perduoti tinklainės palaikomą turtą kūrėjams kartu su galutiniu (-iais) maketu (-ais).

Aš norėčiau labai rekomenduoti šį „Smashing Magazine“ įrašą, jei norite sužinoti daugiau apie tinklainės dizaino darbo eigą. Retinizuoti Tai nemokama Photoshop veiksmų kolekcija, kuri gali automatiškai sukuria tinklainės versijas savo turtą.

Dauguma dizainerių jau žino, kad palaiko @ 2x vaizdai, tačiau naujesni „iPhone 6+“ įrenginiai turi @ 3x rezoliucijos. Tačiau kai kurie projektai nerimauja su @ 3x vaizdų dydžiais, todėl prieš baigdami bet kokį turtą, pasikalbėkite su savo projekto vadovu.

Paskutinis dalykas, kurį reikia apsvarstyti, yra SVG pažanga žiniatinklyje. Visos šiuolaikinės naršyklės palaiko SVG, kuri yra a vektoriniu vaizdu. Tai reiškia, kad SVG piktogramos bus automatiškai skalės be kokybės praradimo, todėl nereikia tinklainės turto SVG grafikai.

Ne visos kūrybinės komandos yra pasirengusios eiti su SVG interneto dizainui. Juos palaiko naršyklės, tačiau kai kuriais atvejais jie gali būti sudėtingi įgyvendinti. Todėl komunikacija yra gyvybiškai svarbi sėkmingam dizainerio / kūrėjo santykiui.

Aptarkite vektorinių grafikų naudojimo privalumus ir trūkumus ir nuspręskite, kas geriausiai tinka kiekvienam projektui. Tiesiog suprasdami šias funkcijas galėsite aiškiai bendrauti su kūrėjais ir netgi padėti jiems užkoduoti tinklainės palaikymo schemą.

Suprasti prieinamumą

Progresyvus tobulinimas ir grakštus degradavimas yra du skirtingi būdai, kaip elgtis su ta pačia problema: prieinamumas. Ne visi vartotojai bus įrenginiuose arba paleis naršykles, kurios palaiko 100% svetainės dinaminių funkcijų.

Šie vartotojai vis tiek turėtų gauti patirtis, kuri veikia, ir tai turi būti tvarkoma tinkamai koduojant. Kai kurie ekrano skaitytuvai gali ignoruoti visus „JavaScript“ ir „CSS“ kodus, bet svetainę vis dar turi veikti.

Neseniai aš padarysiu postą palaipsniui išsamiai, kaip mano pageidaujamą plėtros būdą. Progresyvus tobulinimas prasideda labai pagrindinėmis funkcijomis, tada veikia daugiau “pažengęs” funkcijos.

Grakštus degradavimas yra priešingas požiūris kur visų pirma suprojektuotos visos pagrindinės funkcijos, tada kūrėjas nusprendžia, kaip elgtis su šiomis funkcijomis, jei vartotojas nepalaiko „JavaScript“ ar „CSS“.

Mažai tikėtina, kad dizaineris būtų paprašytas atlikti bet kokių šių situacijų maketus. Tačiau svarbu, kad dizaineriai suprastų šias sąlygas ir ką jie reiškia, nes jie įtakos vystymosi procesui. Tai ypač pasakytina apie projektus, kurių prieinamumas kelia didelį susirūpinimą.

Uždarymo metu

Yra keletas temų, kurias praleidau, nes manau, kad jie yra neprivalomi. Versijų valdymas, klaidų apdorojimas ir „JavaScript“ animacijos yra kelios sudėtingesnės temos, kurias dizaineriai gali įsivaizduoti.

Tačiau teisingai, šiame poste aptarti klausimai bus daugiau nei padėti dizaineriams suprasti plėtros komandos reikalavimus. Tiesiog apgaubdami interneto kūrimo paviršių įgyti įžvalgų tai padės jums bendrauti su idėjomis ir prisidėti prie gamybos metu kylančių problemų.

Jei ieškote daugiau susijusio turinio, peržiūrėkite šiuos įrašus:

• Kaip efektyviai bendrauti su kūrėjais (smashingmagazine.com)
• Padėkite projektuotojams ir kūrėjams išmokti suprasti vienas kitą (uie.com)
• Mokymasis kodui suteikia jums privalumų kaip UX dizaineris (jessicaivins.net)