Ny til webdesign? Start her.

Velkommen til Webdesigntuts +, en online ressurs dedikert til å undervise og oppmuntre webdesignere med alle ferdighetsnivåer og erfaring. Uansett om dette er første gangen du har funnet deg selv dyppet inn i innholdet vårt tidligere, eller du er en vanlig besøkende, vil dette innlegget hjelpe deg med å finne det beste av innholdet vårt.


innhold

Her er en rask oversikt over hva du finner på denne siden ...

  • Designe ditt første nettsted
  • Koding av ditt første nettsted
  • Verktøy av handel
  • Responsivt webdesign
  • Theming CMSs
  • Forstå vår bransje
  • Og resten…

Designe ditt første nettsted

Å ta tak i utformingen av et nettsted handler om å forstå hva du sikter på å oppnå og hvordan du kan løse problemer gjennom design. I de første stadiene av prosessen er det verdt å tenke på kreativitet og vi har en hel økt veiledning for å hjelpe deg med det:


  • La oss snakke om kreativitet
  • Creative Block 101

Utover kreativitet kommer den faktiske utforme. Hvordan tar noen ideer og kommuniserer dem med design? Hvordan skal en nettside bli lagt ut? Hvordan påvirker fargen et design? Og hvordan skal vi ta hensyn til brukerne våre?


  • En introduksjon til farge teori for webdesignere
  • Visuell retning i webdesign
  • Sørg for at brukere husker deg, fortell en historie
  • Gestaltprinsippet: Designteori for webdesignere
  • Forstå Z-Layout i webdesign

Og hvis du er en utvikler, kommer du til webdesign fra en kodende bakgrunn? Vi har en hel rekke designteori artikler (hver med en oppgave på slutten) for å hjelpe deg, pluss noen svært nyttige arbeidsflytopplæringer:


  • Designskole for utviklere
  • En nybegynners guide til Wireframing

Koding av ditt første nettsted

Planlegging, sketching, wireframing og mocking-up visuals er alle viktige aspekter ved webdesign, men hva med å realisere disse designene for nettleseren? Å få et håndtak på webstandarder (HTML, CSS og JavaScript) er viktig hvis du er interessert i verden med frontend-utvikling. La oss begynne med det grunnleggende ...


  • Den beste måten å lære HTML
  • Den beste måten å lære CSS

Med en grunnleggende forståelse av HTML og CSS kan du nå oversette dine statiske visualer til levende, pustende websider. Følg Adi Purdila når han beveger seg fra Photoshop til kodeditoren, bygger sin Adaptive Blog Theme i denne utvidede screencast serien.


  • Adaptive Blog Theme: Fra Photoshop til WordPress

Verktøy av handel

Hvert håndverkeren trenger gode verktøy, og webdesign er ikke annerledes! Faktisk, med en enkel tekstredigerer og en nettleser har du nok til å komme i gang, men det er mange andre programmer og verktøy som kan hjelpe deg med andre oppgaver..

Photoshop

Arbeidshest av mange et webdesignstudio i mange år. Dens rolle kan endres i disse dager, men det er ikke nektet å være tilstede i designarenaen.


  • Photoshop CS6 for webdesignere
  • Utforming av en "Kommer snart" side i Photoshop
  • Rask Tips: Fremskynde arbeidsflyten din med Photoshop-handlinger

Fyrverkeri

Adobe Fireworks-utviklingen avsluttes, men gjør plass for noen nye barn i blokken, men det har fortsatt en lidenskapelig følge og er et svært kompetent verktøy for webdesign..


  • Fyrverkeri i den virkelige verden

Emmet

Emmet er et av de magiske verktøyene som, når du begynner å bruke det, vil du alltid lure på hvordan du klarte deg uten. Ta en titt!


  • Bygg Bootstrap i minutter ved hjelp av Emmet

reflow

De nye barna i blokken vi snakket om med hensyn til fyrverkeri? Det ville være Reflow og den andre Adobe Edge-pakken med verktøy. Fremtiden er her, damer og herrer.


  • Vi presenterer Adobe's Responsive Layout Editor: Edge Reflow
  • Din arbeidsflyt, med Adobe Edge Reflow

Wireframing Tools

Det er mange wireframing verktøy å velge mellom, men Omnigraffle er absolutt en av de mest populære. Ta en titt på vår nybegynnerguide.

  • En nybegynners guide til Wireframing i Omnigraffle

Responsivt webdesign

Responsive webdesign har uten tvil vært den mest dramatiske bevegelsen for å treffe web siden noen foreslo at vi slutter å bruke HTML-tabeller for lay out-formål. For å forstå mer om hva det er, ta en titt på dette raske intervjuet med grunnleggeren Ethan Marcotte.


  • En ti minutters chatte med Ethan Marcotte

Å bli mer involvert, finner du en rekke opplæringsprogrammer og artikler som undersøker de mange aspektene av RWD.


  • Designe for en Responsive Web
  • Et grunnleggende responsivt grid (Plus Handy CSS3 Media Query Reporter)
  • Livet utover 960px: Design for store skjermer
  • En enkel, responsiv, mobil første navigasjon

Theming CMSs

Webdesignere har brukt Content Management Systems som en ekte verdensløsning i mange år. Hvorfor gjenoppfinne hjulet når CMS som WordPress gjør nettsider struktur og ledelse så godt?

I en fortsettelse av sesjonen vist tidligere, tar Adi Purdila sin statiske nettside og konverterer den til et WordPress-tema. Følg ham under disse svært grundige screencasts, og du vil snart kunne gjøre det samme. Alternativt, følg meg når jeg går gjennom en annen WordPress-bygge, denne gangen basert på det populære Skeleton-rammeverket.


  • Adaptive Blog Theme: Fra Photoshop til WordPress
  • Bygg en responsiv layout med skjelett

WordPress er ikke det eneste CMS der ute, men. Vi legger alltid til CMS-veiledningene våre, så her er et eksempel på hva annet er der ute:


  • Opprette et tema for anker CMS
  • Bygg en Ghost Theme From Scratch
  • Tumblr Theming 101

Forstå vår bransje

Å være i stand til å designe og bygge et nettsted er en liten del av virksomheten. Hvis du skal lykkes med å tjene penger som webdesigner, er det viktig at du forstår bransjen.

Å være i stand til å jobbe med et lag og dine kunder er avgjørende, så ta en titt på disse artiklene som vil hjelpe deg på din måte:

  • Sparkbox Responsive Design Prosess
  • Skrive den perfekte webdesignkontrakten

Å lære fra jevnaldrende er en av de beste måtene å komme videre i webdesign. På Webdesigntuts + nyter vi kritikk både våre lesers arbeid og arbeidet til større industrispillere. Ta en titt på vår Hvordan de gjorde det serien, pluss vår samling av verkstedsposter. Bli med i diskusjonen!


  • Hvordan de gjorde det: gjenoppbygging av 8 ansikter
  • Webdesign Workshops

Og resten…

Det er mye mer å dykke inn på Webdesigntuts +, kanskje du er interessert i tilgjengelighet, rammer som Bootstrap, Foundation, Pure og Jeet, SEO, Typografi, HTML Email eller UX pluss mer enn.

Og, som med alle andre aspekter av Tuts +, vokser innholdet vårt kontinuerlig, så hold deg oppdatert med oss ​​på våre ulike sosiale kanaler for å sikre at du aldri savner et triks:

  • Webdesigntutsplus på Facebook
  • @wdtuts på Twitter
  • Webdesigntuts + på Google+
  • webdesigntutsplus på Youtube
  • Envato på Dribbble

Takk for at du besøkte Webdesigntuts+!