Web­sites

Ihr eige­ner Ort im Internet

Gestal­tung der Erscheinung

Es ist wich­tig, dass der erste Ein­druck Ihrer Web­seite bereits ver­mit­telt, worum es geht. Eine Maga­zin­seite sieht im All­ge­mei­nen ganz anders aus als eine Künst­ler­seite oder die Prä­senz eines Instituts.

Im Kom­mu­ni­ka­ti­ons­de­sign steht immer der Mensch im Mit­tel­punkt. Und jemand, der Ihre Web­site besucht, will dort etwas fin­den, das ihn weiterbringt.

Ebenso wie bei gedruck­ten Publi­ka­tio­nen spie­len dafür neben dem Inhalt die »Auf­ma­chung«, also Typo­gra­fie, Bild-​Text-​Layout, visu­el­ler Rhyth­mus, Far­ben, Kon­traste und sol­che Dinge eine wich­tige Rolle. Bei Web­sites kom­men noch die inter­ak­ti­ven Ele­mente hinzu wie But­tons, Menüs, Links, Kon­takt­for­mu­lare usw. Ein­ge­führte For­men und Sym­bole, die ins Erschei­nungs­bild inte­griert wer­den, ermög­li­chen Ori­en­tie­rung und Navigation.

Wozu über­haupt eine Website?

Eine berech­tigte Frage, da es viele Mög­lich­kei­ten gibt, online mit­zu­mi­schen. Nicht zuletzt per Socialmedia.

Das Inter­net ist viel mehr als nur Web­sei­ten. Es ist ein sozia­les Netz­werk – eben Kom­mu­ni­kat­ion. Wel­chen Platz darin eine Unter­neh­mens­web­site sinn­vol­ler­weise ein­nimmt, muss man sich stra­te­gisch überlegen.

Für die Unter­neh­mer, Frei­be­ruf­ler, Künst­ler, die mein Kli­en­tel sind, ist die Web­site meis­tens der zen­trale Kno­ten. Ein selbst­be­stimm­tes Refu­gium*, das eine authen­ti­sche Unter­neh­mens­dar­stel­lung ermög­licht und in dem alle Akti­vi­tä­ten zusam­men­lau­fen kön­nen. Social Mar­ke­ting, Cor­po­rate Publi­shing, Kun­den­kon­takte uvm.

* Eine eigene Domain und Web­space bei einem Hosting-Anbieter

Wel­che Website-​Typen gibt es?

Aus mei­ner Pra­xis her­aus sehe ich fol­gende Arten von Unternehmens-​Websites (und Mix­tu­ren daraus).

  • Reprä­sen­ta­tive Kontakt- und Buchungs­si­tes (z.B. Arzt-​Praxen, Restau­rants, Hotels oder auch Organisationen)
  • Infor­ma­tive Web­sites (z.B. Wiki­pe­dia, Online-Lexika)
  • One-​Pager und Micro­si­tes (z.B. zu ein­zel­nen Pro­duk­ten, Aktio­nen, Events, Online-Kursen)
  • Online-​Shops (für alles Mögliche)
  • Maga­zine und Zei­tun­gen (Spe­cial Inte­rest, Tages­zei­tun­gen etc.)
  • Künst­ler­si­tes (z.B. Ein­zel­künst­ler, Bands)
  • und wei­tere wie Online-​Tools (White­boards, Kon­fe­ren­zen, SaaS)
Theme »von der Stange«?

The­mes sind ein aus ver­schie­de­nen Sei­ten­vor­la­gen bestehen­des Design­sys­tem zur kon­sis­ten­ten Erstel­lung von Web­sites. Jede durch­ge­stal­tete Web­site ergibt letzt­lich ein Theme, das die Gestal­tung bestimmt.

Es gibt sie zu Tau­sen­den »von der Stange«. Mit so einem Theme lässt sich sehr schnell eine Web­site bauen, die attrak­tiv wirkt. Wenn Ihnen eins gefällt, kann man es »indi­vi­dua­li­sie­ren«.

Aber Vor­sicht! Es ist dabei mit Bedacht vor­zu­ge­hen. Nur wirk­lich hoch­wer­tige, durch­dachte und vom Her­stel­ler gepflegte The­mes sind emp­feh­lens­wert. Und was die Kon­zep­tion angeht, fol­gen sol­che The­mes oft sehr gän­gi­gen Auf­fas­sun­gen. Dies ist nicht unbe­dingt im Sinne der Stra­te­gie und der Iden­tity. Wenn doch, kann man es in Betracht zie­hen, damit zu arbeiten.

