Webentwicklung & Design 101

web_development_101Möchten Sie die Grundlagen der Webentwicklung und des Webdesigns kennenlernen? Genial…


Aber es gibt ein Problem mit diesem Gedankengang oder einige davon tatsächlich …

  • Was ist der Zweck einer Website?? Braucht jeder wirklich einen??
  • Wenn ja, wie erstellen Sie eine hochwertige Website?? Oder mit anderen Worten, wie lernen Sie die grundlegende Webentwicklung und das grundlegende Webdesign, mit denen Sie diese hochwertige Website selbst erstellen können??
  • Noch wichtiger ist, können Sie bei Ihrem ERSTEN Versuch eine hochwertige Website erstellen? Oder brauchen Sie jahrelange Erfahrung hinter sich, bevor Sie auf ein schreckliches Ergebnis hoffen können??

Lassen Sie uns all das hier beantworten Anfängerleitfaden für Webentwicklung und -design.

[Spoiler Alarm. Ja, Sie können beim ersten Versuch eine hochwertige Website erstellen.]

Was wird in diesem Handbuch behandelt??

Okay, das Wichtigste zuerst, wir freuen uns, dass Sie weiter gelesen haben und sich entschlossen haben, die Webentwicklung auszuprobieren! So wird es ablaufen:

Die Kapitel werden auf sehr einfache Weise dargestellt, mit dem Hauptinhalt links und den umsetzbaren Elementen rechts. Wie so:

Leitfaden Einführung: Kapitel 1

Nun, wie es weitergeht:

  • Während Ihrer ersten Lesung: Wir empfehlen Ihnen, das Ganze von oben bis unten zu lesen. Auf diese Weise erhalten Sie einen guten Überblick über das Thema und können die wichtigsten Teile des Themas besser verstehen. Außerdem erhalten Sie grundlegende Tools und Methoden zur Bearbeitung einzelner Aufgaben.
  • Während Ihres 2. Lesens und weiter: Verwenden Sie das Inhaltsverzeichnis und wechseln Sie zu dem Teil, der Sie am meisten interessiert. Sie können auch die Freigabeschaltflächen neben jedem Kapitel verwenden und die Links entweder an sich selbst oder an Ihre Freunde / Follower senden, die interessiert sein könnten.

Bereit? Gehen wir zu Kapitel 1.

Für wen ist dieser Leitfaden??

Wenn Sie grundlegende Webentwicklungen und -designs erlernen möchten, ist dieses Handbuch genau das Richtige für Sie. Was auch immer Ihre Motivation sein mag.

Außerdem benötigen Sie keine technischen Vorkenntnisse, um loszulegen (außer grundlegenden „Webkenntnissen“). Der springende Punkt dieses Handbuchs ist, eine Art „101“ -Kurs für alle zu sein, die daran interessiert sind, Websites zu erstellen und Webentwicklung zu lernen.

Hier sind einige häufige Gründe, warum Sie interessiert sein könnten:

  • 1. Sie benötigen eine Website für Ihr Unternehmen (und Sie möchten sehen, ob Sie es selbst bauen können).
  • 2. Sie möchten Webentwicklung aus Leidenschaft oder vorübergehendem Interesse lernen (nichts schlechtes daran).
  • 3. Sie brauchen eine Website für die Schule.
  • 4. Sie helfen einem Freund oder Familienmitglied, seine Website online zu stellen.

Die Hauptidee, die uns leiten wird

Das ist wichtig! Und bitte seien Sie nicht böse auf uns, wenn Sie ein fortgeschrittener Webentwickler sind, der dies liest, aber die Hauptidee, die uns durch diese gesamte Ressource für Webentwicklung und -design 101 führen wird, lautet:

“Der Ansatz des geringsten Widerstands”

Hier sind die drei Prinzipien des Ansatzes mit dem geringsten Widerstand:

  • Wurden Dinge nicht auf molekularer Ebene zu zerlegen. Das heißt, Wir werden nicht auf den Grund gehen, wie Programmiersprachen funktionieren oder wie ein Webserver funktioniert.
  • Wurden das Rad nicht neu erfinden. Das heißt, Wenn jemand ein bestimmtes Problem bereits gelöst und die Lösung zur Verfügung gestellt hat, werden wir es verwenden.
  • Wurden eine einfache Lösung großartig machen, eher als eine komplizierte und scheinbar funktionalere Lösung fehlerhaft und nicht verständlich.

KAPITEL 1: Der Plan

Ihre Idee, Website-Typ, Domain-Name und Hosting.

Bevor Sie eine Website einrichten, benötigen Sie einen Plan

So ironisch es auch klingen mag – die erfolgreiche 80er-Jahre-Show „The A-Team“ hat uns gelehrt, ein guter Plan ist ein Schlüssel zum Erfolg.

Wenn Sie schon eine Weile eine Website in sich haben, freuen Sie sich sicherlich über die einzige Idee, sie endlich anderen zum Lesen und Durchsuchen zur Verfügung zu stellen.

Sie möchten, dass Ihre Website fantastisch ist. Sie wissen wahrscheinlich, wie es bis zu einem gewissen Grad aussehen wird. Oder vielleicht haben Sie sogar das perfekte Logo parat.

Aber…

Hier sollten Sie überhaupt nicht anfangen. Wenn Sie mit vorher festgelegten Erwartungen beginnen, führt dies nur zu viel Verwirrung auf dem Weg und einem unterdurchschnittlichen Ergebnis am Ende.

