Kategorien
Bilder & Vektorgrafiken bearbeiten Webdesign

Responsives SVG: Was geht, was geht nicht?

Im Webdesign sind responsive Layouts nicht mehr wegzudenken. Da gibt es auf der einen Seite immer mehr kleine Displays auf Smartphones und auf der anderen Seite immer größer werdende Monitore. Dazwischen finden sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es technisch kein Problem, eine Website für all die verschiedenen Auflösungen zu optimieren. Doch wie sieht es mit SVGs aus? Lassen sich diese auch responsiv gestalten?

Kategorien
HTML/CSS Responsive Design Webdesign

Modernes Webdesign: Diese Fehler solltest du vermeiden

Webdesign und -entwicklung haben sich in den vergangenen Jahren enorm geändert. Daran ist vor allem auch das mobile Internet verantwortlich, was die Art und Weise, wann und wie wir das Internet nutzen, verändert hat. Vieles, was vor zehn Jahren noch gängig war, gilt heute als überholt. Selbst vieles, was vor zwei bis drei Jahren noch völlig aktuell war, gilt heute als veraltet. Welche Dinge solltest bei der Gestaltung und Entwicklung moderner Websites lieber nicht (mehr) machen?

Layouts nur für Desktopgeräte und Smartphones

Die Zeiten, in denen du deine Website nur für eine Ansicht entwickelt hast, sind ja nun schon lange vorbei. Und man findet mittlerweile nur noch wenige Websites, die ohne responsives Layout auskommen.

Doch häufig werden beim responsiven Layout nur zwei Geräte- beziehungsweise Displaytypen berücksichtigt: der klassische Monitor und das Smartphone. Dabei erhält zumindest das Desktoplayout eine feste Breite, während das mobile Layout häufig auf die gesamte Breite des Browserfensters ausgedehnt wird.

Die Unterscheidung nur zwischen Desktop und Smartphone ist mittlerweile jedoch viel zu kurz gegriffen. Denn es gibt mit Tablets und Phablets mittlerweile eine Vielzahl unterschiedlicher Geräte mit diversen Auflösungen. Die Unterscheidung zwischen nur zwei Typen wird dieser Entwicklung nicht gerecht. Daher solltest du dein Layout so flexibel halten, dass es auf allen Auflösungen funktioniert.

Auf großen Monitoren sollte dein Layout keine verschwenderisch großen Ränder links und rechts haben. Und auf Tablets sollte nicht das Layout für Mobilgeräte dargestellt werden.

Eigene Mobilversion deiner Website

Bleiben wir beim mobilen Webdesign. Als die Möglichkeiten responsiver Websites noch sehr eingeschränkt waren, wurden eigene Mobilversionen für Websites entwickelt. Noch heute haben vor allem große Newsportale immer noch eigene Mobilversionen, die meist über eine eigene Subdomain zugänglich sind.

Hier ergibt sich natürlich dasselbe Problem mit den Layouts. Darüber hinaus sind immer zwei Versionen einer Website zu pflegen. Und häufig funktioniert die Ausgabe der richtigen Version nicht. Da wird auf Tablets gerne mal die Mobilversion geladen, obwohl die Auflösung eigentlich problemlos die Desktopversion anzeigen könnte.

Inhalte fürs mobile Internet verstecken

Websites werden zunehmend komplexer. Das gilt für den Inhalt, aber auch für die Gestaltung. Großformatige Bilder und Grafiken werden kombiniert mit mehrspaltigen Texten und zusätzlichen Sidebars.

Und auch der Unterschied zwischen den Display- beziehungsweise Monitorgrößen wird immer größer. So gilt es heutzutage, Websites zu gestalten, die auf großen Monitoren ebenso gut aussehen wie auf kleinen Smartphones.

Das ist durchaus eine Herausforderung. Viele Webdesigner gehen da einen einfachen, aber nicht empfehlenswerten Weg. Angeblich verzichtbare Inhalte werden auf Smartphones einfach versteckt. Das mag im ersten Moment sinnvoll sein, um die Übersichtlichkeit einer Website auf einem Smartphone zu gewährleisten.

Aber da Websites oft häufiger mobil besucht werden als über einen Desktoprechner, ist dieses Vorgehen natürlich nicht im Sinne des Besuchers. Daher sollten auf Smartphones keine Inhalte vorenthalten werden. Vielmehr solltest du schauen, wie du alle Inhalte platzsparend und übersichtlich präsentierst. So kannst du Slider einsetzen oder Inhalte über eine Sidebar ausblenden und per Button einblenden lassen.

Fenster und Videos ungefragt über den Inhalt legen

Zu einer regelrechten Unsitte haben sich sogenannte „Modal Boxes“ entwickelt, die beim augenscheinlichen Verlassen einer Seite über den gesamten Inhalt selbiger gelegt werden. In solchen Bereichen wird dann beispielsweise auf den Newsletter oder auf irgendwelche Angebote hingewiesen.

Wenn man tatsächlich dabei ist, eine Seite zu verlassen, sind sie nicht störend. Wer aber nur versehentlich die Maus aus dem oberen Bereich der Seite hinausbewegt, wird bereits mit einem solchen Screen belästigt.

Wer seine Besucher also nicht verärgern will, sollte auf diese Pop-ups des modernen Webdesigns verzichten – so schön sie auch für einen Betreiber einer Website sein mögen.

Gleiches gilt für Videos, die ungefragt den Inhalt einer Website verdecken.

Einfache Auflösungen und falsche Bildformate

Das Internet ist nicht nur mobiler geworden; es ist auch hochauflösender geworden. Bei Displays und Monitoren spielt längst nicht mehr nur die Größe eine Rolle, sondern auch die Auflösung. So nimmt die Pixeldichte zu und die Auflösung wird immer schärfer.

Bei Bildern macht sich das zunehmend bemerkbar. In einfacher Auflösung sieht ein Bild auf einem hochauflösendem Display verwaschen und unscharf aus. Doch HTML5 und CSS3 erlauben es dir, Bilder für verschiedene Pixeldichten zu hinterlegen.

