Hilfreiche Tipps und Tools für Webdesign-Experimente

Der heutige Artikel ermutigt Sie, sich daran zu gewöhnen, Zeit für kleine Experimente zu verwenden. Das Testen von Ideen und das Lösen von Problemen in einer Umgebung mit niedrigem Druck und möglicherweise sogar Spaß können Ihre Bildung enorm steigern und zu großartigen Innovationen führen.

Wir beginnen mit einigen Vorteilen und Tipps zum Experimentieren mit Webentwicklungsprojekten und werfen einen kurzen Blick auf einige Werkzeuge, die ich persönlich verwende, um meine eigenen Experimente zusammenzustellen. Lass uns anfangen!

Die Vorteile des Experiments

Experimentieren ist eine mächtige Sache. Ich würde es in der Tat als ein absolut wichtiges Element in der Weiterbildung eines Web-Entwicklers bezeichnen, unabhängig davon, ob Sie bereits zehn Tage oder zehn Jahre dabei waren. Das gesamte Webdesign-Wissen in der Welt bedeutet nicht besetzt, wenn Sie nicht hineingehen und sich die Hände schmutzig machen.

"Der absolut beste Weg für mich, etwas auf diesem Gebiet zu lernen, ist, einen Texteditor zu starten und ihn selbst zu probieren."

Ich lese regelmäßig Web-Design-Bücher und stöbere zumindest jeden Tag mehrere Web-Design-Tutorials aus, wenn ich sie nicht vollständig in Anspruch nehme. Dies sind großartige Ressourcen, aber der absolut beste Weg, etwas auf diesem Gebiet zu lernen, besteht darin, einen Texteditor zu starten und ihn selbst auszuprobieren.

Theorie und Unterricht scheinen einen ziemlich temporären Platz in meinem Gehirn zu haben, aber ein Projekt zum Anfassen gräbt sich tief in mein Langzeitgedächtnis ein. Der Grund ist normalerweise ziemlich einfach: Frustration. Die Wahrheit ist, ich versage regelmäßig, wenn ich versuche, eine bestimmte Idee oder ein Experiment zu verwirklichen. Meistens funktionieren die Dinge nicht so reibungslos, wie ich mir vorstelle, und das Ergebnis ist, dass ich stundenlang mit einem Problem bastle.

Frustration fordert mich heraus. Sobald ich mit einem Problem konfrontiert bin, das ich nicht sofort lösen kann, beschließe ich, es um jeden Preis zu schlagen. Das Projekt selbst hat keine oder nur geringe Auswirkungen, es ist der Akt des Ausarbeitens, der mich dazu zwingt, meine Wissensbasis zu erweitern, was wiederum bei allen zukünftigen Projekten hilft.

Tipps zum Experimentieren

Bevor wir einen Blick auf einige der Werkzeuge werfen, die ich persönlich verwende, um meine Ideen schnell zu untersuchen, sollten wir uns einige grundlegende Dinge überlegen, die Sie bei Ihren eigenen Web-Entwicklungsexperimenten berücksichtigen sollten.

Sie brauchen nicht unbedingt ein Ziel

Es ist absolut hilfreich, ein Ziel oder ein Ziel vor Augen zu haben, wenn man mit etwas Code herumfummelt, aber in Wahrheit sollte man die Praxis nicht vermeiden, nur weil man keine großen Ideen oder Probleme hat.

Autoren beschäftigen sich häufig mit dieser Übung, bei der sie sich einfach hinsetzen und ihre Gedanken aufschreiben, wenn sie kommen. Es ist eine großartige Angewohnheit, sich einzubringen und kann wirklich solide Schreibideen generieren. Als Entwickler sollten Sie das Gleiche versuchen. Wenn dir ein Nachmittag langweilig ist und du dreißig Minuten zu töten hast, fang einfach an zu programmieren, um zu sehen, wo es dich braucht. Für Außenstehende klingt dies sündhaft langweilig, aber vertrauen Sie mir, wenn Sie im richtigen Beruf sind, werden Sie jede Minute davon lieben.

Graben Sie herum im Code anderer Leute

