Gute Frage, die ich oft gestellt bekomme. Weniger von Webdesignern, mehr von Kunden. Ich habe dabei nur ein Trick: Ich stelle mir das ideale Design vor, das zum Kunden, zur Zielgruppe und zum Thema passt. Anschließend setze ich es um. Ich weiß, normalerweise läuft es andersrum, bei mir ist es aber so am einfachsten und das warum erkläre ich kurz:
Der Anfang meiner Karriere war Design
Ich begann mit Webdesign in einer Zeit, bei der im Internet noch nicht ganz so viel möglich war, aber Dinge möglich waren, die heute nicht mehr umsetzbar sind. Es war damals pures HTML+CSS und manchmal ein kleines CMS dahinter. Von Anfang an hatte ich gegen den Strom gedacht und nach Möglichkeiten gesucht, etwas anders zu machen, etwas Besonderes. Das waren damals Framesets: Aneinandergereihte Bilder oder Gifs, die in einem bestimmten Muster angeordnet waren wie ein Puzzle.
Was dadurch möglich war? Alles. Ich konnte in Photoshop ein Design entwerfen und es 1 zu 1 als Frameset umsetzen. Mouseover zeigten dann ein passendes Bild über dem anderen Bild, um den Effekt zu machen. Dadurch wurde ich schnell bekannt als „der Typ, der jedes Design umsetzen kann“. Später kam dann Flash. Unfassbare und selbst für heutige Verhältnisse unglaubliche Designs waren plötzlich möglich. Das alles ist heute undenkbar, da Framesets auf die Bildschirmformate angewiesen sind. Auf mobile und Tablet und jedem unterschiedlichen Gerät wäre die Darstellung anders -> Unmöglich konsistent zu machen. Flash wurde zum Sicherheitsrisiko. Also war auch das Geschichte.
Nun musste ich also doch auf die Basis-Elemente zurückgreifen von HTML und CSS, aber glücklicherweise kam html5 und css3 nach und nach raus und ermöglichte mir ebenso starke Designs, wenn auch mit deutlich mehr Arbeit.
HTML + CSS
Auch wenn heute alles mit Pagebuildern wie Elementor und Co zusammengefummelt wird, ist das, was im Browser ankommt, immernoch pures HTML und CSS, sowie Javascript. Es hat sich daran nichts geändert und deswegen ist es gut gewesen, dass ich gezwungen war, das bis ins kleinste Detail zu verinnerlichen und Tricks zu entwickeln, um bestimmte Dinge hinzubekommen.
Während die meisten Webdesigner von den Grundlegenden Dingen keinen Schimmer haben, weiß ich immernoch ganz genau, was wo wie genutzt wird und unter welchen Bedingungen. Pseudo-Elemente mit Inset, die mit einer CSS-Animation einen LED-Lichtschweif um eine Box senden für einen Cyberpunk-Effekt, wie hier auf meiner Website:
.maincontent::before {
content: '';
position: absolute;
inset: -6px;
border-radius: inherit;
background: #1a1a1a;
background-clip: border-box;
background-origin: border-box;
clip-path: inset(0 round 10px);
z-index: -1;
}
.maincontent::after {
content: '';
position: absolute;
inset: -5px;
border-radius: inherit;
background: conic-gradient(from var(--angle), transparent 40%, #0289dd 59.9%, transparent 60%);
filter: blur(10px);
opacity: 1;
animation: rotate 5s linear infinite;
z-index: -2;
pointer-events: none;
}
@keyframes rotate {
to { --angle: 360deg; }
}
@property --angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
Mit Pagebuildern möglich? Nein. 2 Pseudo-Elemente, Keyframes, bestimmte Winkel sind nicht mit Pagebuildern möglich. Selbst solch kleinen Dinge machen ein Design aber Besonders. Vor Allem heute ist es einfach als je zuvor, ein Design zu entwickeln, welches einmalig ist, weil’s einfach kaum jemand umsetzen kann.
Weitere Tricks
Um Designs ansprechend zu machen, gehört es dazu, die Geräte zu kennen und deren Leistung. Im obigen Beispiel schaut es fantastisch aus und macht vor allem bei einem DarkMode einen tollen Effekt. Aber das kostet Leistung der GPU (Grafik). Was am Desktop kein Problem darstellt, ist es das am Smartphone aber. Vor Allem bei einem großen Element, wie diesem Container hier, muss das kleine Handy also die gesamte Größe und Bewegung mindestens 60 mal Pro Sekunde neu berechnen. Natürlich kann es das, aber was bewirkt das für den User? Die Website scrollt langsamer, es frisst den Akku auf, es stockt ab und zu. Lösung: Abschalten für mobile Geräte. Der Trick ist also eigentlich: Alles ist erlaubt, solange man die Grenzen der Hardware kennt und kein Problem hat, Dinge abzuschalten unter bestimmten Bedingungen, ohne dass die Website beeinträchtigt wird. Im aktuellen Beispiel werden bei mobilen Geräten einfach nur die Pseudo-Elemente mit einem Display:None bestückt und fertig.
@media (max-width: 800px) {
.maincontent::before, .maincontent::after{
display:none;
}
}
Nur die Animation ist weg und die Website wird perfekt dargestellt.
Minimalismus oder voll übertreiben?
Minimalismus unbedingt. KMUs sind seriöse Unternehmen, keine Spaßblogger. Akzente sind wichtig, sollten aber nicht ablenken. Überall findet man Websites, die spaßige Boxen verschieben, wenn man scrollt und alles hin- und herfliegt. Standart-Blödelei in Pagebuildern. Resultat: Unseriöse Spielerei + extremes Javascript = Speed leidet, Besucher genervt. Das Design muss bereits ohne jegliche Bewegung gut aussehen. Anschließend darf etwas animiert oder bewegt werden, aber nur ein Detail je Viewport, konsistent über die komplette Website. Konsistenz ist King. Man muss nicht bei jeder Website zeigen, was möglich ist, sondern den Kunden präsentieren. Die Kundenwebsite ist seine Präsentation, nicht die Demo des Webdesigners.
Meine beliebtesten Tricks
Hier eine kleine Liste meiner üblichen Styling-Tricks:
Schatten
Optik ist einfach. Ein Kasten zu stylen ist mit einem simplen Border-Radius und sanftem Schatten in rgba (also mit einem alpha-wert für transparenz) in jedem Design möglich und in jedem Lightmode. Solche kleinen Dinge machen einen massiven Effekt aus in der generellen Optik einer Website. Hier ein sanfter, schwarzer Schatten mit 30% Sichtbarkeit. Er dunkelt nur ein wenig ab, hebt dadurch das Element etwas an und sorgt für einen schönen Flow.
box-shadow:2px 4px 6px rgba(0,0,0,0.3);
Glas
Gläserne Optik ist heute sehr gefragt und ich persönlich finde es ebenfalls toll. Ein Element, wie eine Top-Navigation, die leicht durchsichtig ist, aber den dahinter liegenden Inhalt nur verschwommen zeigt, während es einen saften Farbverlauf mit Alpha hat, wirkt wie ein gläsernes Element. Es wirkt nicht wie Spielerei, sondern sehr edel.
background: linear-gradient(180deg, rgb(255 255 255 / 95%), rgb(255 255 255 / 50%)); backdrop-filter: blur(12px);
Zoom bei Hover
Eine selten genutzte, aber sehr schöne Art, einen Mouseover zu gestalten bei Elementen, die grafisch sind, ist sie zu skalieren. Ein simpler Transform-Filter mit Scale 1.15 bei kleinen Elementen oder 1.05 bei größeren Elementen, wirkt Wunder. Verbindet man es mit einer sanften Transition-Methode, damit es sanft zoomt, dann ist es ein edler und schöner Effekt.
.element {
transition: all 0.3s ease;
}
.element:hover {
transform: scale(1.15);
}
Kommentare (0)
Kommentar schreiben