Nutze diese Möglichkeit, damit deine Website auch auf neuen Geräten nicht nur gut aussieht, sondern auch gestochen scharf ist. Wähle zudem das richtige Format für deine Bilder und Grafiken aus. Nutze JPEGs für Fotos, PNGs für Grafiken und SVGs für Vektorzeichnungen.

Systemschriften und zu kleine Schriften

Seit es Webschriften nach vielen Jahren in alle Browser geschafft haben, ist die Verwendung von Systemschriften nicht mehr nötig. Es gibt unzählige kostenlose und kostenpflichtige Schriften, die du in dein Webprojekt übernehmen kannst. Achte darauf, dass du es diese Schriften im neuen Format WOFF2 gibt. Dieses löst das bisherige Standardformat WOFF ab und ist dank besserer Komprimierung noch platzsparender. Und das ist gerade im mobilen Internet ein großer Vorteil.

Achte zudem darauf, dass du Schriften nicht zu klein einsetzt. Vor allem setze nicht auf eine einheitliche, feste Schriftgröße. Auf Smartphones sollten Schriften eine andere Größe haben als auf großen Monitoren.

Den Besucher warten lassen

Heutzutage erwartet man zurecht, dass Websites sich schnell aufbauen. Daher solltest du deine Website so entwickeln, dass sie schnell geladen wird. Optimiere Bilder und verwende das richtige Format.

Nutze Techniken wie das „<picture>“-Element, um immer passend große Bilder auszuliefern. Lade auf Smartphones Bilder in kleinerer Auflösung und nicht in einer Auflösung, wie sie auf einem großen Monitor benötigt wird.

Achte darauf, dass JavaScript die Ausgabe von HTML nicht blockiert oder verlangsamt und versichere dich, dass extern eingebundene Dateien deine Ladezeiten nicht negativ beeinflussen.

Kategorien
CMS Programmierung

Nichts für Amateure: Webydo, der Homepage-Baukasten für professionelle Webdesigner

Lassen Sie uns noch einmal das Thema „Homepage-Baukästen“ aufgreifen. Erst vor ein paar Tagen stellten wir an dieser Stelle ausführlich den jüngst an die Börse gegangenen Website-Builder Wix vor und dazu die Frage, ob Baukasten-Systeme die Zukunft des Webdesign darstellen könnten. Immerhin lässt sich wohl nicht leugnen, dass mit steigender Qualität der Werkzeuge und sinkender Komplexität der Bedienung die Attraktivität der Lösungen für all jene, die zwar gute Ideen, aber keine Coding-Skills haben, steigt. Heute stellen wir Ihnen einen weiteren Vertreter der neuen Spezies von Hochleistungsbaukästen vor. Es handelt sich um das ebenfalls aus Israel stammende Webydo. Am Ende des Beitrags finden Sie übrigens ein besonderes Angebot für Dr. Web Leserinnen und Leser.

Webydo: Website-Builder mit Designer-Fokus

Webydo, wie Wix in Tel Aviv gegründet und ansässig, hat ein kritisches Auge auf den Wettbewerber aus der gleichen Stadt gerichtet und legt viel Wert darauf, zu kommunizieren, inwieweit sich Webydo von Wix unterscheidet. Das wirkt zwar auf den ersten Blick etwas bemüht, ist aber auf den zweiten und alle weiteren Blicke durchaus als stimmig anzuerkennen. Anders als Wix richtet sich Webydo strikt auf Designer als Zielgruppe aus, wie Sie noch sehen werden. Entsprechend hört man im Hause Webydo die Begriffe Homepage-Baukasten oder Website-Builder gar nicht gern. In der Tat leitet die Verwendung dieser gängigen Terminologie etwas in die Irre, denn Webydo ist mehr als nur ein Baukasten, es ist eine vollständige Lösung für den Betrieb einer Designagentur, in jedem Falle eine vollwertige Website-Design-Software.

Wirtschaftlich orientierte Designer haben zumeist klare Bedürfnisse. Sie suchen ständig nach Wegen, die Kundenschar zu vergrößern. Sie wollen Design schneller und kostengünstiger, aber nicht qualitativ schlechter umsetzen. Viele wollen ihre Kenntnisse aus dem Print-Design auf Webseiten sinnvoll anwenden können. Und sie wollen oder können nicht coden. Die Zusammenarbeit mit Entwicklern zahlt sich für sie häufig nicht aus, da die Entwicklerkosten bis zu 70% des Gesamtbudgets verschlingen können. Haben Sie sich jetzt an einer oder mehreren Stellen schon erkannt? Dann sollten Sie auf jeden Fall weiterlesen…

webydo-homepage

Webydo: Offiziell erst zur TechCrunch Disrupt 2013 gestartet

Webydo gibt es schon seit gut zwei Jahren, hat aber sehr lange nur mit handverlesenen Designern gearbeitet. Erst zur TechCrunch Disrupt New York 2013 wagte man sich ans Licht der Öffentlichkeit. Dabei waren zu diesem Zeitpunkt schon mehr als 70.000 Webseiten von mehr als 13.000 Designern gestaltet worden. Der erfolgreichste Kunde der ersten Stunde erstellte innerhalb nur eines Jahres mehr als 1.000 Webseiten mit Webydo und einem Team von lediglich 15 angestellten Designern.

Webydo: der etwas andere Homepage-Baukasten

Gestartet im israelischen Tel Aviv, aber mittlerweile auch mit einem Büro in New Jersey, USA, vertreten, führt Webydo ein hochqualifiziertes Team von Mathematikern mit dem Ziel, Mathematik aus dem Webdesign zu eliminieren. Nach Recherchen von Webydo wird immerhin bis zu 70% des Budgets eines handelsüblichen Webauftritts von denen beansprucht, die Code mit der Hand schreiben. Für den reinen Designer bleibt da natürlich nicht mehr so viel.

