Wer hat die schlechteste Website?
Antworten
Wir sind eine vielbeschäftigte Agentur für digitales Marketing, die an den Websites von Hunderten von Kunden arbeitet. Das bedeutet, dass wir sehr wenig Zeit haben, an unserer eigenen Website zu arbeiten, und deshalb nominiere ich sie für die schlechteste Website! SEO & PPC | Bamsh Digitales Marketing | Bristol, London und Edinburgh, Großbritannien
In Großbritannien gibt es ein Sprichwort: „Schusterkinder haben die schlechtesten Schuhe“, das auch auf unsere Website zutrifft.
Aber wie baut man eine vertrauenswürdige Website auf?
Der entscheidende Punkt liegt im Design. Auch wenn Sie ein kleines Start-up-Unternehmen sind, ist es besser, einen Webdesigner zu haben, der Sie bei der Gestaltung Ihrer Website unterstützt. Natürlich ist es das Beste, wenn die Webdesigner von Anfang an mit den Entwicklern zusammenarbeiten können, und zwar über ein gutes Online-Tool für die Design-Zusammenarbeit . Es ist nicht einfach, eine gute Website zu entwerfen, die sowohl schön als auch funktional ist. Was sind einige häufige Fehler beim Webdesign? Wie können Sie sie wirksam vermeiden? Wenn Sie verwirrt sind, zeige ich Ihnen, wie eine gute Website aussehen sollte, indem ich die 10 besten Beispiele für schlechtes Webdesign präsentiere.
Unterschiede zwischen gutem und schlechtem Webdesign
Webdesign-Trends ändern sich ständig, daher sind Designprinzipien im Web wirklich schwer zu definieren, es gibt jedoch immer noch goldene Regeln, die sich bewährt haben. Ich habe Hunderte von Websites überprüft und mehrere Designprinzipien entdeckt. Diese beinhalten:
- Eine leicht verständliche Navigation
- Richtiger Einsatz von Animationen
- Gute Farbgebung
- Sauberes Layout
- Eine optisch ansprechende Benutzeroberfläche
- Wählen Sie ein Design, das zum Thema oder Thema passt
- Designelemente und Inhalte organisiert halten
Bei den oben genannten Grundsätzen handelt es sich nur um einige Regeln des Webdesigns, aber sie alle weisen deutlich darauf hin, dass gutes Webdesign ästhetisch ansprechend, leicht verständlich und einfach zu verwenden sein sollte. Das heißt, eine gute Website sollte ein hervorragendes Benutzererlebnis bieten.
Die 10 besten Beispiele für schlechtes Webdesign
1. Arngren – Design in Chaos und Chaos für das Fehlen eines Rasters
Ich möchte nicht gemein sein, aber es tut mir jedes Mal wirklich in den Augen weh, wenn ich es sehe. Die Website platziert die Grafiken, Inhalte und Links buchstäblich überall. Alle Elemente zusammen machen die Seite zu einem unverständlichen Durcheinander.
Warum ist Arngren eine schlecht gestaltete Website?
1) Das größte Problem besteht darin, dass beim Sitzen kein Raster verwendet wird.
2) Unglaubliche Navigationsstruktur.
3) Schlechte Typografie macht es unleserlich.
4) Zufällige Verwendung von Farben.
Ein Raster kann alles auf Ihrer Website sauber und organisiert machen. Es hält alle Ihre Elemente an ihrem richtigen Platz und hilft Ihnen, ihre Größe, die Größe und den Abstand des Textes usw. zu bestimmen. Mit einem Raster können Sie eine konsistente, gut gestaltete Benutzeroberfläche erstellen.
Ein gutes Webdesign-Beispiel für die Verwendung des Rasters im Webdesign – alles ist organisiert.
2. Schriftsatzdesign – Dem Design mangelt es an Kontrast
Ein klarer und starker Kontrast zwischen den Elementen kann Benutzern helfen, die Kerninformationen der Seite zu erkennen. Es hilft dem Benutzer, die Informationen besser zu lesen und zu verstehen. Auf dieser Website sind die Hintergrundfarbe und die Textfarbe ziemlich ähnlich, sodass ein sehr schwacher Kontrast entsteht. Der schlechte Kontrast führt dazu, dass der Text für das Auge unscharf wird. Außerdem ist die Lesbarkeit des Textes aufgrund der geringen Schriftgröße äußerst schlecht.
Ein gutes Webdesign sollte darauf achten, dass Texte und Bilder gut lesbar sind. Eigentlich ist es nicht schwer, die Lesbarkeit zu verbessern. Nutzen Sie einfach alles – Farbe, Platz und Größe, um einen hohen Kontrast zu erzielen. Durch den guten Einsatz von Typografie werden beispielsweise wichtige Informationen durch unterschiedliche Schriftgrößen hervorgehoben, und der Kontrast zwischen den Farben verstärkt die visuelle Wirkung.
Ein gutes Webdesign mit entsprechendem Kontrast sollte so aussehen:
3. Theweddinglens – Nicht responsives Design
Sie sollten immer ein responsives Design-Framework verwenden oder andere bessere Lösungen übernehmen. Ihre Webseite muss auf Mobilgeräten genauso reibungslos funktionieren wie auf der Website. Auf dieser Website wird beim Laden auf dem Mobiltelefon immer noch eine ganze Seite mit einer so schlechten Klartextschnittstelle angezeigt. Da es keine mobile Version gibt, kann es nicht auf dem Telefon verwendet werden. Ich werde eine Website wie diese einfach aufgeben.
Das gute Webdesign – Responsive Design.
4. Pacific Northwest X-Ray Inc – das unangenehme Farbschema
Erstellen Sie Prototypen schneller, intelligenter und einfacher mit Mockplus
Starten Sie KOSTENLOS durch
This web design is like a mixed color palette, which contains plenty conflicting colors and text colors, and also mixed with the background color. All those make it difficult for users to read at all. Also, the navigation is quite complicated.
A good web design should use color properly to create a beautiful and concise interface and atmosphere. It should ease user’s eye and make the user operate with no effort, like this one:
More info about color sheme: How To Use Color In UI Design Wisely to Create A Perfect UI Interface?
5. Gatesnfences - Poor navigation and operations
The biggest feature of navigation for a website is self-evident. When a user logs onto your website, he/she should understand what they can do next and what actions to take to reach their destination. The navigation must be eye-catching and should often be at the top of the page. Do not try to design a navigation like this site. It only makes the user more confused.
In addition, the navigation content and the interactions also need to be clear, so do not use the horizontal scroll bar or other unusual animation design. If you do, you should at least give the user some hints to let them know how your site works.
A good navigation of web design should look like this：
6. Uat - Bad Link and wrong CTA settings
A mess of links and dead links are both major errors of the website. You should check your links manually or use tools such as the Website Link Checker often.
Also, you need to make sure of the functionality of the links. Especially links in the text, you should make them obvious enough and easy to click. For example, do not add a lot of text links within your text. When browsing the text on a small mobile screen, it will be difficult for users to tap on the correct link.
On this site, each moving small picture is actually a link. Leave along it’s moving all the time, the text irself is very vague, so the user does not know what information is displayed.
The CTA settings must be clear too. Do not give users too many CTA choices at the same level because it will cost the user more time to figure which one they prefer to choose. Have a look at the example:
Too many CTAs of the same level will make the user more confused. Also, you should retain only one CTA to highlight the key point. The following is a well-designed CTA.
7. Nmg-group - Unclear interface image background
The picture you use on the web page can be the front door of your website. A good-looking picture makes your site more beautiful and comfortable. Some designer even uses the entire picture as a background image.
On this site, the design is very good actually, but when looking closely you will find out the text and background images are too overwhelmed. The website's background image is covered by other elements, so the whole interface is actually broken.
Using transparent buttons would be a better choice here. That is, when designing buttons in the web page, you should abandon complex colors, styles, and textures. Instead, just outline the wireframe and use text only indicating the function. Here is a better one.
8. Wateronwheels - Inconsistent style
Wenn Sie die Seite glatt und prägnant halten möchten, verwenden Sie nicht zu viele Elemente unterschiedlicher Stile. Auf dieser Website werden im Textbereich kontrastierende Farben und unterschiedliche Schriftgrößen verwendet, um die Informationen hervorzuheben. Aber auch der Text auf der zweiten Ebene verwendet eine blaue Hervorhebungsfarbe, die tatsächlich die Einheit und die ausgewogene hierarchische Schnittstelle zerstört.
Einheitlichkeit ist entscheidend für die allgemeine Schönheit und Flüssigkeit der Weboberfläche, siehe unten:
9. Greatdreams – Keine Leerzeichen
Die gesamte Website wirkt bunt, kontrastreich und markant und passt auch zum Thema Kindersaftgetränk. Aber viele zu helle Farben sind zu gemischt und es gibt überhaupt keinen Platz. Es sieht eher aus wie ein farbenfrohes Gemälde als wie eine Online-Business-Website. Außerdem führt die Kombination übertriebener Farben dazu, dass die Lesbarkeit der Texte sehr schlecht wird. Darüber hinaus verfügte die Website über keine Navigation, so dass Sie nach unten scrollen mussten, um relevante Informationen zu finden.
Ein gutes Webdesign mit Leerraum ist einfach und klar:
Oben finden Sie einige Listen mit schlechten Websites. Es gibt aber auch andere Webdesign-Fehler:
1. Automatisches Abspielen von Musik (ohne Benachrichtigung des Benutzers).
2. Lange Seitenladezeiten . Je länger das Laden dauert, desto wahrscheinlicher ist es, dass der Benutzer Ihre Website verlässt.
3. Die Webseite ist zu lang . Wie viele Nutzer sind Ihrer Meinung nach daran interessiert, ganz nach unten auf Ihrer Seite zu gehen? Versuchen Sie nicht, die Geduld des Benutzers auf die Probe zu stellen.
3. Abgelaufene Informationen . Nicht aktualisierte Informationen führen den Benutzer in die Irre und lassen Ihre Website unprofessionell erscheinen.
5. Isolierte Seite . Der Benutzer weiß nicht, wie er zur Startseite zurückkehren kann. Dies bietet eine schlechte Erfahrung.
6. Fehlende interaktive Inhalte. Wenn Sie den Benutzern keine Möglichkeit bieten können, Emotionen und Ideen auszudrücken, kann Ihre Website langsam zugrunde gehen.
Prototypendesign – Erster Schritt zum Start des Webdesigns
Es ist in Ordnung, wenn Sie einige der oben genannten Fehler begehen. Übung macht den Meister, man braucht nur noch mehr Übung. Mein Vorschlag ist, mit dem Prototypendesign zu beginnen.
Sie können das schnellere und einfachere Prototypen-Tool Mockplus verwenden, um mit Ihrem Webdesign zu beginnen. Mockplus unterstützt Webprojekte. Jetzt zeige ich Ihnen, wie Sie Webseiten in Mockplus entwerfen.
Schritt 1: Öffnen Sie Mockplus und erstellen Sie ein Webprojekt
Auf der Startseite können Sie einzelne Projekte oder Teamprojekte auswählen. Wählen Sie nach der Auswahl das Webprojekt im Popup-Fenster aus. Hier können Sie auch die Seitengröße der Website frei festlegen.
Schritt 2: Frei in Mockplus gestalten
Mockplus verfügt über mehr als 200 hochentwickelte Komponenten und mehr als 3.000 Vektorsymbole, die Ihnen beim schnellen Entwerfen helfen können. Hier ein paar Tipps für Sie:
1) Texthierarchie: Der Text in der Navigationsleiste, im Haupttitel, in den Untertiteln und im Text sollte unterschiedlich sein. Sie können Textbereichskomponenten verwenden und die Textgröße in Mockplus festlegen, um die Texthierarchie hervorzuheben.
2) Schnelles Design: Sie können den Format Painter und die automatische Datenfüllung verwenden, um Ihr Design schnell fertigzustellen. Der Format Painter kann die gesamten Texte im gleichen Format darstellen und die automatische Datenfüllung kann Textdaten und Bilddaten automatisch füllen.
3) Eigenschafteneinstellungen: Sie können die Farbe und Transparenz der Komponenten festlegen.
4) Bildimport: Eine spezielle Bildkomponente kann die gewünschten Bilder als Webseiten-Hintergrundbild importieren und Sie können sie auch frei gestalten.
Versuch es selber.
Online-Collaborative-Design – Vermeiden Sie schlechtes Webdesign und Fehler von Anfang an
Um schlechte Webdesigns und die oben genannten häufigen Fehler zu vermeiden, ist es für Designer notwendig, Entwickler, Produktmanager und andere Mitglieder des Produktteams von Anfang an an der Website-Gestaltung teilhaben zu lassen und rechtzeitig Vorschläge und Feedback von ihnen einzuholen.
In diesem Zusammenhang kann ein praktisches Online-Tool für die Design-Zusammenarbeit wie Mockplus iDoc ein guter Anfang für Sie sein.
Als Website-Designer können Sie einfach mit einem Klick Website-Designs mit Asset-Details und aus Photoshop /Adobe .
Als Website-Frontend-Entwickler können Sie einfach alle Website-Designs anzeigen und Kommentare hinterlassen, problemlos nach doppelten Elementen und Farben suchen sowie Design-Assets schnell prüfen und herunterladen.
Als Produktmanager können Sie den Designprozess ganz einfach überprüfen, Dokumente frei hochladen und in der Vorschau anzeigen, um Website-Designprojekte reibungsloser zu verwalten.
Insgesamt kann Mockplus iDoc Ihren gesamten Produktdesign-Workflow von Anfang an effektiv verbinden und Ihnen dabei helfen, viele Fehler beim Website-Design zu vermeiden.
Um zusammenzufassen
Das Design einer Website muss der Funktionalität der Website selbst dienen. Es müssen auch Schönheits- und andere Anforderungen berücksichtigt werden. Ich hoffe, dass die oben genannten 9 Beispiele für schlechtes Webdesign für Sie nützlich sind und Ihnen helfen, zu verstehen, was schlechtes Webdesign ist und wie Sie sie in Zukunft vermeiden können.
Mockplus iDoc, automatische Übergabe von Designs mit genauen Spezifikationen, Assets und Codefragmenten
Starten Sie KOSTENLOS durch