Denken Sie stattdessen an Folgendes:

  1. Trennen Sie sich von Ihren technischen Zielen. Wie zum Beispiel das Ziel, Website-Technologien oder bestimmte Website-Software zu lernen.
  2. Stellen Sie sich eine Hauptfrage: “Wofür brauche ich die Seite?”

Hier geht es nicht um Sie, sondern um das Ziel der Website.

Fragen, die Sie sich stellen müssen, bevor Sie Ihre Website einrichten

  1. Was die Site erreichen soll?
  2. Was wird das wichtigste „Ding“ sein, das auf der Website präsentiert wird? (z. B. Ihr Unternehmen, ein Produkt, Ihre Blog-Beiträge usw.)
  3. Wird die Website einen besonderen Zweck haben? (z. B. ein E-Commerce-Shop, das Portfolio eines Fotografen usw.)
  4. Wer ist die Zielgruppe??
  5. Warum interessieren sie sich für das Thema der Website?
  6. Welchen Schmerz löst die Site für einzelne Zuschauer??

Lassen Sie uns über diese letzten drei Fragen eine Minute lang über das Publikum sprechen …

Es gibt zwei Hauptregeln für die Erstellung von Websites. Hier ist Regel Nr. 1::

 Der Leser / Besucher steht an erster Stelle. Sie sind die Hauptperson, der Ihre Website gefallen muss.

In gewisser Weise gehört Ihre Website nicht Ihnen. Es gehört ihnen.

(Regel 2 werden wir gleich besprechen.)

Das Vergessen dieser einfachen Richtlinie kann Sie völlig in die falsche Richtung führen, sogar bis zu dem Punkt, an dem Sie sich mit einer Website befinden, die für alle außer Ihnen verwirrend ist.

“Pfui! Die Leute verstehen einfach nicht, worum es auf dieser Website geht. Wie können sie so unwissend sein?! ” – Sie denken am Ende. Aber wie sich herausstellte, waren Sie der Unwissende.

Die einzige Möglichkeit, dies zu vermeiden, besteht darin, Ihre Website von Anfang an für den Leser zu erstellen.

Also … nimm das Stück Papier und beantworte alle oben genannten Fragen.

Sobald Sie fertig sind, haben Sie Ihre endgültigen Richtlinien, nach denen Sie bei der Arbeit an Ihrer Website handeln werden.

Diese Antworten werden im Laufe der Zeit ein außerordentlich leistungsfähiges Werkzeug sein. Sie können jederzeit darauf zurückgreifen, wenn Sie vor einer Entscheidung bezüglich Ihrer Website stehen.

Solltest du * dies * oder * das * tun? Gehen Sie zum Antwortbogen und finden Sie es heraus. Sollten Sie eine breite oder schmale Seitenleiste verwenden? Gehen Sie zu den Antworten und finden Sie heraus, welche mit größerer Wahrscheinlichkeit beim Zielleser ankommen. Und ETC.

Domainnamen und Webhosting

Wenn Sie Websitebesitzer werden möchten, benötigen Sie einen Domainnamen und einen Webhost.

Okay, technisch gesehen können Sie eine Test-Website auf Ihrem eigenen Computer erstellen und dann von einem lokalen Webserver ausführen (der auch als Software auf Ihrem Computer installiert ist), aber das wäre für 99% der Benutzer keine brauchbare Lösung Fälle, also lassen Sie es uns einfach überspringen.

Also, ein Host und eine Domain …

Die schlechte Nachricht hier ist, dass beide Geld kosten.

Die gute Nachricht … es ist nicht so viel Geld im großen Schema der Dinge. Während Sie lernen, können Sie sogar mehrere kleine Websites unter einem einzigen Domainnamen und unter einem einzigen Webhost starten.

Aber fangen wir am Anfang an.

Webhosts:

  • In einfachen Worten, ein Webhost ist der Ort, an dem sich Ihre Website befindet und an dem Ihre Besucher sie finden können. In gewisser Weise sind Webhosts für Websites wie Wohnungen für Menschen. Unter der Haube sind Webhoster Unternehmen, die ihre Server gegen Geld vermieten (… kleine Wohnungen für Ihre Websites).
  • Zu Beginn reicht ein Standard-Shared-Hosting-Plan aus. Sie können diese für alles ab 3 US-Dollar pro Monat kaufen. Hier ist ein schöner Vergleich der beliebtesten Webhoster. Probieren Sie es aus und entscheiden Sie, welches dieser Unternehmen für Sie genau richtig erscheint. Unsere Empfehlungen gelten jedoch für SiteGround, A2 Hosting und Dreamhost.

Domänen:

  • Wenn ein Webhost eine Wohnung ist, ist eine Domain die Adresse dieser Wohnung. Die Domain dieser Website lautet beispielsweise hostingfacts.com.
  • Der Einstieg besteht darin, den gewünschten Domainnamen auszuwählen und ihn dann bei einem Registrar zu kaufen. Hier finden Sie eine umfassende Anleitung zum Kauf eines Domainnamens sowie eine Liste der Generatoren von Domainnamen.

 

Vorschläge und Tipps zur Auswahl eines Domainnamens

Okay, es ist eine Sache, zu einem Domain-Registrar zu gehen und die Domain tatsächlich zu kaufen, aber wie wählen Sie den richtigen Domain-Namen aus??

