Prowler Landingpage mit Figma

12th August 2021

Prowler Video (Click me :D)

Hi Leute!

Erst kürzlich habe ich meine neuestes AWS Security Product die Prowler AMI vorgestellt. Damit kannst du deine AWS Konfiguration auf Security, Best Practices, Cost Savings und mehr automatisiert überprüfen. Die AMI hat sogar schon einige Anwender gefunden, was mich sehr freut. Natürlich wäre es super wenn ich noch mehr Leute überzeugen könnte Prowler auszuprobieren. Zum anwerben neuer Anwender habe ich mir vorgenommen eine Landingpage für die Prowler AMI zu bauen.

Ich bezeichne mich zwar selbst als DevOps Fullstack Entwickler aber meine Stärken liegen klar im Backend Bereich. Für die Landingpage muss ich also weiter aus meiner Komfortzone gehen. Aber kein Problem ich mag das :).

In den nächsten Abschnitten möchte ich meine Journey bei der Erstellung der Prowler Landingpage mit euch teilen. Doch zuerst beschreibe ich die Anforderungen der Landingpage

Anforderungen Landingpage

Die Landingpage soll natürlich attraktiv auf die Prowler AMI aufmerksam machen. Dafür benötigt man ein Landingpage Gestaltungstool. Ich habe mich für Figma entschieden. Genaueres habe ich im Figma Abschnitt beschrieben.

Danach soll der Prototyp von Figma in eine Website überführt werden. Diese soll dann natürlich mittels HTML, JavaScript und CSS die Landingpage anzeigen können.

Darüber hinaus will ich die Seite leicht für Suchengines wie die von Google erreichbar bzw. zugänglich machen. Das wird auch als SEO Search Engine Optimization bezeichnet.

Figma

Figma ist ein vektorbasierender Grafikeditor und Prototyping Tool im Web. Es kann hervorragend benutzt werden um die Prowler Landingpage zu prototypen. Die Landingpage soll sich dynamisch je nach Gerät anpassen können. Das bedeutet Ich muss zwei verschiedene Layouts mit Figma gestalten. Ein Layout für einen Desktop PC und einem Mobilphone wie z.B. dem IPhone.

Figma Prowler Landing

Zum erstellen meiner Landingpage habe ich einfach ein existierendes Landingpage Beispiel aus der Figma Community genommen und es nach meinen Vorstellungen angepasst.

Figma hat eine steile Lernkurve aber der übersichtliche Editor gefällt mir sehr gut. In zukünftigen Projekten werde ich gerne wieder mit Figma arbeiten.

Website Setup mit Projen

Projen ist ...

  • awscdk-app-ts und react-ts REPO
  • Zusammenfassung

    ...

An die tollen Leser dieses Artikels sei gesagt, dass Feedback jeglicher Art gerne gesehen ist. In Zukunft werde ich versuchen hier eine Diskussionsfunktion einzubauen. Bis dahin sendet mir doch bitte direkten Feedback über meine Sozial Media accounts wie Twitter oder FaceBook. Vielen Dank :).

Ich liebe es an Content Management Open Source Projekte zu arbeiten. Vieles kannst du bereits frei nutzen auf www.github.com/mmuller88 . Wenn du meine dortige Arbeit sowie meine Blog Posts toll findest, denke doch bitte darüber nach, mich zu unterstützen und ein Patreon zu werden:

Werde ein Patreon!

Share