Dass es eine Vielzahl von Wettbewerbern im Segment der Website-Builder gibt, ist den Machern von Webydo vollkommen klar. Sie sehen diese jedoch eher als Angebote für den Endkunden. In der Tat ist das zumindest ein Teil der Wahrheit. Schaut man sich etwa auf Wix.com um, so fallen einem sofort die extrem sorgfältig ausgearbeiteten Anleitungstexte und die leicht verständlichen Videos ins Auge, die Basiswissen, aber späterhin auch fortgeschrittene Kenntnisse vermitteln. Klar ist dabei, hier will man Menschen heranführen, die nicht über umfassende Grundkenntnisse verfügen. Auch die Hunderte von verfügbaren Templates sprechen eher dafür, dass man den design-affinen Endkunden zumindest sehr deutlich im Auge hat. Das ist bei Webydo definitiv nicht so.

webydo-selectdesign
Webydo: Die Zahl vorgefertigter Layouts ist ausgesprochen gering

Stattdessen sieht sich Webydo eher in der Tradition der Adobe-Produkte Photoshop oder Indesign. Hier erhält man professionelle Werkzeuge zur Erstellung professioneller Websites in die Hand, aber so gut wie keine fertigen Designs und Einsteiger-Tutorials. 24 fertige Layouts dienen eher zur Inspiration oder als Kickstarter, denn zum ernsthaften Einsatz als Live-Website…

So grenzt sich Webydo als Angebot für Designer gezielt vom Endkundenmarkt ab. Eine weitere Abgrenzung erfolgt mit Blick auf Developer. Hier möchte Webydo für Designer werden, was etwa WordPress für Entwickler ist. Es soll eine anpassbare Plattform entstehen, die von Designern für Designer fortentwickelt wird. Webydo-CEO Shmulik konstatiert hier eine Lücke, die klafft zwischen den Endkunden-orientierten Website-Baukästen und den an Entwickler gerichteten programmierbaren Content Management Systemen, die den Designprozess nach seinen Worten "marginalisieren".

Einen ersten aussagefähigen Eindruck vermittelt dieses kurze Video:

Webydo: die ersten Schritte

Probieren geht über Studieren. Die beste Methode, herauszufinden, inwieweit ein Dienst Ihren Bedürfnissen entspricht, ist es, diesen zu testen. Das gilt natürlich auch und insbesondere für Homepage-Baukästen. Leider macht es einem nicht jeder Anbieter so leicht wie Webydo. Webydo verzichtet auf vermeidbare Hürden, indem schon der Prozess des Einrichtens eines Nutzeraccounts auf das Nötigste reduziert ist. Sie teilen lediglich Ihren Namen und Ihre E-Mail-Adresse mit dem Anbieter, suchen sich zu guter Letzt noch ein Passwort aus und werden direkt in den eigentlichen Editor weitergeleitet. Keine Zahldaten, nicht die Schuhgröße, nichts…

webydo-register

Einmal dort angekommen, entscheiden Sie sich für eine von drei Möglichkeiten. Sie können entweder mit einem vorbelegten Layout starten. Oder Sie entscheiden sich für eine vorgegebene Grid-Struktur. Oder Sie machen es, wie Sie es sonst auch machen und starten mit einem leeren Screen.

webydo-howyouliketostart

Wenn Sie in etwa so ticken wie ich, dann suchen Sie sich eines der vorstrukturierten Layouts aus. Hier haben Sie die Wahl zwischen Corporate, Portfolio, Graphic und Wide Box.

webydo-selectlayout

Einmal ausgewählt, legt Ihnen Webydo ans Herz, ein Einführungsvideo anzuschauen, in welchem Ihnen die grundlegenden Funktionen des visuellen Editors erläutert werden. Im Verlaufe des Designprozesses werden Sie auf weitere dieser Videos stoßen. Nehmen Sie sich die Zeit, sie anzuschauen. Sie sind es wirklich wert und führen dazu, dass Sie deutlich schneller auf Betriebstemperatur kommen, als wenn Sie sich allein durch das Featureset frickeln. Nehmen Sie an Webydos Forum teil und helfen Sie so bei der Verbesserung des Produkts. Hier berichten Sie Fehler oder schlagen weitere Features vor. Die Fortentwicklung des Website-Baukastens basiert ganz wesentlich auf dem Feedback der bisher mehr als 30.000 teilnehmenden Designer, die so praktisch die Roadmap selber schreiben und sich ein perfektes System schaffen können.

Kommen Sie wie ich von älteren Mac-Versionen, werden Sie sich wohl stehenden Fußes in Webydos Editor verlieben:

webydo-editor

Der Editor ist klar, einfach, fast schon intuitiv zu bedienen. Wie Sie es von Photoshop, eigentlich noch eher von Indesign gewohnt sind, platzieren und bearbeiten Sie Elemente per Drag and Drop mit der Maus und verfeinern die Genauigkeit durch die Eingabe von Pixelwerten und exakten Koordinaten. Gerade das Setzen von Pixelwerten und Koordinaten ist im Homepage-Baukasten-Business nicht gang und gäbe und stellt einen echten Vorteil von Webydo dar.

Gestandenen Design-Kämpen wird nicht nur die UI vertraut vorkommen. Auch die Wortwahl im Featureset entspricht dem bekannten Duktus der Designwelt.

Webydos Editor verfügt über drei verschiedene Modi. Im Modus "Design" erarbeiten Sie das Layout. Der Modus "Content" zeigt alle vom Endnutzer bearbeitbaren Bereiche und der Modus "Preview" blendet alle Tools aus und zeigt die Website, wie sie öffentlich zu sehen wäre.

Design mit Webydo: Stärken und Schwächen

Wir wissen es doch alle. Webdesign ist letztlich niemals ohne Code zu bewältigen. Insofern muss man Webydos Versprechen eines code-free Webdesign auch relativieren. Webydo hält den Designer lediglich von allem fern, was mit Code zu tun hat. Im Hintergrund erzeugt das System standard-konformes HTML, das auf Desktops und mobilen Geräten gleichermaßen gut funktioniert. Wer nun ganz versessen darauf ist, diesen Code in stundenlanger Kleinarbeit ohne sichtbaren Nutzen, aber top-compliant zu optimieren, der kann auch das tun. Ich habe ja ohnehin den Eindruck, dass es eine ganze Riege von Webworkern gibt, für die die zeitaufwändige manuelle Nachfrickelei eine geradezu ideologische Grundvoraussetzung ist, um etwas überhaupt als Arbeitsergebnis bezeichnen zu können.

