Enorme compilatie van Designer Tools
Webontwerpers hebben een schat aan hulpmiddelen tot hun beschikking, om alles te doen, van het organiseren van hun gedachten over een bepaald ontwerp tot het debuggen van het uiteindelijke ontwerp.
Maar met zoveel tools die er zijn, hoe bepaal je dan welke echt nuttig zijn en welke tijd zullen je gewoon verspillen?
We hebben een enorme lijst samengesteld met enkele van de beste en meest nuttige tools die er zijn voor webontwerpers .
Doelbewust van de lijst weggelaten zijn gebruikelijke hulpmiddelen die de meeste ontwerpers waarschijnlijk al gebruiken (zoals Dreamweaver of Panic's Coda, Photoshop of GIMP en vergelijkbare algemene softwareprogramma's die vrijwel elke ontwerper al in zijn toolkit heeft).
Dit zijn hulpmiddelen die u tijd besparen, u tot een effectievere ontwerper maken, uw ontwerpproces vereenvoudigen of versnellen, of anders uw leven gemakkelijker maken.
Compilatie van offline tools
De meeste verzamelingen van nuttige webontwerptools zijn alleen gericht op online tools.
Maar er zijn een paar zeer nuttige hulpmiddelen die u kunt gebruiken om uw opties te openen als het gaat om ontwerp. Deze dingen kunnen bepaalde taken eenvoudiger maken, inclusief werken met niet aflatende klanten.
Grafische tabletten
Grafische tablets (ook wel tekentablets, grafische pads of digitalisatietabletten genoemd) zijn een ongelooflijk handig hulpmiddel in het arsenaal van een webontwerper. Hoewel de meeste ontwerpers vrij handig met een muis kunnen tekenen, maakt een tablet het een stuk eenvoudiger en sneller.
De meeste tablets bestaan uit twee basisonderdelen: de tablet zelf en de pen (of stylus). Velen komen ook met een puck (die op dezelfde manier werkt als een muis, maar op de tablet zelf in plaats van een muismat of uw bureau). De belangrijkste overweging voor de tablet is de grootte, terwijl de pen vooral aandacht besteedt aan drukgevoeligheid.
De tablets zelf zijn verkrijgbaar in groottes van ongeveer 4 "x 5" tot 19 "x 13". Natuurlijk, hoe groter de tablet, hoe duurder het zal zijn. Grotendeels kunnen webontwerpers ontsnappen aan tablets aan de kleinere kant van het spectrum, tenzij ze van plan zijn veel illustratiewerk uit te voeren (en zelfs dan is het volledig mogelijk om kwaliteitsresultaten te krijgen van een middelgrote tablet).
En kleinere tablets zijn draagbaarder, waardoor ze geschikt zijn voor ontwerpers die niet altijd aan hun bureau willen zijn gebonden.
De pennen zijn drukgevoelig om een meer realistische ervaring te geven . Algemene gevoeligheden variëren van 256 drukniveaus tot 2.048 niveaus. Hoe hoger het gevoeligheidsniveau, hoe meer het voelt alsof u een pen en papier gebruikt.
Populaire grafische tablets
Wacom is waarschijnlijk de meest populaire tabletfabrikant die er is. Ze hebben vier verschillende productlijnen: bamboe (inclusief hun Bamboo Craft- en Bamboo Fun-producten), gericht op consumenten en hobbyisten; Graphire, hun Bluetooth-tablet; Intuos, hun middenklasse voor creatieve professionals; en Cintiq, hun high-end lijn met een monitor in de tablet voor een "pen-op-scherm" -beleving (een heeft zelfs een 21-inch scherm).
Aiptek maakt een lijn van goedkope tablets die begint bij slechts US $ 50. Ze bieden een 12.1 "USB-tablet voor minder dan 130 dollar (vergeleken met 469 dollar voor een Wacom-tablet van vergelijkbare grootte). Het meest interessante aanbod van Aiptek is echter hun My Note Premium (US $ 170) waarmee je met een echte pen op een stuk papier kunt tekenen en alles registreert wat je doet. Er is genoeg geheugen voor maximaal 100 geschreven pagina's en het wordt geleverd met een SD-kaartsleuf voor uitbreiding van de capaciteit. En als u het wilt gebruiken voor het maken van aantekeningen tijdens een vergadering, kan het worden uitgevoerd met 4 AAA-batterijen, zodat u uw laptop niet hoeft mee te nemen.
UC-Logic is de andere grote grafische tabletfabrikant. Hun producten vallen in het middenbereik van prijzen voor tablets, met een 9 "x12" tablet (de PF1209-Pro) die op ongeveer US $ 250 komt. Ze hebben tablets beschikbaar die beginnen bij slechts US $ 40.
Moodboards
Moodboards (ook wel inspiratieborden genoemd) zijn een geweldig hulpmiddel voor ontwerpers die werken met klanten die misschien geen duidelijk idee hebben van wat ze willen.
Stemmingsborden hebben vaak de vorm van een collage met ontwerpelementen voor het project. Voorbeelden van hierin opgenomen elementen zijn typografiemonsters, kleurenschema's, specifieke grafische voorbeelden of algemene "gemoedstoestanden" -elementen die de visie van de ontwerper weerspiegelen voor de indruk die de site aan bezoekers zou moeten geven.
Stemmingsborden worden vaak gebruikt in het interieurontwerp om klanten ideeën te geven voor het opnieuw inrichten van een kamer of een volledig huis. Ze worden ook gebruikt in de mode-industrie om als inspiratie en richting voor een lijn of seizoen te dienen. Maar ze zijn net zo waardevol voor grafische en webontwerpers.
Afhankelijk van het type klant waarmee u werkt, kunt u een losse collage maken met overlappende stalen op een organische manier . Als uw klant zich op een creatief gebied bevindt of bekend is met het creatieve proces, kan dit soort moodboard vrij goed werken.
Als uw klant daarentegen gewend is aan een meer zakelijke of formele omgeving, is het waarschijnlijk beter om een meer georganiseerd moodboard te maken.
Gebruik headers om het kleurenschema, specifieke ontwerpelementen, typografie en andere delen van uw moodboard apart te zetten om het geheel een bepaalde structuur te geven.
Als u meerdere ideeën hebt voor een routebeschrijving waarin een project kan terechtkomen, kan het maken van een paar verschillende moodboards een uitstekende manier zijn om feedback van klanten te krijgen en uw eigen ideeën verder te verfijnen.
Het creëren van twee of drie verschillende voorbeelden om een klant te laten zien, kan waardevol zijn om meer richting te krijgen bij uw klant zonder uren of dagen door te brengen aan een echt mock-upmodel om te horen dat het niets is zoals waarnaar ze op zoek zijn.
En dat is echt het belangrijkste voordeel van het gebruik van moodboards in uw ontwerpproces. Een moodboard kost over het algemeen veel minder tijd om te maken dan een site-mock-up .
Het gebruik van moodboards om meer feedback te krijgen van een besluiteloze of onzekere klant voordat hij uren maakt voor een ontwerp dat alleen wordt afgewezen, maakt iedereen blijer.
Middelen voor het maken van uw eigen Moodboards
We publiceerden een artikel over Waarom Mood Boards belangrijk zijn aan het einde van vorig jaar. Het artikel behandelt de basis van het maken van moodboards en waarom je ze zou willen gebruiken. Het is een geweldig startpunt.
From the Couch heeft een video-tutorial genaamd Het creëren van een effectieve moodboard . Het is ongeveer zeven minuten lang en behandelt de basis van het maken van een digitaal moodboard voor projecten.
Flickr heeft een Inspiratieborden pool die sfeer en inspiratie verzamelt met plaatafbeeldingen uit meerdere ontwerpdisciplines. Het is een goede plek om inspiratie op te doen of bekijk voorbeelden van hoe anderen hun moodboards benaderen.
Compilatie van online tools
Online tools voor webontwerp zijn een dozijn tientallen. Als je ze doorzoekt om diegene te vinden die er echt uitspringen, kan het lijken dat ze meer tijd kosten dan je ooit zou verwachten te besparen door ze te gebruiken.
Hieronder hebben we de beste tools voor typografie, CSS, AJAX en Javascript, kleurselectie en hulpmiddelen gevonden om het maken van afzonderlijke pagina-elementen eenvoudiger te maken.
Nogmaals, dit zijn enkele van de beste tools die beschikbaar zijn voor wat ze doen, dus je zult geen tijd verspillen aan het testen van tientallen verschillende tools.
Typografie Tools
Er zijn een groot aantal online hulpmiddelen om te experimenteren met de typografie van uw website-ontwerpen. Sommigen stellen u in staat om verschillende lettertypen naast elkaar te vergelijken. Sommigen laten je maar één stijl per keer samplen. En weer anderen tonen u verschillende aanbevolen lettertypestapels.
Andere nuttige tools voor webtypografie omvatten apps voor het converteren van pixelformaten naar em-eenheden en een verscheidenheid aan Lorem Ipsum en andere dummy-tekstgenerators. In totaal zijn er typografische tools beschikbaar voor vrijwel elke mogelijke behoefte die een webdesigner zou kunnen hebben.
Typetester
Met Typetester kunt u maximaal drie lettertypen naast elkaar vergelijken .
U kunt elk lettertype op uw eigen computer selecteren of lettertypen gebruiken in hun menu met veelgebruikte systeemlettertypen en webveilige lettertypen. Hiermee kunt u ook de opties voor kleur, leading, tracking, grootte en andere stijl wijzigen.
Het is een geweldig hulpmiddel wanneer u probeert te beslissen welke lettertypen u voor verschillende elementen wilt gebruiken of zelfs om uw eigen lettertypestapels te compileren (aangezien u meerdere lettertypen naast elkaar kunt vergelijken).
CSS Type Set
Met CSS-type set kunt u tekst die u wilt wijzigen in één vak plakken, schuifregelaars aanpassen en andere opmaakopties kiezen en vervolgens de gegenereerde CSS kopiëren.
Het is een snelle en gemakkelijke manier om elke gewenste tekst op te maken , van alinea tot koptags.
Opties zijn onder meer tekstkleur, leiden, volgen, basislijnverschuiving, tekstversieringen, uitlijning en meer.
Betere CSS Font Stacks
Hoewel dit geen traditionele tool is, biedt dit artikel een aantal alternatieven voor de standaard lettertypestapels die over het algemeen in CSS worden gebruikt.
Naast het bieden van richtlijnen voor het maken van uw eigen lettertypestapels, biedt dit artikel ook een grote verscheidenheid aan voorbeeldstapels die u kunt gebruiken . Een uitstekende hulpbron wanneer u zich een beetje stomp voelt over uw typografische opties.
HTML-Ipsum
De meeste standaard Lorem Ipsum-generatoren online bieden u een tekstblok en niets meer. En dat is geweldig als je gewoon wat ruimte wilt vullen.
Maar HTML-Ipsum geeft u tekst die al is gemarkeerd met eenvoudige HTML-tags (alinea, hoofd, ongeordende lijsten, enz.), Zodat u kunt zien hoe alle verschillende elementen met elkaar omgaan. Het is een enorme timesaver.
PXtoEm.com
PXtoEM.com doet precies wat het zegt: het zet lettertypen met pixels om in lettertypen van het formaat van een letter .
De opties die het u geeft maken het tot een echt indrukwekkend en flexibel hulpmiddel.
U kunt de lettergrootte van het basislichaam kiezen en conversies ontvangen op basis van de standaard lettertypegrootte van uw browser (dus als u bijvoorbeeld het percentage van uw basislettertype instelt op 62,5%, zodat een pixelgrootte van 10 gelijk is aan 1em, kunt u dat als uw standaardgrootte).
Typechart
Met Typechart kunt u verschillende webveilige lettertypen bekijken en bekijken hoe ze eruit zien op zowel Windows- als Mac-systemen .
Je kunt lettertypen vinden op basis van de grootte, of ze nu serif zijn of schreefloos of nadrukkelijk. Het bevat alleen webveilige lettertypen, dus de aangeboden opties zijn beperkt. Maar voor standaard typografie is het een geweldige tool die veel inspiratie kan bieden.
En u kunt de CSS voor elke stijl kopiëren en plakken zonder de pagina te verlaten.
Flippen typisch
Flipping Typical geeft u de mogelijkheid om de gebruikelijke lettertypen op uw computer in een rasterindeling te bekijken om het kiezen van het juiste lettertype voor uw huidige project eenvoudiger te maken.
Dit is een geweldig hulpmiddel wanneer u niet geïnteresseerd bent in het gebruik van de standaard webveilige lettertypen en meer opties wilt zien.
Het is vooral handig als u niet een paar honderd lettertypen wilt doorlopen die op uw computer zijn geïnstalleerd en u alleen de meer populaire lettertypen wilt zien.
CSS-hulpmiddelen
CSS is bijna net zo belangrijk in webontwerp als HTML. En er zijn honderden tools beschikbaar om uw CSS schoner, slanker, effectiever en over het algemeen beter te maken, zodat u tijd en moeite bespaart om uw stylesheets handmatig te perfectioneren.
Het comprimeren van uw stylesheets, wat kan helpen om de laadtijd voor uw sites te versnellen, wordt vereenvoudigd door een automatische online tool te gebruiken. Er zijn ook hulpmiddelen beschikbaar om dubbele declaraties te elimineren.
Cheat sheets houden de basiselementen van CSS binnen handbereik voor wanneer de koffie 's ochtends nog niet helemaal is ingetrapt en u zich moeilijk kunt herinneren welke volgorde uw verkorte markup moet hebben.
Hoewel de meeste van deze gereedschappen prima werken bij het opruimen van uw CSS, moet u altijd een back-up van uw origineel bewaren en het geproduceerde eindproduct testen. Soms zal een schonere of compressor iets verwijderen dat toch nodig was om je site te breken.
CSS SuperScrub
CSS SuperScrub wil de complexiteit en de grootte van uw stylesheets aanzienlijk verminderen .
Het verwijdert overbodige oproepen, verwijdert onnodige inhoud en groepeert de resterende elementen om het bewerken later gemakkelijker te maken.
Er zijn een paar opties, waaronder één om alle witruimten in uw stylesheet te verwijderen of om een nieuwe regel in te voegen voordat u accolades opent.
Code Beautifier
Code Beautifier optimaliseert en ruimt uw CSS-bestanden op .
Het biedt een groot aantal opties voor het opmaken van uw tekst, waaronder het comprimeren van kleuren, het sorteren van uw eigenschappen, het converteren van al uw selectors naar kleine letters, het converteren van uw eigenschappen naar hoofdletters of kleine letters en het kiezen van het compressieniveau dat u wilt gebruiken.
U kunt uw CSS kopiëren en in de app plakken of een URL voor uw CSS-bestand opgeven.
CSS Drive
CSS Drive is een standaard CSS-compressor .
U kunt instellen hoe gecomprimeerd u wilt dat uw CSS is (licht, normaal of supercompact) en hoe u wilt dat het commentaar verwerkt (of u het wilt verwijderen).
Er is ook een geavanceerde modus die u veel meer opties biedt, waaronder het verwijderen van spaties rond bepaalde tekens, het verwijderen van tabbladen, het verwijderen van nieuwe regels en meer.
CSS Redundancy Checker
Tijdens het ontwerpen van een site kunt u soms CSS-selectors instellen die uiteindelijk niet in uw uiteindelijke markup terechtkomen.
Deze selectors doen niets anders dan uw stylesheets omvangrijker en moeilijker te bewerken maken.
CSS Redundancy Checker doorloopt uw stylesheet en elk van uw HTML-pagina's om te zien welke selectors niet worden gebruikt en verwijdert ze vervolgens .
Het is een geweldig hulpmiddel om te gebruiken als je denkt dat je onnodige selectors in je stylesheets hebt.
CSS-eigenschappenindex
De CSS-eigenschappenindex geeft alfabetisch alle CSS-eigenschappen weer .
Als u op een van de opgenomen eigenschappen klikt, gaat u naar een definitie en informatie over de standaardwaarde, toegestane waarden en of deze van een bovenliggende eigenschap overerven.
CSS steno-gids
Het gebruik van CSS-eigenschappen voor steno maakt je CSS-bestanden kleiner dan met behulp van eigenschappen met een lange hand .
Maar onthouden voor welke volgorde alle verschillende elementen voor alle verschillende eigenschappen in kunnen gaan, kan hoofdpijn zijn, vooral voor degenen die u mogelijk niet in elk ontwerp gebruikt.
Het bevat ook informatie over de standaard eigenschapswaarden, dus als u ervoor kiest een eigenschap weg te laten, weet u wat deze waarde zal aannemen.
Kleur hulpmiddelen
Het kiezen van de juiste kleuren voor uw websiteontwerpen kan een van de belangrijkste beslissingen zijn die u in het gehele ontwerpproces maakt.
Soms komen we in een ontwerp met een vooraf gedefinieerd kleurenschema (zoals wanneer een klant al merkkleuren heeft vastgesteld) of weten we meteen welke kleuren we willen gebruiken. Andere keren zijn we misschien vrij om ons eigen palet voor het ontwerp te maken.
Als u vanuit het niets een kleurenschema maakt, kunnen kleurenpaletgenerators en -galerijen een enorme hulp zijn.
Als u al een kleurenschema hebt, zijn er nog andere overwegingen waarmee rekening moet worden gehouden, zoals toegankelijkheid en welke kleuren op welke delen van de site moeten worden gebruikt.
Maar er zijn ook tools om die beslissingen te helpen. Hieronder vindt u enkele van de beste tools die beschikbaar zijn voor het beheren van kleurenschema's.
Kleurenblind webpaginafilter
Overwegende dat ergens tussen 7 en 10% van de mannelijke bevolking een zekere mate van kleurenblindheid heeft (volgens Wikipedia ), ervoor te zorgen dat uw sites nog steeds toegankelijk zijn voor die bevolking is geen slecht idee.
Deze tool laat zien hoe je ontwerpen eruit zullen zien voor mensen met een aantal verschillende kleurenblindheidsstoornissen. U kunt de resultaten voor uw hele site bekijken of afbeeldingen van het resultaat uitsluiten.
Ze bieden ook een koppeling naar een kleurenblindveilig kleurselectietool.
Vind bijpassende kleuren voor uw website
Dit kleurenpalet vindt de kleuren die coördineren met elke kleur die u selecteert .
U kunt een kleur kiezen uit de vooraf gedefinieerde opties of een hexadecimale of RGB-kleurwaarde invoeren om coördinerende paletten te krijgen op basis van complementaire, gesplitste complementaire, triade, tetrade, analoge of monotone kleurenschema's.
De geleverde kleuren hebben echter allemaal dezelfde intensiteit, wat betekent dat dit eigenlijk slechts een startpunt is voor het maken van kleurenpaletten voor uw ontwerpen.
Kleurenpalet-generator
Foto's zijn geweldige plekken om te zoeken naar ontwerpinspiratie. Deze tool kan een kleurenpalet maken van elke gewenste afbeelding (voer gewoon de URL van de afbeelding in).
Het biedt zowel saaie als levendige kleurenschema's op basis van de afbeelding die u levert.
Het online kunnen gebruiken van elke afbeelding maakt deze tool echt waardevol, omdat het de tijd bespaart om een afbeelding te moeten downloaden en vervolgens opnieuw naar een site als deze moet uploaden om een kleurenschema te genereren (of downloaden en vervolgens openen in een grafisch programma om handmatig te maken een kleurenpalet).
Kuler
De Kuler kleurenpaletgalerij van Adobe is een van de betere galerijen in kleurenpalet die er zijn.
U kunt meer dan 10.000 kleurenpaletten door Kuler-gebruikers bladeren of doorzoeken en vervolgens uw favorieten downloaden of opslaan voor latere referentie.
Kuler bevat ook een heel krachtige tool voor het maken van paletten waarmee u kleuren kunt selecteren met schuifregelaars of op basis van HSV-, RGB-, CMYK-, LAB- of hex-kleurwaarden.
Als u een kleur als basiskleur instelt, worden de omliggende kleuren als aanvulling gebruikt.
COLOURlovers
COLOURlovers is een andere geweldige galerij in kleurenschema .
U kunt zoeken in meer dan 800.000 kleurenschema's (op basis van 20 schema's per pagina en 43.200 pagina's met schema's). Naast paletten kunt u ook afzonderlijke kleuren en patronen zoeken op basis van paletten.
Een van de handigste functies van COLOURlovers is echter de tool voor het maken van patronen, waarmee u uw eigen patronen kunt maken op basis van een vooraf gedefinieerd kleurenschema of een patroon dat u on the fly maakt.
Zorg er wel voor dat u contact opneemt met de copyright-eigenaar van het patroon als u er een wilt gebruiken voor commerciële doeleinden.
100 willekeurige kleuren 2.0
Als je echt geen idee hebt waar je moet beginnen met het kleurenschema voor een van je ontwerpen, is 100 willekeurige kleuren 2.0 misschien wel het juiste hulpmiddel.
Het doet precies wat de naam zegt: je krijgt 100 willekeurige kleuren, inclusief hun hex-waarden .
En als je niets vindt in de eerste 100, kun je gewoon op Vernieuwen drukken en een hele nieuwe set krijgen!
Individuele elementhulpmiddelen
Er zijn veel generatoren die het snel en eenvoudig maken om knoppen, achtergronden, formulieren en andere ontwerpelementen voor uw sites te maken.
Sommigen van hen zijn gewoon gimmicky, maar anderen zijn een grote hulp als je snel iets wilt maken zoals een Web 2.0-achtige knop of een standaard gestreepte achtergrond.
Form-building tools kunnen ook heel nuttig zijn, vooral als u wilt dat uw klanten een deel van hun eigen admin werk op hun formulieren kunnen doen.
Ik ken tenminste een paar ontwerpers die deze tools gebruiken, zodat ze geen aangepaste, vereenvoudigde interface hoeven te bouwen voor toegang tot de formulierdatabase of voor het bewerken van formulieren voor hun klanten. Ze zijn een geweldige tijdsbesparing, vooral voor het bouwen van meer gecompliceerde vormen.
Wufoo
Wufoo is een HTML-formulierbuilder die meer dan 80 formuliersjablonen en kleurenschema's biedt, terwijl u ook de volledige controle hebt om aangepaste formulieren voor uw klanten te maken.
De sjablonen maken het sneller en eenvoudiger om standaard webformulieren te maken (zoals registratiepagina's of contactformulieren).
Ingediende formulieren worden automatisch verzameld in een database die het voor uw klanten eenvoudig maakt om afzonderlijke items af te drukken, te e-mailen, te filteren, te zoeken en uit te voeren, zonder dat u een aangepaste interface hoeft te bouwen.
U kunt Wufoo zelfs gebruiken om online bestelformulieren te maken en te integreren met Authorize.net, PayPal of Google Checkout.
BgPatterns
Met BgPatterns kunt u tegelpatronen maken met behulp van een groot aantal verschillende herhalingselementen.
U kunt uw achtergrondkleur, canvastextuur en de hoek van het patroon selecteren. U kunt de achtergronden die u hebt gemaakt toepassen op de BgPatterns-site om een voorbeeld te bekijken en vervolgens de afbeelding downloaden nadat u deze hebt voltooid.
U kunt ook bladeren door patronen die door anderen zijn gemaakt. Het is de snelste en eenvoudigste manier om eenvoudige, betegelde achtergronden te maken.
Stripe Generator 2.0
Het maken van herhalende strepen voor een website is tijdrovend.
Natuurlijk kun je sjablonen maken voor algemene strepen die je zou kunnen gebruiken, maar wat als je een punaise wilt voor één project, een brede streep voor een andere en een voor een vreemde hoek voor een andere? Al snel lijken die sjablonen het niet meer te snijden.
De Stripe Generator 2.0 biedt strepen in verschillende hoeken , in vrijwel elke breedte die u kiest, met of zonder schaduwen en hellingen en met behulp van de gewenste hex-kleuren.
Ze bevatten ook een stripgalerij waar u kunt zien wat anderen hebben gebouwd.
Tartan Maker
Als het maken van gestreepte achtergronden tijdrovend is, is het maken van geruite achtergronden een enorme hoofdpijn.
Dat is waar Tartan Maker binnenkomt. Selecteer de garengrootte, de kleuren voor uw patroon en de hoek en het maakt het automatisch.
U kunt een voorbeeld van uw ontwerpen op het volledige scherm bekijken en vervolgens het bestand downloaden.
Pixelknete's achtergrond-dotter
Deze achtergrondgenerator creëert een moderne gestippelde achtergrond met steeds kleinere punten terwijl ze de pagina aflopen.
U kunt maximaal twee puntkleuren en twee kleuren selecteren voor een verloopachtergrond (of slechts één kleur voor een effen achtergrond).
U kunt ook de hoogte van het patroon opgeven (de standaardwaarde is 700 pixels). De gemaakte achtergrond herhaalt op een horizontale as.
Als knopgenerator
Als u de slecht vertaalde tekst op deze pagina negeert, ziet u dat dit een van de soepelste knopgeneratoren is die beschikbaar is . Voeg tekst, verschillende hellingen, strepen, afbeeldingen en meer toe aan uw knoppen.
U kunt de knop- en randkleuren selecteren, de algemene grootte (met behulp van schuifregelaars of tekstvelden) en de randdikte en hoe afgerond de knop is.
Als u strepen opneemt, krijgt u veel opties, zoals kleur, transparantie, dikte, de ruimte tussen de strepen en de hoek.
Dit is absoluut de meest complete knopgenerator die er is.
Button Maker
Met deze knopgenerator kunt u gemakkelijk tweekleurige 80 × 15 pixelknoppen maken .
Selecteer de knopkleuren, de randkleuren, waar de splitsing tussen de vakken zou moeten zijn en voer de tekst voor elke kant in, en dat is alles!
Dit is een van die tools die niet is vol met functies, maar doet wat het was ontworpen om perfect en naadloos te doen.
AJAX en JavaScript-hulpmiddelen
We weten allemaal dat Ajax heel wat functionaliteit aan uw site kan toevoegen. Of u nu een eenvoudige afbeeldingengalerij wilt toevoegen , een interactief contactformulier wilt maken of een hele webapp wilt maken , Ajax is er om u te helpen.
Maar vanaf nul beginnen kan ontmoedigend zijn, vooral als je relatief nieuw bent bij Ajax. En zelfs als je jezelf als een professional beschouwt, kan het nog steeds tijdrovend zijn om te beginnen met een schone lei voor al je projecten.
Er zijn genoeg tools om je Ajax-ontwikkeling te versnellen. Van scriptverzamelingen tot frameworks tot specifieke elementgeneratoren, waarschijnlijk is er iets beschikbaar in de onderstaande hulpprogramma's dat u een efficiëntere ontwikkelaar maakt.
Ajaxload
Ajaxload is een generator om Ajax- laderpictogrammen te maken . Er zijn een heleboel verschillende pictogrammen om uit te kiezen.
Het enige dat u hoeft te doen, is de voorgrond- en achtergrondkleuren in te stellen (of een transparante achtergrond te kiezen) en vervolgens het gegenereerde script te downloaden.
Snel en eenvoudig, maar het bespaart u een paar minuten (of langer) aan codering!
Mini AJAX
Mini Ajax is een galerij met downloadbare Ajax- en DHTML-scripts .
Het omvat alles, van modale vensters tot diavoorstellingen tot geavanceerdere scripts (zoals kalenders en hele projectbeheertools).
Het is een goed startpunt om individuele Ajax-elementen te vinden of zelfs om inspiratie op te doen.
Er zijn demo's beschikbaar voor veel van de scripts en ze zijn allemaal te downloaden vanaf hun oorspronkelijke bronnen.
MooTools
MooTools is een object-georiënteerd JavaScript-framework . Het is zeker niet bedoeld voor beginners, maar kan je toestaan om flexibele, krachtige Ajax-apps te schrijven die compatibel zijn met meerdere browsers.
Het voldoet ook aan de standaarden en is ongelooflijk goed gedocumenteerd.
Naast de core builder zijn er ook een heleboel plug-ins beschikbaar. MooTools kan worden gebruikt om alles te creëren, van eenvoudige afbeeldingsgalerijen tot complete gebruikersinterfaces.
jQuery
jQuery is een JavaScript-bibliotheek die een verscheidenheid aan JavaScript-functies vereenvoudigt .
Een van de beste onderdelen van deze specifieke tool is echter het aantal plug-ins dat al beschikbaar is voor jQuery.
Er zijn kant-en-klare plug-ins voor alles, van eenvoudige animaties tot formulieren en widgets tot geavanceerde elementen van de gebruikersinterface.
Er is waarschijnlijk al een plug-in gemaakt voor zo ongeveer alles wat je zou willen doen met JavaScript of Ajax, of op zijn minst een om te gebruiken als basis om je eigen te maken.
Script.aculo.us
Script.aculo.us is een JavaScript-gebruikersinterfacebibliotheek met een animatieframework, Ajax-besturingselementen, DOM-hulpprogramma's en meer .
Het wordt gebruikt door Apple, CNN, Basecamp en Ruby on Rails. Het is gebouwd op het Prototype Framework.
Er is uitgebreide documentatie beschikbaar in de Script.aculo.us-wiki, zodat u eenvoudig aan de slag kunt.
Online JavaScript Compression Tool
Het comprimeren van uw JavaScript-bestanden zorgt ervoor dat ze sneller laden, minder van uw bandbreedte opeten en minder ruimte innemen op uw server. Deze tool maakt compressie eenvoudiger.
Kopieer en plak uw JS-bestanden (of upload ze) naar deze tool en selecteer vervolgens of u wilt comprimeren met Minify of Packer.
Het spuugt automatisch schonere, efficiëntere code uit. Zorg ervoor dat u de resultaten grondig test en altijd een back-up van uw originele bestand bewaart.
JavaScript Beautifier
Als je JavaScript een beetje slordiger is dan je zou willen (of bijna onmogelijk te ontcijferen omdat het zo slecht geformatteerd is), voer het dan door deze verfraaiing om nette, zuivere, consistent geformatteerde scripts te krijgen die later gemakkelijker te lezen en te bewerken zijn .
De gebruikte instellingen zijn minimaal, maar u kunt kiezen hoeveel spaties u wilt gebruiken voor inspringingen, of u packers wilt detecteren en of u regeleinden wilt behouden.
Nogmaals, zorg ervoor dat je de definitieve code test en een back-up bij de hand hebt voor eventuele problemen in je nieuw verfraaide code.
Browsershots
Helaas geven verschillende browsers sites op enigszins verschillende manieren weer. Dit kan een enorme hoofdpijn zijn, vooral als uw klanten één browser gebruiken en u een geheel andere browser gebruikt.
Als ze dingen zien die niet op uw kant verschijnen (of omgekeerd), kan dit problemen aan beide kanten veroorzaken.
U kunt altijd meerdere browsers op uw computer installeren, maar a) dat is verspilling van schijfruimte en b) hoe zit het met browsers die niet beschikbaar zijn voor uw besturingssysteem? Dat is waar Browsershots komt binnen.
Je kunt kiezen uit vrijwel elke bestaande grote browser, inclusief obscure browsers zoals Minefield en Driekoningen.
BrowserShots toont u schermafbeeldingen van alleen de browsers die u hebt gekozen om te bekijken , dus u kunt er zoveel of zo weinig kiezen als u wilt.
Houd er rekening mee dat hoe meer browsers u kiest om te testen, hoe langer het duurt. De manier waarop BrowserShots is ingesteld, kunt u echter een bladwijzer maken voor de pagina en later terugkomen om uw resultaten te bekijken.
Firebug
Geen lijst met tools voor webdesigners is compleet zonder de Firebug Firefox-plug-in te vermelden .
Vaak gedacht als het enige meest waardevolle hulpmiddel in het arsenaal van een ontwerper , maakt Firebug het debuggen en bewerken van je code (of het nu JavaScript, CSS of HTML is) oneindig veel eenvoudiger.
U kunt uw CSS aanpassen in uw browser. Visualiseer hoe uw CSS-vakjes zijn uitgelijnd. Bewerk elk element op uw pagina rechtstreeks in uw browser.
Debug uw JavaScript en vind fouten sneller. En dat is slechts het oppervlak aan het krassen van wat Firebug kan doen.
Het is echt een must-have tool voor elke ontwerper die er is. Als je het eenmaal gebruikt, vraag je je af hoe je het ooit zonder hebt ontworpen.
Uitsluitend gecompileerd voor WDD door Cameron Chapman.
Welke tools gebruik je het meest? Welke andere tools gebruik je die we mogelijk hebben gemist?