Eckige Kästen vs. runde Ecken - Designgrundsätze?

N

Nogger

Aktives Mitglied
Thread Starter
Dabei seit
03.08.2004
Beiträge
371
Reaktionspunkte
0
Hallo,

mal ein Frage zu allgemeinen Designrichtlinien. Vorsichtshalber an den MOD: Zielanwendung ist in meinem Fall eine Webseite. Aber da es nicht um die HTML-Umsetzung geht, sondern um allgemeine Designgrundsätze, habe ich es hier postiert.

Ausgangslage für meine Frage ist mein angehängter Entwurf.

Da sind nun alle Kästen und bereiche erstmal eckig. Ich könnte jetzt z.B. dem "Außenrahmen" abgerundete Ecken spendieren.

Ich frage mich jetzt, ob wenn ich mit abgerundeten Ecken anfange, das auch für alle anderen Element auch durchziehen muß. Ob es also eine Grundregel im Design gibt, diese zwei Eckentypen nicht zu vermischen.

Oder ob es nicht sogar ganz sinnvoll sein kann ist diese zu mischen. Den Infokasten auch abrunden, damit er gegenüber dem Formular zurücktritt oder so.

Was sagen die Designer und Layouter?

Grüße,
Martin
 

Anhänge

  • areb.png
    areb.png
    58,1 KB · Aufrufe: 334
Vor der Frage nach Rundungen und Kanten, kommt die Frage der Typo, Farben, Aufteilung und mehr. ;)

ED:
Vergessen: Man muss das Konzept als gesamtes betrachten können. Ein Dialogfeld reicht eigentlich nicht.
 
Zuletzt bearbeitet:
Tollschock schrieb:
Vor der Frage nach Rundungen und Kanten, kommt die Frage der Typo, Farben, Aufteilung und mehr. ;)

ED:
Vergessen: Man muss das Konzept als gesamtes betrachten können. Ein Dialogfeld reicht eigentlich nicht.
Ich glaube nicht, dass er das hören wollte...

Schließe mich der Frage an. Würde mich nämlich auch interessieren.
 
auf die schnelle: auch hier auf der mu-seite ist eigentlich alles eckig, nur die anklickbaren buttons o.ä. – alles interaktive - ist rund.
oder wie bei apple - da ist alles rund.

fazit aus dieser beobachtung: ob rund oder/und eckig, es muss eine klare inhaltliche begründung dafür geben, also:
alles ist immer rund
oder
alles ist immer eckig
oder
das ist eckig, weil... und das ist rund, weil...

wenn du aber bei jedem kasten vor der wahl stehst "mach ich jetzt eckig oder rund?" und es dafür eigentlich keine richtlinie gibt, dann läuft was falsch.

hast du erst einmal eine inhaltliche richtlinie getroffen, dann ergibt sich das einheitlich ersscheinungsbild (zumindest was ddie ecken angeht...) von selbst.
 
Es gibt für rund und eckig keine Designrichtlinien. Es muss im Gesamtkontext passen. Schau dir dazu Mac OSX an. Da gibt es verschiedene Elemente, rund und eckig.

Dein Beispiel krankt für mich schon daran, dass es bunt ist und zu voll. Weniger ist da sicher mehr! :)
 
reine geschmachssache, es geht eigentlich beides, ich persönlich bevorzuge eine klare richtung, wenn wie bei dir der oberste reiter apple like gerundet ist, sollte das sich im rest wiederfinden, mein vorredner hat aber was viel wichtigers gesagt, was ich noch um die empfehlung erweitern würde, nicht alles so dicht zu drängen - sonst wird es so unübersichtlich wie zum beispiel die amazon site :D
 
Das ganze wird eine Webanwendung (Dialoge, Auswahlen, Texteingaben, Elemente umordnen so in der Art). Das Thema ist relativ trocken, ein potentiellen Nutzer wird deshalb vielleicht nicht ganz positiv an die Sache rangehen, er muß Zeit investieren etc. Zielgruppe auch eher gesetzte Herrschaften und nicht so computer-sicher.