webydo-example
Webydo: So kann eine Website aussehen

Dennoch, machen wir uns nichts vor. Mit Webydo lassen sich zweifellos grafisch ansprechende, aufwändige Websites bauen, die ihre Besucher zu beeindrucken verstehen werden. Es ist also das perfekte System für die Erstellung einer Portfolio-Site für Fotografen oder Architekten, sowie für die Erstellung einer Unternehmenspräsentation. Sobald indes Anwendungslogik ins Spiel kommt, wird es finster und wir kommen um den Entwickler vielfach doch nicht herum..

Das ist Webydo ein Dorn im Auge und so versucht man diesem Problem mit sogenannten Widgets zu begegnen. In Kooperation mit Drittanbietern bemüht sich der Baukasten-Dienst darum, gängige Bedarfe innerhalb des Systems abzudecken. So erarbeitete man etwa mit dem E-Commerce-Provider Ecwid eine Möglichkeit, Webydo-Sites mit Onlineshops aufzurüsten, und zwar direkt aus dem Editor heraus. Die Widget-Funktionalität ist relativ neu und bedarf noch der Unterstützung durch weit mehr Drittanbieter, woran auch fleißig gearbeitet wird.

Eine besondere Stärke von Webydo soll hier ausdrücklich nicht unerwähnt bleiben. Das integrierte CMS ist einer der am leichtesten verständlichen Vertreter seiner Art. Davon können sich Wettbewerber eine ganz große Scheibe abschneiden. Sogar Ihre Kunden werden das System in weniger als 30 Minuten so weit verstanden haben, dass sie damit werden arbeiten können.

Webydos Preismodell

Webydos Preismodell ist sehr klar und bedarf keiner langen Liste. Können Sie damit leben, dass Ihre Site als Subdomain von Webydo gehostet wird, besteht sie zudem aus nicht mehr als 15 Seiten und wiegt nicht schwerer als ein Gigabyte, dann zahlen Sie gar nichts. Erstaunlich: es gibt kein Limit der Bandbreite. Sie können zudem unbegrenzt viele Websites mit diesen Einschränkungen bauen.

webydo-example-2
Ein weiteres Beispiel einer Website aus dem Webydo-Baukasten

Sobald Sie Ihre eigene Domain verwenden wollen oder mehr als 15 Seiten oder mehr Speicherplatz als ein Gigabyte benötigen, müssen Sie zum Premium-Angebot greifen. Dieser Plan schlägt mit 7,90 USD monatlich bei jährlicher Zahlweise oder 9 USD bei monatlicher Zahlweise zu Buche. Das Domainhosting ist im Preis inbegriffen und kann auch nicht auf andere Weise geregelt werden. In Sachen Hosting arbeitet Webydo mit Akamai zusammen. An deren Zuverlässigkeit wird wohl niemand ernsthaft Zweifel äußern wollen…

Nachdem die Entscheidung für eine Domain nebst Hosting im Regelfalle nicht alle paar Monate revidiert werden wird, sollte man sich entsprechend für den Jahresplan entscheiden und ein paar Dollar sparen. Haben Sie oder Ihr Kunde einen Igel in der Tasche, können Sie natürlich auch erst einmal mit dem kostenlosen Angebot starten und dann im Bedarfsfalle aufrüsten. Upgrades sind stets möglich.

Größere Design-Agenturen oder Freiberufler mit außergewöhnlich großem Kundenstamm sollten sich direkt mit Webydo in Verbindung setzen, um ein maßgeschneidertes Angebot zu erhalten.

Webydo als Zentrale Ihrer Design-Agentur

Um sich weiter von eher an Konsumenten gerichteten Angeboten abzugrenzen, führte Webydo im Sommer diesen Jahres verschiedene Möglichkeiten ein, die es ermöglichen, seine Designagentur komplett mit Webydo als Motor zu betreiben. Folgende Features stechen heraus:

  • Build Your Brand erlaubt es Designern, das System komplett unter eigenem Logo zu betreiben. Webydo verschwindet vollständig und wird den Kunden als Dienstleister überhaupt nicht bekannt.
  • Bill Your Client bringt Faktura in das Backend. Sie können somit direkt Leistungen und Dienste gegenüber Ihren Kunden abrechnen. Sie benötigen dementsprechend keine separate Rechnungslösung mehr.
  • Share Your Site Design teilt das Design in Bereiche auf. Sie legen so auf einfache Art und Weise Bereiche an, die von Ihren Kunden bearbeitet werden dürfen, während Sie andere Bereiche ausdrücklich für den Zugriff sperren. So bleiben Ihre Designs trotz Kunden-Content stabil.

Webydos CEO Shmulik Grizim ist enthusiastisch:

Das ist eine echte Revolution in der professionellen Erstellung von Websites. Erstmalig wird Designern die komplette Kontrolle über den Prozess der Website-Erstellung gegeben. Sie benötigen weder Code-Kenntnisse, noch müssen sie Entwicklerleistungen zukaufen, sondern können sich voll auf den kreativen Aspekt des Webdesign konzentrieren. Der starken Nachfrage unserer Kunden folgend, haben wir nun ein extrem sicheres, effizientes und automatisches Zahlungssystem direkt in das Webydo-Backend integriert. So deckt Webydo nicht nur die technischen, sondern auch die betriebswirtschaftlichen Aspekte einer Designagentur ab. Damit können sich Designer tatsächlich darauf konzentrieren, Websites bis zu zehn Mal schneller und kosteneffizienter zu bauen.

Dem ist im Grunde nichts hinzuzufügen. Inwieweit sich der Enthusiasmus im Realitätscheck bewahrheitet, muss jeder für sich selbst evaluieren. Der Ansatz ist erstmal plausibel und hat Charme. Spätestens jetzt ist der Zeitpunkt gekommen, an dem Sie sich wirklich selbst ein Bild machen müssen. Bauen Sie Ihre responsive Website mit Webydo.