Sie müssen beim Experimentieren nicht bei Null anfangen. Eine der absolut besten Möglichkeiten, neue Techniken zu erlernen, besteht darin, den Code eines anderen aufzulösen, um zu sehen, was ihn tickt. Wenn Sie einmal drin sind, stöbern Sie nicht einfach, beginnen Sie mit dem Ändern und Kommentieren der Abschnitte, um zu sehen, wie die Seite reagiert. Denken Sie immer daran zu fragen, warum? wenn du etwas siehst, verstehst du nicht!

Einige gute Startplätze sind vorgefertigte Frameworks und Boilerplates wie die HTML5-Boilerplate. Diese Arten von Tools sind für das einfache Durchsuchen geschaffen. Sie sind nicht nur sehr fortgeschritten, sondern auch sehr gut dokumentiert und organisiert.

Vergiss die Regeln

Wenn Sie eine professionelle Website programmieren, achten Sie darauf, dass Sie sich mit gültigem, semantischem Code und Cross-Browser-Kompatibilität optimal verhalten. Wenn Sie jedoch experimentieren, sollten Sie keine Angst davor haben, dem Wind Vorsicht zu geben und alles zu versuchen, was Ihnen in den Sinn kommt.

Um ein Problem zu lösen, ist es wichtig zu wissen, was funktioniert und warum. Auch wenn Ihre Lösung in einer Live-Web-Umgebung nicht akzeptabel ist, kann sie Ihnen helfen, eine Lösung zu finden.

Darüber hinaus gibt es zwischen HTML5 und CSS3 eine Menge neuer Techniken, die nur darauf warten, dass Sie versuchen, einen Blick auf das Webdesign in der Zukunft zu erhalten. Viele von ihnen arbeiten nur mit zwei oder weniger Browsern, aber das bedeutet nicht, dass es sich nicht lohnt, sich zu erkundigen, wie sie funktionieren!

Nachdem Sie Ihr Frankenstein-Webmonster erstellt haben, führen Sie es durch einen Validator oder ein Fusseltool, um einige Erklärungen zu erhalten, warum es nicht korrekt ist, und Vorschläge zur Behebung des Problems.

Besiege das Tutorial

Ein weiterer toller Katalysator für Experimente ist ein Webdesign-Tutorial wie das, das Sie auf dieser und anderen Websites sehen. Wenn Sie eine davon sehen, stöbern Sie in der Liste und fragen Sie, ob die vorgestellte Lösung die beste ist.

Befolgen Sie nicht einfach die Anweisungen, sondern denken Sie darüber nach, wie Sie den Prozess verbessern können, indem Sie Ineffizienzen reduzieren. Die Konkurrenz unter Ihnen wird feststellen, dass Sie, wenn Sie einem Gegner gegenüberstehen, den Sie am besten versuchen, viel weiter getrieben werden, als Sie dies normalerweise tun würden.

Werkzeuge zum Experimentieren

Anstatt Ihnen eine riesige Liste von Ressourcen zur Verfügung zu stellen, die Sie selbst suchen müssen, um die echten Edelsteine ​​zu finden, habe ich mich entschlossen, dieses Angebot zu kürzen und nur die Werkzeuge vorzustellen, die ich persönlich für Experimente verwende.

Die folgenden Werkzeuge sind im Konzept ziemlich ähnlich, unterscheiden sich jedoch so stark, dass ich sie für unterschiedliche Zwecke verwenden kann. Wenn Sie sie ausprobieren und ein Gefühl für jeden von ihnen bekommen, werden Sie sehen, was ich meine.

Espresso für Mac

Beginnen wir mit der einzigen nicht freien Ressource auf der Liste. Espresso ist nicht einfach nur ein Werkzeug zum Experimentieren, es ist eine vollständige professionelle IDE, die Sie um die 80 Dollar kosten wird. Wenn Sie jedoch ein professioneller Webdesigner sind, ist es jeden Cent wert.

Es gibt eine Million Gründe, die sich hervorragend als primäre Programmierumgebung eignen. Der Hauptgrund für das Experimentieren ist jedoch das Live-Vorschaufenster. Während Sie kodieren, wird die HTML-Vorschau in Echtzeit ohne manuelle Aktualisierung aktualisiert.

Verwenden Sie Divvy oder ein ähnliches Werkzeug, um Ihre Bildschirmfläche in Code und Vorschaufenster aufzuteilen, und Sie haben einen unschlagbaren Experimentierablauf. Ein weiterer großer Vorteil, den Sie in kostenlosen Online-Tools häufig nicht finden, ist die automatische Vervollständigung. Dadurch sparen Sie wirklich viel Schreibzeit und können diese Experimente in einem Drittel der Zeit beenden.