Deshalb möchte ich es so gestalten, daß es angenehm zu nutzen ist. Die Optik dabei soll seriös-solide und auch eher beruhigend und stabilisierend wirken.

Das Farbschema scheint mir da schon nicht schlecht zu sein.

Die Typo siehe Bild, ist Arial oder Alternativen, je nachdem was der Nutzer installiert hat. Aufteilung siehe auch das Bild, ist recht typisch. Interaktionsbereich links, ggf. Hinweise dazu rechts. Bei Übersichten ist halt mehr im Interaktionsbereich. Siehe Bild im Anhang.

Die Frage ist auch, ob mehr ein eckiges oder ein rundes Layout den oberen Zielen dient. Runder ist vielleicht eher "weicher" und nicht so "grob". Alles rundlich kann aber auch weichgelutscht aussehen, wenn ich mir es so überlege.

Allerdings sind abgerundete Ecken in HTML teils nicht so einfach zu realisieren. Und bevor ich mich da verfranze und dann jemand sagt, so eine Mischung verstößt gegen fundamentale Designgrundsätze... Das ist eine Umsetzung eines Themas im Rahmen meines Studiums. Ich studiere aber kein Design, deshalb die Frage.

Für das Schreiben gibt es Grundregeln. Wenn man die beherrscht und nutzt, ist man auf der sicheren Seite. Bewußtes Abweichen von den Regeln erfordert größeres Können. Bezogen auf Design habe ich dieses Können nicht, deshalb will ich erst garnicht in den Bereich "bewußtese Abweichen". Deshalb die Frage nach einer Grundregel.

Ich habe mal noch Varianten angehängt. Das Formular eckig, Rest rund gefällt mir zur Zeit am besten.
 

Anhänge

  • areb3.png
    areb3.png
    63,6 KB · Aufrufe: 167
  • areb2.png
    areb2.png
    64,9 KB · Aufrufe: 155
  • areb4.png
    areb4.png
    65,1 KB · Aufrufe: 147
don.raphael schrieb:
auf die schnelle: auch hier auf der mu-seite ist eigentlich alles eckig, nur die anklickbaren buttons o.ä. – alles interaktive - ist rund.
fazit aus dieser beobachtung: ob rund oder/und eckig, es muss eine klare inhaltliche begründung dafür geben

Ich denke, vieles bei MU ist einfach durch die technische Umsetzung eckig/rund. Die Graphiken als Knöpfe sind schnell ausgetauscht. Das Ausklappfeld bei "Suchen" abzurunden ist schwieriger und wurde nicht gemacht". Das da eine wirkliche Begründung bei MU hintersteht wage ich zu bezweifeln.

Für die Begründung wäre es sinnvoll zu wissen, was eckig und rund beim Betrachter bewirkt. Farbassoziationen sind gut erforscht, aber was ist mit Formen?

hast du erst einmal eine inhaltliche richtlinie getroffen, dann ergibt sich das einheitlich ersscheinungsbild (zumindest was ddie ecken angeht...) von selbst.

Außenumriß gerundet, Infokästen gerundet, Rest eckig. Meinst du sowas? Dann nehme ich das :)
 
Lynhirr schrieb:
Es gibt für rund und eckig keine Designrichtlinien. Es muss im Gesamtkontext passen. Schau dir dazu Mac OSX an. Da gibt es verschiedene Elemente, rund und eckig.

Gut, das sind Profis. Und ich bin nichtmal Amateur, ist nicht mal mein Gebiet. Ich hielt es für möglich, daß sie einen sicheren Grundsatz "nicht mischen" brechen, weil sie wissen wie und wann es geht.

Dein Beispiel krankt für mich schon daran, dass es bunt ist und zu voll. Weniger ist da sicher mehr! :)

Aha. Dabei habe ich extra den Farbkreis genommen :) Und ich dachte, ich sei schon recht minimalistisch. Was meinst du mit zu voll? Nehme ich die Hintergünde von Formular und Infokasten weg, stehen beide ohne Abgrenzung zur Umgebung in der Luft, finde ich.
 
Vorsichtshalber an den MOD

