Website nach einem Vorbild erstellen
Wenn Sie eine Website gesehen haben, deren Layout oder Wirkung Ihnen gefällt, zeigen Sie Briks diese. Briks untersucht, wie die Seite aufgebaut ist, und baut Ihre in diesem Geist, mit Ihren eigenen Worten und Bildern. Diese Seite behandelt das Hinzufügen einer Website und von Screenshots, was Briks liest und nie übernimmt und was zu tun ist, wenn eine Website nicht gelesen werden kann.
Websites und Screenshots hinzufügen
Den Schritt öffnen
Wo: Show what you like
Es ist der dritte Schritt von New project, markiert mit Optional. Das Panel sagt, wozu er dient: „Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business.“
Website hinzufügen
Wo: A site to learn from
Tippen oder fügen Sie eine Adresse ein und drücken Sie Add oder die Eingabetaste. Das https können Sie weglassen. Jedes Projekt nimmt eine Website auf; bei einer zweiten erscheint 'One site per project. Remove it to add another.' Die Website erscheint als Tag mit einem Kreuz zum Entfernen.
Screenshots hinzufügen
Wo: Screenshots
Klicken Sie auf Add screenshots und wählen Sie JPEG-, PNG- oder WebP-Dateien mit jeweils unter 12 MB. Der Zähler zeigt, wie viele Sie haben, bis zu 6 of 6.
Beschreiben Sie, was jeder Screenshot zeigt
Wo: Screenshots
Wählen Sie Whole page und, falls bekannt, den Bildschirm, auf dem es aufgenommen wurde: Desktop, Tablet oder Phone (Screen size: detect ermittelt ihn). Oder wählen Sie One section und den gezeigten Teil, etwa Hero, Preise, Kundenstimmen oder Footer.
Weiter
Wo: Show what you like
Klicken Sie auf Next. Die Übersicht zeigt die Adresse der Website und zählt Ihre Screenshots.
Sie können auch vor der Anmeldung eine Website aus dem Feld auf briks.dev mitbringen: Öffnen Sie das Menü +, wählen Sie Add a site you like, und sie landet nach der Anmeldung bei diesem Schritt.
Was Briks liest
Eine Website wird in Desktop-, Tablet- und Smartphone-Breite gelesen, nachdem Briks einen Cookie-Banner beantwortet und Pop-ups geschlossen hat. Geprüft werden:
- Layout: die Abschnitte von oben nach unten, wie breit der Inhalt läuft, die Spalten und was sich auf dem Smartphone ändert.
- Spacing: der Rhythmus zwischen den Abschnitten und innerhalb davon.
- Type: die Größen und Stärken von Überschriften und Text sowie der Charakter der Schriftarten.
- Colour: der Hintergrund, die Textfarbe und die Akzentfarbe.
- Motion: was beim Scrollen einblendet oder hereingleitet, was fixiert bleibt, Reihen, die sich von selbst bewegen, und was Links und Buttons tun, wenn man mit der Maus darüberfährt.
- Die Kopfzeile und ihr Menü: eine einfache Reihe von Links, Dropdowns oder große Panels. Jedes Panel wird geöffnet und angesehen.
- Illustrations: Wenn die Seite Zeichnungen statt Fotografien verwendet, werden Ihre Bilder in ähnlicher Handschrift gezeichnet.
Ein Screenshot sagt Briks weniger: das Layout und die Ausrichtung, die Abstände, wie groß die Überschrift ist, die Farben und ob das Design hell oder dunkel ist. Ein Screenshot mit der Markierung One section gilt nur für diesen Abschnitt.
Was nie genommen wird
Das Panel sagt es klar: „One site per project. We measure its structure, rhythm and type. Nothing is copied.“ In der Praxis heißt das:
- Worte. Vor der Veröffentlichung prüft Briks Ihre Website auf Zeilen, die von der Website stammen, die Ihnen gefällt, und schreibt sie im Ton Ihres eigenen Unternehmens um. Zeilen aus Ihrem eigenen Briefing bleiben unberührt.
- Logos und Namen. Ihre Kopfzeile zeigt Ihren Namen, Ihr hochgeladenes Logo oder ein gezeichnetes Zeichen.
- Bilder. Ihre eigenen stammen aus der Bibliothek des Studios, werden neu für Sie gezeichnet oder von Ihnen hinzugefügt.
- Andere Unternehmen. Eine Reihe mit Kundenlogos oder Partnern zeigt nur Namen, die Sie angeben.
Die Fragen vor dem Bauen entstehen allein aus Ihrem Briefing und der Adresse, nie aus dem Text der anderen Website.
Eine Website, Screenshots oder beides
Wie genau Briks einer Website folgt, hängt davon ab, was Sie ihm sonst noch geben.
| Was Sie hinzufügen | Was Briks leistet |
|---|---|
| Eine Website und sonst nichts | Diese Seite legt die Reihenfolge der Bereiche Ihrer Startseite fest, zugeschnitten auf Ihr Unternehmen |
| Eine Website plus Screenshots | Sie steuern den Aufbau gemeinsam, sodass die Website die Reihenfolge nicht mehr allein bestimmt; ein Screenshot eines Abschnitts entscheidet über diesen Abschnitt |
| Nur Screenshots | Sie bestimmen Aufbau und Aussehen, ein Screenshot eines Abschnitts bestimmt dagegen diesen Abschnitt |
| Einstellungen unter Your brand | Sie haben Vorrang vor jeder Referenz, damit Ihr Akzent Ihr eigener bleibt, auch wenn die Website, die Ihnen gefällt, grün ist |
Den Build mit der Website abgleichen
Sobald eine Website hinzugefügt ist, zeigt der Schritt auch Measure the build against the reference, standardmäßig ausgeschaltet. Ist die Option an, vergleicht Briks die gebaute Seite vor dem Veröffentlichen mit der Website, die Ihnen gefällt, und korrigiert die Abweichungen, die es misst. Sie gilt nur, wenn die Website Ihre einzige Referenz ist, also ohne Screenshots, denn nur dann folgt Ihre Seite deren Layout. Sie kostet zusätzliche Credits und Zeit beim Aufbau, lassen Sie sie also aus, es sei denn, eine enge Übereinstimmung ist Ihnen wichtig. Später lässt sie sich in Preferences als Measure builds against the reference ändern.
Wie eine Website den Rest des Setups verändert
- Kein Aussehen und kein Hero zur Auswahl. Der Schritt How it is built sagt: "Ihre Referenzseite bestimmt das Aussehen und den Hero, daher gibt es nichts auszuwählen." Auf briks.dev wird Pick a look first mit "Die Website, die Ihnen gefällt, legt das Aussehen fest." ausgeschaltet. Siehe Aussehen wählen.
- Weniger Fragen. Briks fragt nicht nach dem Layout, dem Aussehen oder danach, was die Seite anführt, denn das beantwortet die Website.
- Auch Dashboards können eine Referenz erhalten. Briks liest vom Bildschirm die Navigation (Seitenleiste oder obere Leiste) und die Anzahl der Panels, Tabellen und Diagramme ab. Die meisten Dashboards liegen hinter einer Anmeldung, daher ist ein Screenshot meist der Weg, eines zu zeigen.
Während der Erstellung erscheint in der Unterhaltung ein Kasten namens What your references decided. Er listet auf, was jede Referenz festgelegt hat: die Inhaltsbreite, den Rhythmus, das Menü der Kopfzeile, die Bewegungen.
Wenn eine Website nicht gelesen werden kann
Die meisten öffentlichen Seiten lassen sich gut lesen. Dies sind die üblichen Gründe, warum eine Seite es nicht tut:
- Sie liegt hinter einer Anmeldung. Briks sieht, was ein nicht angemeldeter Besucher sieht. Nutzen Sie für alles hinter einem Login Screenshots.
- Es weist automatisierte Besucher ab. Manche Websites antworten statt mit der Seite mit einer Roboter-Prüfung. Briks versucht einen zweiten Zugang, und ist auch der blockiert, wird die Website übersprungen.
- Cookie-Banner und Pop-ups sind selten das Problem, denn Briks beantwortet das Banner und schließt Pop-ups, bevor es hinsieht.
Kann die Website nicht gelesen werden, Ihre Screenshots aber schon, läuft der Build ohne sie weiter, und das Feld zeigt "1 reference could not be read and was skipped." Kann nichts von dem, was Sie hinzugefügt haben, gelesen werden, stoppt der Build, statt eine Website zu gestalten, die Sie nicht verlangt haben. Ein Build, der so stoppt, wird nicht berechnet, und die Reservierung wird zurückgegeben. Was das Studio sagt, hängt vom Grund ab:
| Was das Studio sagt | Was zu tun ist |
|---|---|
| "The reference address couldn't be opened." und "Nothing was charged." | Klicken Sie auf Build without it, um dieselbe Anfrage mit Ihren Worten und Antworten unverändert zu erstellen, wobei die Credits eines neuen Projekts wieder zurückgehalten werden. Oder klicken Sie auf Remove it: Das öffnet Reference site in Preferences, wo Remove die Adresse entfernt. |
| „Die Referenzwebsite hat den Browser des Studios abgewiesen, daher konnte sie nicht gelesen werden. Bitte versuchen Sie eine andere Referenz.“ | Starten Sie ein neues Projekt mit Screenshots der Seite unter Screenshots oder mit einer anderen Website. |
| "Ihre Referenz konnte wegen eines Systemfehlers nicht gelesen werden. Bitte versuchen Sie es später erneut." | Drücken Sie später Try again. Ihre Worte und Antworten bleiben erhalten, die Fragen werden also nicht doppelt gestellt. Oder tippen Sie in das Feld, um den Vorgang mit Ihren neuen Worten erneut zu starten. |
Die Gruppe Reference site unter Preferences zeigt die Adresse an, bis die Website zum ersten Mal veröffentlicht wird, damit Sie prüfen können, ob sie wie gewünscht gespeichert wurde.
Praxisbeispiele
Briefing: eine Zahnarztpraxis für Familien in Harrogate mit vier Zahnärzten, Samstagvormittagen und einem Anfrageformular. Hinzugefügte Website: die Startseite eines kleinen Hotels, die der Inhaber ruhig und weitläufig fand. Sonst nichts.
Die Startseite der Praxis folgt der Reihenfolge und dem großzügigen Abstand der Hotelseite, mit den eigenen Worten, Behandlungen und Bildern der Praxis. Name, Fotos und Formulierungen des Hotels erscheinen nirgends.
Website: eine Rösterei, deren Menü sich zu großen Flächen öffnet. Screenshot: das Produktraster eines Shops, markiert mit One section, mit ausgewählten Produkten. Your brand: Akzentfarbe
#B4542D.
Mit einem hinzugefügten Screenshot bestimmt die Seite der Rösterei nicht mehr die Reihenfolge der Bereiche. Ihr Panel-Menü wird übernommen, der Produktbereich folgt dem Screenshot, und der eigene Akzent des Rösters setzt sich gegen die Farben der Referenz durch.
Häufige Fragen
Kann ich eine Referenz hinzufügen, nachdem die Website erstellt wurde?
Ja, als Bild. Hängen Sie im Feld des Studios einen Screenshot an, lassen Sie ihn als Reference markiert und sagen Sie, was daraus übernommen werden soll: Make the pricing section feel like this, three columns with the middle one raised.
Kann ich eine Website mit Passwortschutz einrichten?
Nicht sinnvoll. Briks sieht nur die öffentliche Seite. Machen Sie stattdessen Screenshots und fügen Sie sie unter Screenshots hinzu.
Warum kann ich keinen Look mehr auswählen?
Eine Website, die Ihnen gefällt, bestimmt das Aussehen. Entfernen Sie sie unter Show what you like, wenn Sie lieber aus drei Moodboards wählen möchten.