Koding for ikke-koderen: Designere kan tenke som utviklere

Det har vært dette uskrevne skillet mellom designere og utviklere så lenge vi har laget nettsteder. Mennesker som får ting til å se bra ut mot mennesker som får det til å fungere. De dagene er over.

Hver designer trenger å lære hvordan utvikling fungerer i det digitale landskapet. Og enhver utvikler bør forstå grunnleggende designteorier. Her hjelper vi designere med å forstå språket til utviklere, en viktig ferdighet på dagens marked. (Som en ekstra bonus blir alle designeksemplene opprettet ved hjelp av CSS-rammer.)

Utforsk Envato Elements

Brukergrensesnitt og design

Ryggraden bak hvert nettsted er en streng på 1s og 0s. Det er ikke så spennende når det kommer til design. Men det faktiske grensesnittet og forbindelsen med en bruker er.

Hver ørsmå detalj inkluderer elementer av design som noen skal angripe fra knapper til navigasjonselementer til skjemaer til å se på en video eller kjøpe et par sko. Målet er å lage noe som ser fint ut, engasjerende og er enkelt å bruke. Det er der design og utvikling møtes.

Ord du trenger å vite:

• Ajax: Å bruke asynkron JavaScript og XML skaper en interaktiv opplevelse der ny informasjon kan befolkes på brukerens ende av et nettsted uten oppdatering. Et vanlig eksempel er kontinuerlig lasting av innlegg når en bruker blar gjennom en Twitter-side.
• API: Ved å gi spesifikasjoner for rutiner, data, objektklasser og variabler, og Application Programming Interface lar forskjellige nettsteder eller programvare "snakke" med hverandre og samarbeide. Tenk på det som et virtuelt sett med byggesteiner.
• CSS: Cascading Style Sheets er ryggraden i språket som brukes til å style nettsteder og vise HTML-elementer visuelt.
• Mediesøk: Et CSS-element som lager spesifikke regler for visse enheter når det kommer til hvordan grafikk vil gjengis. (Det er magien som gjør at det samme bildet blir gjengitt med ett aspekt rasjonering og beskjæring på et stasjonært nettsted og en annen måte på en mobil enhet.)
• Responsive web design (RWD): En webdesignteknikk som brukte et fleksibelt rutenett og bilder, media og tekst slik at et enkelt nettsted tilpasser seg flere enhetsstørrelser. (Dette er uten tvil en av de viktigste faktorene i nettdesign akkurat nå.)
• Brukergrensesnitt: Brukergrensesnittet er alt brukeren ser og samhandler med i et design. Dette kan være alt fra hvordan de bruker nettstedet og enheten til hvert enkelt element på skjermen.
• UX: Brukeropplevelsen er det hver enkelt bruker tar bort fra interaksjoner med nettstedet. Dette har en tendens til å bli uttrykt som en emosjonell forbindelse og forholder seg til opplevd generell verdi.

Tenk på spørsmål

"Hver av disse samhandlingene skal føles som en samtale mellom to personer som stoler på hverandre og fortjener hverandres tillit."

Hver del av et nettsted ber brukerne om å engasjere seg eller fortsette å engasjere seg med en annen del av nettstedet. Enten du spiller et spill, leser en artikkel eller kjøper en gave, fører hver handling deg til noe annet. Men hvordan kommer du dit?

Det er her det å stille spørsmål kommer inn. Hvis du stiller spørsmål i designprosessen, kan du lage koblinger mellom handlinger og skape et mer sømløst design med en logisk flyt.

“Nicely Said” av Nicole Fenton og Kate Kiefer Lee er en håndbok for å skrive for nettet. Det gir også et rammeverk med spørsmål som fungerer for alle deler av webdesignopplevelsen.

Spørsmål å stille underveis (pluss mange flere fra bokens ressursveiledning):

• Hvordan bruker folk dette innholdet eller funksjonen nå?
• Hvem snakker her?
• Hvilke problemer prøver vi å løse?
• Hvordan tjener dette innholdet våre mål? Hva er hensikten?
• Hva er funksjonene på nettstedet? Hvordan oppfører det seg?
• Hva er det endelige formatet?
• Er det tekniske begrensninger eller karaktergrenser?

Fenton skrev enda mer om andre spørsmål som nettsteder "stiller" hele tiden. Vi snakker om personopplysningene som hjelper brukerne å forholde seg til nettstedene de samhandler med. "Hver av disse samhandlingene skal føles som en samtale mellom to personer som stoler på hverandre og fortjener hverandres tillit, " skriver hun.

Noen av disse spørsmålene inkluderer:

• Hvordan kan vi hjelpe deg?
• Hvor er du akkurat nå?
• Er du villig til å betale for dette?

Svaret på disse spørsmålene fastslår arten av forholdet mellom brukergrensesnitt og bruker og påvirker designen i stor grad. Tenk på det på denne måten: Hvis en bruker ikke er villig til å fortelle deg om deres beliggenhet, vil designen og brukergrensesnittet ikke være effektivt hvis det er basert på geolokalisering; designen skal henvende seg til brukeren på en annen måte.

Tenk på enkelhet og retning

Når nettsteder kommer sammen, har en tendens til at alt faller et sted på et kart. Du kan plotte kurset fra ett brukerinteraksjon til det neste. (Hva er bra for visuelle tenkere.) Så tenk på design / utviklingsprosessen når det gjelder A vs. B: Hva er neste trinn, A eller B?

Hvert element skal ha et enkelt formål som er enkelt å definere og beskrive. (Klikk for å spille; klikk for å bla.) Hvis du ikke kan gjøre det forståelig i en setning, kan det være lurt å revurdere designstrategien.

Lær kode

Nå som du tenker på ting i metodikken til en utvikler, må du gå ut og utvikle noen kodingsevner. Dette er ikke til å si at du trenger å være en masterkoder, men du bør forstå det nok til å gjøre enkle endringer og snakke med andre designere og utviklere sammenhengende. (Pluss at du virkelig kan lage noen kule effekter, for eksempel de ovenfor.)

Personlig begynte jeg med litt HTML med formål. Jeg lagde en liste over ting jeg ville vite hvordan jeg skulle gjøre og lærte dem fra innsiden og ut (dvs. hvordan du kan endre en farge på et nettstedselement ved å bruke en HEX-verdi i CSS i stedet for å klikke en boks på en fargevelger.) Der er mange verktøy tilgjengelig fra online klasser og tutorials til personlig trening i ditt område. Alt du trenger å gjøre er å registrere deg og komme i gang.

Fire gode kodeutviklende ressurser:

1. Tuts +
2. CodeAcademy
3. Kodeskole
4. Khan Academy

Konklusjon

Å lære nettutvikling er ikke bare å lære om rammer og kode. Det handler om tankeprosessen. Designere kan tenke som utviklere på vei til å lage et vellykket nettsted. Du må bare være åpen for ideen.

Å forstå at noen av tankeprosessene er like - visuell tenking og veiereløsninger og utfall - er en del av ethvert design- eller utviklingsprosjekt. Vi er alle designere / utviklere i dagens marked.

Bildekilde: Marjan Krebelj.