Massive Zusammenstellung von Designer Tools
Webdesigner haben eine Fülle von Werkzeugen zur Verfügung, um alles zu tun, vom Organisieren ihrer Gedanken über ein bestimmtes Design bis hin zum Debuggen des endgültigen Designs.
Aber mit so vielen Werkzeugen da draußen, wie finden Sie heraus, welche wirklich nützlich sind und welche werden nur Ihre Zeit verschwenden?
Wir haben eine riesige Liste mit einigen der besten und nützlichsten Tools für Webdesigner zusammengestellt .
Absichtlich von der Liste weggelassen sind gängige Werkzeuge, die die meisten Designer wahrscheinlich bereits verwenden (wie Dreamweaver oder Panics Coda, Photoshop oder GIMP und ähnliche gängige Softwareprogramme, die so ziemlich jeder Designer bereits in seinem Toolkit hat).
Dies sind Werkzeuge, die Ihnen Zeit sparen, Sie zu einem effektiveren Designer machen, Ihren Designprozess vereinfachen oder beschleunigen oder Ihr Leben auf andere Weise vereinfachen.
Kompilierung von Offline-Tools
Die meisten Razzien nützlicher Webdesign-Tools konzentrieren sich nur auf Online-Tools.
Aber es gibt ein paar sehr nützliche Werkzeuge, die Sie verwenden können, um Ihre Optionen zu öffnen, wenn es um Design geht. Diese Dinge können bestimmte Aufgaben erleichtern, einschließlich der Arbeit mit unentschlossenen Kunden.
Grafiktabletts
Grafiktabletts (manchmal auch als Zeichentabletts, Grafikpads oder Digitalisiertabletts bezeichnet) sind ein unglaublich nützliches Werkzeug im Arsenal eines Web-Designers. Während die meisten Designer mit der Maus ziemlich geschickt zeichnen können, macht ein Tablet es viel einfacher und schneller.
Die meisten Tablets bestehen aus zwei grundlegenden Teilen: dem Tablet selbst und dem Stift (oder Stift). Viele kommen auch mit einem Puck (der ähnlich wie eine Maus arbeitet, aber auf dem Tablet selbst statt einem Mauspad oder Ihrem Schreibtisch). Die Hauptüberlegung für das Tablet ist die Größe, während der Stift die Druckempfindlichkeit hauptsächlich berücksichtigt.
Die Tabletten selbst sind in Größen von etwa 4 "x 5" bis zu 19 "x 13" erhältlich. Je größer das Tablet, desto teurer wird es natürlich. In den meisten Fällen können Webdesigner mit Tablets am unteren Ende des Spektrums davonkommen, wenn sie nicht viel Illustrationsarbeit planen (und selbst dann ist es durchaus möglich, qualitativ hochwertige Ergebnisse von einem mittelgroßen Tablet zu erhalten).
Und kleinere Tablets sind portabler, wodurch sie für Designer praktisch sind, die nicht immer an ihren Schreibtisch gebunden sein wollen.
Die Stifte sind druckempfindlich, um eine realistischere Erfahrung zu ermöglichen . Die üblichen Empfindlichkeiten reichen von 256 Druckstufen bis zu 2.048 Stufen. Je höher die Empfindlichkeitsstufe, desto mehr fühlt es sich an, als würden Sie einen Stift und Papier verwenden.
Beliebte Grafik-Tablets
Wacom ist wahrscheinlich der beliebteste Tablet-Hersteller da draußen. Sie haben vier verschiedene Produktlinien: Bamboo (mit ihren Bamboo Craft und Bamboo Fun Produkten), die sich an Verbraucher und Hobbyisten richten; Graphire, ihr Bluetooth-Tablet; Intuos, ihre Mittelklasse-Linie für kreative Profis; und Cintiq, ihre High-End-Linie, die einen Monitor für ein "Stift-auf-Bildschirm" -Erlebnis in das Tablet integriert (eines sogar mit einem 21-Zoll-Bildschirm).
Aiptek stellt eine Reihe kostengünstiger Tablets her, die bei nur 50 US-Dollar beginnen. Sie bieten ein 12,1-Zoll-USB-Tablet für weniger als 130 US-Dollar (verglichen mit 469 US-Dollar für ein Wacom-Tablet vergleichbarer Größe). Das interessanteste Angebot von Aiptek ist jedoch die My Note Premium (170 US-Dollar), mit der Sie mit einem echten Stift auf ein Blatt Papier auf dem Tablet zeichnen und alles aufzeichnen, was Sie tun. Es gibt genug Speicher für bis zu 100 geschriebene Seiten und es ist mit einem SD-Kartensteckplatz zur Erweiterung der Kapazität ausgestattet. Und wenn Sie es nur für Notizen bei einem Meeting verwenden möchten, können Sie es mit 4 AAA-Batterien betreiben, so dass Sie Ihren Laptop nicht mitnehmen müssen.
UC-Logik ist der andere große Grafiktabletthersteller. Ihre Produkte liegen im mittleren Preisbereich für Tablets, wobei ein 9 "x12" Tablet (der PF1209-Pro) bei etwa 250 US-Dollar liegt. Sie haben Tabletten zur Verfügung, die bei nur US $ 40 beginnen.
Moodboards
Mood Boards (auch Inspiration Boards genannt) sind ein großartiges Werkzeug für Designer, die mit Kunden arbeiten, die keine klare Vorstellung davon haben, was sie wollen.
Moodboards haben oft die Form einer Collage , die Gestaltungselemente für das Projekt enthält. Beispiele für Elemente, die enthalten sind, können Typografie-Beispiele, Farbschemata, spezifische grafische Beispiele oder allgemeine "Stimmungs" -Elemente sein, die die Vision des Designers widerspiegeln, um den Eindruck zu erwecken, den die Site den Besuchern geben sollte.
Moodboards werden oft im Bereich der Innenarchitektur verwendet, um Kunden Ideen für die Renovierung eines Raumes oder eines ganzen Hauses zu zeigen. Sie werden auch in der Modebranche verwendet, um als Inspiration und Richtung für eine Linie oder eine Saison zu dienen. Aber für Grafik- und Webdesigner sind sie genauso wertvoll.
Abhängig von der Art des Clients, mit dem Sie arbeiten, erstellen Sie möglicherweise eine lose Collage mit Mustern, die sich organisch überschneiden . Wenn sich Ihr Kunde in einem kreativen Bereich befindet oder mit dem kreativen Prozess vertraut ist, kann diese Art von Moodboard sehr gut funktionieren.
Wenn Ihr Kunde andererseits an eine eher unternehmerische oder formelle Umgebung gewöhnt ist, ist die Erstellung eines besser organisierten Moodboards wahrscheinlich besser geeignet.
Verwenden Sie Header, um das Farbschema, spezifische Designelemente, Typografie und andere Teile Ihres Moodboards voneinander zu trennen, um dem Ganzen eine Struktur zu geben.
Wenn Sie mehrere Ideen für die Richtung haben, in die ein Projekt gehen kann, können Sie mit ein paar verschiedenen Moodboards Kundenfeedback erhalten und Ihre eigenen Ideen weiter verfeinern.
Erstellen Sie zwei oder drei verschiedene Beispiele, um einen Client zu zeigen, kann es nützlich sein, weitere Anweisungen von Ihrem Kunden zu erhalten, ohne Stunden oder Tage auf einem tatsächlichen Site-Modell zu verbringen, nur um zu erfahren, dass es nichts ist, wonach sie suchen.
Und das ist wirklich der Hauptvorteil der Verwendung von Moodboards in Ihrem Designprozess. Ein Mood Board benötigt in der Regel viel weniger Zeit als ein Site Mock-Up .
Moodboards zu verwenden, um weiteres Feedback von einem unentschlossenen oder unsicheren Kunden zu erhalten, bevor Stunden zu einem Design verschrieben werden, das nur abgelehnt wird, macht alle glücklicher.
Ressourcen zum Erstellen eigener Moodboards
Wir haben einen Artikel veröffentlicht Warum Moodboards wichtig sind Ende letzten Jahres. Der Artikel behandelt die Grundlagen zum Erstellen von Moodboards und warum Sie sie verwenden möchten. Es ist ein guter Ausgangspunkt.
Von der Couch hat ein Video-Tutorial aufgerufen Ein effektives Mood Board erstellen . Es ist ungefähr sieben Minuten lang und deckt die Grundlagen der Erstellung eines digitalen Moodboards für Projekte ab.
Flickr hat ein Inspirationstafeln Pool, der Stimmung und Inspiration Board Bilder aus verschiedenen Design-Disziplinen sammelt. Es ist ein guter Ort, um etwas Inspiration zu finden oder einfach nur Beispiele zu sehen, wie andere sich ihren Moodboards nähern.
Zusammenstellung von Online-Tools
Online-Web-Design-Tools sind ein Zehncentstück. Das Sortieren durch sie, um diejenigen zu finden, die wirklich herausragen, kann scheinen, mehr Zeit zu nehmen, als Sie jemals erwarten würden, zu sparen, indem Sie sie verwenden.
Aber unten haben wir die besten Werkzeuge für Typografie, CSS, AJAX und Javascript, Farbauswahl und Werkzeuge gefunden, um das Erstellen einzelner Seitenelemente zu vereinfachen.
Auch dies sind einige der besten Tools, die für das, was sie tun, zur Verfügung stehen, so dass Sie nicht eine Menge Zeit damit verschwenden müssen, Dutzende verschiedener Tools zu testen.
Typografie-Tools
Es gibt eine Vielzahl von Online-Tools zum Experimentieren mit der Typografie auf Ihren Website-Designs. Einige erlauben es Ihnen, verschiedene Schriftarten Seite an Seite zu vergleichen. Einige lassen Sie nur einen Stil auf einmal probieren. Und wieder andere zeigen Ihnen verschiedene empfohlene Font-Stacks.
Weitere nützliche Werkzeuge für die Web-Typografie sind Apps zum Konvertieren von Pixelgrößen in em-Einheiten und eine Vielzahl von Lorem Ipsum- und anderen Dummy-Textgeneratoren. Alles in allem gibt es Typografie-Tools für nahezu jeden möglichen Bedarf, den ein Webdesigner haben könnte.
Typentester
Mit Typetester können Sie bis zu drei Schriftarten nebeneinander vergleichen .
Sie können eine beliebige Schriftart von Ihrem eigenen Computer auswählen oder Schriftarten aus dem Menü allgemeiner Systemschriftarten und websicherer Schriftarten verwenden. Außerdem können Sie die Optionen Farbe, Vorspann, Tracking, Größe und andere Stile ändern.
Es ist ein großartiges Werkzeug, wenn Sie entscheiden müssen, welche Schriftarten für verschiedene Elemente verwendet werden sollen oder sogar eigene Schriftstapel kompiliert werden sollen (da Sie damit zahlreiche Schriftarten nebeneinander vergleichen können).
CSS-Typ festgelegt
Mit CSS Type Set können Sie jeden zu ändernden Text in eine Box einfügen, Schieberegler anpassen und andere Formatierungsoptionen auswählen und dann das generierte CSS kopieren.
Es ist eine schnelle und einfache Möglichkeit, jeden benötigten Text von Absätzen bis zu Kopf-Tags zu formatieren .
Zu den Optionen gehören Textfarbe, Vorspann, Nachverfolgung, Grundlinienverschiebung, Textdekorationen, Ausrichtung und mehr.
Bessere CSS-Font-Stacks
Obwohl es sich hierbei nicht um ein traditionelles Tool handelt, bietet dieser Artikel eine Reihe von Alternativen zu den Standard-Font-Stacks, die normalerweise in CSS verwendet werden.
Dieser Artikel bietet nicht nur Richtlinien zum Erstellen eigener Schriftenstapel, sondern bietet auch eine große Auswahl an Probenstapeln, die Sie verwenden können . Eine ausgezeichnete Quelle, wenn Sie ein wenig über Ihre Typografie-Optionen ratlos sind.
HTML-Ipsum
Die meisten Lorem Ipsum Generatoren online geben Ihnen einen Block Text und nichts mehr. Und das ist großartig, wenn Sie nur versuchen, etwas Platz zu füllen.
Aber HTML-Ipsum gibt Ihnen Text, der bereits mit einfachen HTML-Tags (Absatz, Kopf, ungeordnete Listen usw.) markiert wurde , so dass Sie sehen können, wie alle verschiedenen Elemente miteinander interagieren. Es ist ein enormer Zeitgewinn.
PXtoEm.com
PXtoEM.com macht genau das, was es sagt: Es konvertiert pixelgroße Schriftarten in em-große Schriftarten .
Die Möglichkeiten, die es Ihnen bietet, machen es jedoch zu einem wirklich beeindruckenden und flexiblen Werkzeug.
Sie können die Schriftgröße für den Basiskörper auswählen und Conversions basierend auf der Standardschriftgröße Ihres Browsers erhalten. Wenn Sie beispielsweise den Prozentsatz für die Basisschriftart auf 62,5% festlegen, sodass eine 10-Pixel-Größe gleich 1em ist, können Sie dies als auswählen Ihre Standardgröße).
Typchart
Mit Typechart können Sie verschiedene websichere Schriftarten durchsuchen und sehen, wie sie auf Windows- und Mac-Systemen aussehen .
Sie können Schriftarten anhand ihrer Größe finden, unabhängig davon, ob es sich um serifenlose oder serifenlose Schriften oder um Hervorhebungen handelt. Es enthält nur websichere Schriftarten, daher sind die angebotenen Optionen begrenzt. Aber für grundlegende Typografie ist es ein großartiges Werkzeug, das eine Menge Inspiration liefern kann.
Und Sie können das CSS für jeden Stil kopieren und einfügen, ohne die Seite zu verlassen.
Flipping Typisch
Mit "Typisch spiegeln" können Sie gängige Schriftarten auf Ihrem Computer in einem Rasterformat anzeigen , um die Auswahl der richtigen Schriftart für Ihr aktuelles Projekt zu erleichtern.
Dies ist ein großartiges Tool, wenn Sie nicht nur die standardmäßigen websicheren Schriftarten verwenden und mehr Optionen sehen möchten.
Es ist besonders nützlich, wenn Sie nicht durch ein paar hundert Schriftarten waten möchten, die auf Ihrem Computer installiert sind und nur die populäreren sehen möchten.
CSS-Werkzeuge
CSS ist im Webdesign fast so wichtig wie HTML. Und es gibt Hunderte von Tools, die Ihr CSS sauberer, schlanker, effektiver und generell besser machen. So sparen Sie Zeit und Aufwand, um Ihre Stylesheets manuell zu perfektionieren.
Das Komprimieren Ihrer Stylesheets, die die Ladezeit für Ihre Websites beschleunigen können, wird durch die Verwendung eines automatischen Online-Tools vereinfacht. Es gibt Tools, um doppelte Deklarationen zu eliminieren.
Cheat-Sheets halten die Grundelemente von CSS für Sie bereit, wenn der Kaffee am Morgen noch nicht ganz eingefahren ist und Sie sich schwer daran erinnern können, in welcher Reihenfolge Ihr Shorthand-Markup sein sollte.
Während die meisten dieser Tools eine gute Arbeit bei der Bereinigung Ihres CSS leisten, stellen Sie sicher, dass Sie immer ein Backup Ihres Originals erstellen und das generierte Endprodukt testen. Manchmal entfernt ein Reiniger oder Kompressor etwas, das notwendig war, nachdem Sie Ihre Site zerstört haben.
CSS SuperScrub
CSS SuperScrub soll die Komplexität und Größe Ihrer Stylesheets erheblich reduzieren .
Es beseitigt redundante Aufrufe, entfernt nicht benötigte Inhalte und fasst verbleibende Elemente zusammen, um die Bearbeitung später zu vereinfachen.
Es gibt einige Optionen, darunter eine, um alle Leerräume in Ihrem Stylesheet zu entfernen, oder um vor dem Öffnen von Klammern eine neue Zeile einzufügen.
Code-Verschönerung
Code Beautifier optimiert und bereinigt Ihre CSS-Dateien .
Es bietet eine Vielzahl von Optionen zum Formatieren Ihres Texts, z. B. Farben komprimieren, Eigenschaften sortieren, alle Selektoren in Kleinbuchstaben konvertieren, Ihre Eigenschaften in Groß- oder Kleinbuchstaben konvertieren und die gewünschte Komprimierungsstufe auswählen.
Sie können Ihr CSS entweder kopieren und in die App einfügen oder eine URL für Ihre CSS-Datei angeben.
CSS-Laufwerk
CSS Drive ist ein einfacher CSS-Komprimierer .
Sie können festlegen, wie komprimiert Ihr CSS sein soll (leicht, normal oder sehr kompakt) und wie es mit Kommentaren umgehen soll (ob Sie es ausstreichen wollen).
Es gibt auch einen erweiterten Modus, der Ihnen viele weitere Optionen bietet, z. B. das Entfernen von Leerzeichen um bestimmte Zeichen, das Entfernen von Tabs, das Entfernen neuer Zeilen und vieles mehr.
CSS-Redundanzprüfung
Manchmal können Sie beim Entwerfen einer Website CSS-Selektoren einrichten, die nicht zu Ihrem finalen Markup führen.
Diese Selektoren machen Ihre Stylesheets nur sperriger und schwerer zu bearbeiten.
CSS Redundancy Checker geht durch Ihr Stylesheet und jede Ihrer HTML-Seiten, um zu sehen, welche Selektoren nicht verwendet werden, und entfernt sie dann .
Es ist ein großartiges Tool, wenn Sie der Meinung sind, dass Sie unnötige Selektoren in Ihren Stylesheets haben.
CSS-Eigenschaftenindex
Der CSS-Eigenschaftenindex listet alle CSS-Eigenschaften alphabetisch auf .
Wenn Sie auf eine der enthaltenen Eigenschaften klicken, gelangen Sie zu einer Definition und Informationen zum Standardwert, zu zulässigen Werten und dazu, ob er von einer übergeordneten Eigenschaft erbt.
CSS-Kurzanleitung
Durch die Verwendung von CSS-Kurzschreibweisen werden Ihre CSS-Dateien kleiner als bei Verwendung von Longhand-Eigenschaften .
Aber sich zu erinnern, in welcher Reihenfolge alle verschiedenen Elemente für die verschiedenen Eigenschaften verwendet werden, kann Kopfschmerzen bereiten, besonders für diejenigen, die Sie vielleicht nicht bei jedem einzelnen Entwurf verwenden.
Es enthält auch Informationen zu den Standardeigenschaftswerten. Wenn Sie also eine Eigenschaft weglassen, wissen Sie, wie der Wert angenommen werden soll.
Farbwerkzeuge
Die Auswahl der richtigen Farben für Ihre Website-Designs kann eine der wichtigsten Entscheidungen sein, die Sie im gesamten Designprozess treffen.
Manchmal kommen wir zu einem Design mit einem vordefinierten Farbschema (z. B. wenn ein Kunde bereits Markenfarben eingerichtet hat) oder wissen sofort, welche Farben wir verwenden möchten. Andere Male könnten wir frei sein, unsere eigene Palette für das Design zu schaffen.
Wenn Sie ein Farbschema von Grund auf neu erstellen, können Farbpalettengeneratoren und -galerien eine große Hilfe sein.
Wenn Sie bereits ein Farbschema haben, müssen Sie weitere Überlegungen berücksichtigen, z. B. die Barrierefreiheit und welche Farben für welche Teile der Site verwendet werden sollen.
Aber es gibt auch Tools, die bei diesen Entscheidungen helfen. Im Folgenden finden Sie einige der besten verfügbaren Tools zum Verwalten von Farbschemata.
Colorblind Webseitenfilter
Bedenkt man, dass irgendwo zwischen 7 und 10% der männlichen Bevölkerung einen gewissen Grad an Farbenblindheit aufweist (nach Wikipedia ), sicherzustellen, dass Ihre Websites für diese Population noch zugänglich sind, ist keine schlechte Idee.
Dieses Tool zeigt Ihnen, wie Ihre Designs für Menschen mit einer Reihe von verschiedenen Farbenblindheitsstörungen aussehen. Sie können die Ergebnisse für Ihre gesamte Website anzeigen oder Bilder aus dem Ergebnis ausschließen.
Sie bieten auch eine Verknüpfung zu einem farbblindsicheren Farbauswahlwerkzeug.
Finden Sie passende Farben für Ihre Website
Dieses Farbpalette-Werkzeug sucht nach Farben, die mit einer von Ihnen ausgewählten Farbe übereinstimmen .
Sie können entweder eine Farbe aus ihren vordefinierten Optionen auswählen oder einen Hex- oder RGB-Farbwert eingeben, um koordinierende Paletten zu erhalten, die auf komplementären, geteilten komplementären, Triade-, Tetrade-, analogen oder monotonen Farbschemata basieren.
Die zur Verfügung gestellten Farben haben alle eine ähnliche Intensität, was bedeutet, dass dies nur ein Ausgangspunkt für die Erstellung von Farbpaletten für Ihre Designs ist.
Farbpalettengenerator
Fotos sind großartige Orte, um nach Design-Inspiration zu suchen. Dieses Werkzeug kann eine Farbpalette aus jedem beliebigen Bild erstellen (geben Sie einfach die URL des Bildes ein).
Es bietet sowohl stumpfe als auch lebendige Farbschemata basierend auf dem von Ihnen bereitgestellten Bild.
Die Möglichkeit, ein beliebiges Bild online zu verwenden, macht dieses Werkzeug wirklich wertvoll, da es Zeit spart, ein Bild herunterzuladen und dann auf eine Website wie dieses zu laden, um ein Farbschema zu erstellen (oder herunterzuladen und dann in einem Grafikprogramm zu öffnen) eine Farbpalette).
Kuler
Adobes Kuler-Farbpaletten-Galerie ist eine der besseren Farbpaletten-Galerien .
Sie können mehr als 10.000 von Kuler-Benutzern übermittelte Farbpaletten durchsuchen oder durchsuchen und Ihre Favoriten anschließend herunterladen oder speichern.
Kuler enthält auch ein sehr leistungsfähiges Paletten-Erstellungstool, mit dem Sie Farben mit Schiebereglern oder basierend auf HSV-, RGB-, CMYK-, LAB- oder Hex-Farbwerten auswählen können.
Wenn Sie eine Farbe als Grundfarbe festlegen, ändern sich die umgebenden Farben.
COLOURLovers
COLOURlovers ist eine andere großartige Farbschema-Galerie .
Sie können mehr als 800.000 Farbschemata durchsuchen (basierend auf 20 Schemen pro Seite und 43.200 Seiten von Schemen). Neben Paletten können Sie auch einzelne Farben und Muster anhand von Paletten suchen.
Eine der nützlichsten Funktionen von COLOURlovers ist jedoch das Mustererstellungs-Tool, mit dem Sie eigene Muster erstellen können, die entweder auf einem vordefinierten Farbschema basieren oder das Sie im Handumdrehen erstellen.
Stellen Sie sicher, dass Sie sich an den Urheberrechtsinhaber des Musters wenden, wenn Sie eines für kommerzielle Zwecke verwenden möchten.
100 zufällige Farben 2.0
Wenn Sie wirklich keine Ahnung haben, wo Sie mit dem Farbschema für eines Ihrer Designs beginnen sollen, ist 100 Random Colors 2.0 genau das richtige Werkzeug.
Es tut genau das, was der Name sagt: präsentiert Ihnen 100 zufällige Farben, einschließlich ihrer Hex-Werte .
Und wenn Sie in den ersten 100 nichts finden, können Sie einfach auf "Aktualisieren" klicken und ein ganz neues Set erhalten!
Einzelne Elementwerkzeuge
Es gibt viele Generatoren, mit denen Sie schnell und einfach Schaltflächen, Hintergründe, Formulare und andere Designelemente für Ihre Websites erstellen können.
Einige von ihnen sind nur Gimmick, aber andere sind eine große Hilfe, wenn Sie einfach etwas wie eine Web 2.0-Schaltfläche oder einen einfachen gestreiften Hintergrund erstellen möchten.
Formulare zur Formularerstellung können ebenfalls sehr hilfreich sein, insbesondere wenn Sie möchten, dass Ihre Kunden eigene Verwaltungsaufgaben in ihren Formularen ausführen können.
Ich kenne mindestens ein paar Designer, die diese Tools verwenden, damit sie keine benutzerdefinierte, vereinfachte Schnittstelle für den Zugriff auf die Formulardatenbank oder für die Bearbeitung von Formularen für ihre Kunden erstellen müssen. Sie sparen Zeit, besonders beim Erstellen komplizierterer Formen.
Wufu
Wufoo ist ein HTML-Formularersteller, der mehr als 80 Formularvorlagen und Farbschemata bietet und Ihnen gleichzeitig die volle Kontrolle über die Erstellung benutzerdefinierter Formulare für Ihre Kunden ermöglicht.
Die Vorlagen erleichtern das Erstellen von Standard-Webformularen (z. B. Registrierungsseiten oder Kontaktformulare).
Übermittelte Formulare werden automatisch in einer Datenbank gesammelt, die es Ihren Kunden erleichtert, einzelne Einträge zu drucken, per E-Mail zu versenden, zu filtern, zu suchen und andere erweiterte Funktionen auszuführen, ohne dass Sie eine benutzerdefinierte Benutzeroberfläche erstellen müssen.
Sie können sogar Wufoo verwenden, um Online-Bestellformulare zu erstellen und sie mit Authorize.net, PayPal oder Google Checkout zu integrieren.
BgMuster
Mit BgPatterns können Sie gekachelte Muster mit einer Vielzahl verschiedener sich wiederholender Elemente erstellen .
Sie können Ihre Hintergrundfarbe, Leinwandtextur und den Winkel des Musters auswählen. Sie können die von Ihnen erstellten Hintergründe auf die BgPatterns-Site anwenden, um eine Vorschau anzuzeigen, und anschließend das Bild herunterladen, sobald Sie es fertig gestellt haben.
Sie können auch nach Mustern suchen, die von anderen erstellt wurden. Es ist der schnellste und einfachste Weg, einfache, gekachelte Hintergründe zu erstellen.
Streifengenerator 2.0
Das Erstellen von sich wiederholenden Streifen für eine Website ist zeitaufwendig.
Sicher, Sie können Vorlagen für gängige Stripes erstellen, die Sie verwenden könnten, aber was ist, wenn Sie einen Pin-Stripe für ein Projekt, einen breiten Stripe für einen anderen und einen für einen anderen in einem ungeraden Winkel wünschen? Bald scheinen diese Vorlagen nicht mehr zu schneiden.
Der Stripe Generator 2.0 bietet Streifen in einer Vielzahl von Winkeln , in nahezu jeder gewünschten Breite, mit oder ohne Schatten und Farbverläufen und mit allen Hexfarben, die Sie möchten.
Sie enthalten auch eine Stripe-Galerie, wo Sie sehen können, was andere gebaut haben.
Tartan Maker
Wenn das Erstellen von gestreiften Hintergründen zeitaufwendig ist, ist das Erstellen von karierten Hintergründen ein großer Kopfschmerz.
Hier kommt der Tartan Maker ins Spiel. Wählen Sie die Garngröße, die Farben für Ihr Muster und den Winkel und es wird automatisch erstellt.
Sie können Ihre Entwürfe im Vollbildmodus anzeigen und dann die Datei herunterladen.
Pixelknete's Hintergrund Dotter
Dieser Hintergrundgenerator erzeugt einen modernen gepunkteten Hintergrund mit progressiv kleineren Punkten, wenn er sich die Seite entlang bewegt.
Sie können bis zu zwei Punktfarben und zwei Farben für einen Hintergrund mit Farbverlauf auswählen (oder nur eine einzelne Farbe für einen durchgehenden Hintergrund).
Sie können auch die Höhe des Musters angeben (der Standardwert ist 700 Pixel). Der erzeugte Hintergrund wird auf einer horizontalen Achse wiederholt.
Als Knopfgenerator
Wenn Sie den schlecht übersetzten Text auf dieser Seite ignorieren, werden Sie feststellen, dass dies einer der weichsten verfügbaren Schaltflächengeneratoren ist . Fügen Sie Ihren Schaltflächen Text, verschiedene Verläufe, Streifen, Bilder und mehr hinzu.
Sie können die Schaltflächen- und Rahmenfarben, die Gesamtgröße (mithilfe von Schiebereglern oder Textfeldern) und die Randstärke sowie die abgerundete Schaltfläche auswählen.
Wenn Sie Streifen verwenden, erhalten Sie viele Optionen, einschließlich Farbe, Transparenz, Dicke, Abstand zwischen Streifen und Winkel.
Dies ist definitiv der umfassendste Knopfgenerator da draußen.
Button Maker
Mit diesem Schaltflächengenerator können Sie problemlos zweifarbige 80 × 15-Pixel-Schaltflächen erstellen .
Wählen Sie die Schaltflächenfarben, die Rahmenfarben, wo die Aufteilung zwischen den Boxen sein soll, und geben Sie den Text für jede Seite ein, und das war's!
Dies ist eines dieser Tools, das nicht mit Funktionen ausgestattet ist, sondern das tut, wofür es perfekt und nahtlos entworfen wurde.
AJAX- und JavaScript-Tools
Wir alle wissen, dass Ajax Ihrer Website eine Menge Funktionalität hinzufügen kann. Ob Sie eine einfache Bildergalerie, ein interaktives Kontaktformular oder eine komplette Webanwendung erstellen möchten, Ajax hilft Ihnen dabei.
Aber von Grund auf neu anzufangen, kann entmutigend sein, besonders wenn Sie Ajax relativ neu sind. Und selbst wenn Sie sich selbst als Profi betrachten, kann es immer noch zeitaufwendig sein, mit einem leeren Blatt für jedes Ihrer Projekte zu beginnen.
Es gibt viele Tools, um Ihre Ajax-Entwicklung zu beschleunigen. Von Skriptsammlungen über Frameworks bis hin zu spezifischen Elementgeneratoren ist wahrscheinlich etwas in den folgenden Tools verfügbar, das Sie zu einem effizienteren Entwickler macht.
Ajaxload
Ajaxload ist ein Generator zum Erstellen von Ajax Loader Icons . Es gibt eine Menge verschiedener Symbole zur Auswahl.
Sie müssen lediglich die Vordergrund- und Hintergrundfarben festlegen (oder einen transparenten Hintergrund wählen) und dann einfach das generierte Skript herunterladen.
Schnell und einfach, aber es spart Ihnen ein paar Minuten (oder länger) der Codierung!
Mini AJAX
Mini Ajax ist eine Galerie herunterladbarer Ajax- und DHTML-Skripte .
Es umfasst alles von modalen Fenstern über Diashows bis zu fortgeschritteneren Skripts (wie Kalender und ganze Projektmanagement-Tools).
Es ist ein guter Ausgangspunkt, um individuelle Ajax-Elemente zu finden oder einfach nur um etwas Inspiration zu bekommen.
Es gibt Demos für viele der Skripte und alle können von ihren Originalquellen heruntergeladen werden.
MooTools
MooTools ist ein objektorientiertes JavaScript-Framework . Es ist definitiv nicht für Anfänger gedacht, kann Ihnen aber erlauben, flexible, leistungsstarke Ajax-Apps zu schreiben, die browserübergreifend kompatibel sind.
Es ist auch standardkonform und unglaublich gut dokumentiert.
Neben dem Core Builder gibt es auch eine Menge Plugins. MooTools kann verwendet werden, um alles zu erstellen, von einfachen Bildergalerien bis hin zu kompletten Benutzeroberflächen.
jQuery
jQuery ist eine JavaScript-Bibliothek, die eine Vielzahl von JavaScript-Funktionen vereinfacht .
Eines der besten Teile dieses speziellen Tools ist jedoch die Anzahl der Plugins, die bereits für jQuery verfügbar sind.
Es gibt fertige Plugins für alles von einfachen Animationen über Formulare, Widgets bis hin zu erweiterten Elementen der Benutzeroberfläche.
Es gibt wahrscheinlich schon ein Plugin für alles, was Sie mit JavaScript oder Ajax machen möchten, oder zumindest eines, das Sie als Grundlage für Ihre eigenen verwenden können.
Script.aculo.us
Script.aculo.us ist eine JavaScript-Benutzeroberflächenbibliothek, die ein Animationsframework, Ajax-Steuerelemente, DOM-Hilfsprogramme und mehr enthält .
Es wird von Apple, CNN, Basecamp und Ruby on Rails verwendet. Es basiert auf dem Prototype Framework.
Im Script.aculo.us-Wiki gibt es umfangreiche Dokumentation, die den Einstieg erleichtert.
Online-JavaScript-Komprimierungstool
Durch das Komprimieren Ihrer JavaScript-Dateien werden sie schneller geladen, verbrauchen weniger Bandbreite und belegen weniger Speicherplatz auf Ihrem Server. Dieses Tool erleichtert die Komprimierung.
Kopieren Sie einfach Ihre JS-Dateien und fügen Sie sie in dieses Tool ein. Wählen Sie dann aus, ob Sie mit Minify oder Packer komprimieren möchten.
Es spuckt automatisch saubereren, effizienteren Code aus. Stellen Sie sicher, dass Sie die Ergebnisse gründlich testen und immer eine Sicherungskopie Ihrer Originaldatei erstellen.
JavaScript-Beautifier
Wenn Ihr JavaScript etwas unordentlicher ist, als Sie möchten (oder fast unmöglich zu entziffern, weil es so schlecht formatiert ist), führen Sie es durch diesen Beautifier, um ordentliche, saubere, konsistent formatierte Skripte zu erhalten, die später leichter zu lesen und zu bearbeiten sind .
Die verwendeten Einstellungen sind minimal, aber Sie können auswählen, wie viele Leerzeichen für Einzüge verwendet werden sollen, ob Packer erkannt werden sollen und ob Zeilenumbrüche beibehalten werden sollen.
Stellen Sie sicher, dass Sie den endgültigen Code testen und ein Backup bereithalten, falls Probleme in Ihrem neu verschönerten Code auftreten sollten.
BrowserShots
Leider rendern verschiedene Browser Websites auf unterschiedliche Weise. Dies kann große Kopfschmerzen bereiten, besonders wenn Ihre Kunden einen Browser verwenden und Sie einen völlig anderen verwenden.
Wenn sie Dinge sehen, die nicht an Ihrem Ende erscheinen (oder umgekehrt), kann dies zu Problemen auf beiden Seiten führen.
Sie können immer mehrere Browser auf Ihrem Computer installieren, aber a) das ist eine Verschwendung von Speicherplatz und b) Was ist mit Browsern, die nicht für Ihr Betriebssystem verfügbar sind? Das ist wo BrowserShots kommt herein.
Sie können aus nahezu jedem gängigen Browser wählen, einschließlich obskurer Browser wie Minefield und Epiphany.
BrowserShots zeigt Ihnen Screenshots von nur den Browsern, die Sie anzeigen möchten, so dass Sie so viele oder so wenige auswählen können, wie Sie möchten.
Denken Sie daran, dass je mehr Browser Sie testen, desto länger dauert es. So wie BrowserShots eingerichtet ist, können Sie einfach die Seite mit einem Lesezeichen versehen und später wiederkommen, um Ihre Ergebnisse zu sehen.
Feuerwanze
Keine Liste von Web-Designer-Tools wäre komplett ohne das Firebug Firefox-Plugin zu erwähnen.
Oft wird Firebug als das wertvollste Tool im Arsenal eines Designers angesehen. Es macht das Debuggen und Bearbeiten Ihres Codes (egal ob JavaScript, CSS oder HTML) unendlich einfacher.
Sie können Ihr CSS direkt in Ihrem Browser optimieren. Visualisieren Sie die Ausrichtung Ihrer CSS-Boxen. Bearbeiten Sie ein beliebiges Element auf Ihrer Seite direkt in Ihrem Browser.
Debuggen Sie JavaScript und finden Sie Fehler schneller. Und das kratzt nur an der Oberfläche dessen, was Firebug tun kann.
Es ist wirklich ein Muss-Werkzeug für jeden Designer da draußen. Sobald Sie es verwenden, werden Sie sich fragen, wie Sie jemals ohne es entworfen haben.
Kompiliert exklusiv für WDD von Cameron Chapman.
Welche Werkzeuge verwendest du am meisten? Welche anderen Werkzeuge verwenden Sie, die wir möglicherweise übersehen haben?