Im Gegensatz zu dem, was Sie vielleicht von seinem Namen halten, ist dies keine Webdesign-App. Stattdessen konzentriert sich Google Web Designer auf die Gestaltung von HTML5-basierten Anzeigen und ähnlichen Webinhalten. Die Benutzeroberfläche fühlt sich wie eine Kreuzung zwischen einem Video-Editor und einem Webdesign-Paket an. Um es nutzen zu können, müssen Sie es kostenlos von hier herunterladen, entweder für Mac oder Windows.

  • Möchten Sie Google Web Designer ausprobieren? Laden Sie es hier kostenlos herunter

Die schlanke Oberfläche ist von Anfang an erkennbar (Bildnachweis: Google)

Loslegen

Durch das Starten der App können Sie mit einem vorhandenen Projekt fortfahren, ein neues von Grund auf neu starten oder eine der mitgelieferten Vorlagen verwenden.

Wir haben uns entschlossen, zuerst die Vorlagen zu überprüfen. Sie können aus 14 auswählen. Wenn Sie sich nicht sicher sind, was sie bieten, klicken Sie einfach auf eine der Optionen, um eine Beschreibung der zu erwartenden Geräte sowie der von dieser Vorlage unterstützten Geräte zu erhalten.

Es stehen nicht viele Standardvorlagen zur Auswahl, aber über das Suchfeld können Sie unglaublich detaillierte und gründliche Suchvorgänge durchführen (Bildnachweis: Google).

Das Suchfeld auf der rechten Seite hilft Ihnen dabei, Ihre Auswahl anhand Ihrer Kriterien einzugrenzen – beispielsweise nach einem erweiterbaren Add, der auf Tablets funktioniert. Auf diese Weise können Sie auch nach Vorlagen mit bestimmten Größen suchen, indem Sie beispielsweise eine Zahl in das Suchfeld eingeben.

Jede Vorschau hat eine Auswahl an Größen. Wählen Sie eine aus und klicken Sie auf „Bestätigen“..

Wenn Sie lieber von Grund auf neu arbeiten möchten, wählen Sie stattdessen „Neu“ aus dem Startmenü. Sie werden sehen, dass Sie verschiedene Auswahlmöglichkeiten haben, die das von Ihnen erstellte Objekt definieren. Standardmäßig ist eine neue Datei auf „Banner“ eingestellt, es stehen Ihnen jedoch auch 8 andere Typen zur Verfügung.

Sie können die Umgebung (Anzeige und Video 360, Google AdMob, Google Ads oder Nicht-Google Ad), ihre Größe und die Frage auswählen, ob eine reaktionsfähige Anzeige erstellt werden soll oder nicht.

Sobald Sie bereit sind, wird Ihnen die eigentliche Benutzeroberfläche angezeigt.

Mithilfe einer Vorlage können Sie sofort loslegen und erhalten ein vorgefertigtes Format (Bildnachweis: Google).

Schnittstelle

Der Arbeitsbereich ist äußerst flexibel. Nur weil Seitenleisten beim Öffnen der App an einem Ort angezeigt werden, müssen sie nicht dort bleiben, wenn Sie eine andere Arbeitsumgebung bevorzugen. Abschnitte können beispielsweise zu frei schwebenden Fenstern werden, und Registerkarten können neu angeordnet werden, Gruppen können in der Größe geändert werden, Bedienfelder können verschiedenen Gruppen hinzugefügt werden usw. Dies ergibt ein bemerkenswert flexibles System.

Arbeiten mit Vermögenswerten

Die Dateien, die Sie in Ihrem Projekt verwenden, können über den Befehl „Assets importieren“ oder einfacher durch Ziehen und Ablegen auf Ihren Arbeitsbereich abgerufen werden.

Das Bearbeiten ist nicht so intuitiv wie Sie es von anderen kreativen Apps gewohnt sind, und Sie werden häufig die Eigenschaftenfenster aufrufen, um selbst einfache Änderungen an Ihren Assets vorzunehmen. Wenn Sie heutzutage mit den meisten Apps ein Asset direkt ändern können, ist dies zunächst etwas umständlich, obwohl Sie sich daran gewöhnen.

Dies ist jedoch kein Tool zum Zusammensetzen von Bildern. Google Web Designer kann keine Assets für Sie erstellen. Sie sollten eine andere App wie Photoshop verwenden, um sie zuerst vorzubereiten. Wenn Sie lediglich ein statisches Bild benötigen, benötigen Sie die Google-App natürlich nicht. Es ist für Sie von großem Nutzen, wenn Sie elegante Animationen und webkonformen Code wünschen.

Die Animation ist etwas kompliziert, aber Sie beherrschen sie schnell (Bildnachweis: Google)

Animation