Nun gut. Ob nun abgerundet oder im rechten Winkel, das ist eine Frage des Geschmacks.

Meiner Meinung beginnst Du hier an einem Detail, welches jetzt nicht so wichtig ist.
Wichtiger wäre erst mal eine logische Navigation zu entwickeln, die den späteren
Content bereits berücksichtigt. Und im gleichen Arbeitsschritt ein Grundlayout.

Wenn das steht, kannst Du entsprechend Eingabefenster entwickeln. ;)
 
Hallo Nogger.

Interessanter Punkt, den Du da aufwirfst, ich mag solche Gespräche. :)



Tja, runde Ecken… Schlagschatten… Pseudo 3D Elemente… meines Erachtens alles völlig unwichtig und meistens aus der Not heraus eingesetzt.
Einfach, weil „irgendwas“ halt fehlt oder zu „langweilig“ erscheint. Meistens mangelt es einfach an klaren, prägnanten und dennoch nicht aufdringlichen Strukturschematas und Inhalten.



Ich verteufle diese Stilmittel nicht grundsätzlich… es gibt einige hervorragende Beispiele, die auch Schlagschatten oder Rundungen benutzen.
Aber dann gehört es zum Gesamtkonzept und wird als solches auch durchgezogen und der Arbeitsaufwand mit einkalkuliert.



Es gibt jedenfalls keinen ergonomischen Grund, Rundungen einzusetzen, und den meisten würde ich raten, das besser zu lassen… es gibt eh zuviel davon.
Zumal die technische Umsetzung ja wirklich nicht die Einfachste ist. Sieht man ja schon an Deiner dann doch etwas eckigen Ecke:
bild16lj.jpg




Mein Rat: Laß es, wenn Du nicht wirklich einen triftigen Grund dafür weißt.
Dann wirkts nämlich immer wie „gewollt und net gekönnt.“ ;)
 
Nogger schrieb:
Außenumriß gerundet, Infokästen gerundet, Rest eckig. Meinst du sowas? Dann nehme ich das :)

Warum nicht?
Wenn Du das konsequent durchziehst, dann lernt der User unterbewußt schnell, sich inhaltlich auf dieser Seite zurechzufinden. Zusammen mit einer übersichtlichen Anordnung und einem sehr dezenten, sparsamen Farbcode sollte sich schon was anständiges bauen lassen.

Allgemein sind Elemente mit abgerundeten Ecken einfach schwieriger in ein Layout einzupassen – die Bezugskanten verwässern und es ergeben sich noch eine paar andere mikrotypographische Probleme, die gelöst werden wollen.
 
Es gibt jedenfalls keinen ergonomischen Grund, Rundungen einzusetzen,

Aha. Ich habe nämlich auch erstmal nichts zu gefunden zu der Wirkung. Getippt hätte ich etwas in Richtung organisch/freundlich vs. kalt/technisch o.ä. In der Natur gibt es halt rechte Winkel eher selten. Könnte man wohl Colani-Argumentation nennen ;-)

Bei andere Formen kann man ja schon was sagen. Da bedient sich das Design z.B. der Verkehrszeichen mit Dreieck als Warnung, Achteck als Stop. Das ist weit sozialisiert, die Wirkung der Form klar. Oder Rot als dringende Farbe für Stop/Warnung.

Zumal die technische Umsetzung ja wirklich nicht die Einfachste ist. Sieht man ja schon an Deiner dann doch etwas eckigen Ecke:

Das kommt jetzt nur davon, weil im im Gimp eben kurz mit dem Radierer drüber gegangen bin und das ganze für ads Forum noch verkleinert.
 
don.raphael schrieb:
Zusammen mit einer übersichtlichen Anordnung und einem sehr dezenten, sparsamen Farbcode sollte sich schon was anständiges bauen lassen.

Das hoffe ich doch :) Ich habe in der Zwischenzeit mal die Farben etwas zurückgenommen.

Allgemein sind Elemente mit abgerundeten Ecken einfach schwieriger in ein Layout einzupassen – die Bezugskanten verwässern und es ergeben sich noch eine paar andere mikrotypographische Probleme, die gelöst werden wollen.