Es gibt ein paar Schulen:

  • Markendomainnamen. Dies sind Domänen, die aus nicht vorhandenen Wörtern bestehen. Denken Sie an Dinge wie Google.com oder Yahoo.com. Bevor diese Unternehmen hinzukamen, bedeuteten diese Worte nichts. Der Vorteil eines Markendomainnamens besteht darin, dass er… gut, sehr markenfähig, einprägsam und Ihre Website leicht von den anderen zu unterscheiden ist.
  • Schlüsselwortbasierte Namen. Diese bestehen aus vorhandenen Wörtern, die in einer Reihenfolge angeordnet sind, die den Zweck der Site beschreibt. Denken Sie, Dinge wie Pizza.com oder StartBloggingOnline.com. Mit einem solchen Domain-Namen können Ihre Besucher die Art der Website, die sie gerade besuchen, genau vorhersagen. Der Nachteil ist, dass diese Domains im Allgemeinen weniger markenfähig sind.
  • Kombinierte Namen. Hierbei handelt es sich um Markendomains und Keyword-basierte Domains. Denken Sie, Facebook.com oder Copyblogger.com. Solche Namen deuten darauf hin, dass der Besucher einen Teil der Natur der Website hat, aber sie sind immer noch sehr markenfähig.

Einige allgemeine Richtlinien, unabhängig vom gewählten Domänentyp:

  • Machen Sie die Domain leicht zu merken.
  • Machen Sie es kurz und einfach. Je länger die Domain ist, desto verwirrender ist sie.
  • Holen Sie sich ein .com (wenn möglich). Das .com ist die wichtigste verfügbare “Top-Level-Domain”. Geben Sie sich mit nichts anderem zufrieden.
  • Vermeiden Sie Bindestriche. Holen Sie sich Ihren Namen in Single-Blob-Form wie “cakerecipes.com” anstelle von “cake-recipes.com”

Dinge, die Sie nach diesem Kapitel bereithalten müssen:

  • Ein Domainname.
  • Ein Webhost.
  • Ihr Antwortbogen – die Ziele Ihrer Website und wie sie dem Publikum dienen wird.

Benötigen Sie weitere Hilfe? Hier lesen Sie weiter für Sie:

  • Warum Shared Hosting? Haupttypen von Hosts verglichen
  • 10 Dinge, die einen Webhost gut machen
  • 12 Regeln für die Auswahl des richtigen Domainnamens
  • Ein umfassender Planungsleitfaden für Websites

KAPITEL 2: Entwerfen und Wireframing

Nehmen Sie Papier und Stift und kratzen Sie zusammen mit Ihrer Website-Struktur

Okay, lassen Sie uns in die Entwurfsphase eintreten.

Das Wichtigste zuerst, hier ist die Arbeitsmoral, nach der wir hier vorgehen werden:

  • Wir verwenden so lange wie möglich Stift und Papier und wechseln erst dann zum Computer. Glauben Sie uns, jede Minute, die Sie mit der Arbeit an Ihrem Design auf Papier verbringen, spart eine Stunde, sobald Sie anfangen, die Dinge am Computer zu optimieren.
  • Wir machen iterative Arbeit … Wir »überprüfen die Ergebnisse» verbessern »überprüfen die Ergebnisse» wiederholen, bis sie fertig sind.

In Kapitel 1 haben wir etwas erwähnt, das wir als Regel Nr. 1 beim Erstellen von Websites bezeichnet haben. Jetzt ist die Zeit für Regel 2:

Regel Nr. 2 der Website-Erstellung:

Denken Sie zuerst an den Inhalt.

Auf einer Website kommt es auf den Inhalt an. Nicht das Design. Inhalt.

Leute kommen für den Inhalt. Sie kommen nicht für das Design. Das Design ist nur ein Mittel, um den Inhalt zu liefern.

Beginnen Sie niemals damit, wie Ihre Website aussieht. Beginnen Sie mit dem Inhalt. Inhalt. Inhalt. Inhalt.

Was verstehen wir unter „Inhalt“? Kurz gesagt, es ist das, was die Leute von Ihrer Website erhalten möchten. Blog-Posts, Produkte im Store, Forenthreads, wenn Sie ein Forum erstellen, Nachrichtenartikel, Ihr Geschäftsangebot usw..

“Ja wirklich? Das Aussehen spielt wirklich keine Rolle? ” – Du fragst.

Schauen Sie sich diese Seite an, anstatt dass wir das verprügeln:

Einfache Website

Diese einfache Webseite ist bei weitem die beste Erklärung dafür, was Design ist und welchen Zweck es online erfüllt.

Denken Sie also daran, zuerst den Inhalt!

Inhalt und Struktur der Website

Okay, da der Inhalt das Wichtigste ist, müssen Sie ihn (größtenteils) vorher bereithalten. Zumindest müssen Sie eine gute Vorstellung davon haben, wie viel Inhalt in welcher Form vorhanden sein wird.

Hinweis. Wir wissen, dass dieser Teil schwierig sein kann. Mit Inhalten zu beginnen scheint für das Website-Design ziemlich unnatürlich, aber es ist wirklich der beste Weg, um am Ende ein hervorragendes Ergebnis zu erzielen. Denken Sie also über den Inhalt nach, den Sie mit dem Leser teilen möchten, und wie Sie ihn präsentieren möchten.

Der nächste Schritt besteht darin, die einzelnen Arten von Seiten auszuwählen, die Sie benötigen (z. B. eine Startseite, eine Produktseite, eine Kategorieseite, eine Info-Seite, eine Kontaktseite, die Hauptverkaufsseite, eine Zielseite für Newsletter-Abonnements). Hauptblogliste, einzelne Beiträge, vielleicht ein Geschäft und was auch immer sonst nötig erscheint).

