So erstellen Sie Websites effizienter

Unser leitender Entwickler gibt seine Tipps, wie Sie sich auf den effizienten Aufbau einer Website vorbereiten und Projektaufblähungen vermeiden.

Wie bei jedem Projekt ist die Vorbereitung Ihr Schlüssel zum Erfolg. Hier teile ich einige der wichtigsten Prozesse, die wir verwenden, um eine erfolgreiche Projektabwicklung zu gewährleisten.

Entwicklungsstart

Bevor Sie direkt in die Programmierung einer neuen Website einsteigen, ist es eine gute Idee, sich 30 bis 60 Minuten mit dem Entwicklungsteam zusammenzusetzen, um einen Plan zu erstellen. Idealerweise sollte der Product Owner beim Meeting anwesend sein, um alle Ihre Fragen zu beantworten. Sie werden wahrscheinlich an allen Kundenmeetings teilgenommen haben und mehr als jeder andere darüber wissen, was die Site in Bezug auf User Journeys und Funktionalität erreichen soll.

Hoffentlich haben Sie die Designs vorher gesehen. Es ist eine gute Idee, diese Sitzung zu nutzen, um alle Probleme zu identifizieren, die Sie sehen, und mit dem Team zu besprechen, wie Sie sie lösen würden. Wenn sich der Designer beispielsweise seit der letzten Iteration für ein Off-Canvas-Flyout-Menü entschieden hat, können Sie besprechen, wie Sie es erstellen würden. Vielleicht finden Sie jemanden im Team, der schon einmal einen gebaut hat, damit er den Job übernehmen kann.

Drucken Sie die Designs

Dies geht Hand in Hand mit dem Entwicklungsstart, aber diese Phase sollte nur das Frontend-Entwicklungsteam einbeziehen.

Ich denke, dies ist ein guter Schritt, bevor Sie mit dem Erstellen der Site beginnen, da Ausdrucke ausgelegt werden können, um einen besseren Überblick über das Gesamtbild zu erhalten. Dies ist mit Anwendungen wie Sketch, Photoshop oder Invision nicht einfach möglich. Sie müssen entweder so weit herauszoomen, um alle Designs zu sehen, oder Sie können möglicherweise nur eine Seitenvorlage pro Browserfenster sehen.

Das Anzeigen einer Webseite in taktiler Form kann Ihnen auch eine andere Perspektive geben und Ihnen helfen, Elemente zu erkennen, die Sie sonst möglicherweise übersehen. Auch die Möglichkeit, Anmerkungen zu machen, ist hilfreich.

Hier bei Hallam neigen wir dazu, unsere Ausdrucke mit Anmerkungen zu versehen, sie dann zu verwenden, um die Arbeitsbelastung aufzuteilen und sie auf ein Whiteboard zu kleben. Wir beziehen uns dann in nachfolgenden Besprechungen während des gesamten Build-Prozesses auf sie. Sobald eine Vorlage erstellt und abgemeldet wurde, wird sie vom Whiteboard entfernt, sodass wir einen klaren Überblick darüber haben, was wir noch erstellen müssen.

Natürlich sollten wir alle den Druckaufwand minimieren, also verwenden Sie unbedingt einen Papierkorb, wenn Sie mit den Designs fertig sind!

Identifizieren Sie gemeinsame Elemente

Einer der Grundsätze, die wir hier bei Hallam verinnerlicht haben, ist, dass nicht jedes Design, das wir erstellen, aus vollständig maßgeschneiderten Vorlagen bestehen sollte. Stattdessen sollten sie gemeinsame Designelemente haben, die separat erstellt und dann in die Vorlagen eingefügt werden können, wo sie benötigt werden.

Ich sage nicht, dass Seitenvorlagen keine benutzerdefinierten Elemente enthalten sollten, aber dies sollte nur bei Bedarf der Fall sein. Eine Website mit einer Schulungsseite für Radiointerviews und einer Schulungsseite für Fernsehinterviews benötigt beispielsweise keine zwei Vorlagen, wenn es sich bei beiden im Wesentlichen um "Schulungsvorlagen" handelt.