Beim Animieren müssen Keyframes zu verschiedenen Zeitpunkten einfach festgelegt werden. Wenn Sie an das Filmemachen gewöhnt sind, werden Sie ziemlich schnell das Wesentliche verstehen.

Der Ansatz der App ist jedoch etwas unklar. Sobald Sie einen Keyframe festgelegt haben, müssen Sie den Wert des Parameters ändern, den Sie animieren möchten, um diesen Parameter als einen Parameter festzulegen, den Sie animieren möchten. Es gibt keine Schaltfläche zum Sperren eines Werts, um den Vorgang zu starten. Wenn Sie den Wert also manuell ändern und dann zurücksetzen, kann die App nur erkennen, welchen Parameter Sie im Laufe der Zeit ändern werden.

Sobald dies erledigt ist, werden alle Änderungen, die an einem anderen Punkt entlang der Timeline an demselben Parameter vorgenommen werden, automatisch wie erwartet festgelegt.

Es ist frustrierend, dass Sie nicht wissen können, welche Parameter tatsächlich für die Animation festgelegt sind. Wenn Sie also zu einem späteren Zeitpunkt zu Ihrem Projekt zurückkehren, wissen Sie nicht auf einen Blick, welche Werte des Assets wann verschoben werden sollen.

Die Zeitleiste zeigt an, welche Objekte animiert sind, aber Sie wissen nicht, welche Parameter Sie verwenden, es sei denn, Sie spielen die Animation ab. Dies ist alles andere als effizient.

Trotzdem ist es relativ einfach, Objekte auf dem Bildschirm zu animieren, und das Endergebnis funktioniert sehr gut. Sie können sogar in 3D animieren.

Letztendlich erleichtert Ihnen Google Web Designer das Entwerfen einer Vielzahl von Web-Anzeigen, ohne dass Sie selbst eine Codezeile schreiben müssen. Dies ist ein großes Plus.

Wenn Sie mit dem Codieren vertraut sind, können Sie Ihr Projekt direkt ändern (Bildnachweis: Google).

Dies bedeutet jedoch nicht, dass Codierer nicht berücksichtigt werden: Klicken Sie auf Codeansicht, um Ihr Projekt im Rohcode anzuzeigen, den Sie dann an Ihre spezifischen Anforderungen anpassen können, falls die Entwurfsansicht nicht für Sie geeignet ist Bedürfnisse.

Die Vorschau öffnet Ihren ausgewählten Webbrowser und zeigt Ihnen, wie Ihre Anzeige (n) aussieht (Bildnachweis: Google)

Vorschau

Im Bereich „Anzeigenvalidator“ können Sie auf einen Blick sehen, wie groß die Datei sein wird und ob mit dem, was Sie mithilfe freundlich aussehender grüner Kontrollkästchen erstellt haben, etwas nicht stimmt.

Um zu sehen, wie Ihr Projekt in einem Webbrowser aussieht, klicken Sie auf die Schaltfläche „Vorschau“ und wählen Sie das gewünschte aus. Google Web Designer startet es dann und aktiviert die Anzeige.

Wenn Sie keine bestimmte Dimension festgelegt haben, werden Ihnen verschiedene Größen angeboten, mit denen Sie auswählen können, welche Vorschau angezeigt werden soll (alle werden standardmäßig angezeigt)..

Wenn Sie Ihre Arbeit abgeschlossen haben, klicken Sie auf „Veröffentlichen“. Sie können es lokal auf Ihrer Festplatte speichern oder an verschiedenen Google-Standorten hochladen.

Sie können Ihr Projekt auch als Vorlage speichern, die Sie zu einem späteren Zeitpunkt wiederverwenden können.

Wenn Sie verloren oder verwirrt sind, können Sie auf den Hilfeseiten und in den Foren leicht Antworten auf Ihre Probleme finden (Bildnachweis: Google).

Unterstützung

Das erstmalige Arbeiten mit einer App kann eine entmutigende Aufgabe sein. Seien Sie also versichert, dass Google umfassende Artikel zur optimalen Nutzung seines Web-Designers anbietet und das Benutzerforum auch mit nützlichen Diskussionen gefüllt ist. Beides hilft Ihnen, die App zu verstehen und die meisten (wenn nicht alle) Probleme zu lösen, die Sie möglicherweise haben.

Endgültiges Urteil

Google Web Designer ist eine gut aussehende App, mit der Sie schnell Web-Anzeigen erstellen können, unabhängig davon, ob Sie mit Codierung vertraut sind oder nicht. Es ist nicht die am besten gestaltete App auf der Mac-Plattform, die sich eher an den Richtlinien für die Windows-Benutzeroberfläche orientiert. Sie funktioniert jedoch wie angekündigt und erstellt gute animierte Projekte. Auf jeden Fall einen Besuch wert.

  • Wir haben auch den besten Website-Builder hervorgehoben