Spezielle Promotion für Dr. Web Leser

Im Zuge unserer Gespräche mit Webydo-Vertretern erhielten wir einen allgemein gültigen Promocode für unsere Leserinnen und Leser. Unter Verwendung des Gutschein-Codes LimitedVIPdrweb75%off erhalten Sie den Webydo Professional Premium Yearly Plan, also die Bezahlvariante des Dienstes für die Dauer eines kompletten Jahres anstatt für 94,80 USD für 23,70 USD, also ein bloßes Viertel des Normalpreises. Das Angebot beginnt mit der Veröffentlichung dieses Artikels und wird 10 Tage lang aufrecht erhalten. Somit sollten Sie den Deal bis zum 21. Dezember 2013 nutzen können.

Melden Sie sich bitte bei uns, wenn der Code schon vor Ablauf dieses Zeitrahmens nicht mehr funktionieren sollte. Wir sorgen dann für eine funktionierende Lösung. Zeitzonen-Unterschiede sind gern mal der Auslöser solcher Irritationen…

Kategorien
Essentials Icons & Fonts

Typecast für Google Fonts: Web-Typografie mit Spaßfaktor

Monotype und Google kooperieren erneut und bringen mit einer speziellen Version von Monotypes Typecast-App eine kostenlose und sehr komfortable Möglichkeit, mit Google Fonts realitätsnah zu experimentieren. Die Einfachheit der Bedienung und das beachtliche Featureset könnten der Web-Typografie weiteren Auftrieb geben. Designer sollten sich die Typecast-App auf jeden Fall näher ansehen. Und genau das haben wir im folgenden Beitrag getan.

typecast-landing

Web-Typografie: Im Kommen, aber noch unterstützungsbedürftig

Das Experimentieren mit passenden Web-Fonts hat, zumindest in meiner täglichen Praxis, nichts mit Spaß zu tun. Besser wurde es vor einiger Zeit, als Monotype das Produkt SkyFonts für die Verwendung mit Google Fonts kostenfrei verfügbar machte. Auch wenn es sich nicht eine Anwendung handelt, die tatsächlich Webfonts unterstützt, so erleichterte die Verfügbarkeit der Google Fonts als Desktop-Schrift doch die Beurteilung der Layouts für das Web.

SkyFonts stellte ich im Dr. Web Magazin in dem Beitrag “SkyFonts: Die beste Art, Google Fonts auf dem Desktop zu nutzen” ausführlicher vor. Vor SkyFonts behalf ich mir mit dem Komplett-Download aller Google Fonts. Die Vorgehensweise dazu beschrieb ich für das Dr. Web Magazin im Beitrag “So laden Sie alle 500+ Google Web-Fonts auf Ihren lokalen Desktop”.

Seit ein paar Tagen existiert eine nahezu ideale Lösung, denn Monotype und Google verstehen sich offenbar dermaßen gut, dass eine weitere, für den Nutzer kostenlose Kooperation in den Stiel gestoßen wurde. Ab sofort steht Monotypes Typecast App für die Verwendung mit dem kompletten Google Fonts Repository ohne Anmeldung oder sonstige Bürokratismen frei zur Verfügung. Erreichbar ist Typecast über eine spezielle Landingpage, sowie direkt aus dem Google Fonts Directory über die jeweiligen Pop-Outs der einzelnen Schriften.

typecast-in-google-fonts

Typecast wurde 2013 mit dem „Game Changer of the Year“-Award des Magazins „.net“ ausgezeichnet und das erscheint schon auf den ersten Blick völlig berechtigt. Typecast erlaubt es, Schriften mit echten Inhalten in echten Strukturen innerhalb lebensnaher Layouts auszuprobieren.

„Eine Schrift losgelöst vom inhaltlichen Kontext und anderen Textteilen auszuwählen, ist eine schwierige Aufgabe. Das Typecast Design-Tool macht es einfach, Schriften aus dem Google Font-Verzeichnis auszuprobieren und mit ihnen zu experimentieren.“

– Filip Zembowicz, Product Manager Google

Die Vorgehensweise ist dabei sehr einfach. Entweder über die Landingpage der Typecast-App oder über das Pop-Out der jeweiligen Schrift im Google Font Directory startet man Typecast und erhält eine Oberfläche, die derjenigen eines herkömmlichen Word-Prozessors nicht unähnlich ist. Auch Adobe-Anwender werden sich umgehend heimisch fühlen.

typecast-menu-preview

Der rechts neben dem Menü angeordnete Arbeitsbereich ist direkt mit den Standardinhalten aus Google Fonts gefüllt, so dass eine unmittelbare Beurteilung der Optik möglich ist. Über das Menü kann nun das erforderliche CSS/HTML heruntergeladen werden. Für die Weitergabe und Beurteilung durch Kunden und/oder Co-Worker lassen sich PNGs erzeugen.

typecast-vollvorschau
PNG des Ergebnisses

Typecast: Kleiner Exkurs zur Vollversion

In der kostenpflichtigen Vollversion der Typecast-App, die dann nicht nur Zugriff auf die Google Fonts zulässt, ist es möglich, mehrere Versionen für ein späteres Review zu speichern, Previews auch online mit anderen zu teilen, Tests auf mehreren Geräten durchzuführen oder schnell einen kompletten Styleguide zu generieren. Ab 29 Dollar netto muss man für diesen Funktionsumfang allerdings monatlich einkalkulieren.

Die Version für Google Fonts ist eher für das schnelle Experimentieren gedacht und als solches eine sehr gute Alternative zu bisherigen Verfahrensweisen. Sicherlich setzt Monotype darauf, dass die zusätzliche Bequemlichkeit der Premium-Funktionen möglichst viele Verwender der kostenlosen Version zu zahlenden Kunden werden lässt.

Bei mir wird das indes nicht funktionieren, denn ich weigere mich, den Preismodellen der Web-Font-Anbieter Raum zu geben. Nicht nur sind mir diese Dienste schon im Ansatz zu kostspielig, sondern was mir am meisten missfällt ist die Abhängigkeit des Preises von Parametern, die man kaum beeinflussen kann, in allererster Linie die Korrelation zwischen Preis und Traffic. Natürlich mag das ein jeder für sich anders beurteilen. Ich bleibe jedenfalls vorerst bei Lösungen wie Google Fonts.