Wenn man kein Theme »von der Stange« ver­wen­den will, sind sie immer­hin nütz­lich als Inspi­ra­tion, um Gestal­tungs­fra­gen zu diskutieren.

Ich ver­wende selbst oft ein viel­sei­ti­ges Theme mit einem fle­xi­blen Schatz­kas­ten vol­ler nütz­li­cher Webseiten-​Elemente. Diese las­sen sich jeder­zeit mit klas­si­schem Code modifizieren.

Gestal­tung der Benut­zung: UX und UI

Eine zeit­ge­mäße Web­site reagiert auf ver­schie­dene Display­­größen von Smart­phone bis Desk­top, berück­sich­tigt Daten­schutz, ist benutzer­­freundlich gestal­tet, suchmaschinen­­freundlich und daten­si­cher programmiert.

Dazu kom­men noch all die komfor­tablen Ele­mente und Details wie kleine Ani­ma­tio­nen, ele­gante Über­gänge, Gale­rien, Video­player, Info-​Cards, Kon­takt­for­mu­lare und vie­les mehr.

All dies gehört in das Gestal­tungs­ge­biet User Expe­ri­ence und User Inter­face. Das zugrun­de­lie­gende UI/​UX-​Konzept bestimmt dabei die inter­ak­ti­ven Zusam­men­hänge und deren Ausgestaltung.

UX | User Expe­ri­ence Design

Abläufe und Benut­zer­füh­rung wol­len so gestal­tet sein, dass Website-​Besucher ein mög­lichst posi­ti­ves, moti­vie­ren­des Erleb­nis damit haben. Dazu gehö­ren auch spe­zi­el­lere Berei­che wie Acces­si­bi­lity (Zugänglichkeit/​Barrierefreiheit).

Man kann die Benut­zer­er­fah­rung mit Split-​Tests opti­mie­ren, bei denen ver­schie­dene Vari­an­ten einer Seite oder eines Ele­ments an ver­schie­dene Grup­pen aus­ge­lie­fert und aus­ge­wer­tet werden.

Oft hilft meine Gestal­tungs­er­fah­rung, um ein gutes UX zu produzieren.

UI | User Inter­face Design

Die­ser Bereich liegt nah am UX-​Design, befasst sich aber eher mit der Wahr­neh­mung, Anord­nung und Bezeich­nung von inter­ak­ti­ven Ele­men­ten zur Navi­ga­tion, öff­nen von Rei­tern und Tabs u.ä. All­ge­mei­ner gesagt geht es dabei um die Schnitt­stelle zwi­schen Mensch und Maschine.

Die Bedie­nung einer Web­site am Desktop-​Computer ist anders als auf einem Tablet oder Smart­phone. Das muss ebenso berück­sich­tigt wer­den wie die ver­schie­de­nen Grö­ßen der Displays.

Die flie­ßende Eigen­art einer Web­site erfor­dert oft viele kleine Anpas­sun­gen. Wäh­rend der­zeit meine meis­ten Arbei­ten auf einem Spal­ten­ras­ter basie­ren, ent­wi­ckeln sich auch stän­dig neue Ansätze, um anders an die­ses Gestal­tungs­thema her­an­zu­ge­hen. Ich ver­folge dies mit Interesse.

Team­work und Artdirection

Wenn es um kom­plexe Web­sites geht, über­nehme ich in Teams die Rolle des Art­di­rec­tors oder Desi­gners ohne tech­ni­sche Umsetzung.

Ebenso setze ich auf Coding-​Experten, wenn es um spe­zi­elle Progammie­rungen geht wie bei­spiels­weise eine spe­zi­elle Such­funktion mit Datenbank-Anbindung.

Tech­ni­sches – wen es interessiert

Es gibt viele tech­ni­sche Mög­lich­kei­ten, eine Web­site zu erstel­len und zu ver­öf­fent­li­chen. Wich­tig ist, dass die Sei­ten zuver­läs­sig erreich­bar, prä­sent, pfle­ge­leicht und rechts­si­cher sind. Hier beschreibe ich kurz wie ich der­zeit arbeite.

CMS und Pagebuilder

Nicht jede Web­site braucht ein so umfas­sen­des Redak­ti­ons­sys­tem (CMS) wie z.B. Word­Press. Aller­dings ist es oft gefor­dert, dass zumin­dest Teile einer Web­site kom­for­ta­bel von Kun­den­seite aktua­li­siert oder ergänzt wer­den kön­nen. Und das ohne die Inte­gri­tät des Designs zu gefährden.