Überlegen Sie, wie Sie Ihre Inhalte auf der Website am effektivsten organisieren können?

Mach das alles auf Papier. Es wird wahrscheinlich einfacher und schneller für Sie sein, als vor Ort eine Software zum Zeichnen von Diagrammen zu erlernen.

Beispiel:

Inhaltsstruktur

Kratzen Sie ein Drahtmodell zusammen

Ein Drahtmodell im Webdesign ist einfach ein Seitenschema oder eine Blaupause – ein visueller Leitfaden, der den Rahmen einer Website darstellt (Wikipedia sagt es uns)..

Wireframes sind fantastisch! Wir verwenden sie für die meisten Dinge, die wir online tun sollen. Hier ist zum Beispiel ein Drahtmodell für diese Anleitung:

Kratzen Sie ein Drahtmodell zusammen

Wie Sie wieder sehen können, ist das auf dem Papier. Obwohl es für diese Art von Arbeit mehrere Apps gibt, raten wir davon ab, sie zu verwenden. Sie mögen für Profi-Designer großartig sein, aber Anfänger oder Fortgeschrittene verlieren nur Zeit, um sie zu lernen, und am Ende werden sie nicht viel besser als das, was sie mit Stift und Papier erreichen würden.

Also, wie man ein Drahtmodell erstellt?

Wenn Sie Anfänger sind, gibt es zwei Ansätze:

  • Gehen Sie mit dem Fluss, wenn Sie sich stark fühlen, und ziehen Sie sich einfach zurück (nicht immer eine perfekte Lösung)..
  • Machen Sie sich schnell mit dem richtigen Drahtmodell vertraut (normalerweise besser)..

Für letztere gehen Sie hier – eine großartige Anleitung.

(Stellen Sie sicher, dass Sie ein Drahtmodell für jeden wichtigen Seitentyp erstellen, den Sie im vorherigen Schritt aufgelistet haben.)

Dinge, die Sie nach diesem Kapitel bereithalten müssen:

  • Der größte Teil des Inhalts für die Website oder zumindest der größte Teil davon wurde vorhergesagt (wenn Sie sich beispielsweise auf benutzergenerierten Inhalt verlassen, ist es schwierig, diesen im Voraus zu haben)..
  • Die Inhaltsstruktur Ihrer Website wird als Grafik erstellt.
  • Ein Drahtmodell der einzelnen Seitentypen, die Sie benötigen.

Weiterführende Literatur:

  • 9 Schritte zur Planung des Website-Inhalts
  • Neu im Webdesign? Fang hier an.

KAPITEL 3: UX und UI

Unterschätzen Sie niemals die Bedeutung der Benutzererfahrung und der Benutzeroberfläche

Wie in User Experience und User Interface.

WebDesignerDepot gibt uns eine ziemlich poetische Definition der beiden:

UI ist der Sattel, die Steigbügel und die Herrschaft.

UX ist das Gefühl, dass Sie reiten und Ihr Vieh abseilen können.

Für eine praktischere Definition:

  • Die Benutzeroberfläche sieht der Benutzer, wenn er sich Ihre Website ansieht.
  • UX ist, wie sie sich dabei fühlen.

Das Paar und wie gut es ausgeführt wird, definiert im Wesentlichen die Nützlichkeit Ihrer Website für den Endbenutzer / Besucher.

Sowohl das UX- als auch das UI-Design sind große Themen für sich, und es gibt viele kleinere Elemente, die für das Endergebnis eine Rolle spielen.

Kurz gesagt, es gibt viel zu lernen, wenn Sie gerade erst Ihre Reise beginnen.

Anstatt dass wir hier versuchen, einen ganzen UX- und UI-Designkurs zu verkrampfen, lassen Sie uns nur eine Handvoll wichtiger Elemente hervorheben und Sie dann zur weiteren Lektüre an einen anderen Ort schicken.

Benutzerziele

Bei UX geht es um Benutzerziele… Nicht so viele Ihrer Ziele… Benutzerziele.

Okay, was bedeutet das? Kehren Sie zunächst zum Zweck Ihrer Website zurück – dem, woran Sie in den vorherigen Kapiteln gearbeitet haben. Der Grund, warum Sie die Website erstellen und wie sie dem Benutzer / Besucher hilft.

Wie übersetzt es sich in das Ziel des Besuchers? … Was möchte der Besucher erreichen oder erreichen, wenn er auf Ihre Website kommt? Das ist ihr Ziel.

Wie einfach sind diese Ziele zu erreichen??

Konzentrieren Sie sich als Nächstes auf die folgende Frage:

  • Kann der Besucher sein Ziel leicht erreichen? – Können sie auf einfache Weise zu den genauen Informationen gelangen, für die sie gekommen sind??

Um dies zu beantworten, müssen Sie zu Ihrem Drahtmodell, Ihrer Inhaltsstruktur zurückkehren und die Dinge überprüfen.

Stellen Sie sicher, dass die Inhaltsstruktur und die Seiten, die Sie sich ausgedacht haben, aus Sicht eines Benutzers sinnvoll sind. Stellen Sie sicher, dass sie frei und nicht verwirrend zwischen den wichtigen Seiten navigieren können.

Im Wesentlichen stellen wir hier sicher, dass die Website Ihren Besuchern einen Mehrwert bietet.