„Es freut mich, dass Fans von Google Fonts diese neue, kostenlose Version der Typecast-App jetzt nutzen können. Der Service von Google ist extrem beliebt und viele Designer machen ihre ersten Erfahrungen mit Web Fonts dieser kostenlosen Bibliothek. In unserem Bestreben, die Online-Nutzung von Web Fonts zu fördern und neue Zugriffsmöglichkeiten zur Typecast-App zu schaffen, ist Google für uns der perfekte Partner. Wir hoffen, durch unsere kostenlose, frei zugängliche Version mehr Schriftliebhaber zu unterstützen und auf längere Sicht mehr Fürsprecher guter Typographie zu gewinnen. Aus unserer Sicht wäre das ein echter Gewinn für das Web, Kunden, Leser und Designer aller Bereiche.“

– Paul McKeever, Director von Typecast

Typecast: Visuelle Layoutanpassungen sorgen für realistische Tests

Klickt man irgendwo in den Text, verschwindet das linksseitige Menü und ein Arbeitsbildschirm zeigt sich, der alle Features mitbringt, die man auf den ersten Blick für einen ordentlichen Test einer potenziell in Frage kommenden Schriftart benötigt.

typecast-editor

Das Menü wird durch ein Floating Windows ersetzt, welches man frei auf dem Bildschirm positionieren kann und welches jederzeit die Eigenschaften des aktiven Elements zeigt und editierbar macht. Schriftvarianten, -größe, Zeilenhöhe, Text- und Hintergrundfarbe und Abstandswerte werden hier verwaltet. Ebenso lässt sich die Schriftart hier auch gleich komplett ändern.

Noch ausgefeilter sind die Manipulationsmöglichkeiten in den einzelnen Textcontainern selbst. Von der Breite der einzelnen Elemente in px, em oder Prozent über die Textausrichtung bis hin zur Anpassung von CSS-Details ist alles möglich. Dabei werden Veränderungen direkt in der Preview sichtbar. Ein optional einblendbares Baseline Grid erlaubt weiteres Finetuning.

Wer sich nicht auf die visuellen Bearbeitungsmöglichkeiten verlassen will, der kann jederzeit einen CSS-Editor aufrufen und manuelle Anpassungen vornehmen. Möchte man seine mühsam vorgenommenen Parametrisierungen zur späteren Verwendung oder weiteren Bearbeitung speichern, ist man allerdings gezwungen, zum zahlenden Kunden zu werden.

Von daher werde ich Typecast sicherlich nicht bis ins letzte ausreizen und noch am letzten Parameter feilen. Bei mir kommt Typecast für die schnelle, realitätsnahe Vorabprüfung zum Einsatz. Nicht mehr, aber auch nicht weniger.

Und für diesen Einsatzzweck kenne ich keine bessere, vor allem günstigere App. Machen Sie sich selbst ein Bild!

Links zum Beitrag:

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Showcases

Homepage-Baukasten: 40 fertige Elemente für das Webdesign mit Photoshop

Zahlreiche Web-Elemente können zunächst als eine Art Prototyp in Photoshop gestaltet werden. Klar ist, dass weite Bereiche oder gar das komplette Element später eine große Packung CSS erhalten wird, doch für den schnellen Entwurf ist für viele Webdesigner Photoshop die erste Wahl. Schnell lassen sich auf Basis weniger Grundformen hochwertige User Logins, Buttons, Slider, Video-Player oder gar ganze Webseiten erzeugen.

Login Form V2

Website: facecjf.com
Urheber: chris farina
psd-datei21

© chris farina

Dark Login Box

Website: 365psd.com
Urheber: Haziq Mir
psd-datei2b

© Haziq Mir

Blueish Cloud Growl Style

Website: premiumpixels.com
Urheber: Victor Erixon
psd-datei3b

© Victor Erixon

Unique Green & Blue Buttons

Website: 365psd.com
Urheber: Frantisek Krivda
psd-datei4

© Frantisek Krivda

Modern Image Slider (PSD)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei5

© Rafi

Speech Bubbles

Website: 365psd.com
Urheber: Bart Ebbekink
psd-datei6b

© Bart Ebbekink

Settings Panel (PSD)

Website: premiumpixels.com
Urheber: Haziq Mir
psd-datei7b

© Haziq Mir

Image Carousel

Website: 365psd.com
Urheber: Bojana Cakic
psd-datei8

© Bojana Cakic

Light Video Player PSD

Website: pixelsdaily.com
Urheber: Nguyen Van Thy
psd-datei9

© Nguyen Van Thy

App Store Buttons

Website: 365psd.com
Urheber: latrucoteca.com
psd-datei10b

© latrucoteca.com

Photoshop-Tipp #1: Grundformen als Basis einsetzen

01 Grundform aufziehen

Möchten Sie die Wirkung der ausgewählten Farben für eine Website schnell testen, so erzeugen Sie mit wenigen Grundformen eine Grafik, welche dieses Gefühl schnell vermitteln kann. Hier wurde etwa über einer einfachen Hintergrundtextur mit dem Ellipse-Werkzeug in der Farbe #4499bb (RGB 68, 153, 187) und mit gedrückter Strg-Taste eine Kreisform aufgezogen. In der Optionsleiste war Form, statt Pfad oder Pixel, ausgewählt.

Auch bei dem Zeichenstift-Werkzeug war Form in der Optionsleiste ausgewählt. So konnte ich leicht die runde Form mit nur drei Klicks für ein Dreieck in eine Sprechblase verwandeln.

webelement-a1

02 Weitere Formen

Mit dem Rechteck-Werkzeug und gedrückter Strg-Taste wurde ein Quadrat aufgezogen und ebenso in eine Art Sprechblase verwandelt. Ist die Ebene mit dem Quadrat aktiv, so kann diese über Strg+J leicht kopiert werden. Mit dem Verschieben-Werkzeug, gedrückter Umschalttaste und der Pfeiltaste nach links wurde die Kopie dann positioniert.

