Webudviklingsbegreber Alle webdesignere skal forstå

Der er meget at sige om skillelinjen mellem designere og udviklere. Tildelt der er mange designer / developer hybrider, der kan forstå begge sider af mønten, men de er få og langt imellem.

Kreative projekter trives korrekt kommunikation. Men det kan være svært, når designere og udviklere ikke er sikre på, hvordan man skal tale med hinanden. Jeg tror ikke, at designere skal vide, hvordan man skriver korrekt JavaScript, ej heller skal udviklerens master typografiudvælgelse. Men der er nogle grundlæggende emner som jeg tror går begge veje.

Følgende emner er mit eget personlige påtag vigtige webudvikling ideer, som alle designere bør forstå. Som designer / udvikler selv ved jeg, hvor forvirrende det kan være at studere begge områder. Men det er altid værd at lære at lære, fordi en klar forståelse forbedrer kommunikationen og gør en designer meget mere værdifuld til et kreativt team.

Frontend Code Adfærd

Webdesignere menes ofte at have frontend-færdigheder sammen med deres design talenter. Dette er et meget diskuteret emne, for det meste fordi der er Intet korrekt svar.

Designere bør gøre hvad de er komfortable med. Hvis det kun betyder visuelt designarbejde, så er det også det. Men en kort forståelse af frontend-teknologier kan gøre den samme designer mere intuitiv når der oprettes aktiver for udviklere.

Jeg tror, ​​at hver designer i det mindste skal forstå tre grundlæggende sprog for frontend udvikling (HTML, CSS og JS) sammen med, hvordan de bruges. For eksempel er de fleste dropdown-menuer afhængige af JavaScript, men der er også CSS-only-alternativer.

Når en designer laver en dropdown-menu, kan de tænke på kompleksitet med at implementere det via kode. En designer der forstår hvilke elementer der kræver JavaScript, kan være bedre forberedt på at forstå, hvad de beder udviklere om at bygge.

Dette er muligt uden at lære at skrive en enkelt kode kode.

CSS er lavet til stil hjemmesiden. Det er for det meste statisk bortset fra CSS animation og CSS skaber flertallet af billeder på en side. De fleste dynamiske funktioner er oprettet med JavaScript.

Hvis du kan forstå denne opdeling, vil den indånde en bevidst indsats i designarbejdet. Det vil også tvinge UX-bevægelsesdesignere til at overveje, hvor meget arbejde der går i at animere en grænseflade.

Responsive Techniques

Hver webdesigner bør i det mindste kende begrebet lydhør design. Dette tillader websites at Tilpas til forskellige skærmstørrelser, til hver af dem tilhører et andet layout. Enhedsdimensioner, når et nyt layout anvendes, er defineret ved breakpoints, tilføjet i (en af) CSS-filerne.

Breakpoints er specificeret af a visse pixelbredde (og / eller nogle gange højde), enten minimum eller maksimum, hvor layoutet tilpasser sig til den pågældende skærmstørrelse. Så et responsivt layout vil se anderledes ud på en 1080px skærm end på en 320px smartphone.

For at se, hvordan breakpoints arbejder på rigtige websteder, skal du læse Media Media-webstedet.

Dit job som designer er at overveje, hvordan hvert brudpunkt kan påvirke mockup. Du kan være pålagt at designe flere comps, hver passer ind i forskellige skærmdimensioner.

Når du først har forstået, at et CSS-breakpoint definerer betingelserne, når layoutet ændres, har du meget lettere tid til at levere disse aktiver til dev teamet.

Tænk modulære med design

Udviklere vil altid genbrugskode så meget som muligt, da denne tilgang gør udvikling mindre verbose og skærer ned filstørrelser - Det er faktisk en vigtig kodeoptimeringsteknik.

Modulært design beskriver en metode til at oprette websteder ud af “moduler” det kan være genanvendt over tid. Tænk knapper, form input, overskrift stilarter eller blokquotes med fancy stylings.

hvis du designelementer modulært, det bliver lettere for udviklere at kode layoutet med genanvendelige CSS klasser. Det er altid en god ide at tænke på, hvor du kan rimelig genbrug De samme farver, teksturer og sideelementer, men du skal være klog over det ikke at skade den samlede æstetik.