In Micro­si­tes inte­griere ich dafür ein klei­nes, schlan­kes Tool, mit dem sich ein­fa­che Aktua­li­sie­run­gen und Erwei­te­run­gen machen lassen.

Wenn es öfters Ände­run­gen oder neue Arti­kel auf der Web­site geben soll, gestalte und ent­wickle ich Web­sites mit Word­Press und Divi Theme Page­builder. Das ermög­licht die Bear­bei­tung und Erwei­te­rung von Lay­outs durch akkre­di­tierte Dritte.

Divi ist eine Kom­bi­na­tion aus Theme und Page­buil­der. Ein Page­buil­der bie­tet viele indi­vi­du­ell gestalt­bare Module, die den Ent­wick­lungs­pro­zess einer Web­site beschleu­ni­gen und verschlanken.

Boot­strap
Wenn es um vor­wie­gend sta­ti­sche Web­sites geht, auf denen sich nicht viel ändert, ver­wende ich gern das Tool­kit Boot­strap, ein fle­xi­bles Sys­tem aus Sei­ten­ele­men­ten, Stil­de­fi­ni­tio­nen und Scrip­ten. Sowohl Gestal­tungs­spiel­raum als auch tech­ni­sche Aktua­li­tät sind damit gewährleistet.

Spe­zi­elle Fea­tures wie inter­ak­tive For­mu­lare, auto­ma­ti­sche Bild­grö­ßen, Bil­der­ga­le­rien u.ä. müs­sen aller­dings geson­dert instal­liert wer­den oder mit exter­nen Anbie­tern gelöst wer­den – eine Frage des Kon­zepts und der Zielsetzung.

SEO

SEO ist die Opti­mie­rung der Web­sei­ten im Hin­blick auf die Auf­find­bar­keit und das Ran­king in Internet-​Suchmaschinen wie u.a. Google oder Bing.

Alle meine Web­sites sind suchmaschinen-​freundlich ange­legt. Die grund­le­gen­den Meta-​Informationen wie Sei­ten­be­schrei­bun­gen, die seman­ti­sche Hier­ar­chie der Über­schrif­ten und die Berück­sich­ti­gung von Schlüs­sel­be­grif­fen und eini­ges mehr gehö­ren zum Standard.

Da SEO ein Pro­zess ist, an dem ste­tig gear­bei­tet wer­den kann, ist diese Arbeit ein eige­nes Feld. In Word­Press kann meine Kund­schaft mit geeig­ne­tem PlugIn selbst Hand anle­gen, Aus­wer­tun­gen begut­ach­ten und Opti­mie­run­gen vornehmen.

DSGVO Daten­schutz

Jede kom­mer­zi­elle Web­site – und das sind alle, die in irgend­ei­ner Weise ver­kaufs­för­dernd gedacht sind – braucht eine aktu­elle Daten­schutz­er­klä­rung und ein Impres­sum. Es gibt dafür Vor­la­gen und Gene­ra­to­ren, und man kann einen Anwalt damit beauftragen.

Die Pro­jekt­pha­sen

Jedes Website-​Projekt ist anders.
Die fol­gen­den Projekt­phasen gibt es aber immer:

  • Die Kon­zep­ti­ons­phase
  • Die Entwurfs­phase mit Revision(en)
  • Die produktions­reife Ausführung
  • Die Veröffent­lichung

Der Zeit­rah­men hängt von den Gegeben­heiten, dem vor­han­de­nen, zu beschaf­fenden und zu bearbeiten­den Mate­rial (Texte und Medien [Bil­der, Videos etc.]) und den Kapa­zi­tä­ten bei­der Sei­ten ab.

Remote arbei­ten

Mit ver­schie­de­nen inter­ak­ti­ven Online-​Tools lässt sich sehr gut auf Ent­fer­nung zusam­men­ar­bei­ten. Gute Erfah­run­gen habe ich mit Zoom und Miro.

Inwi­schen sind diese auch für euro­päi­sche Kun­den daten­schutz­recht­lich unbe­denk­li­cher ein­setz­bar. Stich­wort DSGVO bzw. GDPR.

Fra­gen zum Projektbeginn