Ein Doppelklick auf die Ebenenminiatur ermöglicht es, die Farbe des Quadrates anzupassen. In einem weiteren Rot-Ton wurde mit dem Rechteck-Werkzeug ein kleines Rechteck aufgezogen und über Ebene > Schnittmaske erstellen an die darunter liegende Form angepasst.

webelement-a2

03 Beschriftung

Da das Rechteck-Werkzeug gerade aktiv war, habe ich noch zwei Zierlinien in den verwendeten Farben oben wie unten eingefügt. Mit dem Text-Werkzeug und weißer Farbe wurden die Elemente beschriftet. Schon jetzt bekommt man ein gutes Gefühl dafür, wie die Farben, der Stil und die Hintergrundtextur zusammen wirken.

webelement-a3

Free PSD UI Kit: Super Buttons

Website: sixrevisions.com
Urheber: Josh Katherman
psd-datei11b

© Josh Katherman

Profile PSD

Website: 365psd.com
Urheber: Bojana Cakic
psd-datei12

© Bojana Cakic

Settings Panel PSD and CSS

Website: pixelsdaily.com
Urheber: Ali Asghar
psd-datei13

© Ali Asghar

Lock / Unlock Slider

Website: 365psd.com
Urheber: Andrew Forrester
psd-datei14

© Andrew Forrester

The Freebies

Website: kbsportfolio.com
Urheber: Kb’s portfolio
psd-datei15

© Kb’s portfolio

Dark Toolbar

Website: 365psd.com
Urheber: Rob Smittenaar
psd-datei16

© Rob Smittenaar

Learn How To Create A Stylish Twitter Modal Box

Website: photoshop-plus.co.uk
Urheber: photoshop-plus.co.uk
psd-datei1

© photoshop-plus.co.uk

Hanging Note Sign Psd

Website: www.pixeden.com
Urheber: www.pixeden.com
psd-datei17

© www.pixeden.com

Music Widget

Website: 365psd.com
Urheber: Ben Muschol
psd-datei18b

© Ben Muschol

Night/Day Slider

Website: 365psd.com
Urheber: Kuba Holuj
psd-datei19

© Kuba Holuj

Map GUI kit (PSD)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei20b

© Rafi

Detailed Price Tag

Website: pixelsdaily.com
Urheber: Liam McCabe
psd-datei22

© Liam McCabe

Free PSD – Chat UI PSD Concept

Website: blazrobar.com
Urheber: blazrobar.com
psd-datei23

© blazrobar.com

Colorful Pricing Tables PSD

Website: pixelsdaily.com
Urheber: Ali Asghar
psd-datei24b

© Ali Asghar

Pump – A free website psd template

Website: blazrobar.com
Urheber: blazrobar.com
psd-datei25b

© blazrobar.com

Map Markers PSD

Website: dribbble.com
Urheber: Jeff Broderick
psd-datei26

© Jeff Broderick

File Upload Widget

Website: 365psd.com
Urheber: Bart Ebbekink
psd-datei27

© Bart Ebbekink

Mini Slider Free

Website: dribbble.com
Urheber: Dan Edwards
psd-datei28

© Dan Edwards

Drop Zone UI

Website: dribbble.com
Urheber: Michael Donovan
psd-datei29

© Michael Donovan

Thumbnail Hover State Overlay (PSD)

Website: premiumpixels.com
Urheber: premiumpixels.com
psd-datei30

© premiumpixels.com

Photoshop-Tipp #2: Menübar gestalten

01 Grundform mit Verlauf

Ziehen Sie die Grundform der Menübar mit dem Abgerundeten-Rechteck-Werkzeug auf, das in der Optionsleiste auf einen Radius von 20 Pixeln eingestellt ist. Damit die obere Seite gerade verläuft, wählen Sie das Rechteck-Werkzeug an und stellen in der Optionsleiste Vordere Form subtrahieren aus. Jetzt können Sie den oberen Bereiche durch eine weitere Form beschneiden. Aktivieren Sie einen Ebenenstil > Verlaufsüberlagerung mit einem Verlauf von Weiß zu einem mittleren Grauton.

webelement-b1

02 Komplexer Schatten

Erstellen Sie eine neue Ebene, etwa über Umschalt+Strg+N, und ändern Sie die Ebenenreihenfolge so ab, dass diese neue Ebene unterhalb der Ebene mit der Form liegt. Aktivieren Sie das Polygon-Lasso-Werkzeug und wählen Sie mit wenigen Klicks die Form des Schattens aus. Füllen Sie die Selektion mit Schwarz. Heben Sie die Auswahl auf, etwa über Strg+D, und wenden Sie den Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner so an, dass der Schatten weich verläuft.

webelement-b2

03 Trennung

Eine Trennlinie soll verschiedenste Bereiche abgrenzen. Erstellen Sie dazu eine neue Ebene, etwa über Ebene > Neu > Ebene. Wählen Sie mit dem Auswahlrechteck-Werkzeug einen Bereich aus und das Verlaufswerkzeug an. Wählen Sie einen etwas dunkleren Grauton aus und in der Optionsleiste den Verlauf Vordergrundfarbe zu Transparent. Ziehen Sie einen kurzen Verlauf zu einer Seite hin auf. Wiederholen Sie diesen Schritt, so das der Verlauf zu beiden Seiten hin spiegelverkehrt zu sehen ist. Drücken Sie Strg+D zum Aufheben der Auswahl.

webelement-b3

04 Punkte

Ziehen Sie mit dem Ellipse-Werkzeug und gedrückter Strg-Taste eine Kreisform auf. Aktivieren Sie den Ebenenstil > Verlaufsüberlagerung mit einem Verlauf von #88aacc (RGB 136, 170, 204) zu #5588aa (RGB 85, 136, 170). Zusätzlich aktivieren Sie einen Ebenenstil > Kontur mit folgenden Werten: Größe 2 Pixel, Position Außen, Farbe #889090 (RGB 136, 144, 144).

