Massiv sammansättning av Designerverktyg
Webbdesigners har en mängd verktyg tillgängliga för dem, för att göra allt från att organisera sina tankar om en viss design för att felsöka den slutliga designen.
Men med så många verktyg där ute, hur bestämmer du någonsin vilka som verkligen är användbara och vilka kommer bara att slösa bort din tid?
Vi har sammanställt en massiv lista över några av de bästa och mest användbara verktygen där ute för webbdesigners .
Avsaknad av listan är vanliga verktyg som de flesta konstruktörer brukar använda (som Dreamweaver eller Panic's Coda, Photoshop eller GIMP, och liknande vanliga program som nästan alla designer redan har i verktygslådan).
Det här är verktyg som sparar tid, ger dig en effektivare design, förenklar eller påskyndar din designprocess eller på annat sätt gör ditt liv enklare.
Sammanställning av offlineverktyg
De flesta rådgivningarna om användbara webbdesignverktyg fokuserar bara på onlineverktyg.
Men det finns några mycket användbara verktyg du kan använda för att öppna dina alternativ när det gäller design. Dessa saker kan göra vissa uppgifter enklare, inklusive att arbeta med obeslutna kunder.
Grafikkabletter
Grafikkort (även ibland hänvisade till som ritbord, grafikkort eller digitaliseringstabeller) är ett otroligt användbart verktyg i en webbdesigners arsenal. Medan de flesta designers kan rita ganska skickligt med en mus, gör en tablett det mycket enklare och snabbare.
De flesta tabletterna består av två grundläggande delar: tabletten själv och pennan (eller pennan). Många kommer också med en puck (som fungerar på samma sätt som en mus, men på själva tabletten istället för en musmatta eller ditt skrivbord). Huvudbedömningen för tabletten är storlek, medan pennaens huvudsakliga beaktande är tryckkänslighet.
Tabletterna själva är tillgängliga i storlekar från ca 4 "x 5" upp till 19 "x 13". Naturligtvis desto större tabletten desto dyrare blir det. För det mesta kan webbdesigners komma undan med tabletter i den mindre änden av spektrumet, såvida de inte planerar att göra mycket illustrationarbete (och även då är det helt möjligt att få kvalitetsresultat från en tablett i medelstorlek).
Och mindre tabletter är mer bärbara, vilket gör dem praktiska för designers som inte alltid vill vara bundna till sitt skrivbord.
Pennorna är tryckkänsliga för att ge en mer realistisk upplevelse . Vanliga känsligheter sträcker sig från 256 nivåer av tryck upp till 2048 nivåer. Ju högre känslighetsnivå, desto mer kommer det att känna att du faktiskt använder en penna och papper.
Populära grafikkabletter
Wacom är förmodligen den mest populära tablettproducenten där ute. De har fyra olika produktlinjer: Bamboo (som inkluderar deras Bamboo Craft och Bamboo Fun produkter), riktat till konsumenter och hobbyister; Graphire, deras Bluetooth-surfplatta; Intuos, deras mellanklass för kreativa proffs och Cintiq, deras avancerade linje som innehåller en bildskärm i tabletten för en "penn-på-skärm" -upplevelse (en till och med har en 21-tums skärm).
Aiptek gör en rad billiga tabletter som börjar med endast US $ 50. De erbjuder en 12,1-tums USB-tablett för mindre än US $ 130 (jämfört med US $ 469 för en Wacom-tablett av jämförbar storlek). Aipteks mest intressanta erbjudande är dock deras My Note Premium (170 USD) som låter dig rita ett papper på toppen av tabletten med en riktig penna och registrerar allt du gör. Det finns tillräckligt med minne för upp till 100 skrivna sidor och den levereras med en SD-kortplats för att expandera sin kapacitet. Och om du vill använda den bara för att ta anteckningar på ett möte, kan det släppas av 4 AAA-batterier, vilket betyder att du inte behöver ta med din bärbara dator tillsammans med dig.
UC-Logic är den andra stora grafikkortstillverkaren. Deras produkter faller i mitten av priserna på tabletter, med en 9 "x12" tablett (PF1209-Pro) som kommer in på omkring 250 USD. De har tillgängliga tabletter som börjar med endast 40 dollar.
Mood Boards
Mood boards (även kallade inspirationskort) är ett utmärkt verktyg för designers som arbetar med kunder som kanske inte har en tydlig idé om vad de vill ha.
Mood boards ofta tar form av en collage som innehåller designelement för projektet. Exempel på element som ingår kan vara typografiprover, färgscheman, specifika grafiska exempel eller allmänna "humör" -element som återspeglar designerns vision för intrycket som webbplatsen ska ge besökare.
Mood boards används ofta i inredningsfältet för att visa kunder idéer för ombyggnad av ett rum eller ett helt hus. De används också i modebranschen för att fungera som inspiration och riktning för en linje eller säsong. Men de är lika värdefulla för grafiska och webbdesigners.
Beroende på vilken typ av klient du arbetar med kan du skapa en lös collage med överlappande prover på ett ekologiskt sätt . Om din kund befinner sig i ett kreativt fält eller är bekant med den kreativa processen, kan den här typen av humörbräda fungera ganska bra.
Om din klient däremot är van vid en mer företagsformell eller formell miljö, är det troligtvis mer lämpligt att skapa en mer organiserad stämningsbräda.
Använd rubriker för att skilja färgschema, specifika designelement, typografi och andra delar av ditt stämningsbräda för att ge hela saken lite struktur.
Om du har flera idéer för vägbeskrivningar där ett projekt kan gå, kan skapa några olika stämningsbrädor vara ett bra sätt att få klientåterkoppling och ytterligare förfina dina egna idéer.
Att skapa två eller tre olika exempel för att visa en klient kan vara värdefull för att få ytterligare vägledning från din klient utan att spendera timmar eller dagar på en verklig webbplatsmock-up bara för att få veta att det inte är något som de letar efter.
Och det är verkligen den största fördelen med att använda stämningsbrädor i din designprocess. En stämningsbräda tar vanligtvis mycket mindre tid att skapa än en mock-up .
Använda stämningsbrädor för att få ytterligare återkoppling från en obesluten eller osäker klient innan du förbinder timmar med en design som bara avvisas gör alla lyckligare.
Resurser för att skapa egna moodboards
Vi publicerade en artikel på Varför Mood Boards Matter i slutet av förra året. Artikeln täcker grunderna för att skapa stämningsbrädor och varför du vill använda dem. Det är en bra utgångspunkt.
Från soffan har en video tutorial kallas Skapa en effektiv humörstyrelse . Det är ungefär sju minuter långt och täcker grunderna för att skapa en digital stämningsbräda för projekt.
Flickr har en Inspiration Boards pool som samlar humör och inspirationskort bilder från flera designdiscipliner. Det är ett bra ställe att hitta lite inspiration eller bara kolla in exempel på hur andra närmar sig sina humörbrädor.
Sammanställning av onlineverktyg
Online webbdesignverktyg är ett dime a dozen. Att sortera genom dem för att hitta de som verkligen stannar ut kan tyckas ta mer tid än vad du någonsin kan räkna med att spara genom att använda dem.
Men nedan har vi hittat de bästa verktygen för typografi, CSS, AJAX och Javascript, färgval och verktyg för att göra det enklare att skapa individuella sidelement.
Återigen är det några av de bästa verktygen som är tillgängliga för vad de gör, så du behöver inte slösa bort en massa tidstest som testar dussintals olika verktyg.
Typografi Verktyg
Det finns en mängd onlineverktyg för att experimentera med typografi på dina webbdesigner. Vissa tillåter dig att jämföra olika typsnitt sida vid sida. Vissa låter dig bara prova en stil i taget. Och andra visar dig olika rekommenderade typsnittstaplar.
Andra användbara verktyg för webtypografi inkluderar appar för att konvertera pixelstorlekar till enheter och en mängd Lorem Ipsum och andra dummy-textgeneratorer. Sammantaget finns det typografiverktyg där ute för nästan alla möjliga behov som en webbdesigner kan ha.
Typetester
Typetester kan du jämföra upp till tre teckensnitt bredvid varandra .
Du kan välja vilken typsnitt som helst från din egen dator eller använda teckensnitt från deras meny med vanliga systemfonter och webbsäkra typsnitt. Det låter dig också ändra färg, ledning, spårning, storlek och andra stilalternativ.
Det är ett bra verktyg när du försöker bestämma vilka teckensnitt som ska användas för olika element eller till och med för att kompilera dina egna teckensnittsstaplar (eftersom det låter dig jämföra många teckensnitt sida vid sida).
CSS typ Set
CSS Type Set kan du klistra in text som du vill ändra i en ruta, justera reglaget och välja andra formateringsalternativ och kopiera sedan den genererade CSS.
Det är ett snabbt och enkelt sätt att formatera vilken text du behöver, från stycken till huvudetiketter.
Alternativen inkluderar textfärg, ledning, spårning, baslinjeskift, textdekorationer, anpassning och mer.
Bättre CSS Font Stacks
Även om det inte är ett traditionellt verktyg, erbjuder den här artikeln ett antal alternativ till standardstorlekarna som vanligtvis används i CSS.
Förutom att erbjuda riktlinjer för att skapa egna typsnittstaplar, innehåller den här artikeln också en mängd olika provstaplar som du kan använda . En utmärkt resurs när du känner dig lite stumpad över dina typografialternativ.
HTML-Ipsum
De flesta standard Lorem Ipsum generatorer online ger dig ett block av text och ingenting mer. Och det är bra om du bara försöker fylla upp lite utrymme.
Men HTML-Ipsum ger dig text som redan har markerats med grundläggande HTML-taggar (punkt, huvud, oorderade listor etc.) så att du kan se hur alla olika element interagerar med varandra. Det är en enorm timesaver.
PXtoEm.com
PXtoEM.com gör exakt vad det säger: det konverterar bildstorlekar i pixelformat till storlekar med storlekstyp .
Alternativen det ger dig är det som gör det till ett riktigt imponerande och flexibelt verktyg.
Du kan välja bastextstorleken och få konverteringar baserade på din webbläsares standardteckenstorlek (så om du till exempel ställer in din basfontsprocent till 62,5% så att en 10 pixelstorlek är lika med 1em kan du välja det som din standardstorlek).
Typechart
Typschart låter dig bläddra bland olika webbsäkra typsnitt och se hur de ska se ut på både Windows och Mac-system .
Du kan hitta teckensnitt baserat på storlek, oavsett om de är serif eller sans-serif eller betoning. Det inkluderar bara webbsäkra teckensnitt, så de erbjudna alternativen är begränsade. Men för grundläggande typografi är det ett bra verktyg som kan ge massor av inspiration.
Och du kan kopiera och klistra in CSS för varje stil utan att lämna sidan.
Flipping Typisk
Med Flipping Typical kan du visa de vanliga typsnitt som du har på din dator i ett rutnätformat för att göra det enklare att välja rätt typsnitt för ditt pågående projekt.
Det här är ett bra verktyg när du inte är intresserad av att bara använda de vanliga webbsäkra teckensnitt och vill se fler alternativ.
Det är särskilt användbart om du inte vill wade igenom några hundra typsnitt installerade på datorn och bara vill se de mer populära.
CSS-verktyg
CSS är nästan lika viktigt i webbdesign som HTML. Och det finns hundratals verktyg där ute för att göra din CSS renare, smidigare, effektivare och i allmänhet bättre som sparar dig den tid och det arbete som krävs för att manuellt förbättra dina stilark.
Att komprimera stilarken, som kan hjälpa till att påskynda laddningstiden för dina webbplatser, förenklas genom att använda ett automatiskt onlineverktyg. Det finns verktyg tillgängliga för att eliminera dubbla deklarationer också.
Cheat sheets håller de grundläggande elementen i CSS till hands när kaffet inte har sparkat in på morgonen och du har svårt att komma ihåg vilken ordning din stenografi ska vara i.
Medan de flesta av dessa verktyg gör ett bra jobb vid rengöring av din CSS, se till att du alltid håller en säkerhetskopia av ditt original och testa den genererade slutprodukten. Ibland kommer en rengörare eller kompressor att ta bort någonting som var nödvändigt för att bryta din webbplats.
CSS SuperScrub
CSS SuperScrub syftar till att avsevärt minska komplexiteten och storleken på dina stilark .
Det blir av med överflödiga samtal, eliminerar onödigt innehåll och grupperar återstående element för att göra redigeringen enklare senare.
Det finns några alternativ, bland annat en för att ta bort all whitespace i ditt stilark, eller för att infoga en ny rad innan du öppnar hållare.
Kod Beautifier
Kod Beautifier optimerar och rensar upp dina CSS-filer .
Det erbjuder ett stort antal alternativ för att formatera din text, bland annat komprimera färger, sortera dina egenskaper, konvertera alla dina selektorer till små bokstäver, konvertera dina egenskaper till antingen stor eller liten och välja komprimeringsnivå du vill använda.
Du kan antingen kopiera och klistra in din CSS i appen eller tillhandahålla en URL för din CSS-fil.
CSS-enhet
CSS Drive är en grundläggande CSS-kompressor .
Du kan ange hur komprimerad du vill att din CSS ska vara (ljus, normal eller super kompakt) och hur du vill att den ska hantera kommentarer (huruvida du ska ta bort dem).
Det finns också ett avancerat läge som ger dig många fler alternativ, inklusive borttagning av mellanslag runt vissa tecken, borttagning av flikar, borttagning av nya rader och mer.
CSS Redundancy Checker
Ibland håller på att utforma en webbplats, kan du skapa CSS-selektörer som inte hamnar i din slutliga markup.
Dessa väljare gör ingenting mer än att göra dina stilark skrovligare och svåra att redigera senare.
CSS Redundancy Checker går igenom ditt stilark och var och en av dina HTML-sidor för att se vilka selektorer som inte används och sedan tar bort dem .
Det är ett bra verktyg att använda om du tror att du kanske har onödiga valörer i dina stilark.
CSS Property Index
CSS Property Index listar varje CSS-egenskap alfabetiskt .
Genom att klicka på någon av de medföljande egenskaperna får du en definition och information om standardvärdet, tillåtna värden och om det ärar från en förälderegenskap.
CSS Shorthand Guide
Använda stenografi CSS-egenskaper gör dina CSS-filer mindre än att använda longhand-egenskaper .
Men kom ihåg vilken ordning alla de olika elementen går in för alla olika egenskaper kan vara huvudvärk, speciellt för dem du kanske inte använder i varje enskild design du gör.
Det innehåller också information om standardvärdena för fastighetsvärden, så om du väljer att lämna ut en fastighet vet du vad det ska anta att värdet ska vara.
Färgverktyg
Att välja rätt färger för dina webbdesign kan vara en av de viktigaste besluten du gör i hela designprocessen.
Ibland kommer vi in i en design med ett fördefinierat färgschema (till exempel när en klient redan har etablerat varumärkesfärger) eller omedelbart vet vilka färger vi vill använda. Andra tider kan vi vara fria att skapa vår egen palett för designen.
Om du skapar ett färgschema från början, kan färgpalettgeneratorer och gallerier vara en stor hjälp.
Om du redan har ett färgschema finns det andra överväganden att ta hänsyn till, till exempel tillgänglighet och vilka färger som ska användas på vilka delar av webbplatsen.
Men det finns verktyg där ute för att hjälpa till med de besluten också. Nedan följer några av de bästa verktygen för att hantera färgscheman.
Colorblind webbsidor filter
Med tanke på att någonstans mellan 7 och 10% av den manliga befolkningen har viss grad av färgblindhet (enligt Wikipedia ), så att dina webbplatser fortfarande är tillgängliga för den befolkningen är inte en dålig idé.
Det här verktyget visar hur dina mönster kommer att visas för personer med ett antal olika färgblindhetsstörningar. Du kan se resultaten för hela din webbplats eller utesluta bilder från resultatet.
De ger också en länk till ett färgblind-säkert färgvalverktyg.
Hitta matchande färger för din webbplats
Detta färgpalettverktyg hittar färger som koordinerar med vilken färg du väljer .
Du kan antingen välja en färg från sina fördefinierade alternativ eller ange något hex- eller RGB-färgvärde för att få koordinerande paletter baserade på komplementära, delade komplementära, triade-, tetrade-, analoga eller monotona färgscheman.
De angivna färgerna är alla liknade i intensitet, vilket betyder att det här verkligen är en utgångspunkt för att skapa färgpalettar för dina mönster.
Color Palette Generator
Bilder är bra ställen att leta efter design inspiration. Det här verktyget kan skapa en färgpalett från vilken bild du väljer (bara mata in bildens URL).
Det ger både tråkiga och levande färgscheman baserat på bilden du tillhandahåller.
Att kunna använda någon bild på nätet gör det här verktyget värdefullt, eftersom det sparar tiden att behöva ladda ner en bild och sedan ladda upp på en sådan sida för att skapa ett färgschema (eller ladda ner och sedan öppna i ett grafikprogram för att manuellt skapa en färgpalett).
Kuler
Adobes Kuler färgpalettgalleri är en av de bättre färgpalettgallerierna där ute.
Du kan bläddra eller söka mer än 10 000 färgpaletter som skickats av Kuler-användare och sedan ladda ner eller spara dina favoriter för senare referens.
Kuler innehåller också ett riktigt kraftfullt palettskapningsverktyg som låter dig välja färger med reglage eller baserat på HSV-, RGB-, CMYK-, LAB- eller hex-färgvärden.
Om du ställer in någon färg som basfärg ändras de omgivande färgerna till komplement.
Colour
COLOURlovers är ett annat bra färgschema galleri .
Du kan söka mer än 800 000 färgscheman (baserat på 20 scheman per sida och 43 200 + sidor av scheman). Förutom paletter kan du också söka individuella färger och mönster baserat på paletter.
En av COLOURlovers mest användbara funktioner är dock att det är ett verktyg för att skapa mönster, vilket gör att du skapar egna mönster baserat på antingen ett fördefinierat färgschema eller en som du skapar i flygningen.
Se bara till att du kontaktar upphovsrättsinnehavaren till mönstret om du vill använda en för kommersiellt arbete.
100 slumpmässiga färger 2.0
Om du verkligen inte har någon aning om var du ska börja på färgschemat för en av dina mönster, kan 100 Random Colors 2.0 vara det rätta verktyget.
Det gör precis vad namnet säger: presenterar dig med 100 slumpmässiga färger, inklusive deras hex-värden .
Och om du inte hittar något i de första 100-talen, kan du bara hämta uppdateringen och få en helt ny uppsättning!
Individuella elementverktyg
Det finns många generatorer där ute som gör det snabbt och enkelt att skapa knappar, bakgrunder, former och andra designelement för dina webbplatser.
Några av dem är bara gimmicky, men andra är en stor hjälp om du bara vill snabbt skapa något som en Web 2.0-ish-knapp eller en grundläggande randig bakgrund.
Formverktyg kan också vara till stor hjälp, särskilt om du vill att dina kunder ska kunna göra lite av sitt eget administratörsarbete på sina blanketter.
Jag vet åtminstone ett par designers som använder dessa verktyg så att de inte behöver bygga ett anpassat, förenklat gränssnitt för åtkomst till formulärdatabasen eller för att redigera formulär för sina kunder. De är en bra tidsbesparare, speciellt för att bygga mer komplicerade former.
Wufoo
Wufoo är en HTML-formulärbyggare som erbjuder mer än 80 formulärmallar och färgscheman samtidigt som du ger dig fullständig kontroll för att skapa anpassade formulär för dina kunder.
Mallarna gör det snabbare och enklare att skapa vanliga webbformulär (som registreringssidor eller kontaktformulär).
Inlämnade formulär samlas automatiskt in i en databas som gör det enkelt för dina kunder att skriva ut, maila enskilda poster, filtrera, söka och utföra andra avancerade funktioner utan att du behöver bygga ett anpassat gränssnitt.
Du kan även använda Wufoo för att skapa online orderformulär och integrera med Authorize.net, PayPal eller Google Checkout.
BgPatterns
BgPatterns låter dig skapa kaklade mönster med ett stort antal olika upprepande element.
Du kan välja din bakgrundsfärg, duktextur och vinkeln på mönstret. Du kan tillämpa bakgrunden du skapar på BgPatterns webbplats för att förhandsgranska, och sedan ladda ner bilden när du har slutfört den.
Du kan också bläddra i mönster som skapats av andra. Det är det snabbaste och enklaste sättet att skapa enkla, kaklade bakgrunder.
Stripe Generator 2.0
Att skapa repeterande ränder för en webbplats är tidskrävande.
Visst kan du skapa mallar för vanliga band som du kan använda, men vad händer om du vill ha en stiftremsa för ett projekt, en bred rand för en annan och en i en udda vinkel för en annan? Snart ser inte dessa mallar ut att klippa den längre.
Stripe Generator 2.0 erbjuder ränder i olika vinklar , i stort sett vilken bredd du väljer, med eller utan skuggor och gradienter , och med alla hex-färger du vill ha.
De innehåller också ett strip galleri där du kan se vad andra har byggt.
Tartan Maker
Om skapa randiga bakgrunder är tidskrävande, skapar plana bakgrunder en enorm huvudvärk.
Det är där Tartan Maker kommer in. Välj garnstorlek, färgerna för ditt mönster och vinkeln och det skapar det automatiskt.
Du kan förhandsgranska din mönster fullskärm och sedan ladda ner filen.
Pixelknetes bakgrundsdotter
Denna bakgrundsgenerator skapar en modern prickad bakgrund med progressivt mindre prickar när de flyttar ner på sidan.
Du kan välja upp till två punktfärger och två färger för en gradientbakgrund (eller bara en enda färg för en solid bakgrund).
Du kan också ange mönstret höjd (standard är 700 pixlar). Bakgrunden skapade upprepningar på en horisontell axel.
Som knappgenerator
Om du ignorerar den dåligt översatta texten på den här sidan ser du att det här är en av de smidigare knappgeneratorerna som finns tillgängliga . Lägg till text, olika gradienter, ränder, bilder och mer till dina knappar.
Du kan välja knapp och kantfärger, den övergripande storleken (med hjälp av reglage eller textfält) och gränstjockleken, och hur rundad knappen är.
Om du inkluderar ränder får du massor av alternativ, inklusive färg, transparens, tjocklek, mellanrummet mellan ränder och vinkeln.
Detta är definitivt den mest utrustade knappgeneratorn där ute.
Button Maker
Denna knappgenerator låter dig enkelt skapa tvåtoniga 80 × 15 pixelknappar .
Välj knappfärgerna, kantfärgerna, där delningen mellan rutorna ska vara och skriv in texten för varje sida, och det är det!
Detta är ett av de verktyg som inte är laddade med funktioner men gör vad det var utformat för att göra perfekt och sömlöst.
AJAX och JavaScript-verktyg
Vi vet alla att Ajax kan lägga till massor av funktionalitet till din webbplats. Oavsett om du vill lägga till ett enkelt bildgalleri, ett interaktivt kontaktformulär eller skapa ett helt webbprogram , är Ajax där för att hjälpa till.
Men från början kan det vara skrämmande, speciellt om du är relativt ny på Ajax. Och även om du anser dig vara en proffs, kan det fortfarande vara tidskrävande att börja med en tom skiffer för varje projekt.
Det finns gott om verktyg där ute för att påskynda din Ajax-utveckling. Från skriptsamlingar till ramverk till specifika elementgeneratorer finns det sannolikt något tillgängligt i verktygen nedan som gör dig till en effektivare utvecklare.
Ajaxload
Ajaxload är en generator för att skapa Ajax Loader-ikoner . Det finns massor av olika ikoner att välja mellan.
Allt du behöver göra är att ställa in förgrunds- och bakgrundsfärgerna (eller välj en genomskinlig bakgrund) och ladda sedan bara det genererade skriptet.
Snabbt och enkelt, men det sparar dig några minuter (eller längre) kodning!
Mini AJAX
Mini Ajax är ett galleri med nedladdningsbara Ajax- och DHTML-skript .
Den innehåller allt från modala fönster till bildspel till mer avancerade skript (som kalendrar och hela projekthanteringsverktyg).
Det är en bra utgångspunkt för att hitta enskilda Ajax-element eller bara för att få lite inspiration.
Det finns demo tillgängliga för många skript och alla kan hämtas från sina ursprungliga källor.
MooTools
MooTools är ett objektorienterat JavaScript-ramverk . Det är definitivt inte utformat för nybörjare, men kan låta dig skriva flexibla, kraftfulla Ajax-appar som är kompatibla med webbläsaren.
Det är också standardkompatibelt och otroligt väl dokumenterat.
Förutom kärnbyggaren finns det också massor av plugins. MooTools kan användas för att skapa allt från enkla bildgallerier för att slutföra användargränssnitt.
jQuery
jQuery är ett JavaScript-bibliotek som förenklar en mängd olika JavaScript-funktioner .
En av de bästa delarna av det här verktyget är dock antalet plugins som redan är tillgängliga för jQuery.
Det finns färdiga plugins för allt från enkla animeringar till former till widgets till avancerade användargränssnitt.
Det är troligt redan ett plugin för nästan vad som helst som du kanske vill göra med JavaScript eller Ajax, eller åtminstone en som ska användas som grund för att skapa din egen.
Script.aculo.us
Script.aculo.us är ett JavaScript-användargränssnitt bibliotek som innehåller en animering ram, Ajax kontroller, DOM verktyg och mer .
Den används av Apple, CNN, Basecamp och Ruby on Rails. Det är byggt på Prototyp Framework.
Det finns omfattande dokumentation tillgänglig i Script.aculo.us wiki, vilket gör det enkelt att komma igång.
Online JavaScript-komprimeringsverktyg
Att komprimera dina JavaScript-filer gör att de laddas snabbare, äter upp mindre av din bandbredd och tar mindre plats på din server. Detta verktyg gör komprimeringen enklare.
Bara kopiera och klistra in dina JS-filer (eller ladda upp dem) i det här verktyget och välj sedan om du vill komprimera med Minify eller Packer.
Det spetsar automatiskt ut renare, effektivare kod. Se bara till att du noggrant tester resultaten och alltid behåller en säkerhetskopia av din ursprungliga fil.
JavaScript Beautifier
Om JavaScript är lite snyggare än vad du vill ha (eller nästan omöjligt att dechiffrera eftersom det är så dåligt formaterat), kör det genom den här beautifieren för att få snygga, rena och konsekvent formaterade skript som är enklare att läsa och redigera senare .
Inställningarna som används är minimala men du kan välja hur många mellanslag du vill använda för inslag, om du vill upptäcka packare och om du vill behålla radbrytningar.
Återigen, se till att du testar den slutliga koden och behåller en säkerhetskopia i händelse av problem i din nyskapade kod.
BrowserShots
Olyckligtvis ger olika webbläsare webbplatser på något annorlunda sätt. Detta kan vara en stor huvudvärk, speciellt om dina kunder använder en webbläsare och du använder en helt annan.
Om de ser saker som inte dyker upp i slutet (eller vice versa) kan det skapa problem på båda sidor.
Du kan alltid installera flera webbläsare på din dator, men a) det är slöseri med diskutrymme och b) vad sägs om webbläsare som inte är tillgängliga för ditt operativsystem? Det är där BrowserShots kommer in.
Du kan välja mellan nästan alla större webbläsare som finns, inklusive dolda webbläsare som Minefield och Epiphany.
BrowserShots visar skärmdumpar av bara de webbläsare du har valt för att visa , så du kan välja så många eller så få som du vill.
Kom bara ihåg att ju fler webbläsare du väljer att testa desto längre tid tar det. Det sätt som BrowserShots är inställt på kan du dock bara markera sidan och komma tillbaka senare för att se dina resultat.
Pyroman
Ingen lista med webbdesignerverktyg skulle vara komplett utan att nämna Firebug Firefox-plugin .
Firebug gör ofta debattering och redigering av din kod (oavsett om det är JavaScript, CSS eller HTML) oändligt lättare, som oftast anses vara det enda värdefullaste verktyget i en designers arsenal .
Du kan justera din CSS direkt i din webbläsare. Visualisera hur dina CSS-rutor är anpassade. Redigera något element på din sida i din webbläsare.
Felsök din JavaScript och hitta fel snabbare. Och det är bara att skrapa ytan på vad Firebug kan göra.
Det är verkligen ett måste-verktyg för alla designer där ute. När du använder det, kommer du att undra hur du någonsin designat utan det.
Kompilerad uteslutande för WDD av Cameron Chapman.
Vilka verktyg använder du mest? Vilka andra verktyg använder du som vi kanske har missat?