Bei HTML gibt es blos nicht viel Einflußnahme auf mikrotypographischer Ebene. Eigentlich so gut wie keine.

Was meinst du mit den "Bezugskanten verwässern"? Hast du da vielleicht ein Beispiel?

Du schriebst auch
das ist eckig, weil... und das ist rund, weil...

Für die Begründung, den Teil nach dem "weil", scheint es den Antworten hier im Thread nach keine Regeln zu geben. Es erstaunt mich dann doch, weil es Regeln zur Wirkung von Farben oder Schrift-Typen gibt, zu Formen aber scheinbar nicht so.
 

Anhänge

  • scr1.png
    scr1.png
    62 KB · Aufrufe: 90
zum thema bezugskanten:
sieh dir mal die pulldown menüs auf dieser seite an. die sind etwas gerundet. sie sind links- oder rechtsbündig an anderen straighen rechtecken ausgerichtet. optisch sieht es aber so aus, als ob die gerundeten pulldown menüs etwas zu weit nach innen platziert sind. das wird um so schlimmer, je runder die ecken und je kleiner die gerundeten rechtecke sind. bei schrift wird das ausgeglichen: das O, G usw. ragen immer ein wenig über die Grund- und Oberlinie hinaus, um optisch genau so hoch zu sein wie M, N oder H.
in html ist das natürlich schwer einstellbar und man mag darüber hinwegsehn, so nach dem tenor, das merkt ja eh keiner. ich bin aber der meinung, daß man´s zumindest spürt und die klarheit und ordnung einer seite stört.

mit der forderung einer inhaltlich schlüssigen argumentation
das ist eckig, weil... und das ist rund, weil...
meinte ich eigentlich DEINE argumentation, nicht eine designtheoretische regel.
also:
das ist eckig, weil dort basisinformationen zum thema xy geschrieben stehen und das ist rund, weil hier marginalien zum Thema reingeschrieben werden.

zum thema fehlende designrichtlinien für formen:

die kombi runde ecken ist ja schon absurd, ein oxymoron.
und als damals quark die rundung für ecken möglich gemacht hat, gab es kein layout, in dem diese neue funktion nicht ausprobiert wurde. leider ist es so, daß neue filter und funktionen (kunststoffverpackung, transparenz, u.ä) nur allzuoft inflationär mit einem falschen verständnis von modernität verwendet werden und dann doch gerade deswegen zeitgeistig werden.
dieses phänomen kann gutes und schlechtes hervorbringen.
runde ecken sind aber nun mal bestandteil des formenkanons geworden, ohne daß die schwierigkeiten in ihrer behandlung besonders berücksichtigt werden.

da die beschränkten möglichkeiten des html oft keine ein- oder ausrückungen erlauben, muss man hier eben die kritischsten fälle versuchen zu vermeiden:
• kleine rechtecke mit starken rundungen in unmittelbarer nachbarschaft zu den klaren bezugskanten eines rechtwinkligen rechtecks.

also: je größer die gerundeten rechtecke und je kleiner die rundungen sind, desto geringer ist die irritation des auges bzgl der bezugskanten.

und:
zum thema formen gibt es so viele variablen (weißraum drumherum, material, Schrift nebendran, farbe, größe, verhältnisse), daß man eigentlich keine allgemeinverbindlichen "das ist so und das ist so"-Regeln benennen kann.
bei schrift ist es einfacher: im buchsatz beispielsweise sind sehr viele konstanten vorhanden, so daß man sich hier im allgemeinen getrost auf über jahrhunderte erprobte regeln verlasssen kann.
mir fällt der titel jetzt nicht ein, aber es gibt da so ein buch, daß sich nur mit der positionierung eines oder mehrerer schwarzer punkte auf einer seite beschäftigt.
und wann dieser wie wirkt. hängt er, fällt er, steigt er auf, usw.
das sind wirkungsweisen, die man nur mit sehr viel übung bei seinem rezipienten erzeugen kann, eigentlich wie beim zeichnen auch.
daraus gibt es z.bsp. die regel der optischen mitte, also daß der punkt in der geometrischen mitte des blattes nach unten versetzt wirkt und deshalb ein stückchen höher gerückt werden muss, um optisch mittig zu wirken.
im grunde genommen beziehen sich die regeln für formen weniger auf die form selbst, sondern auf deren position auf der arbeitsfläche.