Wenn Sie bereits ein Espresso-Fan sind, lesen Sie die Kaboom-Version von Espresso 2!

CSSDesk

Wünschen Sie eine Codierungsumgebung, die Live-Updates bietet, aber Sie keinen Cent kostet? Schauen Sie sich CSSDesk an. Dieses kleine Tool besteht aus drei Hauptbereichen: CSS, HTML und Vorschau. Wenn Sie in der kleinen erweiterbaren Schublade auf der linken Seite des Bildschirms codieren, wird die Vorschau auf der rechten Seite in Echtzeit aktualisiert. Dies macht sie zu einer fantastischen Möglichkeit, um schnell alle möglichen Webdesign-Ideen zu testen.

CSSDesk ist äußerst nützlich und bietet einige wirklich großartige Funktionen, einschließlich der Möglichkeit, Ihre Kreationen zu teilen oder herunterzuladen. Eine einzigartige Sache, die ich sonst nirgendwo gesehen habe, ist die Möglichkeit, den Hintergrund für Ihre Experimente anzupassen. Das ist wirklich großartig, wenn Sie nicht eine ganze Seite codieren, sondern sich auf ein einzelnes Element konzentrieren möchten.

Sie werden auch die Vorteile der Zeilennummerierung, der Hervorhebung von Code und der Möglichkeit schätzen, die Code-Schublade vollständig auszublenden, um Ihr Experiment in der vollen Fenstergröße zu sehen.

jsFiddle

jsFiddle ist CSSDesk sehr ähnlich, nur mit einem erheblichen Funktionszuwachs (was für ein einfaches Experiment ein Vorteil oder ein Nachteil sein kann). Für den Anfang, wie der Name schon sagt, wird hier viel Wert auf JavaScript gelegt. Sie müssen jedoch nicht eine einzige JavaScript-Zeile schreiben, damit dies hilfreich ist.

In jsFiddle haben Sie vier anpassbare Bereiche, jeweils einen für HTML, CSS, JavaScript und eine Vorschau. Im Gegensatz zu den beiden vorherigen Optionen muss die Vorschau jedes Mal manuell aktualisiert werden, wenn Sie sie anzeigen möchten.

Eine fantastische Funktion von jsFiddle ist die Möglichkeit, schnell in beliebte JavaScript-Bibliotheken wie MooTools und jQuery zu laden. Sie können Ihre Arbeit auch speichern, freigeben und verzweigen, und es gibt Schaltflächen, um Ihren Code zu ordnen und Kommentare zu den Experimenten anderer zu hinterlassen.

Ich mag die einfache und effektive CSSDesk-Umgebung sehr, aber in Wahrheit ist jsFiddle meine erste Wahl für schnelle Experimente. Ich liebe dieses Tool einfach und kann nicht genug empfehlen, dass Sie sich wöchentlich die Gewohnheit nehmen, sich Zeit zu nehmen, um hierher zu kommen und sich mit Ideen oder Problemen zu beschäftigen, die Sie hatten.

Fazit

Zusammenfassend lässt sich sagen, dass häufiges Experimentieren für Ihr Wachstum als Webdesigner und -entwickler von entscheidender Bedeutung ist. Es ist viel zu leicht, in die Falle zu geraten, bei jedem einzelnen Projekt, das Sie übernehmen, auf dieselben alten Methoden zurückzugreifen, was leicht zu einer Talentstagnation führen kann. Für die Karriere eines Webdesigners ist nichts gefährlicher, als zurückzubleiben und veraltet zu werden!

Die obigen Tipps zum Experimentieren richten sich in erster Linie an Codierer, können aber auch problemlos auf Pixel-Pusher angewendet werden. Hier wäre Ihr Spielplatz einfach Photoshop, Illustrator und / oder Fireworks, aber die allgemeinen Vorschläge für Freiform-Experimente, die sich auf die Arbeit anderer beziehen, um Inspiration zu finden und Ihre typischen Gewohnheiten zu durchbrechen, gelten weiterhin.

Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, wie viel Zeit Sie einfach dem Herumspielen und dem Ausprobieren neuer Dinge widmen. Wie viel Wert erhalten Sie aus dieser Zeit und welche Tools setzen Sie ein?