Es ist schwierig, das alles selbst herauszufinden, nicht wahr??

Es wird dringend empfohlen, die im Abschnitt “Weiterführende Literatur” dieses Kapitels aufgeführten Ressourcen zu lesen. Sie können aber auch sozusagen “einen Hack” versuchen.

Denken Sie nämlich daran, was Sie frustriert, wenn Sie Websites besuchen, die denen ähneln, die Sie erstellen möchten? Möglicherweise gibt es einige Informationen, die wirklich schwer zu erreichen sind, oder ein Oberflächenelement, das die Website verwirrend macht.

Machen Sie sich Notizen, ziehen Sie Schlussfolgerungen und machen Sie nicht dieselben Fehler mit Ihrer Website.

Emotionen als Werkzeug verwenden

Wenn Sie an der Benutzeroberfläche und der Benutzeroberfläche Ihrer Website arbeiten, möchten Sie im Wesentlichen eine bestimmte Emotion bei Ihrem Besucher hervorrufen.

Sie möchten, dass sie sich auf eine bestimmte Weise fühlen, was sie dann davon überzeugt, sich auf eine bestimmte Weise zu verhalten. So wird Ihre Website wirklich hilfreich.

Eines der besten Werkzeuge, um am emotionalen Teil des Jobs zu arbeiten, ist Farbe.

Farben haben in verschiedenen Kulturen unterschiedliche Bedeutungen. Das Verständnis dieser Unterschiede kann Ihre Arbeit erheblich erleichtern. Hier ist ein schönes Spickzettel.

Sobald Sie wissen, welche Farben Sie (möglicherweise) verwenden möchten, finden Sie hier einige allgemeine Richtlinien für die Arbeit mit Farben:

  • Wählen Sie ein Hauptfarbschema, das aus mehreren Farben besteht, die gut zusammenpassen. Hier ist ein großartiger Farbschema-Generator.
  • Wählen Sie eine Farbe aus, die Ihre Akzentfarbe sein soll – die Farbe, die für Aktionsschaltflächen, Kaufschaltflächen usw. verwendet wird. Grundsätzlich alles, was die Aufmerksamkeit des Benutzers erfordert.

Typografie

In vielen Fällen gewinnt (oder verliert) Typografie das Spiel der Website-Erstellung.

Es ist so einfach, die Typografie komplett zu vergessen und Arial einfach für alles zu verwenden.

Nicht empfohlen.

Heutzutage ist das Arbeiten mit benutzerdefinierten Schriftarten sehr einfach, und Sie müssen nicht einmal etwas Technisches tun, um diese benutzerdefinierten Schriftarten auf Ihrer Website zu aktivieren.

Große, großartige Typografie ist heutzutage sehr in Mode und erleichtert auch die Arbeit eines Designers – insbesondere eines Anfängers – viel.

Schauen Sie sich diese Seite an, zum Beispiel:

Bonobos

Hast du etwas bemerkt? Ja, die Schriftarten sind riesig und sehen toll aus!

So arbeiten Sie daran:

  • Im Allgemeinen benötigt jedes Website-Design zwei Arten von Text: Überschriften und Absätze. In den meisten Fällen reicht jeweils nur eine Schriftart aus.
  • Gehen Sie zu Google Fonts – Googles eigener Bibliothek mit kostenlosen Schriftarten, die Sie auf Ihrer Website verwenden können – und suchen Sie nach einer Überschriftenschrift, die Ihnen wirklich Spaß macht.
  • Nehmen Sie dann den Namen dieser Schriftart und suchen Sie ihn bei Font Pair – es handelt sich um eine Bibliothek vorgefertigter Schriftpaarungen, die gut zusammenpassen.
  • Wählen Sie eine Paarung, die fantastisch aussieht.
  • Notieren Sie sich die Namen beider Schriftarten, die Sie später benötigen.

Wenn Sie dies auf diese Weise tun, wird Ihr Prozess beschleunigt und Sie erhalten dennoch ein großartiges Ergebnis.

Beispiel: Wir haben in Google Fonts eine Schriftart namens Bree Serif gefunden, die uns sehr gut gefällt:

Bree-Serif

Dann haben wir es zu Font Pair gebracht, und die Website hat vorgeschlagen, dass Bree Serif gut zu Open Sans passt. Perfekt:

Bree-Serif-Open-Sans

Die endgültige Struktur

Endlich der letzte Schritt!

In diesem Kapitel geht es darum, auf einem endgültigen Layout / einer endgültigen Struktur zu landen, die Sie für Ihre Website verwenden werden. An diesem Punkt sollten Sie sich ziemlich sicher sein, was Sie mit Ihrem Design und Ihrer Benutzeroberfläche tun möchten.

Dinge, die Sie nach diesem Kapitel bereithalten müssen:

  • Ihre Benutzerziele sind klar aufgelistet.
  • Ihr Drahtmodell wurde doppelt überprüft, um sicherzustellen, dass diese Ziele nicht verwirrend sind.
  • Das ausgewählte Farbschema.
  • Die Typografie hat es herausgefunden.
  • Ihr gesamtes Site-Layout / Struktur / Organisation der Website.

Weiterführende Literatur: 

  • UX Magazine
  • UX-Stand
  • Die Psychologie und Emotion hinter Farbe im Webdesign
  • Was ist User Experience Design? Übersicht, Tools und Ressourcen
  • Festlegen intelligenter Geschäftsziele für eine Website
  • 8 Regeln zur Erstellung einer effektiven Typografie

