Massiv kompilering av designerverktøy
Webdesignere har et vell av verktøy tilgjengelig for dem, for å gjøre alt fra å organisere sine tanker om et bestemt design for å feilsøke den endelige utformingen.
Men med så mange verktøy der ute, hvordan bestemmer du noen gang hvilke som er veldig nyttige og hvilke som bare skal kaste bort tiden din?
Vi har samlet en massiv liste over noen av de beste og mest nyttige verktøyene der ute for webdesignere .
Med hensikt utelatt listen er vanlige verktøy som de fleste designere sannsynligvis allerede bruker (som Dreamweaver eller Panic's Coda, Photoshop eller GIMP, og lignende vanlige programmer som ganske mye hver designer allerede har i verktøykassen).
Dette er verktøy som vil spare deg tid, gjøre deg til en mer effektiv designer, forenkle eller fremskynde designprosessen, eller på annen måte gjøre livet ditt lettere.
Samling av offlineverktøy
De fleste roundups av nyttige webdesignverktøy fokuserer bare på elektroniske verktøy.
Men det er et par svært nyttige verktøy du kan bruke til å åpne opp dine valg når det gjelder design. Disse tingene kan gjøre enkelte oppgaver lettere, inkludert å jobbe med ubesluttsomme kunder.
Grafikk Tabletter
Grafikk-tabletter (også noen ganger referert til som tegnetabeller, grafikkputer eller digitaliseringsbrett) er et utrolig nyttig verktøy i en webdesigners arsenal. Mens de fleste designere kan tegne ganske dyktig med en mus, gjør en nettbrett det mye enklere og raskere.
De fleste tabletter består av to grunnleggende deler: selve tabletten og pennen (eller pennen). Mange kommer også med en puck (som fungerer på samme måte som en mus, men på selve tabletten i stedet for en musematte eller pulten din). Hovedspørsmålet for tabletten er størrelse, mens pennens hovedhensyn er trykkfølsomhet.
Tablettene selv er tilgjengelige i størrelser fra ca. 4 "x 5" til 19 "x 13". Selvfølgelig, jo større tablett, desto dyrere blir det. For det meste kan webdesignere komme seg bort med tabletter i den mindre enden av spekteret, med mindre de har tenkt å gjøre mye illustrasjonsarbeid (og selv da er det helt mulig å få kvalitetsresultat fra en mellomstorle tablett).
Og mindre tabletter er mer bærbare, noe som gjør dem praktiske for designere som ikke alltid vil være bundet til sitt skrivebord.
Pennene er trykkfølsomme for å gi en mer realistisk opplevelse . Vanlige følsomheter varierer fra 256 nivåer av trykk opp til 2.048 nivåer. Jo høyere følsomhetsnivået, desto mer føles det som om du faktisk bruker en penn og papir.
Populære grafikkabletter
Wacom er trolig den mest populære tablettprodusenten der ute. De har fire forskjellige produktlinjer: Bamboo (som inkluderer deres Bamboo Craft og Bamboo Fun produkter), rettet mot forbrukere og hobbyister; Graphire, deres Bluetooth-nettbrett; Intuos, deres mellomstore linje for kreative fagfolk; og Cintiq, deres high-end line som inkorporerer en skjerm i tabletten for en "penn-på-skjermen" opplevelse (den ene har en 21-tommers skjerm).
Aiptek lager en linje med billige tabletter som starter med bare US $ 50. De tilbyr en 12,1-tommers USB-nettbrett for mindre enn US $ 130 (sammenlignet med US $ 469 for en Wacom tablet av tilsvarende størrelse). Aipteks mest interessante tilbud er imidlertid deres My Note Premium (US $ 170) som lar deg tegne på et stykke papir på toppen av tavlen med en ekte penn og registrerer alt du gjør. Det er nok minne for opptil 100 skriftlige sider, og det kommer med et SD-kortspor for å utvide kapasiteten. Og hvis du vil bruke det bare for å ta notater på et møte, kan det gå tom for 4 AAA-batterier, noe som betyr at du ikke trenger å ta med den bærbare datamaskinen sammen med deg.
UC-Logic er den andre store grafikkbrettproducenten. Deres produkter faller i mellomprisområdet for tabletter, med en 9 "x12" tablett (PF1209-Pro) som kommer inn på rundt US $ 250. De har tilgjengelige tabletter som starter med bare US $ 40.
Mood boards
Mood boards (også kalt inspirasjon boards) er et flott verktøy for designere som jobber med kunder som kanskje ikke har en klar ide om hva de vil.
Mood boards ofte tar form av en collage som inkluderer design elementer for prosjektet. Eksempler på elementer som er inkludert, kan være typografiprøver, fargeskjemaer, spesifikke grafiske eksempler eller generelle "humør" -elementer som reflekterer designers visjon for inntrykket nettstedet skal gi besøkende.
Mood boards brukes ofte i interiørdesign feltet for å vise kunder ideer for å pusse opp et rom eller et helt hus. De er også brukt i moteindustrien for å tjene som inspirasjon og retning for en linje eller en sesong. Men de er like verdifulle for grafiske og webdesignere.
Avhengig av hvilken type klient du jobber med, kan du lage en løs collage med prøver overlappende på en organisk måte . Hvis klienten din befinner seg i et kreativt felt, eller er kjent med den kreative prosessen, kan denne typen humørbrett fungere ganske bra.
Hvis kunden din derimot er vant til et mer corporate eller formell miljø, er det sannsynligvis mer egnet å skape et mer organisert humørbrett.
Bruk overskrifter for å skille fargeskjemaet, spesifikke designelementer, typografi og andre deler av humøret ditt for å gi hele saken litt struktur.
Hvis du har flere ideer til veibeskrivelser der et prosjekt kan gå, kan det være en fin måte å få klient tilbakemelding og viderefinere dine egne ideer.
Å lage to eller tre forskjellige eksempler for å vise en klient kan være verdifull når du kommer videre fra klienten din uten å bruke timer eller dager på en faktisk sideoppretting bare for å bli fortalt at det er ingenting som det de leter etter.
Og det er egentlig den viktigste fordelen med å bruke humørbrett i designprosessen. Et humørbrett tar vanligvis mye mindre tid å skape enn et nettstedsmock-up .
Ved hjelp av humørbrett for å få ytterligere tilbakemelding fra en ubesluttsom eller usikker klient før du forplikter deg til et design som bare blir avvist, blir alle lykkeligere.
Ressurser for å lage dine egne humørbrett
Vi publiserte en artikkel på Hvorfor Mood Boards Matter på slutten av fjoråret. Artikkelen dekker grunnleggende om å skape humørbrett og hvorfor du vil bruke dem. Det er et flott utgangspunkt.
Fra dusjen har en videoopplæring kalt Opprette et effektivt humørstyring . Det er rundt syv minutter lang og dekker grunnleggende om å skape et digitalt humørbord for prosjekter.
Flickr har en Inspirasjonskort basseng som samler humør og inspirasjonstavler bilder fra på tvers av flere designdisipliner. Det er et godt sted å finne litt inspirasjon, eller bare se på eksempler på hvordan andre nærmer seg deres humørbrett.
Samling av Online Verktøy
Online webdesign verktøy er et dime et dusin. Sortering gjennom dem for å finne de som virkelig skiller seg ut, kan virke som å ta mer tid enn du kanskje ville forvente å spare ved å bruke dem.
Men under har vi funnet de beste verktøyene for typografi, CSS, AJAX og Javascript, fargevalg og verktøy for å gjøre det enklere å lage individuelle sideelementer.
Igjen, disse er noen av de beste verktøyene som er tilgjengelige for det de gjør, så du trenger ikke å kaste bort en masse tidstesting av dusinvis av forskjellige verktøy.
Typografiverktøy
Det finnes en rekke elektroniske verktøy for å eksperimentere med typografien på nettstedet ditt. Noen lar deg sammenligne forskjellige skrifttyper side ved side. Noen lar deg bare prøve en stil om gangen. Og fremdeles viser andre deg forskjellige anbefalte skriftstabler.
Andre nyttige verktøy for webtypografi inkluderer apps for å konvertere pikselstørrelser til em-enheter og en rekke Lorem Ipsum og andre dummy-tekstgeneratorer. Alt i alt er det typografiverktøy der ute for omtrent alle mulige behov en webdesigner måtte ha.
Typetester
Typetester lar deg sammenligne opptil tre fonter ved siden av .
Du kan velge hvilken som helst skrift fra din egen datamaskin eller bruke skrifttyper fra deres meny med vanlige systemfonter og websikker skrift. Det lar deg også endre farge, ledende, sporing, størrelse og andre stilalternativer.
Det er et flott verktøy når du prøver å bestemme hvilke fonter som skal brukes til forskjellige elementer, eller til og med for å lage dine egne skrifttypestabler (siden du kan sammenligne tallrike fonter side om side).
CSS Type Set
CSS Type Set lar deg lime inn tekst som du vil endre i en boks, justere skyvekontrollene og velge andre formateringsalternativer, og kopier deretter den genererte CSS.
Det er en rask og enkel måte å formatere hvilken som helst tekst du trenger, fra avsnitt til hodekoder.
Valg inkluderer tekstfarge, ledende, sporing, baseline shift, tekstdekorasjoner, justering og mer.
Bedre CSS Font Stacks
Selv om det ikke er et tradisjonelt verktøy, gir denne artikkelen i seg selv en rekke alternativer til standard skriftstabler som vanligvis brukes i CSS.
I tillegg til å tilby retningslinjer for å lage dine egne skriftstabler, gir denne artikkelen også et bredt utvalg av utvalgsstabler du kan bruke . En utmerket ressurs når du føler deg litt stumped over typografien.
HTML-Ipsum
De fleste standard Lorem Ipsum generatorer på nettet gir deg en blokk med tekst og ingenting mer. Og det er flott hvis du bare prøver å fylle opp litt plass.
Men HTML-Ipsum gir deg tekst som allerede er merket med grunnleggende HTML-koder (avsnitt, hode, uordnede lister, etc.), slik at du kan se hvordan alle de forskjellige elementene samhandler med hverandre. Det er en stor timesaver.
PXtoEm.com
PXtoEM.com gjør akkurat hva det står: det konverterer piksler i størrelser i små og mellomstore fonter .
Alternativene det gir deg, er det som gjør det til et veldig imponerende og fleksibelt verktøy.
Du kan velge grunnlegemets skrifttypestørrelse og få konverteringer basert på nettleserens standard skriftstørrelse (så hvis du for eksempel angir basenhetens prosentpoeng til 62,5% slik at en 10 pixelstørrelse er lik 1em, kan du velge det som standardstørrelsen din).
Typechart
Typeskjema lar deg bla gjennom en rekke websikre skrifter og se hvordan de ser på både Windows og Mac-systemer .
Du finner fonter basert på størrelse, enten de er serif eller sans-serif eller vekt. Den inkluderer bare websikker skrift, slik at alternativene som tilbys er begrenset. Men for grunnleggende typografi er det et flott verktøy som kan gi rikelig med inspirasjon.
Og du kan kopiere og lime inn CSS for hver stil uten å forlate siden.
Flipping Typisk
Flipping Typical lar deg vise de vanlige skriftene du har på datamaskinen din i et nettformat for å gjøre det enklere å velge riktig skrift for ditt nåværende prosjekt.
Dette er et flott verktøy når du ikke er interessert i bare å bruke standard web-safe fonter og ønsker å se flere alternativer.
Det er spesielt nyttig hvis du ikke vil wade gjennom noen få hundre fonter installert på datamaskinen din og bare vil se de mer populære.
CSS verktøy
CSS er nesten like viktig i webdesign som HTML. Og det er hundrevis av verktøy der ute for å gjøre CSS renere, slankere, mer effektiv, og generelt bedre som sparer deg tid og krefter som kreves for å manuelt forbedre stilarkene dine.
Komprimering av stilarkene dine, som kan bidra til å øke belastningstiden for nettstedene dine, forenkles ved hjelp av et automatisk onlineverktøy. Det er verktøy tilgjengelig for å eliminere dupliserte erklæringer også.
Cheat ark holder de grunnleggende elementene i CSS på fingertuppene for når kaffen ikke har helt sparket inn om morgenen, og du har det vanskelig å huske hvilken rekkefølge din shorthand markup skal være i.
Mens de fleste av disse verktøyene gjør en god jobb med å rydde opp CSS, må du alltid ha en sikkerhetskopi av originalen og teste det endelige produktet som er generert. Noen ganger vil en rengjøringsmaskin eller kompressor fjerne noe som var nødvendig for å bryte nettstedet ditt.
CSS SuperScrub
CSS SuperScrub har som mål å redusere kompleksiteten og størrelsen på stilarkene dine betydelig .
Det blir kvitt overflødige samtaler, fjerner unødvendig innhold, og grupperer sammen gjenværende elementer for å gjøre redigering lettere senere.
Det er noen alternativer, inkludert en for å fjerne all hvite plass i stilarket, eller for å sette inn en ny linje før du åpner båndene.
Kode Beautifier
Kode Beautifier optimaliserer og rydder opp CSS-filene dine .
Den tilbyr et stort antall alternativer for formatering av teksten, inkludert komprimering av farger, sortering av egenskaper, omregning av alle seleksjonene til små bokstaver, omregning av egenskapene til enten store eller små bokstaver, og valg av komprimeringsnivå du vil bruke.
Du kan enten kopiere og lime inn CSS i appen eller oppgi en nettadresse for CSS-filen din.
CSS-stasjon
CSS Drive er en grunnleggende CSS kompressor .
Du kan angi hvordan komprimert du vil at CSS skal være (lys, normal eller super kompakt), og hvordan du vil at den skal håndtere kommentarer (om du skal stripe dem ut).
Det er også en avansert modus som gir deg mange flere alternativer, inkludert fjerning av mellomrom rundt bestemte tegn, fjerning av faner, fjerning av nye linjer og mer.
CSS Redundancy Checker
Noen ganger i prosessen med å designe et nettsted, kan du sette opp CSS-seleksorer som ikke ender med å gjøre det til din endelige oppgradering.
Disse valgene gjør ingenting mer enn å gjøre stilarkene dine større og vanskeligere å redigere senere.
CSS Redundancy Checker går gjennom stilarket ditt og hver av HTML-sidene dine for å se hvilke selektorer som ikke blir brukt, og fjerner dem deretter .
Det er et flott verktøy å bruke hvis du tror at du kanskje har unødvendige selektorer i stilarkene dine.
CSS Property Index
CSS Property Index viser alle CSS-egenskapene alfabetisk .
Ved å klikke på noen av de medfølgende egenskapene får du en definisjon og informasjon om standardverdien, tillatte verdier, og om den arver fra en overordnet eiendom.
CSS Shorthand Guide
Bruke kortfattede CSS-egenskaper gjør CSS-filene mindre enn bruk av longhand-egenskaper .
Men husk hvilken rekkefølge alle de forskjellige elementene går inn i for alle de forskjellige egenskapene, kan være hodepine, spesielt for de du kanskje ikke bruker i hvert enkelt design du gjør.
Den inneholder også informasjon om standardverdier, så hvis du velger å legge ut en eiendom, vet du hva det vil anta verdien å være.
Fargeværktøy
Å velge riktige farger for ditt nettsteddesign kan være en av de viktigste beslutningene du gjør i hele designprosessen.
Noen ganger kommer vi inn i et design med et forhåndsdefinert fargevalg (for eksempel når en klient allerede har etablert merkevarefarger) eller umiddelbart vet hvilke farger vi vil bruke. Andre ganger kan vi være fri til å lage vår egen palett for designen.
Hvis du oppretter et fargeskjema fra begynnelsen, kan fargepalettgeneratorer og gallerier være en stor hjelp.
Hvis du allerede har et fargevalg, er det andre hensyn å ta hensyn til, for eksempel tilgjengelighet og hvilke farger som skal brukes på hvilke deler av nettstedet.
Men det er verktøy der ute for å hjelpe med disse beslutningene også. Nedenfor er noen av de beste verktøyene som er tilgjengelige for å håndtere fargeskjemaer.
Colorblind Web Page Filter
Tatt i betraktning at et sted mellom 7 og 10% av den mannlige befolkningen har en viss grad av fargeblindhet (ifølge Wikipedia ), og sørg for at nettstedene dine fortsatt er tilgjengelige for den befolkningen, er ikke en dårlig ide.
Dette verktøyet viser hvordan designene dine vil vises til mennesker med en rekke forskjellige fargeblindhetsforstyrrelser. Du kan se resultatene for hele nettstedet eller ekskludere bilder fra resultatet.
De gir også en link til et fargeblind-sikkert fargevalgverktøy.
Finn matchende farger for ditt nettsted
Dette fargepalettverktøyet finner farger som koordinerer med hvilken som helst farge du velger .
Du kan enten velge en farge fra de forhåndsdefinerte alternativene, eller angi en hvilken som helst heks eller RGB-fargeverdi for å få koordinerende paletter basert på komplementære, splitte komplementære, triade, tetrade, analoge eller monotone fargevalg.
Fargene som tilbys er alle lik i intensitet, men det betyr at dette egentlig bare er et utgangspunkt for å lage fargepaletter for designene dine.
Color Palette Generator
Bilder er flotte steder å se etter designinspirasjon. Dette verktøyet kan opprette en fargepalett fra et hvilket som helst bilde du velger (bare skriv inn nettadressens URL).
Det gir både kjedelige og levende farger, basert på bildet du gir.
Å kunne bruke et bilde på nettet gjør virkelig dette verktøyet verdifullt, da det sparer tiden for å laste ned et bilde og deretter gjenopplates til et nettsted som dette for å generere et fargevalg (eller last ned og deretter åpne i et grafikkprogram for å opprette manuelt en fargepalett).
Kuler
Adobes Kuler fargepalettgalleri er en av de bedre fargepalettgalleriene der ute.
Du kan bla gjennom eller søke mer enn 10.000 fargepaletter sendt av Kuler-brukere, og last ned eller lagre favorittene dine for senere referanse.
Kuler inneholder også et virkelig kraftig verktøy for opprettelse av paletter som lar deg velge farger med glidebrytere eller basert på HSV-, RGB-, CMYK-, LAB- eller heksefargeverdier.
Hvis du angir hvilken som helst farge som basisfarge, endrer du de omliggende fargene for å utfylle.
COLOURlovers
COLOURlovers er et annet flott fargeskjema galleri .
Du kan søke mer enn 800.000 fargevalg (basert på 20 ordninger per side og 43.200 sider med ordninger). I tillegg til paletter kan du også søke i individuelle farger og mønstre basert på paletter.
En av COLOURlovers mest nyttige funksjoner, selv om det er mønsterskapingsverktøyet, som gjør at du lager dine egne mønstre basert på enten et forhåndsdefinert fargevalg eller en du lager i fly.
Bare vær sikker på at du kontakter opphavsretten til mønsteret hvis du vil bruke en til kommersielt arbeid.
100 tilfeldige farger 2.0
Hvis du egentlig bare ikke har en ide om hvor du skal begynne på fargeskjemaet for en av designene dine, kan 100 tilfeldige farger 2,0 være det rette verktøyet.
Det gjør akkurat hva navnet sier: presenterer deg med 100 tilfeldige farger, inkludert deres hex-verdier .
Og hvis du ikke finner noe i de første 100, kan du bare treffe oppdateringen og få et helt nytt sett!
Individuelle elementverktøy
Det er mange generatorer der ute som gjør det raskt og enkelt å lage knapper, bakgrunner, former og andre designelementer for nettstedene dine.
Noen av dem er bare gimmicky, men andre er en stor hjelp hvis du bare vil raskt lage noe som en Web 2.0-ish-knapp eller en grunnleggende stripet bakgrunn.
Formbyggingsverktøy kan også være svært nyttig, spesielt hvis du vil at kundene dine skal kunne gjøre noe av sitt eget administrasjonsarbeid på sine skjemaer.
Jeg vet om minst et par designere som bruker disse verktøyene, slik at de ikke trenger å bygge et tilpasset, forenklet grensesnitt for tilgang til skjema databasen eller for å redigere skjemaer for sine kunder. De er en flott tidsbesparende, spesielt for å bygge mer kompliserte former.
Wufoo
Wufoo er en HTML form builder som tilbyr mer enn 80 skjema maler og fargevalg, samtidig som du gir full kontroll til å lage egendefinerte skjemaer for dine kunder.
Maler gjør det raskere og enklere å lage standard webskjemaer (som registreringssider eller kontaktskjemaer).
Innleverte skjemaer samles automatisk i en database som gjør det enkelt for kundene dine å skrive ut, sende e-post til individuelle oppføringer, filtrere, søke og utføre andre avanserte funksjoner uten at du må bygge et tilpasset grensesnitt.
Du kan til og med bruke Wufoo til å lage online bestillingsskjemaer og integrere med Authorize.net, PayPal eller Google Checkout.
BgPatterns
BgPatterns lar deg lage flislagt mønstre ved hjelp av et bredt utvalg av forskjellige gjentatte elementer.
Du kan velge bakgrunnsfarge, lerretstekstur og vinkelen på mønsteret. Du kan bruke bakgrunnene du lager til BgPatterns nettsted for å forhåndsvise, og deretter laste ned bildet når du har fullført det.
Du kan også bla gjennom mønstre laget av andre. Det er den raskeste og enkleste måten å lage enkle, flislagte bakgrunner.
Stripe Generator 2.0
Å lage gjentagende striper for et nettsted er tidkrevende.
Visst, du kan lage maler for vanlige striper du kan bruke, men hva hvis du vil ha en stribe stripe for ett prosjekt, en bred stripe for en annen, og en i en vinkel for en annen? Snart ser disse malene ikke ut til å kutte det lenger.
Stripe Generator 2.0 tilbyr striper i forskjellige vinkler , i omtrent hvilken bredde du velger, med eller uten skygger og gradienter , og bruker noen heksekarakterer du vil ha.
De inkluderer også et stripe galleri hvor du kan se hva andre har bygget.
Tartan Maker
Hvis å lage stripete bakgrunner er tidkrevende, er det en stor hodepine å skape plett bakgrunner .
Det er der Tartan Maker kommer inn. Velg garnstørrelsen, fargene for mønsteret og vinkelen, og det oppretter det automatisk.
Du kan forhåndsvise designen din fullskjerm og deretter laste ned filen.
Pixelknetes bakgrunnsdatter
Denne bakgrunnsgeneratoren lager en moderne prikket bakgrunn med gradvis mindre prikker når de beveger seg nedover siden.
Du kan velge opptil to punktfarger og to farger for en gradientbakgrunn (eller bare en enkelt farge for en solid bakgrunn).
Du kan også angi mønsterets høyde (standard er 700 piksler). Bakgrunnen skapte gjentakelser på en horisontal akse.
Som Button Generator
Hvis du ignorerer den dårlig oversatte teksten på denne siden, vil du se at dette er en av de smidigeste knappene generatorer tilgjengelig . Legg til tekst, forskjellige gradienter, striper, bilder og mer til knappene dine.
Du kan velge knapp og kantfarger, den totale størrelsen (ved hjelp av skyveknapper eller tekstfelt) og grenseverdien, og hvordan rundet knappen er.
Hvis du inkluderer striper, får du mange alternativer, inkludert farge, gjennomsiktighet, tykkelse, mellomrom mellom striper og vinkelen.
Dette er definitivt den mest fullverdige knappgeneratoren der ute.
Button Maker
Denne knappgeneratoren lar deg enkelt lage to-tone 80 × 15 piksel knapper .
Velg knappens farger, grensefargene, hvor splittet mellom boksene skal være, og skriv inn teksten for hver side, og det er det!
Dette er et av verktøyene som ikke er lastet med funksjoner, men gjør det det var designet for å gjøre perfekt og sømløst.
AJAX- og JavaScript-verktøy
Vi vet alle at Ajax kan legge til massevis av funksjonalitet til nettstedet ditt. Enten du vil legge til et enkelt bildegalleri, et interaktivt kontaktskjema, eller lage et helt webprogram , er Ajax der for å hjelpe.
Men fra begynnelsen kan det være skremmende, spesielt hvis du er relativt ny til Ajax. Og selv om du anser deg selv som en proff, kan det fortsatt være tidkrevende å starte med en tom skifer for hvert av prosjektene dine.
Det er mange verktøy der ute for å øke hastigheten på Ajax-utviklingen. Fra manuskriptsamlinger til rammeverk til bestemte elementgeneratorer, er det sannsynligvis noe tilgjengelig i verktøyene under som vil gjøre deg til en mer effektiv utvikler.
Ajaxload
Ajaxload er en generator for å lage Ajax loader ikoner . Det er mange forskjellige ikoner å velge mellom.
Alt du trenger å gjøre er å sette forgrunns- og bakgrunnsfarger (eller velg en gjennomsiktig bakgrunn) og last ned bare det genererte skriptet.
Rask og enkel, men det sparer deg noen minutter (eller lengre) av koding!
Mini AJAX
Mini Ajax er et galleri med nedlastbare Ajax- og DHTML-skript .
Den inkluderer alt fra modale vinduer til lysbildeserier til mer avanserte skript (som kalendere og hele prosjektstyringsverktøy).
Det er et flott utgangspunkt for å finne individuelle Ajax-elementer eller bare for å få litt inspirasjon.
Det er demoer tilgjengelig for mange av skriptene, og alle av dem kan lastes ned fra sine originale kilder.
MooTools
MooTools er et objektorientert JavaScript-rammeverk . Det er definitivt ikke laget for nybegynnere, men kan tillate deg å skrive fleksible, kraftige Ajax-apper som er kompatible med nettleseren.
Det er også standard-kompatibelt og utrolig godt dokumentert.
I tillegg til kjernebyggeren er det også massevis av plugins tilgjengelig. MooTools kan brukes til å lage alt fra enkle bildegallerier for å fullføre brukergrensesnitt.
jQuery
jQuery er et JavaScript-bibliotek som forenkler en rekke JavaScript-funksjoner .
En av de beste delene av dette bestemte verktøyet er imidlertid antall plugins som allerede er tilgjengelige for jQuery.
Det er ferdige plugins for alt fra enkle animasjoner til skjemaer til widgets til avanserte brukergrensesnittelementer.
Det er sannsynligvis allerede et plugin gjort for omtrent alt du kanskje vil gjøre med JavaScript eller Ajax, eller i det minste en å bruke som grunnlag for å lage din egen.
Script.aculo.us
Script.aculo.us er et JavaScript-brukergrensesnittbibliotek som inneholder et animasjonsramme, Ajax-kontroller, DOM-verktøy og mer .
Den brukes av Apple, CNN, Basecamp og Ruby on Rails. Den er bygget på Prototype Framework.
Det er omfattende dokumentasjon tilgjengelig i Script.aculo.us wiki, noe som gjør det enkelt å komme i gang.
Online JavaScript-komprimeringsverktøy
Ved å komprimere JavaScript-filene dine blir de raskere, spise mindre båndbredde, og ta mindre plass på serveren din. Dette verktøyet gjør komprimering enklere.
Bare kopier og lim inn JS-filene dine (eller last dem opp) i dette verktøyet, og velg deretter om du vil komprimere med Minify eller Packer.
Det spretter automatisk ut renere, mer effektiv kode. Bare vær sikker på at du tester resultatene grundig og alltid ta sikkerhetskopi av den opprinnelige filen.
JavaScript Beautifier
Hvis JavaScript er litt messiere enn du vil (eller nesten umulig å dechifrere fordi det er så dårlig formatert), kjør det gjennom denne beautifieren for å få ryddige, rene, konsekvent formaterte skript som er enklere å lese og redigere senere .
Innstillingene som brukes er minimal, men du kan velge hvor mange mellomrom du vil bruke for innrykk, om du vil oppdage pakkere, og om du vil bevare linjeskift.
Igjen, sørg for at du tester den endelige koden og behold en sikkerhetskopi i tilfelle eventuelle problemer i din nyskapte kode.
Browsershots
Dessverre gir forskjellige nettlesere nettsteder på litt forskjellige måter. Dette kan være en stor hodepine, spesielt hvis dine kunder bruker en nettleser og du bruker en helt annen.
Hvis de ser ting som ikke vises på slutten din (eller omvendt), kan det skape problemer på begge sider.
Du kan alltid installere flere nettlesere på datamaskinen din, men a) det er sløsing med diskplass og b) hva med nettlesere som ikke er tilgjengelige for operativsystemet ditt? Det er hvor Browsershots kommer inn.
Du kan velge mellom nesten alle større nettlesere i eksistensen, inkludert obskure nettlesere som Minefield og Epiphany.
BrowserShots viser skjermbilder av bare nettleserne du har valgt å vise , slik at du kan velge så mange eller så få som du vil.
Bare husk at jo flere nettlesere du velger å teste, jo lengre vil det ta. Måten BrowserShots er satt opp, skjønt, kan du bare bokmerke siden og komme tilbake senere for å se resultatene dine.
Firebug
Ingen liste over verktøy for webdesignere ville være komplett uten å nevne Firebug Firefox-plugin .
Firebug gjør ofte debugging og redigering av koden din (enten det er JavaScript, CSS eller HTML) uendelig enklere, som ofte det mest verdifulle verktøyet i en designerens arsenal .
Du kan justere CSS rett i nettleseren din. Visualiser hvordan CSS-boksene dine er justert. Rediger et element på siden din rett i nettleseren din.
Feilsøk JavaScript og finn feil raskere. Og det er bare å skrape overflaten av det Firebug kan gjøre.
Det er virkelig et must-have verktøy for hver designer der ute. Når du bruker det, vil du lure på hvordan du noen gang har designet uten det.
Utarbeidet utelukkende for WDD av Cameron Chapman.
Hvilke verktøy bruker du mest? Hvilke andre verktøy bruker du som vi kanskje har gått glipp av?