Kissat ja koirat. Kain ja Abel. Suunnittelijat ja kehittäjät. Nämä ovat vain muutamia suurista historiallisista kohtaamisista.

Suunnittelijat ja kehittäjät näyttävät usein tulevan eri planeetoilta ja heillä on täysin erilaiset aivot.

Kehittäjät haluavat sivuston toimivan oikein, suunnittelijat haluavat sen näyttävän oikealta.

Muutamia viikkoja sitten tutkittiin tärkeintä lemmikkieläinten peeves, että web-suunnittelijat ovat kanssa web-kehittäjille , ja ehdotti heille joitain ratkaisuja.

Tänään keskustelemme kolikon toisella puolella: viisi yleisintä gripia, jonka kehittäjät ovat suunnittelijoiden kanssa .

PEEVE # 1: "Miksi suunnittelijat haluavat luoda kaiken Flashissa?"

Verkkosivusto on pelkkä painike ja teksti, mutta suunnittelija vaatii Flashia, vaikka se kolminkertaistaa latausaikana.

Ongelma
Joillekin suunnittelijoille web-sivun luominen käyttämällä keskeisiä web-tekniikoita (HTML, CSS ja JavaScript) voi tuntua innovaation kuolemalta. He rajoittavat luovuuttaan ja pakottavat heidät riippumaan kehittäjistä näkemäänsä.

Flash antaa suunnittelijoille mahdollisuuden rajattomille suunnittelumahdollisuuksille, ja he voivat säilyttää paljon enemmän valvontaa lopputuotteessa, varsinkin jos he tuntevat ActionScriptin. Flashilla suunnittelijat voivat valita mistä tahansa typografiasta, kallistuksesta ja vinossa olevista elementeistä, lisätä animaatiota ja luoda erityisiä efektejä, jotka ovat aivan mahdottomia tylsässä HTML: ssä.

Ratkaisu
Ensimmäinen kysymys, jonka haluat kysyä itseltäsi kehittäjältä, on "Mikä on paras tekninen ratkaisu ongelmaan?" Se voi olla ydinteknologia tai se voi olla Flash. Avoin mieli on tärkeä. Määritä, mikä toimii parhaiten, istu alas suunnittelijan kanssa ja sopi projektin teknisistä ja suunnittelusta.

Tutki esimerkiksi onko sivu ladattava nopeasti, käytä tietyn fontin markkinointitarkoituksiin, täytä saavutettavuusohjeita tai animaatiota. Kun vastaat tällaisiin kysymyksiin, voit paremmin arvioida Flashin käytön etuja ja haittoja.

Suunnittelijan tiedottaminen JavaScript-kehyksistä, kuten Dojo ja jQuery, on hyvä idea. He eivät välttämättä ymmärrä interaktiivisia toimintoja ja erikoistehosteita, jotka voidaan saavuttaa AJAX: n ja DHTML: n avulla.


PEEVE # 2: "Onko suunnittelija kuullut jopa HTML CSS: stä?"

Suunnittelija on luonut loistavan suunnittelun Photoshopilla, mutta web ei vain toimi näin.

Ongelma
Jotkut suunnittelijat näyttävät olevan tahallaan tietämättömiä jopa web-tekniikan peruspiirteistä. Tämä voi johtaa malleihin, jotka ovat tavallisia epärealistisia tai äärimmäisen vaikeita luoda verkossa, jotka liityvät liikaa kuvioihin yksinkertaisesta typografiasta tai jotka johtavat subpar käyttökokemukseen.

Ratkaisu
CSS on web-suunnittelun kieli, ja mediassa työskentelevillä suunnittelijoilla ei ole oikeutta olla ymmärtämättä sen perusasioita. Pidän tätä aikaisemman työn tulosteiden suunnittelussa. Minun ei tarvitse tietää, kuinka käyttää yhtä näistä massiivisista teollisuuspainokoneista, mutta minun piti tietää ansasta, puolisävyistä ja CMYK: stä.