KAPITEL 4: WordPress, HTML oder Vorlagen?

Entscheiden Sie, welchen Weg Sie einschlagen möchten – Content-Management-Systeme oder codieren Sie sie von Grund auf neu

Hier beginnt die eigentliche, schmutzige Arbeit unter der Haube!

Dies ist wahrscheinlich auch der gruseligste Teil des Prozesses (gib es zu!).

Diesmal ist es der richtige Zeitpunkt, Stift und Papier beiseite zu legen und mit Software zu arbeiten.

Und direkt vor dem Tor gibt es eine Menge Fragen …

  • Soll ich HTML lernen??
  • Was ist mit CSS??
  • Werden fertige HTML-Website-Vorlagen den Trick für mich tun??
  • Muss ich eine Programmiersprache wie PHP lernen??
  • Ich habe gehört, dass WordPress heutzutage der Weg ist, eine Website zu erstellen.
  • Ich habe diese Squarespace Super Bowl-Anzeige gesehen. Was ist damit?
  • Wie heißt dieses Ding Joomla? Oder Drupal?
  • und weiter und weiter und weiter.

Die Antwort auf all diese Fragen lautet ja.

Ja, Sie können eines oder alle dieser Dinge tun, und es liegt nur an Ihnen, zu entscheiden, welchen Weg Sie wählen möchten.

Wir versuchen zu sagen, dass es hier keinen besten Ansatz gibt. Es hängt alles davon ab, wie sehr Sie sich mit der Webentwicklung befassen möchten, wie viel von den Grundlagen der Website-Erstellung Sie lernen möchten, wie schnell Sie eine qualitativ hochwertige Website erstellen müssen und wie anpassbar sie danach sein soll.

So gehen wir von diesem Kapitel aus vor. Zuerst, Wählen Sie die Person aus, die Sie am besten definiert:

  • ein) Ich möchte lernen, worum es bei der Webentwicklung geht, alle Grundlagen, das Innenleben einer Website und alle Mechanismen, mit denen eine Website funktioniert.
  • b) Ich möchte lernen, wie man einen zuverlässigen Website-Builder verwendet, der den größten Teil des schweren Hebens für mich erledigt.
  • c) Ich weiß nicht, was ich tun soll. Ich möchte nur eine Website, die ich selbst erstellen kann und die ordnungsgemäß funktioniert.

Beantwortet a)? Fahren Sie mit Kapitel 5 fort.

Beantwortet b)? Fahren Sie mit Kapitel 6 fort.

Beantwortet c)? Schauen Sie sich diesen Artikel an und kehren Sie dann zurück (er sollte Ihnen bei der Auswahl des perfekten Pfades helfen):

  • Die 8 besten Blogging- und Website-Erstellungsplattformen wurden überprüft… Jede Plattform wird zusammen mit ihren Vor- und Nachteilen beschrieben, und die Ressource schlägt auch die beste verfügbare Auswahl (Wix oder SB) für Ihre spezifischen Anforderungen vor.

Hast du es gelesen? Großartig! Welche der oben genannten Personen beschreibt Sie am besten – A oder B)?

Die Werkzeuge, die auf dem Weg nützlich sein könnten:

  • Grafik: Paint.NET, Gimp, Pixlr.
  • Code schreiben: Notepad ++, TextWrangler, SublimeText.
  • Arbeitsmanagement: Trello.
  • Design: Farbschemata, Google Fonts, die Tools von hier.
  • Fotografie: Unsplash, AllTheFreeStock

KAPITEL 5: Einführung in HTML, CSS & Javascript

Wie Websites eine eingebaute Realität sind

In diesem Kapitel werden wir auf die Grundlagen der Webentwicklung hinweisen, die wichtigsten Begriffe erläutern und Sie dann zu bestimmten Ressourcen weiterleiten, in denen Sie Ihr Wissen und Ihre Fähigkeiten erweitern können.

HTML

HTML ist die Sprache der Websites. Jede Webseite wird irgendwann erstellt oder in HTML konvertiert.

Um beispielsweise die HTML-Struktur dieses Handbuchs anzuzeigen, das Sie hier lesen, drücken Sie einfach “Strg + U” auf Ihrer Tastatur.

HTML definiert jeden Block, den Sie auf einer Webseite sehen. Am Ende des Tages muss alles, was auf einer Webseite angezeigt werden soll, in HTML konvertiert werden.

Um HTML effektiv zu lernen, empfehlen wir Ihnen, sich für einen der (kostenlosen oder kostenpflichtigen) Kurse im Internet anzumelden. Einige der besten finden Sie in der Codeacademy oder im Baumhaus.

Hier ist beispielsweise ein spezieller Abschnitt zur Codeacademy, der sich mit HTML und CSS befasst.

CodeCademy-Homepage

Das ist also der umfassende Ansatz für HTML.

CSS

CSS – um die langweiligen technischen Details zu überspringen – ist dafür verantwortlich, alles zu gestalten, was auf einer Webseite sichtbar ist.

CSS nimmt HTML-Tags und strukturiert sie und fügt ihnen Styling hinzu. Dinge wie: Fettdruck, Farbanpassungen, Schatten, Layouts und sogar Animationen werden jetzt hauptsächlich mit CSS ausgeführt.

Um besser zu verstehen, wie dies genau funktioniert, besuchen Sie diesen kurzen Kurs an der Codeacademy.

Weitere Informationen finden Sie in den CSS-Abschnitten der Codeacademy oder des Baumhauses.

