Welche Website ist am schlechtesten gestaltet?
Antworten
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
Dieses Webdesign ist wie eine gemischte Farbpalette, die viele widersprüchliche Farben und Textfarben enthält und auch mit der Hintergrundfarbe gemischt wird. All dies erschwert es den Benutzern, überhaupt zu lesen. Außerdem ist die Navigation recht kompliziert.
Ein gutes Webdesign sollte Farben richtig einsetzen, um eine schöne und prägnante Benutzeroberfläche und Atmosphäre zu schaffen. Es sollte das Auge des Benutzers entlasten und ihm eine mühelose Bedienung ermöglichen, wie hier:
Weitere Informationen zum Farbschema: Wie setzt man Farben im UI-Design sinnvoll ein, um eine perfekte UI-Oberfläche zu erstellen?
5. Gatesnfences – Schlechte Navigation und Bedienung
Das größte Merkmal der Navigation für eine Website ist selbsterklärend. Wenn sich ein Benutzer auf Ihrer Website anmeldet, sollte er verstehen, was er als Nächstes tun kann und welche Maßnahmen er ergreifen muss, um sein Ziel zu erreichen. Die Navigation muss auffällig sein und sollte sich häufig oben auf der Seite befinden. Versuchen Sie nicht, eine Navigation wie diese Website zu entwerfen. Es verwirrt den Benutzer nur noch mehr.
Darüber hinaus müssen auch der Navigationsinhalt und die Interaktionen klar sein. Verwenden Sie daher keine horizontale Bildlaufleiste oder andere ungewöhnliche Animationsdesigns. Wenn Sie dies tun, sollten Sie dem Benutzer zumindest einige Hinweise geben, damit er weiß, wie Ihre Website funktioniert.
Eine gute Navigation im Webdesign sollte so aussehen:
6. Uat – Schlechter Link und falsche CTA-Einstellungen
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
If you want to keep the page smooth and concise, then do not use too much element of different styles. On this site, the text area uses contrasting colors and different font sizes to highlight the info. But the text on the second level also uses a highlight blue color, which in fact breaks the unity and balanced hierarchical interface.
Unity is crucial to the overall beauty and fluency of the web interface, see it below:
9. Greatdreams - Not have any white space
The whole website looks colorful, contrasting and prominent, and also it appropriate to the topic of children's juice drink. But a lot of too bright colors are too mixed and there is no space at all. It looks more like a colorful painting than an online business website. Besides, the combination of exaggerated colors makes the readability of the texts became very poor. Moreover, the site did not have any navigation, leaving you to scroll to the bottom to find relevant information.
A good web design with white space is simple and clean:
Above are some lists of bad websites. But other web design mistakes also exist:
1. Automatically playing music (without notifying the user).
2. Long page load times . The more time it takes to load, the more likely the user will leave your site.
3. The web page is too long . How many user do you think are interested in going all the way down to the bottom of your page? Do not try to test the patience of the user.
3. Expired information . Information that is not updated will mislead the user and make your site look unprofessional.
5. Isolated page . The user does not know how to return to the homepage. This offers a bad experience.
6. Missing interactive content. If you are unable to provide a way for users to express emotions and ideas, your website may become a slowly die.
Prototype Design - First Step to Start Web Design
It’s okay if you’re guilty of some of the mistakes mentioned above. Practice makes perfect, you just need more practice. My suggestion is to start with prototype design.
You can use the faster and easier prototype tool , Mockplus, to start your web design. Mockplus supports web projects. Now I will show you how to design web pages in Mockplus.
Step 1: Open Mockplus and create a web project
On the start page, you can select individual projects or team projects. After selecting, choose the web project in the pop-up window. Here, you are also free to set the website page size.
Step 2: Design freely in Mockplus
Mockplus has more than 200 highly-designed components and more than 3,000 vector icons that can help you design quickly. Here are a few tips for you:
1) Text hierarchy: The text in the navigation bar, main title, subtitles, and body should be different. You can use Text area components and set the text size in Mockplus to highlight the text hierarchy.
2) Quick design: You can use the format painter and Auto Data Fill to quickly finish your design. The format painter can make the whole texts presented in the same format, and the Auto Data Fill can automatically fill text data and image data.
3) Property settings: You can set the color, transparency of the components.
4) Image import: A dedicated image component can import pictures you want as a web page background image, and you can also freely design it.
Try it yourself.
Online Collaborative Design - Avoid Bad Web Design & Error from the very Beginning
To avoid bad web designs and common errors mentioned above, it is necessary for designers to let developers, product managers and other product team members participate in website design from the very beginning and collect suggestions and feedback from them timely.
About this, a handy online design collaboration tool, such as Mockplus iDoc, can be a good start for you.
As website designers, you can simply import website designs with asset details and from Photoshop/Adobe XD/Sketch(by using Mockplus iDoc plugins ) with one click, collect feedback and suggestions from other team members timely, and create interactive prototypes to share with others.
As website front-end developers, you can simply view all website designs and leave comments freely, search duplicate elements and colors easily, and check and download design assets quickly.
As product managers, you can simply check the design process easily , upload and preview documents freely to manage website design projects more smoothly.
Overall, Mockplus iDoc can effectively connect your entire product design workflow from the very beginning and help you avoid many website design errors.
To sum up
A site's design needs to serve the functionality of the website itself. It also needs to take into account beauty and other requirements. I hope the above 9 bad web design examples would be useful to you and help you understand what is bad web design, and how to avoid them in the future.
Mockplus iDoc, automatische Übergabe von Designs mit genauen Spezifikationen, Assets und Codefragmenten
Starten Sie KOSTENLOS durch
Twittern
Wow, normalerweise bin ich kein Meckerer, aber ...
Ich denke, Miller Paint (ca. Juni 2013) verdient in diesem Zusammenhang Erwähnung.
Ich war tatsächlich etwas schockiert, als ich das hier sah. „Willkommen auf unserer neuen Website“ .. „Hier klicken“ ... Kästchen im Stil der Neunziger, inkohärente Rasterlayouts, die auf kein Gerät passen ... Suchanfragen, die dreimal „Suchen ...“ sagen, seltsame Farben, leere, nutzlose Abstände, fehlender Inhalt, unklare Benutzererfahrung, ... darüber könnte man ein Buch schreiben.