Vor einiger Zeit hatte ich die Gelegenheit, einen einfachen Workshop zum Thema durchzuführen.“Webentwicklung gegen Webdesign„an meine Kollegen. Dies sind meine Gedanken zu diesem Thema und zu meiner Erfahrung als Leiter der Sitzung.
Seit mehr als einem halben Jahrzehnt durchlaufe ich unzählige Prozesse, von der Gestaltung der Ideen und Träume des Kunden bis hin zur Implementierung seiner Websites, modernen Webanwendungen oder nativen Apps. Ich bin mir also sicher, dass ich hier etwas zu teilen habe.
Autsch, Das ist die Art von Thema, bei dem Hunde im Handumdrehen gegen Katzen kämpfen.
Oder auch nicht.
Schließlich sind wir alle Menschen mit Geschmäckern, Ideen, Zielen und Reisen, die sich in so vielen Aspekten ähneln können, dass die Unterschiede, die möglicherweise bestehen, verschwimmen. Pixel vereinen uns und verschiedene Redewendungen ermöglichen es uns, dasselbe zu sagen - schwarz ist #000000 - anstatt eine Kluft zwischen uns zu schaffen.
Das ist das Schöne an der Sache. Verschiedene Menschen, Persönlichkeiten und Fähigkeiten in verschiedenen Schritten im Arbeitsablauf eines Produkts, aber immer für dasselbe Team spielen. Dasselbe Büro, dieselben Computer, dieselben Stühle, vereint durch Respekt und schöne Interaktionen wie ähnliche Kollegen.
Am Ende heißt es nicht Entwickler gegen Designer, sondern Entwickler und Designer - ein talentiertes Team.
Während des Workshops hatte das Designteam die Zeit zu erklären, wie ein Design zum Leben erweckt wird. Wie die Ideen des Kunden so ausgereift werden, dass selbst er anfängt zu denken: „Das ist es!“ - ja, manchmal wissen Kunden nicht genau, was sie wirklich wollen oder brauchen; letztlich die Designer bringen Erleuchtung in die Träume der Kunden.
Es sind also nicht nur Farben, Raster und Layouts, die sie stolz darauf machen, Designer zu sein. Es gibt einen kompletten Prozess, der mit einigen Wörtern und Sätzen beginnt, über die Ideenfindung und Mockups bis hin zum Meisterwerk eines Designs mit all der Liebe und den Spritzern endet.
Welche Tools werden verwendet? Erinnerst du dich an Notepad? Ja, es muss eine Art Texteditor verwendet werden, um die Wörter zu erfassen, die die Träume des Kunden definieren. Dann gibt es noch mehr technische Tools. Konzentrieren wir uns auf das Hauptwerkzeug, das von Designern in unserem Unternehmen verwendet wird - Skizze.
Es wird verwendet, um Vektordesigns mit der Einfachheit zu erstellen, als würde man etwas auf einem weißen Blatt Papier zeichnen. Ihre Leinwand lässt sich mühelos und originalgetreu zu einer rasterbasierten Website-Vorlage entwickeln. Es ist auch web- und app-orientiert und bietet den schnellsten Bildexport mit allem Schnickschnack, um alle Arten von Bildschirmen und Auflösungen zu unterstützen.
Und es ist so einfach zu bedienen, dass jeder Entwickler es öffnen und in wenigen Minuten mit der Erfassung der ersten Farben, Entfernungen und Rasterspezifikationen beginnen kann.
„Was ist mit Adobe Illustrator oder Photoshop?“ fragst du dich vielleicht. Nun, sie werden immer noch in bestimmten Situationen verwendet. Zum Beispiel Photoshop ist immer noch das beste Tool, um Bilder zu verschönern und mit ihnen zu arbeiten. Aber In Sachen Kreativität ist Sketch die Nummer eins.
Und jetzt beginnt der Spaß (Designer fluchen im Hintergrund).
Implementierung, 3, 2, 1... los!
Wow, Cowboy... bevor Sie mit der Eingabe Ihrer ersten Codezeilen beginnen, müssen Sie gut vorbereitet sein. Normalerweise sage ich Neulingen: „Fangen Sie nicht damit an, wenn Sie nicht genug über das Design wissen, um es dem Kollegen auf Ihrer Seite zu erklären.“
Schauen Sie sich vor allem das Design an und nehmen Sie es in sich auf. Sie müssen das Raster, die verwendete Typografie, allgemeine Elemente wie Überschriften, die Positionierung der Symbole und die Ränder zwischen den Elementen kennen.
Wichtige Fragen können sich stellen: Was soll dieser Button auslösen? Welche Seite soll angezeigt werden, nachdem der Nutzer dieses oder jenes getan hat? Welche Elemente wiederholen sich auf den Seiten? Welche sind unterschiedlich? Es ist einfach zu verstehen, warum sie anders sind?
Vergiss nicht: Wenn Sie Fragen haben, wenden Sie sich an Ihre freundlichen Designexperten. Sie werden dir Leid ersparen und dir wertvolle Zeit verschaffen. Dann kannst du deine Magie beginnen!
Es ist wichtig, dass Sie das Evangelium der Webentwicklung kennen, besonders wenn Sie herausragende Webseiten erstellen - was Sie immer erreichen wollen, oder?
Alles beginnt mit einem gut strukturierten Dokument, das mit HTML erstellt wurde - deine Strukturschicht. Anstatt sich mit dem Stil oder dem gewünschten Verhalten zu befassen, erstellen Sie Ihre Seitenabschnitte wie Kopfzeile, Fußzeile, Hauptinhalt, Absätze, Listen usw.
Möchten Sie wissen, ob Ihr Dokument gut strukturiert ist? Entferne alle Stile aus deinem Weg, indem du CSS und Stilregeln in deinem Browser deaktivierst und überprüfe, ob du immer noch ein schönes Dokument siehst, das du lesen und verstehen kannst.
Dann kommt Ihre Präsentationsebene Verwenden Sie CSS, um das schöne Design zu erzielen, das Sie implementieren. Versuchen Sie, CSS zu Ihrem Vorteil zu nutzen, indem Sie daran denken, dass es für steht Cascading Stylesheets, was bedeutet, dass sich jede Regel elegant in Ihrem Dokument verteilt.
Deshalb ist es so wichtig, dass Sie Ihr Design gut kennen.
Erinnern Sie sich an die gemeinsamen Elemente wie Typografie und Ränder? Jetzt ist es an der Zeit, sie in die Praxis umzusetzen, indem Sie Ihre Styling-Regeln erstellen, zum Beispiel für Ihre Überschriften, die sich von der Größe unterscheiden, aber dieselbe Schriftart, denselben Buchstabenabstand und einen gewissen Rand zum Atmen verwenden.
Versuchen Sie, nicht mehr als 3 Kontrollstufen zu erreichen. Zum Beispiel, anstatt etwas zu tun wie #sidebar div p.sidebar span.left versuche mit deinem Markup zu spielen und mache etwas Einfaches wie #sidebar p span:erstes Kind. Möchten Sie lernen, wie Sie Ihren Code in Ordner und Dateien unterteilen können? Lernen Sie mit großartigen Meisterwerken wie Bootstrap. Überprüfe den Quellcode und du wirst so viel lernen. Am Ende lieben Sie Ihr Markup und zaubern Sie ihm ein Lächeln ins Gesicht, indem Sie ein gutes, altmodisches CSS verwenden.
Endlich haben Sie die Verhaltensebene, und was diese spezielle Phase und speziell das Verhalten der Elemente auf Ihrer Seite angeht, ist JavaScript (JS) definitiv Ihr bester alter Freund, der standhaft bleibt, solange die Zeit vergeht. Damit können Sie die Interaktivität bereitstellen, die Ihre Seite benötigt, genaue Informationen berechnen, wenn Nutzer eine Wahl treffen, Ereignisse auslösen, wenn Daten übermittelt werden usw. Wenn Sie komplexe Datenstrukturen und umfangreiche Berechnungen benötigen, ist es vielleicht an der Zeit, sich diese wunderbaren JS-Frameworks anzusehen.
Wenn nicht, bleib bei deinen JS-Dateien, mit richtig benannten Funktionen, wie einfachen Blackboxen, die du nur eingeben musst und du weißt mit Sicherheit, was von der anderen Seite kommen wird.
Ein weiterer einfacher Tipp ist, dass Sie jetzt viele Animationen und Übergänge mit CSS3 erstellen können. Manchmal kann die Antwort nur CSS und nicht JS sein. Versuchen Sie endlich, Ihre Funktionen in richtig benannten Dateien zu organisieren, anstatt alles in einer einzigen riesigen Datei zu speichern. Seien Sie vor allem stolz auf Ihren Code.
Oh, die Frage war: Wo soll ich anfangen?
Beginnen Sie mit testgetriebener Entwicklung! Ja, beginnen Sie mit Ihrem Test, programmieren Sie, geben Sie grünes Licht und refaktorieren Sie, wenn Sie können. Versuche zu lernen, indem du dir die Screencasts einiger Masterminds ansiehst, die du in Codeschule, zum Beispiel. Du wirst so viel von ihnen lernen.
Das bringt uns zurück zum ersten Thema, das wir letztendlich „Entwickler und Designer — verschiedene Leute, dasselbe Team“ nannten, erinnerst du dich?
Manchmal können wir uns „in der Übersetzung verlieren“ (toller Film, du solltest ihn dir so schnell wie möglich ansehen, falls du es noch nicht getan hast) mit verschiedenen Menschen, die verschiedene Sprachen sprechen. Ein Entwickler könnte sagen:
Ich kenne meine Sprache. Es ist <div><a>, margin-left, var nav = $ („.navbar“). Gib mir das Design und ich lasse es glänzen.
Am anderen Ende könnte ein Designer Dinge sagen wie:
Diese Titel sollten alle dieselbe Farbe und Größe haben. Kannst du nicht sehen, dass das Raster 12 Spalten hat? Es schwebt nicht, es ist 3 Spalten breit.
Es war ein wirklich positiver Workshop, es war mir eine große Freude, ihn zu machen und ihn nicht nur mit meinen lieben Kollegen, sondern auch mit Ihnen teilen zu können. Ich hoffe, Sie können aus diesen Zeilen einige Lektionen lernen oder zumindest gute Laune bekommen.
Basierend auf einem Artikel, der ursprünglich von Timóteo Bica für Imaginary Cloud geschrieben wurde
Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!
Eine Gruppenperson, die gerne kommuniziert und lernt. Ruhig und fröhlich. Sucht nach den besten Lösungen und folgt den neuesten Technologien. Offen für Ratschläge.
People who read this post, also found these interesting:
