So werden Sie Webdesigner

Immer häufiger erhalte ich Nachrichten von Nutzern, die mich fragen,  wie  man   Webdesigner wird  . Es werden viele Fragen gestellt, welcher Kurs besser zu belegen ist, wenn es Spezialisierungsschulen in Italien und/oder im Ausland gibt, wenn Sie ein Zertifikat benötigen, um Teil dieses Sektors zu sein, welche Kurse und Webdesign-Bücher Sie am  besten   studieren können und welche   Fähigkeiten Sie haben , das   kann in der Welt der Arbeit verwendet werden.

Ich habe versucht, all diese Fragen zusammenzufassen und meine Antworten in einem einzigen Artikel zu verpacken. Mit diesem Guide werde ich tatsächlich versuchen, detailliert zu erklären, welche Software und Sprachen Sie kennen sollten, um sich als Webdesigner zu definieren.

Ich werde versuchen, Ihnen meine Erfahrungen in diesem Sektor, in dem ich seit 8 Jahren tätig bin, zur Verfügung zu stellen. Ich kann garantieren, dass sich im Laufe der Jahre vieles verändert hat. Für Neulinge sind ohne Zweifel die Mechanismen, die das Web steuern, am schwersten zu verstehen.

Aber gehen wir einen Schritt zurück und beginnen von vorne. In den frühen 2000er Jahren gab es keinen großen Unterschied zwischen Front-End- und Back-End-Betreuern. Es waren die   „Programmierer“,  die sich um alles kümmerten, denn die ersten Versionen von HTML und CSS ließen nicht viel Raum für Kreativität.

Seiten waren damals total   unhöflich  . Zu dieser Zeit waren die einzigen Websites mit grafischem Design diejenigen, die in Flash entwickelt wurden, einer Macromedia-Software, die später aufgrund mehrerer Mängel nicht mehr verwendet wurde: Erstens die Erstellung katastrophaler Seiten in Bezug auf SEO.

Tatsächlich tauchten in diesen Jahren Suchmaschinen in unserem Leben auf. Immer mehr Benutzer fanden Antworten über das neu erstellte Google und Flash konnte kein semantisches HTML zurückgeben.

Später gab es mehrere Websprachen, CSS, obwohl sie mit dem Aufkommen von Less und Sass ziemlich komplex wurden. Das Frontend der Webseiten ist extrem anpassbar und erweckt die Figur des Grafikdesigners zum Leben   , um das Verschwinden von Flash auszugleichen, das es ermöglichte, mit Action Script faszinierende Grafiken zu erstellen    .

Inhaltsverzeichnis

  • Was macht ein Webdesigner?
  • HTML
  • CSS
  • Javascript
  • jQuery
  • CSS-Struktur: Bootstrap, Foundation
  • Die Software: Sketch, Adobe XD
  • Nächster Schritt: Frontend-Entwickler
  • Javascript-Struktur: React, VueJS
  • Schlussfolgerungen

Was macht ein Webdesigner?

Die erste Frage, die wir versuchen zu beantworten, lautet:   Was macht ein Webdesigner  ? Eine Frage, die Ihnen auf den ersten Blick vielleicht trivial erscheint.

Tatsächlich sind, wie ich Ihnen sagte, im Laufe der Jahre mehrere professionelle Persönlichkeiten entstanden. Websprachen sind immer komplexer geworden und es ist für einen einzelnen Fachmann schwierig, alle Webstacks zu beherrschen   .

Konkret   definieren wir mit dem Wort   Web Designer den   Profi, der sich um die gesamte visuelle Kommunikation der Website kümmert  . Mögen? es gelingt, die grafischen Vorschläge in Code zu übersetzen. Diese im Fachjargon Mockup definierten   Grafikvorschläge  können von ihm selbst oder von einem Grafikdesigner erstellt werden.

Der Webdesigner   „assembliert“ daher  die Grafiken der einzelnen Seiten und verwendet dazu die HTML-Markup-Sprache, CSS und Javascript. Um die Arbeit zu erleichtern, kann er manchmal Frameworks (dh Desktops) wie   Bootstrap   oder Foundation verwenden, auf die wir später eingehen werden.

Um die Animationen zu erstellen, verwendet der Webdesigner fortschrittliche Techniken, die aus der Verwendung von CSS3 abgeleitet wurden, aber auch Javascript und UI-Bibliotheken wie jQuery.

HTML

Nachdem Sie nun verstanden haben, was es tut, können Sie damit beginnen, die Tools zu analysieren, die ein Webdesigner jeden Tag für seine Arbeit verwendet. Das erste, was Sie auswendig wissen müssen, ist natürlich HTML.

Diesen Begriff haben Sie sicher schon oft gehört. Wenn Sie entschlossen sind, diesen Weg zu gehen, können Sie sicher sein, dass Sie diesen Begriff am häufigsten hören werden. HTML ist in der Tat die Hauptsprache des Webs. Technisch gesehen keine Programmiersprache, aber eine   Auszeichnungssprache. Jede Website enthält einen HTML-Code.

HTML   steht für HyperText Markup Language und ist die Markup-Sprache, mit der wir unsere Webseiten gestalten können. Geboren 1991, dank des Genies von   Tim Berners Lee   , gibt es HTML jetzt in seiner fünften Version. Browser lesen einfach den HTML-Code von Webseiten aus, verarbeiten ihn und geben so den visuellen Inhalt an den Endbenutzer zurück. Die Darstellung von HTML wird tatsächlich über Stile oder CSS verwaltet.

Die Vereinigung von HTML und CSS ermöglicht es uns, statische Mockups zu erstellen, die den visuellen Teil unserer Webseiten erstellen. Es ist daher der erste Schritt, unabdingbar, den Titel Webdesigner tragen zu können. HTML kann natürlich online studiert werden. Es gibt auch mehrere Bücher, die Ihnen bei dieser Aufgabe helfen können.

Ich zitiere für Sie zwei Bücher, die ich gelesen habe und die ich sehr interessant fand: eines auf Italienisch, das andere auf Englisch. Wie Sie sehen können, enthalten die von mir erwähnten Bände tatsächlich HTML und CSS. Tatsächlich gehen beide Dinge Hand in Hand und ich rate Ihnen, sie gleichzeitig zu lernen. Viele machen den Fehler, zuerst HTML und CSS gleich danach zu studieren, besser ist es, sie zusammen zu assimilieren, damit Sie sofort grafisch akzeptable Seiten erstellen können und dies Ihnen den Anstoß gibt, weiter zu lernen. Um dies zu tun, können Sie auch einen Kurs über die verschiedenen   Plattformen von Online-Computerkursen belegen   .

HTML und CSS. Webseiten entwerfen und erstellen

Das erste Buch ist definitiv „   HTML und CSS. Gestaltung und Erstellung von Websites   “. Ein von APOGEO herausgegebenes Buch von   John Duckett   . Ein Buch, das die Schule wirklich gemacht hat, so sehr, dass es bei Amazon eine Bewertung von   fast 5 Sternen erhielt   .

Ich fand diesen Text sehr interessant, weil er eine einfache Möglichkeit bietet, durch verschiedene Übungen zu lernen. Eine neue Methode, die auf einem einfachen Ansatz zum Erlernen von HTML in der neuesten Version basiert, aber auch CSS3.

Pode-se dizer com certeza que este livro não é o manual de computador “clássico”. A  informação é clara  , oportuna e detalhada. Os capítulos estão divididos de forma a tornar este livro não apenas agradável de ler, mas também facilmente acessível e reutilizável no trabalho diário. Por fim, apreciei os infográficos divertidos: explicativos, fáceis de entender até para iniciantes.

HTML e CSS para iniciantes

O segundo tomo, em inglês, leva o nome de ”  HTML e CSS para iniciantes: um guia completo para iniciantes em HTML e CSS  “, escrito por Mario Wheeler e também disponível na Amazon no formato Kindle a um preço acessível.

Ein Buch, das mir sehr gut gefallen hat, weil es den Leser mit einfachen Worten anspricht. Es ist auch für Anfänger geeignet und ermöglicht es Ihnen, alle nützlichen Kenntnisse zum Erstellen von statischem Markup zu erwerben. Das Buch richtet sich übrigens an diejenigen, die noch keine Erfahrung in der Branche haben. Darin finden Sie mehrere praktische Übungen, die Sie bequem von zu Hause aus mit einem Programm wie Notepad durchführen können.

Fragen Sie bei Amazon

CSS

CSS (   Akronym für Cascading Style Sheets   ) ist die Sprache, die wir verwenden, um HTML zu gestalten. Seine erste Version stammt aus dem Jahr 1996. Seitdem wurde ein langer Weg zurückgelegt und CSS wurde zu einer ausgereiften Sprache und erreichte seine dritte Version.

Stile wurden früher direkt in HTML eingebettet. Eine Praxis, die jedoch nicht in Vergessenheit geraten ist und sich in einigen Fällen als nützlich erweisen kann. Abgesehen von einigen Sonderfällen muss sich das Stylesheet jedoch immer in einem dedizierten Dokument mit der Erweiterung .css relativ zum HTML-Dokument befinden.

Ein HTML-Dokument kann mehrere Stylesheets aufrufen. Der beste Ansatz ist tatsächlich, die Stylesheets nach Einsatzgebieten zu unterteilen und so   einfach wiederverwendbare atomare Komponenten zu erstellen   .

Aus Leistungsgründen müssen alle verschiedenen Stylesheets mit einem automatischen Verfahren namens Bundle vereinheitlicht werden     .

Schließlich sind in den letzten Jahren sogenannte Präprozessoren entstanden    . Die Präprozessoren, LESS und SASS, ermöglichen es uns, CSS einer echten Programmiersprache sehr ähnlich zu machen. Sie ermöglichen es uns, komplexe Berechnungen durchzuführen, Variablen zu erstellen und viel mehr Code zu generieren, als wir tatsächlich schreiben.

Kurz gesagt, nachdem Sie sich die rudimentären CSS-Regeln angeeignet haben, schlage ich vor, dass Sie lernen, mindestens einen Präprozessor zu verwenden. Heutzutage kann man nicht anders, als mindestens einen Präprozessor zu lernen, da sie in der heutigen Geschäftswelt unverzichtbar sind.

MINUS und SASS unterscheiden sich nicht viel. Ich rate Ihnen, mit SASS zu beginnen. Statistiken zeigen übrigens, dass es derzeit das meistgenutzte der beiden ist. Sie können die verschiedenen Ressourcen im Internet studieren oder ein Buch kaufen.

Auf SASS gibt es keine wirklichen Bände, da es sich um ein recht schmales Thema handelt, das sich auf wenigen Seiten zusammenfassen lässt. Sass for Beginners   von Luca Pulina kann ein guter Ausgangspunkt sein. Eine gute Hilfe ist jedoch   Sassmeister, mit   dem Sie den von Ihnen geschriebenen SASS direkt online testen können.

Javascript

Wenn HTML und CSS die Struktur einer Webseite bilden , erweckt Javascript   alles zum Leben   . Wenn wir über Javascript sprechen, wagen wir uns bereits in eine echte   objektorientierte Programmiersprache vor   . Javascript ist derzeit sicherlich eine der am häufigsten verwendeten Sprachen und das liegt daran, dass es sowohl auf der Client- als auch auf der Serverseite (Node.js) verwendet werden kann.

Im Bereich Webdesign wird es verwendet, um   interaktive dynamische Effekte zu erzeugen   , durch Funktionen, die in Skripten genau definiert sind. Es gibt viele Operationen, die wir über Javascript ausführen können. Betrachten Sie zum Beispiel das Erstellen einer Galerie, ein Popup, das Animieren eines Menüs, das Erstellen von Schiebereglern und Karussells.

Javascript ist ohne Zweifel ein unverzichtbares Element in der Arbeit eines Webdesigners. Es zu meistern ist jedoch nicht einfach. Die Lernkurve ist viel steiler als bei CSS und HTML und das liegt daran, dass Javascript von Natur aus bereits Teil von Programmiersprachen ist. Sie müssen daher einige grundlegende Programmierkonzepte kennen, um es verwenden zu können: Erstellen von Variablen, Schleifen, Funktionen und Objekten.

Im Web gibt es mehrere Ressourcen, mit denen Sie Javascript lernen und sofort seine Besonderheiten testen können. Wenn Sie jedoch ein Buch bevorzugen, empfehle ich dieses „   JavaScript & JQuery. Entwickeln Sie interaktive Weboberflächen. “. Wie Sie sehen können, enthält es Javascript und jQuery: die beiden Argumente gehen Hand in Hand.

Das Buch wird immer von APOGEO herausgegeben und ist, wie Sie sehen werden, nichts anderes als eine   Fortsetzung   des ersten Buches, das ich Ihnen zu HTML und CSS von Jhon Duckett empfohlen habe.

Fragen Sie bei Amazon

jQuery

Kommen wir nun zu jQuery. jQuery hat die Welt der Interaktionen völlig revolutioniert. Es ist eine Javascript-Bibliothek, die es uns ermöglicht, UI-Operationen auf sehr einfache Weise auszuführen, wobei sehr wenig Code verwendet wird, verglichen mit dem, was wir verwenden würden, um die gleichen Dinge in Vanilla JS zu erstellen.

Das Motto von jQuery lautet eigentlich   „Weniger schreiben, mehr tun“   . Obwohl die Popularität von jQuery im Laufe der Jahre abgenommen hat, auch dank des Aufkommens von Javascript-Frameworks wie Vue und React (die wir später sehen werden), verteidigt sich jQuery weiterhin recht gut und ist derzeit immer noch eines der einfachsten und schnellsten Methoden zum Erstellen dynamischer Ereignisse.

jQuery ist recht einfach zu erlernen, weil es die CSS-Syntax rekonstruiert. Über jQuery können Sie einige DOM-Elemente mit derselben Syntax auswählen, die Sie bereits verwenden, um sie über CSS auszuwählen. Sobald Sie Ihr Ziel festgelegt haben, können Sie mit ihm „interagieren“ und alle seine Ereignisse abfangen, wie zum Beispiel darauf klicken.

jQuery-Anwendungen gibt es viele, nicht nur in ihrer Grundform. Es gibt tatsächlich Tausende von jQuery-basierten Bibliotheken, mit denen Sie es erweitern können. jQuery ist sicherlich ein zentrales Element Ihres Studiums. Auf   jQuery.com   finden Sie alle notwendigen Dokumentationen und einige Beispiele, die Sie in diese Welt einführen.

Wenn Sie lieber auf Papier lernen möchten, empfehle ich Ihnen, sich   dieses Buch   anzusehen, das stattdessen von APOGEO veröffentlicht wurde.

CSS-Struktur: Bootstrap, Foundation

Aber schreibt ein Webdesigner für jedes neue Projekt Code von Grund auf? Offensichtlich nicht!

Es wäre dumm, das Rad tatsächlich für jedes Projekt neu zu erfinden. Es ist kein Zufall, dass im Laufe der Jahre einige CSS-Frameworks geschaffen wurden, die das Leben derer, die in diesem Sektor arbeiten, erheblich verbessert haben. Frameworks wie Bootstrap und Foundation ermöglichen es uns, viel Zeit zu sparen, insbesondere bei der Erstellung von responsiven Layouts.

Denken Sie daran, dass es viele gemeinsame Elemente zwischen verschiedenen Websites gibt. Man kann sagen, dass alle Sites mindestens ein Menü, Schaltflächen und Formulare haben. Frameworks bieten uns ein grundlegendes Styling dieser Elemente durch Klassen, die wir ständig wiederverwenden können. Das bedeutet nicht, dass wir durch die Verwendung einer einzigen Struktur Websites erhalten, die alle gleich sind. Diejenigen, die dies denken, verwenden offensichtlich die Struktur völlig falsch.

Der Rahmen ist nichts anderes als eine Basis, ein Ausgangspunkt, um zu vermeiden, dass das Rad jedes Mal neu erfunden wird. Wie gesagt, die bekanntesten sind Bootstrap  von Twiiter  und   Foundation von Zurb   . In der Vergangenheit habe   ich eine gute Anleitung   zum ersten geschrieben. Vielleicht ist es der richtige Zeitpunkt, um einen Blick darauf zu werfen.😉

Die Software: Sketch, Adobe XD

Nachdem Sie nun verstanden haben, welchen Studiengang Sie befolgen müssen, um die Codes besser zu beherrschen     , können wir zum visuellen Teil übergehen. Eine seriöse Website entsteht in der Tat immer durch sorgfältige Beobachtung und Planung. Vor UI kommt eigentlich UX oder User Experience. Bevor Sie eine Codezeile schreiben, ist es gut, einige   grafische Modelle zur   Verfügung zu haben.

Wie ich eingangs sagte, können diese Grafikmodelle von einem Webdesigner oder einem   Grafikdesigner erstellt werden   . Dies sind zwei ähnliche Zahlen, die jedoch nicht verwechselt werden sollten.

Die Programme zum Erstellen dieser Mockups sind vielfältig. In der MAC-Umgebung ist es gut, Sketch zu verwenden     . Unter Windows ist jedoch die am häufigsten verwendete Software ADOBE XD, obwohl ich sagen muss, dass viele Grafikdesigner immer noch Photoshop verwenden. Photoshop, obwohl es ein komplettes Programm ist, wurde als Bildbearbeitungsprogramm geboren und sollte auf diese Nische beschränkt bleiben. Nicht alles, was in Photoshop gezeichnet werden kann, ist im Web wirklich originalgetreu reproduzierbar, daher empfehle ich nicht, es beim Erstellen von Mockups zu verwenden.

Schließlich gibt es Tools, mit denen Sie Ihre Mockups animieren können, um dem Kunden das Gefühl zu geben,   „einen Prototypen zu navigieren“   . Ich spreche zum Beispiel von   InVision   , Figma und anderer ähnlicher Software.

Ein Teil dieser Software wird bezahlt, ist aber     für eine gute Arbeit unerlässlich . Wenn Sie nicht den Ehrgeiz haben, Ihre eigenen Websites von Grund auf neu zu gestalten, müssen Sie sicherlich nicht lernen, sie alle zu nutzen. Was Sie sicherlich lernen müssen, ist das Extrapolieren von Bildern und darauf gezeichneten Stilen, damit Sie alles in Code umwandeln können.

Nächster Schritt: Frontend-Entwickler

In diesem Kapitel werde ich versuchen, einige Antworten auf eine andere professionelle Persönlichkeit zu geben, nämlich den Frontend-Entwickler. Der Unterschied zwischen Webdesign und   Frontend Developer   ist minimal, im Laufe der Zeit gehen die beiden Figuren jedoch unterschiedliche Wege.

Wie ich Ihnen bereits sagte, wird es für einen Profi in der Tat immer schwieriger, alle Sprachen zu beherrschen, die das Web bevölkern. Tatsächlich wächst die Zahl weiter und es ist schwierig, auf alles vorbereitet zu sein, sogar auf das Lernen und den Versuch, Schritt zu halten.

