← SEGERT BLOG
Rubrik: Grafik- & Webdesign
Konzeptionelles und individuelles Webdesign ohne Page Builder wie Elementor, DIVI und Co
Als Webdesigner habe ich es nicht selten gehört und erlebt, dass Kunden für "Webdesign" sehr viel Geld in Rechnung gestellt wurde, das mit WordPress und Page Buildern mehr oder weniger zusammengeklickt wurde. Für mich, der das komplette Design und Coding seit über 20 Jahren individuell entwickelt, hat das natürlich einen Wettbewerbsnachteil, weil ich preislich und zeitlich nicht mithalten kann. Deshalb steht hier nun für interessierte Kunden der Versuch an, die Nachteile (aber auch die Vorteile) von Page Buildern zu benennen und mich der Frage zu nähern, warum mit Page Buildern das Webdesign verarmt und konzeptionelles, zukunftssicheres Webdesign nur bedingt möglich ist.
Webdesign-Glossar (mit Blick auf das geniale CMS ExpressionEngine)
Meine Angebote für Webdesign-Leistungen mit Konzeption, Design und CMS ExpressionEngine sind differenziert. Fachbegriffe lassen sich nicht vermeiden. Deshalb schicke ich mit meinen Angeboten seit 2014 ein Webdesign-Glossar als PDF mit. Das ist eine gute Sache und wird gerne angenommen. Und da Webtechniken ständig voranschreiten, wird das Glossar immer mal wieder erweitert mit verständlich erklärten Begriffen. Über neue Begriffe informiere ich an dieser Stelle.
-
Siehe unter Plugins.
-
- In einem Content Management System hat der Administrator (auch Super-Admin genannt) sämtliche Rechte, um das System zu konfigurieren, zu erweitern und anzupassen und sämtliche Inhalte zu editieren. Im besten Fall weiss der Super-Admin, wie Layout und Funktionalitäten der Website ausgebaut werden können.
- Allgemein ist ein Administrator für die Pflege und Konfiguration von Software-Systemen wie zum Beispiel einem Webserver zuständig. Bei technischen Problemen ist er der erste Ansprechpartner.
-
- Im Webdesign ist ein "Accordion" eine Element der Benutzeroberfläche von inhaltsreichen Webseiten. Gleichzeitig ist sie eine Technik, um Inhalte platzsparend darzustellen. Ein Accordion besteht aus einer Liste von Abschnitten oder Panels, wobei jeder Abschnitt einen Titel und einen Inhalt hat. Die Inhalt eines Abschnitts ist zuerst verborgen. Der Benutzer kann dann durch Klicken auf so einen Titel den Inhalt darunter anzeigen oder ausblenden lassen.
- Das Accordion-Design wird zum Beispiel gerne für FAQ-Seiten eingesetzt. Auch dieses Glossar organisiert die Inhalte über ein Accordionfunktion. Typischerweise wird das Accordion-Element in Kombination mit HTML, CSS und JavaScript implementiert. CSS wird verwendet, um das Aussehen und die Animationen zu gestalten, während JavaScript die Interaktivität ermöglicht, indem es die Anzeige der Inhalte steuert.
-
- Der Alt-Text ist eine Abkürzung für alternativen Text mit denen grafische Elemente wie Fotos im HTML-Code ausgezeichnet werden. Die Texte helfen Suchmaschinen bei Indexierung von Bildern und sind ein wichtiger Bestandteil des barrierefreien Webdesigns, eben weil Alt-Texte blinden und sehbehinderten Menschen Hinweise auf die Funktion und den Inhalte der Grafiken geben. So kann zum Beispiel ein Foto kurz beschrieben werden. Das sorgt für Teilhabe an der Website, auch wenn der Besucher die Bilder nicht sehen kann.
Update: Ein IMAP-Postfach vor einem Webhosterwechsel schnell und sicher importieren
Ich war nicht selten damit kontrontiert, dass ich einen neuen Kunden gewann, der seine Website bei einem Webhoster liegen hatte, der nur ungenügende Leistungen bot, zu teuer war oder den technischen Anforderungen für den Betrieb eines CMS nur bedingt gerecht wurde. Dabei ist ein Providerwechsel mit Umzug der Domain und der Wesbite heutzutage innerhalb eines Tages realisierbar.
Logoentwicklung und Webdesign mit dem CMS ExpressionEngine für eine Steuerberater-Kanzlei
Der Kunde DÜSTER | STEPHAN Steuerberater aus Voerde kontaktierte mich, weil den beiden Inhabern eine Website eines Kunden von mir besonders gut gefiel. Der neue Kunde wünschte ein komplett neues Auftreten im Web und beauftragte mich zugleich, ein Logo (Typo-Signet), Visitenkarten und einen neuen Briefbogen zu entwerfen und umzusetzen.
Das Ernst Weiß Portal für Literaturliebhaber
Zur Förderung der Wiederentdeckung des fast vergessenen Arztes und Schriftstellers Ernst Weiß habe ich das Ernst Weiß Portal konzipiert und umgesetzt. Es soll u.a. den wissenschaftlichen Austausch fördern.
Redesign: OnePager für einen Freelancer
Ich dachte, ich schaue noch ein paar Mal nach, ob es wirklich wahr ist, aber es ist wahr: Ich habe endlich das Redesign meiner beruflichen Website auf segert.net fertiggestellt und mich an einen etwas umfangreicheren OnePager versucht. Dafür habe ich das sehr featurereiche Script fullPage.js und das dazugehörige Bundle der fullPage.js Extensions genutzt (dazu später mehr in einem Extra-Post).
Minimalistisches Webdesign für ein Architekturbüro in Bottrop
Für die Holtkamp Architekten aus Bottrop durfte ich ein neues Webdesign entwerfen, das auf das Wesentliche reduziert sein sollte und auch responsiv auf dem Smartphone seinen Charakter nicht verlieren sollte. Als CMS kommt zudem ExpressionEngine zum Einsatz. Das flexible CMS ermöglicht meinem Kunden, ohne Lernkurve neue Bauprojekte mit eigenen Bildern anzulegen oder aktuelle Neuigkeiten zu veröffentlichen. Zudem kam für meinen Kunden alles aus einer Hand: Das Design, die Programmierung und die technische Administration des Webhostings und alles, was damit zusammenhängt. Zur Website Holtkamp Architekten.
Skalierbare Schriften mit den CSS: min(), max() und clamp()
Da der Browser-Support von min(), max() und clamp() mittlerweile so gut ist, werde ich diese CSS-Skalierungsfunktionen für zukünftige Projekte einsetzen, um Schriften endlich skalierbar zu machen. Wie man das macht, erläutert der Beitrag min(), max() und clamp(): drei CSS-Funktionen für dynamischere Websites auf Kulturbanause. Und was Entwickler*innen alles mit clamp() anstellen könnten, zeigt ausführlich der Artikel Use cases for CSS comparison functions von Ahmad Shadeed.
Webdesign und ExpressionEngine für die Eifelgemeinde Weinsheim
Zusammen mit Werbegentur Sentio Media aus Gerolstein habe ich das Redesign der Eifelgemeinde Weinsheim erstellt und dafür wieder das Content Management System ExpressionEngine eingesetzt. Sentio Media war für die Projektleitung und die Konzeption zuständig und ich habe das responsive Webdesign gestaltet, die Website programmiert und das CMS eingerichtet.
Webdesign und CMS für einen vielseitigen Künstler
Ich habe mich sehr gefreut, als der Künstler Bernd Finkeldei aus Düsseldorf für eine neue Website auf mich zukam. Es war eine leicht und frei wirkende, minimalistische Website zu gestalten, die zugleich viele unterschiedliche Bilder, Texte und Publikationen enthalten sollte. Mit dem vielseitigen Künstler, dessen Arbeit mich begeistert, ergab sich eine erfreulich produktive Zusammenarbeit. Eine technische Herausforderung war, die unterschiedlichsten Bildformate des Künstlers auch für mobile Endgeräte genussfertig und schön zu präsentieren. So entstand eine Mischung aus responiver und adaptiver Website.
Ein Onepager ohne CMS und Cookies
Für die Automotive Claim Consulting GmbH hatte ich 2011 eine statische Website entworfen und umgesetzt. Und obwohl die Website auch mobil noch gut funktionierte, kam der Kunde wegen eines Redesigns auf mich zu. So entwarf ich (angelehnt an das Design der alten Website) einen zweisprachigen Onepager, der selbstredend ohne ein CMS wie WordPress auskommt und entsprechend völlig cookiefrei funktioniert. Das Design selbst ist unaufgeregt, seriös und fokussiert auf die Inhalte. Insgesamt eine schnelle, schlanke Website ohne Script-Overflow.
Webdesign und ExpressionEngine für ein medizinisches Startup
Für das Startup Institut für digitale Schlafmedizin aus dem Ruhrgebiet durfte ich eine Website gestalten und entwickeln, die gestern offiziell online ging. Zum Einsatz kommt wieder das wunderbare CMS ExpressionEngine.
Effizienter designen mit der Sketch-App und dem Sketch-Wiki
Für alle User Interface Designer und die, die es werden wollen und bereits mit der geschätzten Sketch-App arbeiten, habe ich etwas ganz Feines entdeckt. Das toll aufgemachte und sehr informative Sketch-Wiki von Micha Wiebe. Sehr nützlich finde ich zum Beispiel die Seite mit den Tastenkombinationen für Sketch 4, mit denen das Arbeiten sehr beschleunigt werden kann. Ausserdem gibt eine Reihe von Tutorials, die in die Grundlagen einführen. Und wer im PlugIn-Dschungel einige der nützlichen kennenlernen möchte, wird auf dem Sketch-Wiki bestens bedient. Voilà!
Sketch 4.9 jetzt mit Prototyping für Appdesigner
Die Entwickler der hochgeschätzten Sketch-App sind immer wieder für eine Überraschung gut, um ihre Software noch leistungsfähiger und intuitiver zu machen. So gibt es mit der Version 4.9 nun einfache Prototyping-Funktionen, die vor allem Appdesigner zu schätzen wissen werden. Sie sollten derweil aber nicht allzu hohe Erwartungen haben, denn für ausgeklügeltes Prototyping werden nachwievor Prototyping-Tools wie Flinto und Co sinnvoll sein. Apropos Prototyping-Tools: Sketch 4.9 versteht sich hervorragend mit Zeplin, denn bereits miteinander verknüpfte Sketch-Artboards bleiben beim Import in Zeplin erhalten.
Interview: Über das Wesen der App
Ich freue mich sehr, heute das Interview mit Karolina Schilling, Autorin des Buches “Apps machen - Der Kompaktkurs für Designer“ vorstellen zu können. Wir bekommen einen lebendigen Einblick in ihre Denkweise und ihre Erfahrungen mit App-Konzeption und Kunden.
RS: In Deinem Buch Apps machen bearbeitest Du das Thema Appdesign sehr stark auf konzeptioneller und weniger auf technischer Ebene als andere Bücher. Was hat Dich dazu gebracht und woher kam das ganze Material und die Inspiration?
KS: Genau, mir ist aufgefallen, dass es viele Bücher zur Programmierung von Apps gab, aber keines, das einem erklärt, wie man das Produkt, das Wesen der App, erschafft. Ich konnte oft beobachten wie auf Kundenseite etwas nicht zu Ende gedacht wurde und auf der Entwicklerseite bemängelt wurde, dass es keine Screens zur Bedienung der App gibt, sondern lediglich die technische Konzeption, beispielsweise, wann sich die App welche Daten vom Server holt. Diese Fokussierung auf die technische Umsetzung ohne überhaupt nur einmal darüber nachzudenken, wie sich der Nutzer auf den Screens bewegt, ist für mich etwas sehr Altes, etwas Ingenieurmäßiges. Doch heute geht es nicht mehr nur darum, dass etwas technisch möglich ist, heute geht es um die Benutzung. Bei so viel Konkurrenz am Markt, können sich Software-Produkte - und das sind Apps - nur durch eine super einfache, komfortable Bedienung für die Nutzer unterscheiden. Und die Sensibilisierung auf den Nutzer vermittle ich in meinem Buch.
Entwicklung einer Landingpage für ein Vertriebs-Produkt
Im Spätsommer 2017 war ich wegen eines Redesigns bei einem Kunden, für den ich 2009 die Website erstellt hatte. Aus der Situation heraus präsentierte mir die Geschäftsführung - Herr und Frau Schneiderath - mit leuchtenden Augen die Vorteile ihres exklusiv vertriebenen Gas-Brennwertkessels. Es dauerte nicht lange und ich verstand Ihre Begeisterung. Und die Idee, eine zuvor nur mit reinem Text bestückte Domain als werbende Landingpage auszubauen, war nicht mehr fern.
Links: Online-Marketing, User Experience, Sketch
User-Experience - Ein fast schon tot gebetetes Wort mit aus Verbrauchersicht leider noch wenig ausgeprägter Verbreitung oder? Trotzdem sind wir natürlich für die 8 schnellen Maßnahmen, die Erfolg versprechen dankbar, auch wenn manches, das uns t3n empfiehlt, längst in Fleisch und Blut von Konzeptern und Designern übergegangen sein sollte. Zudem zeigt der Artikel, wie der “Marketer” nebenbei zwei Affiliate-Links im Artikel unterbringt, um auf gelungene About-Seiten hinzuweisen. Klicke ich dann auf diese Links, muss ich die Abouts erst suchen. Gar nicht so einfach mit der User Experience oder?
User Interface Design - Der Artikel 31 Brilliant User Interface Animations verspricht dagegen nicht zuviel, sondern zeigt eindrucksvoll, daß Animation sehr gut im Sinne von Form follows function eingesetzt werden kann, siehe zum Beispiel 5. One Field Form.
Git und Sketch - True Collaboration via Git and Sketch Is Finally Here heißt ein How-To-Artikel, der das Ziel hat, uns zu zeigen, wie man Sketch-Files in den Git-Workflow integriert, ohne daß das nicht-technische Personal das Weite sucht. Wobei das Einrichten dieser Technik unbedingt terminalversiertem Personal anvertraut werden sollte.
CMS-Vergleich - Vorteile und Nachteile von TYPO3 gehörte diese Woche zu meinen am intensivsten gelesenen Artikeln im Zusammenhang mit den Texten für mein Projekt Modulée.
Interview: Effiziente Appentwicklung mit LiveCode aber die Vorurteile sind stark
Hauke Fehr ist Softwareentwickler, Autor und Dozent aus Berlin. Im folgendem Interview erzählt er über sein Buch “Eigene App programmieren” und die Programmiersprache LiveCode, die für ihn zu einer Offenbarung geworden, hierzulande aber noch unbekannt ist und der mit Vorurteilen begegnet wird. Hauke Fehr räumt sie überzeugend aus. Sehr spannend.
RS: Dein Buch Eigene App programmieren ist eine Einführung in die Programmiersprache und Entwicklungsumgebung LiveCode, hierzulande wenig bekannt und genutzt. Was hat es mit LiveCode auf sich und wie bist Du zu dieser Sprache gekommen?
HF: LiveCode ist ein komplettes Cross-Plattform-Entwicklungssystem mit eigener Programmiersprache, eingebauter IDE und grafischem GUI-Editor, in dem alles miteinander verzahnt ist. Es ist insofern ein All-in-One-Produkt, mit dem man schnelle Skripte für den alltäglichen Gebrauch fabrizieren, aber auch umfangreiche native Anwendungen für Desktop (Mac, Windows, Linux) und echte Apps für mobile Geräte (Android, iOS) erstellen kann.
Appdesign von der Idee bis zum klickbaren Prototypen
“Apps machen - Der Kompaktkurs für Designer“ ist eines der wenigen Fachbücher, die Appdesign weit über die technisch-gestalterischen Aspekte hinaus thematisiert. Karolina Schilling ist es gelungen, uns Appdesign mit einem ganzheitlichen Ansatz schmackhaft zu machen. Nicht umsonst steht auf dem Cover „von der Idee bis zum klickbaren Prototypen.“
