Katte og hunde. Kain og Abel. Designere og udviklere. Disse er blot nogle få af de store historiske face-offs.

Designere og udviklere synes ofte at komme fra forskellige planeter og har helt forskellige hjerner.

Udviklere vil have en hjemmeside til at fungere rigtigt, designere vil have det til at se rigtigt ud.

For nogle uger siden udforskede vi hovedrollen pet peeves som webdesignere har med webudviklere , og foreslog nogle løsninger for dem.

I dag vil vi diskutere den anden side af mønten: de fem mest almindelige greb, som udviklere har med designere .

PEEVE # 1: "Hvorfor ønsker designere at lave alt i Flash?"

Webstedet er en simpel knap og noget tekst, men designeren insisterer på at bruge Flash, selvom det tredobler downloadtiden.

Problem
For nogle designere, ved at bruge kernewebteknologier (HTML, CSS og JavaScript) til at oprette en webside kan man føle sig som en dødsknude af innovation. De begrænse deres kreativitet og tvinge dem til at afhænge af udvikleren for at realisere deres vision.

Flash giver designere potentielt ubegrænsede designmuligheder, og de kan beholde langt mere kontrol over det endelige produkt, især hvis de kender ActionScript. Med Flash kan designere vælge mellem typografi, vippe og skæv elementer, tilføje animation og lave special effekter, der bare er umulige i kedelige ol 'HTML.

Løsning
Det første spørgsmål at spørge dig selv som udvikleren er, "Hvad er den bedste tekniske løsning på problemet?" Det kan være kernewebteknologier, eller det kunne være Flash. At have et åbent sind er vigtigt. For at finde ud af, hvad der ville fungere bedst, sæt dig ned med designeren og godkend dig en liste over tekniske og designmæssige krav til projektet.

For eksempel undersøge, om siden skal indlæses hurtigt, brug en bestemt skrifttype til markedsføringsformål, overholde tilgængelighedsretningslinjer eller have animation. Når du har besvaret disse spørgsmål, vil du være bedre i stand til at afveje fordele og ulemper ved at bruge Flash.

Informere din designer om JavaScript-rammer som Dojo og jQuery er en god idé. De kan ikke indse den interaktive funktionalitet og special effekter, der kan opnås med AJAX og DHTML.


PEEVE # 2: "Har designeren endda hørt om HTML CSS?"

Designeren har lavet et godt design ved hjælp af Photoshop, men internettet fungerer bare ikke sådan.

Problem
Nogle designere synes at være forsætligt uvidende om selv de mest grundlæggende aspekter af webteknologi. Dette kan resultere i designs, der er simple urealistiske eller yderst vanskelige at genskabe på internettet, der afhænger for meget på billeder for simpel typografi eller som fører til en underliggende brugeroplevelse.

Løsning
CSS er sproget for webdesign, og designere, der arbejder i mediet, har virkelig ingen undskyldning for ikke at forstå det grundlæggende. Jeg ligner dette på mit tidligere arbejde i printdesign. Jeg var ikke nødt til at vide, hvordan man kørte en af ​​de mammutiske industrielle trykpresser, men jeg var nødt til at vide om fangst, halvtoner og CMYK.

Jeg var nødt til at forstå grundprincipperne i trykningsprocessen, hvis jeg ønskede at opnå de bedste resultater med mine designs. Det samme gælder for webdesign. Designere behøver ikke at vide, hvordan en server fungerer, men de skal have grundlæggende kendskab til linjens højde, polstring, baggrundsbilleder og de andre faktorer, der udgør webudviklingsprocessen.


PEEVE # 3: "Designeren gav mig en PSD med 50.000 navngivne lag og ingen mapper!"

Du downloader 50 MB Photoshop dokumentet, vent fem minutter for at den endelig åbner, begynder at klippe en simpel knap baggrund og står over for en mur af uidentificerede lag i tilsyneladende tilfældig rækkefølge, og halvdelen er slukket.

Problem
Udviklere skal holde deres dokumenter velorganiseret, ellers bliver de ikke effektive. Men hvis noget ser lige ud i Photoshops havneport, er det ofte godt nok for designeren. Til en udvikler, der er vant til objektorienteret programmering (OOP) og en logisk ordre for kode, kan dette være et mareridt!

Løsning
Udviklere er ikke de eneste, der bliver frustreret af uorganiserede og rodløse PSD-filer. Som kreativ direktør sendte jeg mere end en PSD tilbage med en anmodning om, at designeren organiserer og navngiver alle lagene. Adress dette problem med designeren så tidligt som muligt. Gør det klart, at du skal bruge en ren og organiseret fil.

Hvis det ikke er muligt (eller designeren er bare envis), er et trick for at finde et objekts lag til højre / Ctrl + klik det i visningsporten med Move-værktøjet (tastaturgenvejen er "v").

