Eine Aufschlüsselung einer einfachen App, vom UI-Design bis zur Bereitstellung, die zeigt, warum Codierung ein magisches Werkzeug für Designer ist.
Figma, Adobe XD, Photoshop, Wacom Tablet, Skizzenbuch … alles Tools für Schnittstellen und Webdesigner, ja? Nehmen Sie sich zwei Minuten Zeit und versuchen Sie sich zu erinnern, warum Sie Designer werden möchten und warum es Ihnen Spaß macht, Dinge zu entwerfen.
Wahrscheinlich liegt es daran, dass Sie gerne kreativ sind. Du bist ein kreativer Mensch. Vielleicht haben Sie als Kind mit künstlerischen Erfahrungen begonnen und diese kreative Energie dann in Problemlösungen umgewandelt, während Sie sie weiterhin visuell zum Ausdruck brachten: Sie wurden Designer, ein kreativer Problemlöser.
Heute versuche ich Ihnen zu zeigen, dass Codierung ein unterschätztes Werkzeug ist, um Ihre kreative Problemlösungsmentalität durch den Aufbau einer echten Lösung zum Ausdruck zu bringen SVG-Generator von Grund auf neu. Also lasst uns loslegen!
Schritt 1: Machen Sie sich keine Vorstellung; ein Problem lösen
Wir sind hier nicht tiefgreifend auf geschäftliche Überlegungen eingegangen, aber die eigenen Probleme zu erkennen und zu entscheiden, sie selbst zu lösen, ist ein guter Anfang.
Während der Kundenarbeit benötigte ich einige SVG-Wellen für Illustrationen. Also suchte ich nach einem Wellengenerator: Es gab eine Menge wellenförmiger, bunter Wellengeneratoren mit parametrischen Eingaben, aber keinen einfachen, perfekten Sinuswellengenerator. Ich beschloss, es mit meinem Mathe-Tool zu zeichnen GeoGebra und dann nach SVG exportieren.
Okay, aber nicht schnell. Und wir erledigen unsere Arbeit gerne schnell. Aber warten Sie … Warum entwickeln wir nicht einen perfekten Sinuswellengenerator? Ohne Gleichungen und langweilige Mathematiksoftware zum Öffnen, nur eine Kurve und eine Exportschaltfläche. Du hast es verstanden, jetzt lass es uns entwerfen.
Kurztipps: Wenn Sie nach einem Problem suchen, suchen Sie nach Memes in Ihrem Fachgebiet. Sie zeigen immer ein tiefes, schmerzhaftes und bekanntes Problem.
Schritt 2: Gestalten Sie die Lösung möglichst einfach
Zwei Hauptregeln: Erste Regel: Überlegen Sie, wer sie verwenden wird. Die zweite Regel besteht darin, vorherzusagen, was sie von der Funktionsweise erwarten. Also wer? Frontend-Entwickler. Worauf warten Sie? Eine bearbeitbare Kurve mit direktem Feedback und einer Export-Schaltfläche.
Wireframe-Design
High-Fi-Design
Kleiner Tipp: Sie können sich das schnappen Figma-Design Weitere technische Tipps zum Design finden Sie in der App.
Schritt 3: Bauen Sie es real auf
Als Designer ist es vollkommen in Ordnung, bei Schritt zwei aufzuhören. Aber stellen Sie sich vor, Sie könnten bauen, was Sie entwerfen! Sie wissen bereits, dass Sie alles erstellen können, was Sie wollen.
Sie können Codierung als eine Möglichkeit betrachten, Ihre Benutzeroberfläche zu übersetzen, die mit Sicherheit zu einer .com-Anwendung führt, die von jedem genutzt werden kann. Aus diesem Grund spielen die „besten Sprachen“ keine Rolle; Codierung ist nur ein Werkzeug, um Ihrer Kreativität Ausdruck zu verleihen und Dinge für andere zu erstellen. Und als Designer, als kreativer Mensch, könnte das … interessant klingen.
Von der Benutzeroberfläche zur funktionalen App
Jede Web-App-Schnittstelle kann mit HTML/CSS/JS vom UI-Design in Code übersetzt werden. Daran können wir die Rolle jeder dieser drei „Sprachen“ erkennen:
HTML: Ich möchte einen Knopf.
CSS: Ich möchte, dass mein Knopf abgerundet aussieht.
JS: Ich möchte, dass etwas passiert, wenn ich auf meinen Button klicke.
Zum Erstellen unserer App verwende ich Svelte. Svelte ist ein JavaScript-Compiler, der es uns ermöglicht, alle diese drei „Sprachen“ an einem Ort zu verwenden. Sehen wir uns also an, wie Code unsere Benutzeroberfläche in funktionale Dinge übersetzen kann.
HTML-Schaltflächencode
„Hey Webbrowser, ich möchte eine Schaltfläche namens „exportButton“ und alles in einer Funktion namens „downloadSVGpath“, die ausgeführt wird, wenn jemand auf die Schaltfläche klickt 🙂 Danke“
Schaltflächencode im CSS-Stil
„Hey Webbrowser, ich möchte, dass du diese Stilregeln auf meine einfache HTML-Schaltfläche anwendest: Ich möchte eine schöne abgerundete Ecke bei 16 Pixel, einen Mauszeiger, wenn wir darüber fahren, ich möchte keine Ränder, aber ich möchte eine coole Farbe Farbverlauf als Hintergrundfarbe. Dann möchte ich, dass die Farbe der Schriftart innerhalb der Schaltfläche auf #fcfcfc eingestellt ist und die Inter-Schriftart (bitte fett) verwendet wird. Wie bei meinem Figma-Design möchte ich auch Dinge im Knopf zentrieren und Polsterung hinzufügen. Oh, und füge einen subtilen Schatten hinzu 🙂 Danke.“
SVG-Kurvenfunktion zeichnen
„Hey, Webbrowser, jedes Mal, wenn sich unser Schieberegler bewegt, möchte ich diese Funktion ausführen: Ich möchte, dass Sie eine Kurve innerhalb eines Rahmens zeichnen, den ich in meinem HTML-Code definiert habe. Außerdem möchte ich, dass mein Kurvenstrich an jeder Kappe abgerundet aussieht und eine Farbe und Breite hat, die ich in den Variablen definiert habe. Die Parameter der Sinusfunktion entnehmen Sie den gespeicherten Werten der Schieberegler. Während Ihre x-Variable schließlich noch nicht die Gesamtbreite auf der x-Achse unseres Rahmens erreicht hat, lösen Sie die Punktposition der y-Achse der Sinusgleichung und zeichnen die Kurve 🙂 Danke.“
Kurztipps: Sie können sich das schnappen Quellcode Dateien der App, um sie zu erkunden.
Zusammenfassung
- Codierung ist lediglich ein Werkzeug, das es uns ermöglicht, unsere sehr visuellen Metaphern in etwas zu übersetzen, das jeder verwenden kann. Wie cool ist das?!
- Codierung hilft uns, uns unsere Designziele vorzustellen und zwingt uns, über den visuellen Bereich hinauszuschauen: Wie soll mein Button funktionieren? Wie sieht es im Schwebeflug aus? Wie kann mein Popup-Modal für mobile Geräte gestaltet werden?
- Codierung ermöglicht es uns, die seltsame Idee, die wir entworfen haben, „nur zum Spaß“ umzusetzen, anstatt die Design-Fallstudie unter dem Schlagwort „persönliches Projekt“ in unser Portfolio aufzunehmen.
- Die Codierung zeigt uns, wie viel Arbeit erforderlich ist, um das zu erreichen, was wir entworfen haben. So können wir die Bedürfnisse, Herausforderungen und das Ressourcenmanagement unserer Designkunden besser verstehen.
- Codierung ist flexibel. Sie können die Netflix-Website pixelgenau mit reinem HTML/CSS, dem Vue Framework oder einem anderen Web-Framework replizieren.