JavaScript, jQuery, Bootstrap usw..

JavaScript ist eine Programmiersprache, mit der Sie einige dynamische Aktionen auf Ihrer Website einführen können. Sie können beispielsweise Webformulare validieren oder effizienter mit dem Benutzer interagieren, ohne die Seite, auf der er sich befindet, neu laden zu müssen. Hier ist ein schönes Tutorial von w3schools.

Vor diesem Hintergrund ist jQuery eine JavaScript-Bibliothek, mit der Sie erweiterte Funktionen mit weniger Codierung erstellen können. Sehr praktisch für einen Webentwickler. Erfahren Sie hier mehr.

Schließlich ist Bootstrap eine sehr interessante Erfindung. Ursprünglich von Twitter eingeführt, handelt es sich im Grunde genommen um eine Front-End-Umgebung, die den Prozess der Erstellung einer Website beschleunigt, indem die meisten bereits vorgefertigten allgemeinen Website-Elemente bereitgestellt werden. Es klingt kompliziert, nicht wahr??

Aber das ist es nicht. Schauen Sie sich einfach diesen Einstiegskurs an der Codeacademy an (übrigens haben wir Bootstrap ursprünglich so gelernt)..

Dinge, die Sie nach diesem Kapitel bereithalten müssen:

  • Grundsätzlich ist der erste Entwurf Ihrer HTML / CSS-Website vollständig erstellt. Von dort aus können Sie mit der Iteration und Verbesserung des Endergebnisses beginnen.

KAPITEL 6: Plattformen zum Erstellen von Websites

Richten Sie Ihre erste Site ein? Probieren Sie kostenlose Website-Plattformen wie WordPress, Joomla oder Drupal aus

Kapitel 6: Plattformen zum Erstellen von Websites

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Es gibt mehr Website-Builder, als Sie sich vorstellen können. (Wenn Sie die Art von Person sind, die Stöcke an Dingen schüttelt.)

Okay, Witze beiseite.

Wenn Sie nicht lernen möchten, wie man Dinge von Hand codiert, handelt es sich sicherlich um mehrere Lösungen, die Ihnen helfen können.

Hinweis. Bitte beachten Sie, dass alles andere, was wir in den Kapiteln 1 bis 4 besprochen haben, hier noch gilt. Selbst wenn Sie sich für eine Site-Building-Lösung entscheiden, die praktisch ist, müssen Sie dennoch darauf achten, das Endprodukt benutzerfreundlich und im Einklang mit den Zielen aller zu gestalten. Diese Tools zum Erstellen von Websites sind genau das… Tools.

Beginnen Sie mit denjenigen, die am einfachsten zu erfassen sind:

SquareSpace

Die einzige Website-Plattform, die während des Super Bowl Werbung macht.

Kurz gesagt, eine sehr praktische Lösung, die von jedem verwendet werden kann. Keine Vorkenntnisse erforderlich.

Sie können damit klassische Websites, Blogs und sogar E-Commerce-Shops erstellen, über die wir sogar eine Rezension geschrieben haben. Die Benutzeroberfläche und der gesamte Prozess der Verwendung sind ziemlich einfach zu verstehen, und die Squarespace-Leute bieten viele interessante Tutorials. Schau sie dir hier an.

WordPress

Ehrlich gesagt, wir lieben WordPress.

Meistens ist es die perfekte Plattform, um eine Website mit zu erstellen. Es bietet die perfekte Balance zwischen Komplexität und Benutzerfreundlichkeit und ist im Grunde endlos anpassbar.

WordPress-Animation

Außerdem ist es derzeit die beliebteste Website-Plattform von allen. Wie vom Schöpfer von WordPress – Matt Mullenweg – geteilt, versorgt WordPress jetzt 25% des gesamten Internets. Können all diese Leute falsch liegen??

Okay, um mit WordPress zu beginnen, benötigen Sie im Grunde nur Ihre Domain und Ihr Hosting. Die WordPress-Software selbst ist völlig kostenlos.

Folgen Sie zunächst einem der folgenden Wege:

a) “Der Schnellstartpfad”

  • Hier erfahren Sie, wie Sie WordPress vereinfacht installieren und Ihre Website an einem Nachmittag starten können.
  • Wählen Sie ein kostenloses Thema aus dem offiziellen Verzeichnis aus – stellen Sie sicher, dass es Ihren Website-Zielen entspricht und dass das Layout / Design nicht weit von Ihrer gewünschten Struktur entfernt ist (Sie werden es leicht anpassen)..
    • Überprüfen Sie diese beiden Ressourcen, um zu erfahren, wie Sie ein vorhandenes Thema anpassen.
    • Alternativ können Sie ein Mehrzweck-Premium-Thema auswählen, das über eine praktische Benutzeroberfläche angepasst werden kann (ohne Codierung). Das X-Thema ist ein gutes Beispiel dafür.
  • Installieren Sie einige der beliebtesten und besten Plugins, um zusätzliche Funktionen zu erhalten.

b) “Der Tiefenpfad”

  • Beginnen Sie mit dem Erlernen von WordPress in einem Online-Kurs. Baumhaus bietet eine tolle.
  • Wählen Sie Ihr Thema und Ihre Plugins wie oben. Alternativ können Sie Ihr eigenes Thema von Grund auf erstellen.