um zu unsren runden ecken-regeln zurückzukommen:
unsere runde ecke muss also in form, farbe und größe so geartet sein, und auf der arbeitsfläche zusammen mit ihren benachbarten elementen so positioniert werden, daß sie im günstigsten fall eine inhaltliche und funktionale Bestimmung hat.

Nun musst du also die inhaltliche und funktionale Bestimmung deiner runden ecken festlegen und danach form, farbe und größe und deren position richten.
 
Da nun mal wieder auf den Server komme: Erstmal vielen Dank für deine Erklärungen. Sie sind sehr lehrreich.

don.raphael schrieb:
sieh dir mal die pulldown menüs auf dieser seite an. die sind etwas gerundet. sie sind links- oder rechtsbündig an anderen straighen rechtecken ausgerichtet. optisch sieht es aber so aus, als ob die gerundeten pulldown menüs etwas zu weit nach innen platziert sind. das wird um so schlimmer, je runder die ecken und je kleiner die gerundeten rechtecke sind.

Bei mir sind die zwar alle absolut eckig, aber ich verstehe was du meinst. Ist sowas wie die Beispiele unter http://www.phillex.de/sinnest.htm

in html ist das natürlich schwer einstellbar

Das ist eigentlich leider überhaupt nicht einstellbar. Wenn man Glück hat, dann macht das Betriebssystem beim Zeichnen der Schrift das selbständig. Und den Aufwand einzelne Buchstaben manuell zu verschieben lohnt sich wohl nur an exponierten Stellen wie Überschriften. Und falls das Betriebssystem die Verschiebung aber selbst macht, hat man eine doppelte Verschiebung drin, also besser ganz sein lassen.

das ist eckig, weil dort basisinformationen zum thema xy geschrieben stehen und das ist rund, weil hier marginalien zum Thema reingeschrieben werden.

Ja, das ist kein Problem. Ich wollte halt schauen, ob es sowas analoges zu "Ein Gedichtband mit mittelalterlicher Prosa setzt man nicht in eine Schrift wie dieser: Fonts by Adobe, FAQ | Adobe " :) (Außer man will künstlerisch mit den Gegensätzen arbeiten)

die kombi runde ecken ist ja schon absurd, ein oxymoron.

OK, schlampig formuliert. Abgerundete Ecken.

und als damals quark die rundung für ecken möglich gemacht hat, gab es kein layout, in dem diese neue funktion nicht ausprobiert wurde.

Hehe, so wie das Aufkommen des DTP im Heimbereich. Mehr Schriftschnitte auf eine Seite als in einem Schriftkatalog - Ja, ich bekenne mich auch schuldig ;-)

daraus gibt es z.bsp. die regel der optischen mitte, also daß der punkt in der geometrischen mitte des blattes nach unten versetzt wirkt und deshalb ein stückchen höher gerückt werden muss, um optisch mittig zu wirken.

Sowas kenne ich in der Art der Satzspiegelberechnung bei LaTeX. Da pfusche ich nicht rum, sondern lasse das Expertensystem machen.

Ich werde dann mal schauen, ob ich mit deinen Ausführungen da etwas brauchbares auf die Beine stellen kann, oder ob es mir doch zu heikel ist.

Viele Dank nochmal!
 
Zuletzt bearbeitet von einem Moderator:
Das ist das Schöne am Design: Man kann es an FH oder UNI studieren, aber es ist keine wissenschaftliche Studienrichtung.
Es gibt keine Formel, Ableitung oder andere Logik zur Anwendung von runden oder "eckigen Ecken". Ich schließe mich LYNHIRR an: Es sollten nicht zuviele Stile vermischt werden. Das ist ein wesentlicher Grundsatz.
 
Zurück
Oben Unten