Det er endnu bedre, hvis du anmærke hvilke elementer du har kopieret på tværs af forskellige mockups, så udviklere kan markere disse dele af webstedet med gentag kode - gør udviklingen hurtigere og enklere.

Modulært design vedrører atomdesign, begge tilgange er snarere rettet mod udviklere. Imidlertid visualisering kan hjælpe dig med at forstå, hvordan koden fungerer, så hvis du kæmper for visualisere modulært design Tjek dette indlæg for at se et par eksempler.

Forstå Retina Images & SVG

Normalt er det designerens job at forberede billeder, fange de nødvendige fotos og design ikoner fra bunden. Det betyder, at designere er eneansvarlige for levere de visuelle aktiver at udviklere til sidst kodes ind i layoutet. Derfor er det vigtigt at forstå nethinden størrelser og til videregive retina-støttede aktiver til udviklerne sammen med den endelige mockup (s).

Jeg vil meget anbefale denne smashing magasin post, hvis du vil lære mere om retina design workflows. Retinize Det er en gratis samling af Photoshop-handlinger, som kan Opret automatisk retina-versioner af dine aktiver.

De fleste designere ved allerede at støtte @ 2x billeder, men de nyere iPhone 6+ enheder har @ 3x opløsninger. Men nogle projekter forstyrrer ikke @ 3x billedstørrelser, så tal med din projektleder inden du færdiggør eventuelle aktiver.

En sidste ting at overveje er fremskridt af SVG på nettet. Alle moderne browsere understøtter SVG, som er en vektorbaseret billedformat. Dette betyder SVG ikoner vil Automatisk skala uden noget kvalitets tab, så du behøver ikke nethinden til SVG-grafik.

Ikke alle kreative teams er villige til at gå med SVG'er til webdesign selv. De understøttes sikkert af browsere, men i nogle tilfælde kan de også være vanskelige at implementere. Derfor er kommunikation afgørende for et vellykket designer / developer forhold.

Diskuter fordele og ulemper ved at bruge vektorgrafik og bestem det, der virker bedst for hvert projekt. Ved blot at have en forståelse af disse funktioner kan du klart kommunikere med udviklere og endda hjælpe dem med at kode layoutet for nethinden.

Forstå tilgængelighed

Progressiv forbedring og yndefulde nedbrydning er to forskellige måder at håndtere det samme problem på: tilgængelighed. Ikke alle brugere vil være på enheder eller køre browsere, der understøtter 100% af en websteds dynamiske funktioner.

Disse brugere skal stadig få en erfaring, der virker, og dette skal håndteres med korrekt kodning. Nogle skærmlæsere kan ignorere alle JavaScript og CSS-kode, men hjemmesiden skal stadig fungere.

Jeg har for nylig lavet en postdækning progressiv forbedring i detaljer, da det er min foretrukne udviklingsmetode. Progressiv forbedring starter med meget grundlæggende funktioner, så arbejder op til mere “fremskreden” funktioner.

Graceful nedbrydning er modsatte tilgang hvor Alle hovedtræk er designet først, så beslutter udvikleren, hvordan man håndterer disse funktioner, hvis brugeren ikke understøtter JavaScript eller CSS.

Det er usandsynligt, at en designer vil blive bedt om at gøre mockups til nogen af ​​disse situationer. Men det er vigtigt, at designere forstår disse vilkår og hvad de mener, fordi de påvirker udviklingsprocessen. Dette gælder især for projekter, hvor tilgængelighed er en stor bekymring.

Ved afslutning

Der er nogle emner, jeg hoppede over, fordi jeg betragter dem som valgfri. Versionskontrol, fejlhåndtering og JavaScript-animationer er et par mere komplekse emner, som designere måske ønsker at dykke ind i.

Men sandt nok vil punkterne i dette indlæg mere end hjælpe designere med at forstå kravene i et udviklingshold. Ved bare at skumme overfladen af ​​webudvikling vil du få indsigt det vil hjælpe dig med at kommunikere ideer og sympatisere med problemer der opstår under produktionen.

Hvis du leder efter mere relateret indhold, skal du kigge på disse indlæg:

• Sådan kommunikerer du effektivt med udviklere (Smashingmagazine.com)
• Hjælp designere og udviklere Lær at forstå hinanden (Uie.com)
• At lære at kode giver dig fordele som en UX-designer (Jessicaivins.net)