Am Ende ist WordPress wahrscheinlich die vielseitigste Website-Plattform auf dem Markt. Mit ihm können Sie praktisch jede Art von Website erstellen, nicht nur Blogs oder einfache Unternehmensseiten. Hier ist eine Liste von 47 (!) Verschiedene Möglichkeiten, WordPress zu verwenden, um Sie zum Nachdenken zu bewegen.

Joomla und Drupal

Obwohl Joomla und Drupal sich geringfügig voneinander unterscheiden, sind sie beide hervorragende Content-Management-Systeme für fortgeschrittenere Webprojekte.

In Bezug auf das Design sind sie nicht so stark, aber sie sind hochgradig anpassbar und in der Lage, jede Art von Website zu verwalten, die Sie möglicherweise im Plan haben.

Abhängig von der Komplexität Ihres Projekts benötigen sie manchmal viel mehr Zeit zum Meistern und viel mehr Aufwand.

Für ein eingehenderes Training gibt es auf Lynda.com großartige Kurse, sowohl für Joomla als auch für Drupal.

Dinge, die Sie nach diesem Kapitel bereithalten müssen:

  • Der erste Entwurf Ihrer Website wurde vollständig erstellt, unabhängig davon, ob Sie sich für WordPress oder eine andere Plattform entschieden haben.
  • Stellen Sie sicher, dass es mit Ihren ursprünglichen Zielen, der Zielgruppe, übereinstimmt und eine gute UX liefert.

KAPITEL 7: Mobile Responsive Design

Mehr als 60% der Menschen nutzen Handys und Tablets, um im Internet zu surfen

Die Reaktionsfähigkeit von Mobilgeräten ist heute ein sehr wichtiger Aspekt beim Erstellen von Websites, wahrscheinlich mehr als je zuvor.

Hier ist, worum es in der gesamten Ausgabe geht:

Grundsätzlich nutzen derzeit mehr Menschen mobile Geräte als je zuvor, um auf das Internet zuzugreifen. Schätzungen zufolge gibt es inzwischen mehr mobile Internetnutzer als Desktop-Internetnutzer (75,1% gegenüber 52,7%)..

Aber es gibt ein Problem.

Nicht jedes Website-Design wird so optimiert, dass es von Anfang an auf Mobilgeräten angezeigt werden kann.

Einige häufige Probleme sind:

  • Die Schriftarten sind zu klein,
  • Das Layout selbst passt sich überhaupt nicht an einen kleineren Bildschirm an,
  • oder die Technologie, mit der die Website erstellt wurde, ist auf Mobilgeräten nicht verfügbar.

Hier kommt die Idee der mobilen Reaktionsfähigkeit ins Spiel.

Eine reaktionsfähige Website reagiert auf die Umgebung, in der sie angezeigt wird. Wenn es sich um einen Desktop-Computer handelt, wird die Website auf eine bestimmte Weise gerendert. Wenn es sich um ein Mobiltelefon handelt, wird es auf andere Weise gerendert.

Hier ist eine bessere Erklärung: Was zum Teufel ist Responsive Web Design?

Im Moment müssen Sie also überprüfen, ob Ihre Website auf Mobilgeräten funktioniert. Verwenden Sie Ihre eigenen Geräte, um dies zu überprüfen, probieren Sie aber auch den mobilen Test von Google aus oder wechseln Sie zu einem Tool wie Responsive Design Tester.

Wenn es Probleme gibt, müssen Sie diese beheben.

Einige Lösungen:

  • Responsive Web Design – das How-to
  • So machen Sie die Website in etwa 15 Minuten reaktionsschnell

KAPITEL 8: Alles zusammenbringen

Sie kennen die Grundlagen, jetzt sind Sie an der Reihe

Warte, wir sind fast da!

Dies ist das letzte Kapitel unserer ziemlich langen Reise.

Zu diesem Zeitpunkt sollten Sie Ihre erste Website erstellen lassen… Sei es mit WordPress, handgefertigtem HTML / CSS, einem Website-Builder oder anderen Tools, die Sie für den Job ausgewählt haben.

Kurz gesagt, herzlichen Glückwunsch! Aber es gibt noch ein paar Dinge, die es wert sind, getan zu werden:

  • Überprüfen Sie die in den Kapiteln 1 und 2 beschriebenen Punkte noch einmal. Stellen Sie sicher, dass die Ziele tatsächlich für den Endbenutzer funktionieren und dass die Website nicht verwirrend ist.
  • Überprüfen Sie Ihre Codestruktur über den Markup-Validierungsdienst von W3C.
  • Überprüfen Sie, ob keine Sicherheitsprobleme mit der Website vorliegen. Verwenden Sie dazu den Scanner von Sucuri.
  • Erhalten Sie Feedback von der Community. Überprüfen Sie, was andere über Ihre Arbeit denken. Die Foren bei Sitepoint können dafür gut sein.

Wenn Sie diese Ressource zum ersten Mal lesen, empfehlen wir Ihnen dringend, ein paar Mal darauf zurückzukommen und sie als Referenzdatei für Ihre weitere Ausbildung zu behandeln.

Wie eingangs erwähnt, können Sie das Inhaltsverzeichnis verwenden und nach Belieben von Kapitel zu Kapitel und von Ressource zu Ressource navigieren.

Schließlich sind wir neugierig … Was ist Ihre größte Herausforderung beim Erstellen von Websites, bei der Webentwicklung oder beim Design? Bitte teilen Sie in den Kommentaren oder über Twitter. Wir sind alle Ohren!

Danke fürs Lesen, du bist großartig!

  • Insgesamt116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector