Wie kann ich lernen, komplexe Benutzeroberflächen und Grafiken auf meiner Website zu erstellen? [geschlossen]

Ich habe durch Dribbble gescrollt und konnte sehr beeindruckende Webdesign-Aufnahmen sehen. Bisher erstelle ich nur einfach aussehende Websites, aber ich würde meine Benutzeroberfläche gerne mit ein bisschen Grafikdesign verbessern. Wie kann ich etwas erreichen, das ein Design hat, das Kurven zu haben scheint und nicht auf ein CSS-Box-Modell beschränkt ist, wie im Bild unten?

Geben Sie hier die Bildbeschreibung ein

Fragst du dich, wie man diese Grafiken zeichnet? Diese sehen für mich wie Vektorgrafiken aus - verwenden Sie also einen Vektorbildeditor, um ein SVG zu erstellen.
@BillyKerr Ich denke, OP fragt, wie man ein Weblayout erstellt, das visuell nicht in einer gitterartigen Struktur ist.
@Luciano - um ehrlich zu sein, bin ich mir nicht sicher, was das OP fragt, weshalb ich um Klärung gebeten habe, obwohl Sie vielleicht Recht haben.

Antworten (1)

Alle Weblayouts sind auf das CSS-Box-Modell beschränkt. Sie erzeugen nur die Illusion, dass dies nicht der Fall ist, indem Sie clevere Positionierungstricks anwenden.

  • In Ihrem Beispiel haben sie tatsächlich ein SVG-Bild (den grünen Teil) und ein bisschen CSS-Positionierung verwendet. Das SVG hat eine normale Kastenform, überlappt jedoch den darunter liegenden Inhalt.

  • Sie können dies mit anderen Tricks für verschiedene Effekte kombinieren, wie zum Beispiel Randradius und/oder abgeschrägte Kanten.

Sie müssen lernen, die Einschränkungen von HTML + CSS zu umgehen, um die gewünschten Effekte zu erzielen. Anstatt in Dribbble zu stöbern (wo Sie nur die Designs sehen), sollten Sie sich eine Web-Inspirationsgalerie wie Codepen ansehen , wo Sie den Code hinter den Designs sehen können.