Blog

Dienstag, 12.01.2021

Gelungenes Webdesign –
Worauf kommt es an?

Smart Web Elements Blog

Unter Webdesign (oder auch User Interface Design – kurz UI) versteht man das äußere Erscheinungsbild eines Internetauftritts. Dieses umfasst visuelle, funktionale und strukturelle Inhalte der Webseite. Während sich Webdesign mit der Gestaltung von Online-Medien auseinandersetzt, ist Grafikdesign eher im Bereich Printmedien zu verorten.

Zum Beispiel wird festgelegt, welche Bilder gezeigt werden, welches Layout und welche Farben verwendet werden oder an welcher Stelle bestimmte Funktionen oder Elemente zur Anwendung kommen. Auch hier gilt das Motto „Der erste Eindruck zählt“.

Ist eine Webseite z.B. unübersichtlich gestaltet oder wird auf dem jeweiligen Gerät nicht richtig angezeigt, wird der Nutzer die Webseite schnell wieder verlassen und sich eventuell an die Konkurrenz wenden, deren Webseite benutzerfreundlich und optisch ansprechender gestaltet ist. Die Ästhetik des Designs spielt bei der Werbung natürlich auch eine wichtige Rolle.

Webdesign ist in seiner Definition leicht zu verwechseln mit „Frontend–Entwicklung“. Allerdings versteht man unter Frontend-Entwicklung die technische Umsetzung des zuvor festgelegten Webdesigns mit HTML, CSS und JavaScript.

Bei einem guten Webdesign ist es entscheidend zu ermitteln, wie sich ein Unternehmen nach außen zeigen möchte. Dies ist ein wichtiger Bestandteil des Brandings. Eine Webseite für Ärzte sollte beispielsweise sollte seriös und vertrauenserweckend wirken, während sich ein Geschäft für Jugendmode eher jugendlich und „hip“ präsentieren sollte. Daher ist es ausschlaggebend für den Erfolg, seine Zielgruppe zu kennen und das Webdesign auf diese anzupassen.

Teambesprechung Agentur Smart Web Elements

Dank über 15 Jahren Erfahrung betreuen wir Kunden aus verschiedenen Bereichen und Branchen und wissen genau, worauf es bei einem gelungenen Internetauftritt ankommt. Hier findest du ein kleines Portfolio unserer Referenzen.

Vielen Dank für die gute Zusammenarbeit. Von der Konzeption bis zur Umsetzung stimmt einfach alles. Tolles Team..

Dr. Schumacher GmbH (Google Rezension)

Unser Fullservice-Angebot umfasst von einer persönlichen Beratung bis hin zur technischen Umsetzung alles, was du für einen perfekten Internetauftritt benötigst. Gemeinsam entwerfen wir ein auf die Anforderunegn und auf deine Zielgruppe zugeschnittenes Webdesign. Dieses wird in einem Screendesign festgehalten, welches von unseren Frontend-Entwicklern anschließend umgesetzt wird. Die Befüllung und Pflege deiner Webseite oder deines Onlineshops wird auf Wunsch auch von uns übernommen. Alternativ schulen wir Unternehmen oder Mitarbeiter, beispielsweise aus dem Marketing, zum Redakteur. Somit kann zukünftig die Webseite mit einem CMS einfach selbst verwaltet und erweitert werden. Der Bereich Content-Marketing kann so selbstständig arbeiten. Dank benutzerfreundlichen Systemen wie TYPO3, Neos oder WordPress sind dafür keine Kenntnisse in Programmierung notwendig.

Eine Website für alle Ausgabegeräte

In Zeiten, in denen das Smartphone mindestens einen ebenso hohen Anteil bei der Internetnutzung hat wie der PC, ist die angepasste mobile Darstellung deiner Website ein absolutes Muss.

Sowohl das Design, als auch die Usability der Homepage muss für sämtliche Größen angepasst werden. Responsive Websites passen sich automatisch an die Anforderungen des aufrufenden Endgerätes an und optimieren die Darstellung und Navigationselemente automatisch für den Benutzer. Ziel ist es, dass der Besucher die Website immer optimal bedienen kann und die Inhalte immer erreichbar sind. Sei es mit dem Smartphone, dem Tablet, per PC am Desktop oder gemütlich vom Sofa aus am TV.

Technische Basis sind aktuelle Webstandards wie HTML5 und CSS3 sowie JavaScript. Die automatische Auswahl der Darstellung erfolgt über die Auflösung (zu Verfügung stehende Pixel) des Browsers und des anfragenden Endgerätes.

Mit sogenannten Media Queries werden in CSS die Eigenschaften des Monitors bzw. Ausgabegerätes abgefragt. Auf diese Weise lässt sich für jede Größe des Endgerätes ein eigener Style definieren. Neben der Anpassung des Designs muss natürlich auch die Bedienbarkeit (die sogenannte Usability) der Webseite angepasst werden. Alle Funktionen, die in der Desktopversion vorhanden sind, sollten auch am Smartphone oder am Tablet nutzbar sein.

Laptop auf Tisch

Responsive Webdesign testen

Wie funktionieren Responsive Websites? Testen es doch einfach mal auf dieser Seite. Verändere die Größe des Browserfensters. Der Inhalt passt sich automatisch an das Browserfenster an.

Hast du dein Smartphone oder dein Tablet zur Hand? Rufe unsere Website auf und vergleiche Inhalte und Darstellung. Der Content bleibt derselbe. Um die Inhalte zu lesen musst du nie skalieren oder die Ansicht durch Fingergesten verändern.

Zentrale Verwaltung per CMS

Ein großer Vorteil einer Responsive Website liegt darin, dass die unterschiedliche Darstellung auf verschiedenen Endgeräten auf eine zentrale Datenbasis zurückgreift. Es ist nicht notwendig eine separate „App“ für iOS oder Android zu programmieren. Die Responsive Website ist auf allen Devices immer aktuell und muss nicht doppelt gepflegt werden.

Die automatische Auswahl der Darstellung erfolgt über die Auflösung (zu Verfügung stehende Pixel) des Browsers und des anfragenden Endgerätes.

Das CMS TYPO3 oder NEOS eignet sich hervorragend zur Entwicklung von responsive Websites. Lass dich von einer Vielzahl unserer Referenzen überzeugen.

Google bevorzugt optimierte Websites

Auch für das Thema SEO (Suchmaschinenoptimierung) spielt responsive Webdesign eine zentrale Rolle. Dies zeigt sich unter anderem dadurch, dass Google einen Leitfaden zum Thema Responsive Webdesign veröffentlicht hat.

So haben Websites, die eine gute User Experience (UX) bieten, eine wesentlich geringere Absprungrate (Bounce-Rate) auf Mobilgeräten. Dies hat zufolge, dass Google und andere Suchmaschinen die Inhalte der Webseite als relevant einstuft, was zu einem besseren Ranking in den Suchergebnissen führt.

Du möchtest auch eine Webseite, die auf allen Endgeräten fehlerfrei funktioniert?

Datenschutzhinweis

Um Ihnen ein besseres Nutzererlebnis zu bieten, verwenden wir Cookies. Sie können einzelne Cookies aktivieren oder alle akzeptieren. Klicken Sie auf „Weitere Informationen“, um in unserer Datenschutzerklärung mehr Details über Cookies zu erfahren.