Minun oli ymmärrettävä painoprosessin perusteet, jos halusin saavuttaa parhaan tuloksen omilla malleillani. Sama pätee myös web-suunnitteluun. Suunnittelijoiden ei tarvitse tietää, miten palvelin toimii, mutta heillä on oltava perustiedot linjan korkeudesta, pehmusteista, taustakuvista ja muista tekijöistä, jotka muodostavat web-kehitysprosessin.


PEEVE # 3: "Suunnittelija antoi PSD: lle 50 000 nimeämätöntä kerrosta eikä kansioita!"

Voit ladata 50 Mt: n Photoshop-dokumentin, odottaa viisi minuuttia, jotta se lopulta avautuu, alkaa leikata yksinkertainen painikkeen tausta ja joutuu näkymättömästi satunnaiseen järjestykseen, jossa on tuntemattomia kerroksia, ja joista puolet on poistettu käytöstä.

Ongelma
Kehittäjien on pidettävä asiakirjojensa hyvin järjestäytyneinä, tai muuten ne eivät ole tehokkaita. Jos kuitenkin jotain näyttää oikealta Photoshopin portin portilta, niin se on usein tarpeeksi hyvä suunnittelija. Kehittäjälle, jota käytetään objektiiviseen ohjelmointiin (OOP) ja loogiseen koodin järjestykseen, tämä voi olla painajainen!

Ratkaisu
Kehittäjät eivät ole ainoita, jotka ovat turhautuneet epäjärjestäytyneistä ja ahtaista PSD-tiedostoista. Luova johtaja lähetin takaisin useamman kuin yhden PSD: n pyytämällä, että suunnittelija järjestää ja nimeää kaikki kerrokset. Suunnittele tämä ongelma suunnittelijan kanssa mahdollisimman aikaisessa vaiheessa. Tee selväksi, että tarvitset puhtaan ja järjestetyn tiedoston.

Jos tämä ei ole mahdollista (tai suunnittelija on vain itsepäinen), yksi objekti objektin kerroksen löytämiseksi on oikealla / Ctrl + klikkaa sitä näkymäportilla Siirrä työkalu (pikanäppäin on "v").

Kaikkien kerrosten ja kerrosryhmien kohdistimen kontekstivalikko tulee näkyviin. Valitse haluamasi taso ja, jos Layer Palette on auki, oikea kerros korostuu.

Suosittelen myös, että suunnittelijat oppivat käyttämään Photoshopin Smart Objects -ohjelmia . Smart Objectsin avulla voit kerätä objektin muodostavat kerrokset (esimerkiksi kerrokset, joissa on painike) osaksi tärkeintä Photoshop-tiedostoon upotettua erillistä tiedostoa.

Smart Objects on helppokäyttöinen ja tarjoaa useita etuja:

  • He luovat "objekti-orientoitu" Photoshop-tiedoston, jossa toistetuilla elementeillä on yksi "symboli".
  • Ne voidaan tuottaa web-valmiina elementteinä ilman sotkuisten kerrosten viilentämistekniikoiden tarvetta.
  • Ne tekevät PSD: n järjestämisen helpommaksi vähentämällä päätiedostojen kerrosten lukumäärää.


PEEVE # 4: "Suunnittelija ei mahtunut reaalimaailmaan."

Käytämme CMS-järjestelmää, joka antaa asiakkaalle täyden hallinnan sisällöstä. Suunnittelumallissa on kuitenkin vain yksi tekstirivi otsikoille ja yhden tekstiryhmän teaserille.

Suunnittelija odottaa tasapainoisia moduulin korkeuksia ja sarakkeita, mutta emme voi ennakoida kopion määrää, joka on sovitettava siihen.

Ongelma
Greeked (tai "Lorem Ipsum") -tekstin luominen on aika kunnioitettu menetelmä realistisen näköisen sisällön lisäämiseksi verkkosivuston lopullisen kopion puuttuessa. Koska se ei ole todellista sisältöä, se voi johtaa suunnittelijoita tekemään virheellisiä johtopäätöksiä sivun lopullisesta suunnittelusta.