En kontekstmenu for alle lagene og laggrupperne under markøren vises. Vælg det lag, du vil have, og hvis lagpaletten er åben, markeres det korrekte lag.

Jeg anbefaler også stærkt bede designere at lære at bruge Photoshops smarte objekter . Smarte objekter giver dig mulighed for at indsamle de forskellige lag, der udgør et objekt (for eksempel lagene, der indeholder en knap) i en diskret fil indlejret i hoved Photoshop-filen.

Smarte objekter er nemme at bruge og tilbyder flere fordele:

  • De opretter en "objektorienteret" Photoshop-fil, hvor gentagne elementer har et enkelt "symbol".
  • De kan udskrives som web-klare elementer uden behov for rodet lagskæringsteknikker.
  • De gør organisationen af ​​PSD lettere ved at reducere antallet af lag i masterfilen.


PEEVE # 4: "Designeren havde ikke plads til indhold i virkeligheden."

Vi bruger et CMS-system, der giver kunden fuld kontrol over indholdet. Designmockupen viser dog kun en tekstlinje til overskrifter og et stykke tekst til teasers.

Designeren forventer afbalancerede modulhøjder og -kolonner, men vi kan ikke forudse mængden af ​​kopi, der skal passe der.

Problem
Generering af græsk (eller "Lorem Ipsum") tekst er en tidskendt metode til at tilføre realistisk udseende, i mangel af webstedets endelige kopi. Men fordi det ikke er rigtigt indhold, kan det føre til, at designere laver fejlagtige konklusioner om sidens endelige design.

Løsning
Design comps er statiske, men real-websider skal være flydende og dynamiske. Designere bør anerkende dette og dække alle mulige scenarier. Dette er en af ​​hovedbegrænsningerne ved at oprette statiske comps: de er ikke den rigtige ting.

Jeg finder det nyttigt at definere højden på områder, der vil blive brugt til at vise elementer som overskrifter og teasere, snarere end at lade dem være åbne. Dette vil hjælpe dig med at finde ud af, hvor meget plads de vil tage op i det endelige design.


PEEVE # 5: "Designeren forventer mig at gætte hvilke stilarter han har brugt."

Designeren hænder dig sammen uden forklaring og forventer dig at finde ud af skrifttypefamilien, liniehøjder, farver, bredder, polstring, grænser og margener.

Problem
I modsætning til at skabe en mockup i Photoshop, er webudvikling generelt ikke gjort i en WYSIWYG (hvad du ser er, hvad du får) miljø. I stedet tildele udvikleren specifikke værdier for målinger, farver og typografi.

Løsning
Jeg ser denne sammenbrud i kommunikation i mange projekter; det fremhæver en af ​​de største forskelle mellem "design" og "udvikling." Selvom designeren har brugt en skabelon med et foruddefineret net, skal udvikleren ofte øje andre stilarter.

At have designeren oprette en stilguide som en leverbar, så er vigtig. Stilguiden vil fungere som en aftalt blueprint for designet og reducere forvirring.


Special Bonus Peeve: "Jeg behøver ingen designer, der fortæller mig, hvordan man programmerer!"

Designeren vil have gjort noget på en bestemt måde, uanset om bygherren mener, at det er tilrådeligt.

Problem
Designere, der fortæller udviklere, hvordan man kode, er lige så frustrerende som udviklere, der fortæller designere, hvordan man gør deres arbejde. Men linjen mellem designer og udvikler er ofte tynd, og nogle gange er begge roller indlejret i samme person.

Hvis du har klart defineret ansvar for et projekt, hører du en person, der ikke var involveret i beslutningsprocessen, andet guess, dine konklusioner er irriterende.

Teknikker, der synes at være fine for andre på overfladen, passer ikke altid til det programmeringsmiljø, du arbejder i. Forklaring af detaljerne i dine tekniske beslutninger tager værdifuld tid, når alt hvad du vil have, er for designeren at stole på at du har gjort kloge beslutninger .

Løsning
Lyt til, hvad designeren har at sige om tekniske alternativer; du har muligvis ikke tænkt på dem alle. Mere end en gang har jeg været i diskussioner med designere, der bragte løsninger til bordet, som jeg ikke vidste om, som første gang jeg så jQuery i aktion.

Husk at du og designeren (forhåbentlig) deler det samme mål om at skabe det bedste produkt muligt. Hvis du holder et åbent sind og en nivelleret tilgang, kan du ikke gå galt.


Skrevet udelukkende til WDD af Jason Cranford Teague . Han tilbyder specialiserede webrådgivningstjenester og træningssessioner. Du kan forudbestille din nye bog, Taler i stilarter: Grundlaget for CSS for webdesignere på Amazon.com.

Hvilke kæledyr har du med designere? Vi vil gerne vide mere om dette, vær venlig at dele dine kommentarer nedenfor.