Unterhalb dieses Buttons erstellen Sie mit dem Ellipse-Werkzeug eine weitere, aber etwas größere Form. Diese erhält eine Verlaufsüberlagerung von einem dunkleren zu einem helleren Grauton. So wirkt der Button wie eingedrückt in die Oberfläche der Menübar.

webelement-b4

05 Beschriftung

Die beiden Buttons wurden noch mit einem fortlaufenden Buchstaben gekennzeichnet und die Flächen beschriftet. Dazu setzen Sie das Text-Werkzeug ein. Hier kam die Schritart Dekar zum Einsatz.

webelement-b5

Orange Graph Widget

Website: 365psd.com
Urheber: Alexandre Naud
psd-datei31b

© Alexandre Naud

Primary School Website Theme (Psd)

Website: blugraphic.com
Urheber: blugraphic.com
psd-datei32

© blugraphic.com

Upload File Interface PSD (Metro Style)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei33

© Rafi

Web Weather Forecast Widget (Psd)

Website: blugraphic.com
Urheber: blugraphic.com
psd-datei34

© blugraphic.com

Notification Centre UI PSD & CSS

Website: pixelsdaily.com
Urheber: Martijn Otter
psd-datei35

© Martijn Otter

HTC Sense Clock PSD

Website: livven.deviantart.com
Urheber: Livven
psd-datei36

© Livven

Sleek Search Box Pack

Website: design3edge.com
Urheber: sada
psd-datei37

© sada

Spotify Login Window

Website: dribbble.com
Urheber: Gavin Anthony
psd-datei38

© Gavin Anthony

Freebie PSD: Flat UI Kit

Website: dribbble.com
Urheber: Riki Tanone
psd-datei39

© Riki Tanone

Verticle Navigation

Website: dribbble.com
Urheber: Khurram Raza
psd-datei40

© Khurram Raza

(dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Webdesign mit Photoshop: diese 5 Plugins machen den Alltag angenehmer

Viele Weblayouts entstehen in Photoshop und werden anschließend auf unterschiedliche Weise in HTML und CSS umgesetzt. Dank zahlreicher Plugins kann man sich die Arbeit mit Photoshop etwas erleichtern. Fünf Plugins, die sich speziell an Webdesigner richten, habe ich für Sie ausgesucht.

Schnelle Rastererstellung mit GuideGuide

Der erste Schritt zum Weblayout ist ein Raster, welches in der Regel aus mehreren Spalten und gegebenenfalls auch Zeilen besteht und mit Hilfslinien in Photoshop realisiert wird. GuideGuide erstellt Raster auf der Grundlage bestimmter Werte. Dank des Plugins müssen die Hilfslinien für ein Raster also nicht manuell erstellt werden.

photoshop_plugins_guideguide

Stattdessen werden nur die Anzahl der Spalten sowie die Breite der Spalten oder alternativ die Breite des Zwischenraums angegeben. Auch Hilfslinien für die Begrenzung des Rasters lassen sich einstellen. Wer immer wieder mit denselben Rastern arbeitet, kann die Rastereinstellungen auch abspeichern.

Die aktuelle Version von GuideGuide unterstützt Photoshop ab CS5.

Schneller Export von Grafikelementen mit Cut&Slice me

Wenn es darum geht, die Grafiken eines fertigen Layouts zu exportieren, ist meist viel Handarbeit gefragt. Die Slice-Option von Photoshop ermöglicht zwar das Exportieren vordefinierter Bereiche als einzelne Grafiken, berücksichtigt aber nicht, dass es beispielsweise für ein Menü mehrere Grafiken für einzelne Menüzustände gibt.

photoshop_plugins_cutandsliceme

Cut&Slice me hilft beim Exportieren von Grafiken, indem es Ebenen aufgrund ihrer Bezeichnung exportiert und auf Wunsch Weißraum dabei automatisch entfernt. Enthält der Name einer Gruppe beispielsweise die Zeichenkette _BTN, weiß das Plugin, dass die darin enthaltenen Gruppen einzelne Zustände für den Button enthalten. Diese Untergruppen müssen dann mit normal, hover, clicked etc. gekennzeichnet sein und werden als separate Grafiken exportiert.

Cut&Slice me gibt es nur für die aktuelle Version CS6 von Photoshop.

Favicons erstellen mit Plugins von Telegraphics und Sibcode

photoshop_plugins_ico

Favicons sind ja mittlerweile fester Bestandteil einer Website geworden. Auch hierfür gibt es entsprechende Plugins, um Dateien in diesem Format mit Photoshop erstellen zu können. Während das ICO-Plugin von Sibcode das Speichern mehrerer Icons in einer Datei ermöglicht, ist das Plugin von Telegraphics auch für 64-bit-Versionen von Photoshop erhältlich. Es speichert aber lediglich ein Icon in einer Datei ab.

Schriften per Plugin einbinden und ausprobieren

Nicht immer hat man eine Schrift, die man verwenden möchte, auf dem Rechner installiert. Mittlerweile stellen Anbieter von Desktop- und Webfonts Plugins zur Verfügung, die die Verwendung nicht installierter beziehungsweise nicht erworbener Schriften ermöglicht.

photoshop_plugins_fonts

Entsprechende Plugins gibt es vom Webfont-Anbieter WebINK, der neben seinen Schriften auch Googles Webfonts bereitstellt. Der Anbieter Fontshop bietet für seine Schriften ebenfalls ein solches Plugin an. Mit dem Fontshop-Plugin kann man Schriften zudem bequem kaufen, wenn man sie über einen Entwurf hinaus verwenden will.

Kleinere PNGs mit SuperPNG

photoshop_plugins_superpng

PNGs haben gegenüber GIFs einige Vorteile – mehr Farben und einen 8-bit-Alphakanal für Transparenz. Der Nachteil ist, dass PNGs deutlich größer sind als GIFs. SuperPNG generiert jedoch kleinere Dateien, als es Photoshop von Hause aus macht. Der Unterschied ist optisch nicht erkennbar.

SuperPNG setzt Photoshop ab Version CS5 voraus.

Links zum Beitrag

(dpe)