Ratkaisu
Suunnitteluprosessit ovat staattisia, mutta reaalimaailman verkkosivujen on oltava fluideja ja dynaamisia. Suunnittelijoiden tulisi tunnistaa tämä ja kattaa kaikki mahdolliset skenaariot. Tämä on yksi tärkeimmistä rajoituksista staattisten komentojen luomiseen: ne eivät ole todellisia.

Minusta on hyödyllistä määritellä alueiden korkeus, jota käytetään elementtien, kuten otsikoiden ja teaserien, esittämiseen sen sijaan, että jäisivät ne avoimiksi. Tämä auttaa sinua selvittämään, kuinka paljon tilaa ne osuvat lopulliseen muotoiluun.


PEEVE # 5: "Suunnittelija odottaa minua arvata mitä tyylejä hän on käyttänyt."

Suunnittelija antaa sinulle selitykset ilman selitystä ja odottaa sinua selvittämään fonttiperheen, linjan korkeudet, värit, leveydet, pehmusteiden, reunojen ja marginaalit.

Ongelma
Toisin kuin Photoshopin mallipohjan luominen, Web-kehitys ei yleensä ole WYSIWYG: ssä (mitä sinä näet mitä saat). Kehittäjä antaa pikemminkin erityisiä arvoja mittauksille, väreille ja typografialle.

Ratkaisu
Näen tämän tiedon jakamisen useissa hankkeissa; se korostaa yhtä suurimmista eroista "suunnittelun" ja "kehittämisen" välillä. Vaikka suunnittelija käytti mallia ennalta määritetyllä verkolla, kehittäjä joutuu usein silmämunaliikkeeseen muissa tyyleissä.

Suunnittelijan luominen tyyliohjeeksi toimitukseksi on siis tärkeä. Tyyliopas auttaa sovittua suunnitelmaa suunnittelussa ja vähentää hämmennystä.


Special Bonus Peeve: "En tarvitse suunnittelijaa kertomaan minulle, miten ohjelmoida!"

Suunnittelija haluaa jotain tekemistä tietyllä tavalla, riippumatta siitä, onko kehittäjä sitä mieltä, että tämä on suositeltavaa.

Ongelma
Suunnittelijat kertoivat kehittäjille, miten koodi on yhtä turhauttavaa kuin kehittäjät kertovat suunnittelijoille miten tehdä työtä. Suunnittelijan ja kehittäjän välinen viiva on kuitenkin usein ohutta, ja joskus molemmat roolit ovat samalle henkilölle.

Jos sinulla on selkeästi määritellyt vastuut projektista, kuulet jonkun, joka ei ollut mukana päätöksentekoprosessissa, toinen johtopäätös on ärsyttävä.

Tekniikat, jotka näyttävät hienolta toisille pinnalle, eivät aina sovi ohjelmointiympäristöön, jossa työskentelet. Teknisten päätösten yksityiskohtien selittäminen kestää kauan, kun vain haluat, että suunnittelija luottaa siihen, että olet tehnyt viisaita päätöksiä .

Ratkaisu
Kuuntele, mitä suunnittelijan on sanottava teknisistä vaihtoehdoista; et ehkä ole ajatellut kaikkia niitä. Useammin kuin kerran olen ollut keskusteluissa suunnittelijoiden kanssa, jotka tuottivat ratkaisut pöytään, jota en tiennyt, kuten ensimmäisen kerran nähdessäni jQuery toimintaa.

Muista, että sinä ja suunnittelijalla (toivottavasti) jaat sama tavoite luoda paras mahdollinen tuote. Jos pidät avoimesta mielenkehityksestä ja tasoristeisestä lähestymistavasta, et voi mennä vikaan.


Kirjoitettu yksinomaan WDD: lle Jason Cranford Teague . Hän tarjoaa erikoistuneita verkkokonsultointipalveluita ja koulutustilaisuuksia. Voit ennakkoon tilata uuden kirjan, Puhuminen tyyleissä: perusteet CSS Web-suunnittelijoille osoitteessa Amazon.com.

Mitkä lemmikkikoirat sinulla on suunnittelijoiden kanssa? Haluamme tietää lisää tästä, lähetä kommenttisi alla.