Webentwicklung – diese Fähigkeiten solltest Du als Webentwickler haben Teil 3

Webentwicklung – diese Fähigkeiten solltest Du als Webentwickler haben Teil 3

Im dritten Teil unserer kleinen Artikelserie „Diese Fähigkeiten solltest Du als Webentwickler haben“ stelle ich dir die Fähigkeiten vor, die in Richtung Grafik und Gestaltung gehen. Andy hat in den letzten beiden Teilen die Themen HTML, CSS und PHP bis hin zu Programmierung und Projektmanagement behandelt. Heute geht es um weitere 5 Bereiche, angefangen bei der Typografie bis zu verschiedenen Grafikprogrammen für Webentwickler. Die verlinkten Buchtitel in diesem Artikel zu Amazon sind Partnerlinks.

Kenne dich mit Grundlagen der Typografie aus

Typografie und LayoutZwar kommen Kenntnisse über Typografie im Internet nicht so oft zum Einsatz, wie im Bereich Druck, beispielsweise bei der Erstellung von Druckvorlagen wie Flyer oder Plakate, dennoch gehört Typografie auch zur Gestaltung von Websites und Weblogs. Du hast die Möglichkeit verschiedene Schriftarten für Internetauftritte zu nutzen, sei es durch die bloße Angabe des Font, durch das Einbinden von Webfonts oder hier und da als Grafik.

Du solltest wissen, welche Schriften zusammen harmonieren und welche Du für einen Webauftritt gut kombinieren kannst, ohne dass die Seite unruhig wirkt. Welche Schriftart ist für die Überschriften optimal und welchen Font nimmst Du am besten für den Text. Außerdem sind Schriftarten ein nicht zu unterschätzendes Gestaltungsmittel, wenn es darum geht, den Charakter des Blogs oder der Website zu unterstreichen. Wie alles andere auch haben verschiedene Schriften unterschiedliche Wirkungen auf den Betrachter.

Besitze Kenntnisse über Grafik und Gestaltung

Grafik und GestaltungEinen Internetauftritt zu erstellen, so dass die Website funktioniert und vom User bedient werden kann ist eine Seite, die andere Seite ist die Gestaltung. Ein Blog, eine Website oder auch ein Online-Shop sind nicht viel wert, wenn sie nicht ansprechend gestaltet sind. Es ist in aller Regel das Design, welches neue Besucher beim ersten Anblick der Site beeinflusst und entweder den User eher zum Bleiben veranlasst oder doch eher zum schnellen Schließen der Site bewegt.

Das Design ist eben nach wie vor das Erste, was dem Besucher ins Auge fällt. Erst im nächsten Moment bekommen Inhalt und Funktionen ihre Chance zu überzeugen. Abgesehen davon, wird ein Kunde selten einen Internetauftritt haben wollen, der nicht gut aussieht. Kenntnisse über Design sind also essentiell und gehören zum Handwerkszeug eines vielseitigen Webentwicklers.

Wissen über Web-Usability ist das A und O

Web UsabilityEine schön gestaltete Website ist ein großer Schritt in Richtung Erfolg. Aber das Design endet nicht beim reinen Aussehen, sondern ist mehr als das. Design muss auch funktionieren, gemeint ist die sogenannte Usability. Design und Layout von Websites sollen die User dabei unterstützen, die Site zu nutzen. Je schneller und einfacher sich der User zurechtfindet und auf der Seite zum Ziel gelangt umso besser.

Es gibt zahlreiche Faktoren, die für die Web-Usability eine Rolle spielen und die Du beachten musst. Besucher sind schneller wieder weg als Du glaubst, wenn die Usability nicht stimmt. Um also erfolgreiche Internetauftritte für deine Kunden gestalten zu können, brauchst Du gute Kenntnisse in der Usability.

Kenntnisse im Logo-Design sind von Vorteil

Logo DesignDas Logo-Design ist zwar ein Teilbereich des Designs und etwas spezieller als deine allgemeinen Kenntnisse über Gestaltung und Layout, aber Wissen über die Kunst des Logo-Designs kann für dich nur von Vorteil sein. Es kann hin und wieder vorkommen, dass Du nicht nur einfach eine Website erstellen sollst, sondern mit der Gestaltung des Internetauftritts auch gleich das Corporate Design des Unternehmens festlegen sollst.