Gemeinsame Elemente sorgen auch für eine bessere Benutzererfahrung, da die Leute nicht ständig mit neuen Dingen bombardiert werden, die es zu entdecken gilt.

Nachdem Sie alle wesentlichen Elemente der Site erarbeitet haben, können Sie diese auf ein Whiteboard schreiben, Tickets erstellen und den verschiedenen Teammitgliedern zuordnen. Wenn Sie dann zum Zusammensetzen der Seiten kommen, können Sie die verschiedenen Teile einfach in die Vorlagen „einschieben“ und sie viel schneller erstellen.

Zuerst bauen oder gemeinsam gestalten und bauen?

Dies ist etwas, womit wir in der Vergangenheit experimentiert haben und im Moment erstellen und stylen wir Vorlagen gleichzeitig.

In der Vergangenheit haben wir alle Seitenvorlagenstrukturen und -elemente ohne CSS erstellt (mit Ausnahme von Layoutstilen, die entweder mit Bootstrap oder Foundation verbunden sind). Sobald wir die gesamte Site erstellt hatten, gingen wir alle Vorlagen und Elemente durch und gestalteten sie. Aus Sicht der Produktionslinie ist diese Methode sicherlich sinnvoll. Sie würden die Karosserie eines Autos nicht lackieren, bevor Sie es auf das Chassis montiert, den Motor eingesetzt und alle Befestigungen angebracht haben. Mit dieser Methode trennen Sie Funktion vom Stil. In der anfänglichen Build-Phase möchten Sie sicherstellen, dass die Site aus funktionaler Sicht funktioniert, bevor Sie sich überlegen, wie sie aussieht.

Stattdessen sind wir auf das Lager „Design and Build“ umgestiegen, um ein versandfähiges Produkt zu erstellen. Mit anderen Worten, wir könnten jederzeit live gehen, weil die Site funktioniert und gut aussieht. Tatsächlich bauen Sie mit der Methode „Design and build“ die Vorlage immer noch ohne Stil, aber sobald Sie mit dem Layout fertig sind, gehen Sie durch und gestalten Sie sie. Sie parken es nicht auf einer Seite und bauen die nächste Vorlage auf.

Die einfache Küchenspüle

Hier ist etwas, das in die „Design and Build“-Methode passen würde. Dazu gehören das Gestalten einiger Elemente, wie z. B. Typografie, das Hinzufügen der Markenfarben der Website und möglicherweise das Hinzufügen der Schaltflächenstile zur Datei master settings.scss. Es ist erstaunlich, was das Styling dieser Elemente auf Anhieb mit einer Site anstellen kann. Sie haben sofort eine Website, die nicht mehr wie eine Foundation-Boilerplate-Site aussieht, und Sie bekommen ein echtes Fortschrittsgefühl, indem Sie einfach vielleicht 30 Minuten damit verbringen, ein paar CSS-Regeln zu schreiben.

Rahmen der Site

Meine persönliche Vorliebe ist es, die Kopf- und Fußzeile frühzeitig zu gestalten, da dies hilft, die Site zu umrahmen und eine Leinwand zu erstellen, um die Site weiter zu gestalten und zu erstellen. Es lässt die Website mehr wie das fertige Produkt aussehen. Eine auslieferbare Site kann jedoch immer noch eine ungestylte, aber funktionierende Navigation und Fußzeile aufweisen.

Fazit

Wir alle haben unsere eigenen Ideen, wie wir ein Website-Design aus Photoshop in den Build-Prozess integrieren können, und das oben Gesagte ist einfach unsere Art, Dinge zu tun.

Ich glaube jedoch, dass es wichtig ist, einen Plan zu erstellen, bevor Sie Ihre Entwicklungsumgebung öffnen. Unabhängig davon, ob Sie als Freiberufler alleine arbeiten oder Teil eines großen Entwicklungsteams sind, das einen Plan erstellt, ist dies ein sicherer Weg, um effektiver und schneller zu arbeiten.

Wenn Sie Hilfe bei Ihrer Webentwicklung benötigen, zögern Sie nicht, uns zu kontaktieren.