Aus diesem Grund wurde in den letzten Jahren die Position des Frontend-Entwicklers geboren, die sich etwas von der des Webdesigners unterscheidet. Das Frontend ist in der Tat ein vollwertiger Entwickler, es befasst sich nur minimal mit HTML und CSS und wir können sagen, dass es sich vom grafischen Standpunkt einer Site fast vollständig unterscheidet. Sein Job ist eher der eines Programmierers und beschäftigt sich mit AJAX-Aufrufen, API-Management und fortgeschrittener Javascript-Entwicklung, insbesondere durch den Einsatz von Javascript-Frameworks wie VueJS und React.

Não se diz, portanto, que uma única pessoa não possa cumprir os dois papéis, porém convém fazer essa distinção nos papéis. O mundo do trabalho, na maioria dos casos, distingue as duas figuras e é certo que você o conhece. O erro que muitas vezes os novatos cometem, na minha opinião, é pensar que um profissional da web deve ser capaz de criar qualquer site de A a Z.

Este não é o caso. Um profissional conhece, em linhas gerais, todos os processos que estão na base do desenvolvimento de um site, sejam eles Backend e Frontend, porém colabora com muitos outros profissionais.

Der Grad der Spezialisierung hängt hauptsächlich von der Größe des Unternehmens ab, für das Sie arbeiten. Ein kleines Unternehmen kann es sich wahrscheinlich nicht leisten, seine Funktionen so zu diversifizieren, dass es sich auf bereits entwickelte CMS wie WordPress verlassen kann. Ein großes Unternehmen wird die Möglichkeit haben, auf hochspezialisierte Fachleute zurückzugreifen.

Mein Rat ist, sich auf ein einziges Gebiet zu   spezialisieren,   damit Sie ein qualifizierter Profi in dem werden können, was Sie am meisten lieben. Der   Full Stack Developer   ist meiner Meinung nach eine fast mythologische Figur. Jeder von uns hat Macken und muss seinen Beruf nach seinen Fähigkeiten wählen.

Javascript-Struktur: React, VueJS

So wie es für den HTML- und den JS-Teil Strukturen gibt, gilt die gleiche Aussage auch für Javascript. Tatsächlich gibt es Frameworks, mit denen Sie Code auf sehr einfache und reaktive Weise schreiben können. Die bekanntesten sind ohne Zweifel: Angular von Google, React von Facebook und VueJS, ein Framework von Evan You.

Diese Technologien ermöglichen es Ihnen, „reaktive“ Webseiten zu erstellen. Es überrascht nicht, dass sie als Progressive Javascript Framework definiert sind     . Das Potenzial dieser Tools ist unglaublich und ermöglicht es Ihnen, Code auf völlig innovative Weise zu entwickeln.

Ich möchte nicht zu weit gehen, um das Javascript Framework zu erklären,     da es die Kompetenz des Frontend-Entwicklers ist, aber es war in Ordnung, kurz zu erklären, wie sie funktionieren. Wenn Sie sich für das Thema interessieren, empfehle ich Ihnen, sich diesen   VueJS-Leitfaden anzusehen, den   ich vor einiger Zeit geschrieben habe.

Schlussfolgerungen

Ich hoffe aufrichtig, dass er durch diesen Leitfaden dazu beigetragen hat, etwas Ordnung in Ihren Kopf zu bringen. Am Anfang hatte ich Mühe zu verstehen, was ich studieren musste,   um Webdesigner zu werden   . Es ist nicht einfach, ohne Beratung zu verstehen, wie man in die Arbeitswelt einsteigt, welche Zahlen Unternehmen suchen und vor allem welche Themen man studieren sollte, sowie eine mentale Ordnung zu haben, Dinge zu lernen.

Wenn Sie mehr hinzufügen, Ihre Erfahrungen teilen oder hilfreiche Ratschläge geben möchten, schreiben Sie mir gerne und ich werde Ihren Rat gerne in diesen Artikel aufnehmen.

 

Leave a Comment

Your email address will not be published.