Fol­gende und wei­tere Fra­ge­stel­lun­gen wer­den gemein­sam in Ruhe aus­führ­lich geklärt, bevor der erste Ent­wurf folgt. Um hier nur einige zu nennen:

  • Wel­che Ziele sol­len mit der Web­site erreicht werden?
  • Wel­ches Kli­en­tel spre­chen Sie an?
  • Gibt es ein Cor­po­rate Design?
  • Haben Sie Vor­stel­lun­gen zur Kon­zep­tion und Struktur?
  • Wel­che Funk­tio­nen soll die Web­site bieten?
  • Gibt es bereits Inhalte wie Texte, Bil­der, Grafiken?
  • Wer schreibt die Texte?
  • Wird die Web­site mehrsprachig?
  • Wol­len Sie Besu­chern der Web­site einen News­let­ter anbieten?
  • Soll es Down­loads geben? Wel­cher Art?
  • Möch­ten Sie ein Ana­ly­se­tool einsetzen?
  • Soll die Web­site einen News­be­reich (Blog) haben?
  • Pfle­gen Sie die Web­site selbst (Updates, neue Arti­kel, neue Seiten)?
  • Wird es Videos oder spe­zi­elle Ein­bin­dun­gen (z.B. 3D-​Rundumblick u.ä.) auf der Web­site geben?
  • uvm.

Kon­zep­tion, Ent­würfe und Revisionen

In die­sen Pha­sen wird oft am meis­ten dis­ku­tiert. In der Kon­zep­tion wird Grund­sätz­li­ches erör­tert und bespro­chen. Schließ­lich wird auf die­ser Basis dann wei­ter gegangen.

Die Ent­würfe und Revi­sio­nen sind als nächs­tes Gegen­stand von Betrach­tun­gen und Dis­kus­sio­nen, Ände­run­gen wer­den beschlos­sen und in jeder Revi­sion optimiert.

Je nach Bedarf fin­den diese Kon­takte fol­gen­der­ma­ßen statt:

  • Bei Ihnen
  • Bei mir in Hamburg
  • Per Video­kon­fe­renz
  • Tele­fo­nisch
  • Per Online-​Board
  • Per E‑Mail
Pro­duk­ti­ons­reife Ausführung

Finish der Gestal­tung und Ein­rich­tung des tech­ni­schen Rück­grats ste­hen vor der Ver­öf­fent­li­chung an. Dies ist meist ein eher inter­ner Vor­gang, bei dem die tech­ni­schen Details und Funk­tio­na­li­tä­ten wich­tig sind.

In die­ser Phase wer­den Module für Per­for­mance, Sicher­heit und Recht­li­ches sowie wei­tere Dinge wie News­let­ter, Seiten-​Templates u.ä. inte­griert und eingerichtet.

Diese Phase wird abge­schlos­sen mit:

  • Schluss­kor­rek­tur und
  • Freigabe/​Abnahme
Ver­öf­fent­li­chung und dann …

Jetzt geht’s online. Die Ent­wick­lungs­ver­sion wird in die Pro­duk­ti­ons­um­ge­bung migriert. Dort ste­hen noch diverse Tests und Kon­fi­gu­ra­tio­nen an, die auch den Hos­ting­ser­ver betref­fen wie z.B. die Akti­vie­rung des SSL-​Zertifikats oder Anle­gen von E‑Mail-​Adressen.

Nach der Frei­schal­tung erhal­ten meine Auf­trag­ge­be­rin­nen und Auf­trag­ge­ber wich­tige Infor­ma­tio­nen, z.B.:

  • Einwahl- und Zugangsdaten
  • wich­tige Links
  • tele­fo­ni­schen oder E‑Mail-​Support

Gebucht wer­den kann auch wei­tere Unter­stüt­zung, z.B.:

  • Einweisungen/​Tutorials
  • Schu­lun­gen (WordPress/​Divi/​Backend)
  • Admi­nis­tra­tion und Websitepflege

Projekt starten

Am besten senden Sie mir eine Anfrage mit dem nebenstehenden Formular. Ich schlage dann einen Gesprächstermin vor.

Ich lese jede E-Mail. Wenn Sie nichts von mir hören, ist die E-Mail aus irgend einem Grund nicht angekommen. Spätestens dann rufen Sie bitte einfach an.

Datenschutzhinweis: Ihre Angaben werden verschlüsselt übertragen und vertraulich behandelt. Die Daten dienen nur der Kontaktaufnahme zur Beantwortung Ihrer Anfrage.
Datenschutzerklärung.

Anfrage

3 + 6 =

Mit dem Absenden des Formulars stimmen Sie der Verarbeitung Ihrer Daten zu.

Mit Absenden des Formulars stimmst du der Verarbeitung der Daten zur Bearbeitung der Anfrage zu. Datenschutzerklärung.