Das kann beispielsweise relativ leicht bei Start-Ups oder kleineren Unternehmen passieren. Und zum Corporate Design gehört natürlich auch ein Logo. Wenn Du in der Gestaltung und Erstellung von Logos also sicher bist, kannst Du deine Kunden in so einem Fall umfassend betreuen und musst nicht das Logo-Design outsourcen.

Kenntnisse über verschiedene Grafikprogramme

Zur Gestaltung gehört nicht nur das nötige Wissen über Design sondern natürlich auch der Umgang mit dem richtigen Handwerkszeug. Als Webentwickler brauchst Du für die Erstellung und Bearbeitung von Bildern, Fotos und Grafiken verschiedene Grafikprogramme, ein Programm für Pixelgrafiken und ein weiteres Programm für Vektorgrafiken.

Photoshop oder Gimp für Pixelgrafiken
PhotoshopPixelgrafiken gibt es im Web unendlich viele. Es sind im Allgemeinen die ganz normalen Bilder, wie sie viele User tagtäglich im Internet veröffentlichen oder in den Sozialen Netzwerken hochladen. Auch für die Gestaltung von Websites, Blogs oder Onlineshops werden Pixelgrafiken genutzt. Und was wäre ein Shop ohne Produktbilder?

Geeignete Formate von Pixelgrafiken für das Web sind GIF, PNG und JPG. Weit verbreitet unter den professionellen Webentwicklern und Webdesignern ist das Grafikprogramm Photoshop von Adobe. Photoshop kannst Du praktisch schon als Standard für die Bildbearbeitung ansehen. Das Programm hat allerdings auch seinen Preis und nicht gerade für wenig Geld zu haben.

GimpDie Alternative zu Photoshop wäre das frei erhältliche und kostenlose Grafikprogramm Gimp. Mit Gimp kannst Du Pixelgrafiken ebenso gut bearbeiten wie mit einem kommerziellen Grafikprogramm, viele Funktionen sind ähnlich oder gleichwertig. Gerade für die Anfangsphase, wenn das Budget noch schmal ist, sind freie Programme eine gute Alternative. Auch für Gimp gibt es Literatur und Tutorials, so dass Du dich genauso gut in Gimp einarbeiten kannst wie in andere Grafikprogramme.

Illustrator oder Inkscape für Vektorgrafiken
IllustratorMit Vektorgrafikprogrammen wie Illustrator oder Inkscape erstellst und bearbeitest Du Vektorgrafiken. Vektoren sind gerade im Web immer mehr am Kommen. SVG-Dateien sind Vektoren und sollten von jedem modernen Browser anstandslos angezeigt werden.

Der große Vorteil von SVG ist, das diese Vektorgrafiken von der Dateigröße in der Regel kleiner sind als Pixelgrafiken und außerdem noch verlustfrei skaliert werden können. Jedes Vektorbild kann also in jeder beliebigen Größe auf einer Website oder Blog angezeigt werden, ohne dass die Datei zusätzliche Informationen beinhalten muss, die die Dateigröße aufblähen würden.

InkscapeBeim Vektorgrafikprogramm hat Adobe mit seinem Illustrator im professionellen Bereich – was die Verbreitung angeht – ebenfalls wieder die Nase vorn. Jedoch gibt es auch hier wieder eine Alternative für kleine Budgets anzubieten. Das Vektorgrafikprogramm Inkscape ist kostenlos und frei erhältlich. Literatur und Tutorials kannst Du für Inkscape ebenso finden.

Das Fazit zum dritten Teil unserer Serie für selbständige Webentwickler

Bei Webentwicklung denken die Meisten sicher eher an Programmierung, HTML und jede Menge Scripte. Aber wie Du siehst, sind die Aufgaben eines Webentwicklers doch umfangreicher und bieten mehr Abwechslung als Du vielleicht dachtest. Gerade selbständige Webentwickler müssen oft vielseitiger sein als ihre fest angestellten Kollegen, die sich in einem großen Team in der Regel viel mehr spezialisieren können.

Ich hoffe unsere kleine Serie hat dir einen guten Überblick verschafft und Du hast jetzt eine gute Vorstellung davon, was dir als selbständiger Webentwickler noch alles Spannendes bevorsteht 😉

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

Comments are closed.