We have clarified our Privacy Statement. Please have a look at our changes.

#2 Design/Layout

Open
opened 3 months ago by davidak · 2 comments
davidak commented 3 months ago

Wie soll das Layout und Design der Webseite aussehen?

Welche Ziele sollen damit erreicht werden?

Das Endergebnis muss ein Hugo Template sein, kann aber einfach aus einer HTML-Vorlage erstellt werden.

Gute Beispiele:

Wie soll das Layout und Design der Webseite aussehen? Welche Ziele sollen damit erreicht werden? Das Endergebnis muss ein [Hugo Template](https://gohugo.io/categories/templates) sein, kann aber einfach aus einer HTML-Vorlage erstellt werden. Gute Beispiele: - https://liqd.net/de/software/
davidak commented 2 weeks ago
Owner

Das Hauptziel ist, Wissen zu vermitteln. Das Design sollte den Inhalt unterstreichen und nicht schlechter lesbar machen!

Die Sektionen sollen abwechseln 2 verschiedene Hintergrundfarben haben.

Farblich könnte man es wie https://reproducible-builds.org/tools/ machen. Hintergrund helles grau und helles blau. Einzelne Elemente dunkles blau.

Um die Seite visuell ansprechender zu gestalten hatte ich die Idee, an den Seiten verschiedene Icons zu verteilen. Sie sollten wie zufällig platziert aussehen, aber immer an der gleichen Position. Also nicht bei jedem neuladen woanders.

Freie Icons gibt es bei https://forkaweso.me/Fork-Awesome/

Ein nettes easter egg wäre, wenn man auf die Ions klicken kann und sie dann eine animation sbspielen. z.B. eine rakete fliegt geradeaus, aus dem bild und kommt dann wieder an die stelle geflogen. am besten mit feuer und rauch!

Für das Layout hatte ich die Idee, es wie die aktuell modernen Landingpages zu machen und abwechselnd links und rechts den text und auf der anderen seite ein bild / icon… aber eventuell haben wir dafür zuviel fließtext, so dass es für die lesbarkeit besser ist ihn über die ganze breite zu verteilen.

Beispiel: https://dribbble.com/shots/7885076-Pyoneer-io-Customer-Feedback-Analytics

https://www.leadpages.net/customers/greg https://gregbenzphotography.com/lumenzia/ https://www.leadpages.net/customers/shohawk

Man könnte Bilder und Videos zwischendrin einblenden, aber dadurch braucht der Besucher länger, den gesamten Inhalt zu lesen.

Die Seite soll nur eine Übersicht geben, welche Aspekte es gibt, damit man von guter Software sprechen kann. Das zu lesen sollte nicht lange dauern. Es muss aber so ausführlich sein, dass es einfach zu verstehen ist!

Das Hauptziel ist, Wissen zu vermitteln. Das Design sollte den Inhalt unterstreichen und nicht schlechter lesbar machen! Die Sektionen sollen abwechseln 2 verschiedene Hintergrundfarben haben. Farblich könnte man es wie https://reproducible-builds.org/tools/ machen. Hintergrund helles grau und helles blau. Einzelne Elemente dunkles blau. Um die Seite visuell ansprechender zu gestalten hatte ich die Idee, an den Seiten verschiedene Icons zu verteilen. Sie sollten wie zufällig platziert aussehen, aber immer an der gleichen Position. Also nicht bei jedem neuladen woanders. Freie Icons gibt es bei https://forkaweso.me/Fork-Awesome/ Ein nettes easter egg wäre, wenn man auf die Ions klicken kann und sie dann eine animation sbspielen. z.B. eine rakete fliegt geradeaus, aus dem bild und kommt dann wieder an die stelle geflogen. am besten mit feuer und rauch! Für das Layout hatte ich die Idee, es wie die aktuell modernen Landingpages zu machen und abwechselnd links und rechts den text und auf der anderen seite ein bild / icon... aber eventuell haben wir dafür zuviel fließtext, so dass es für die lesbarkeit besser ist ihn über die ganze breite zu verteilen. Beispiel: https://dribbble.com/shots/7885076-Pyoneer-io-Customer-Feedback-Analytics https://www.leadpages.net/customers/greg https://gregbenzphotography.com/lumenzia/ https://www.leadpages.net/customers/shohawk Man könnte Bilder und Videos zwischendrin einblenden, aber dadurch braucht der Besucher länger, den gesamten Inhalt zu lesen. Die Seite soll nur eine Übersicht geben, welche Aspekte es gibt, damit man von guter Software sprechen kann. Das zu lesen sollte nicht lange dauern. Es muss aber so ausführlich sein, dass es einfach zu verstehen ist!
davidak commented 3 days ago
Owner

Nach Feedback habe ich entschieden eine interaktive Checkliste zu machen.

Das erste Bild zeigt, wie eine Checkliste typischerweise aussieht. Intuitiv hätte ich die Haken auf die rechts Seite gemacht, damit man erst den Text von links nach rechts liest und dann abhakt. Es scheint aber üblich zu sein es links zu haben (siehe TODO-Listen).

Wenn ich nach “online checklist ux design” suche finde ich aber auch Haken auf der rechten Seite.

Beispiele für ansprechendes Design:

https://uxchecklist.github.io/ https://ixdchecklist.com/ https://www.lovelyui.com/post/73519835361/checklist-on-osito https://dribbble.com/shots/5850886-Expandable-Problem-Checklist https://dribbble.com/shots/6999913-Factory-Checklist

Nach Feedback habe ich entschieden eine interaktive Checkliste zu machen. Das erste Bild zeigt, wie eine Checkliste typischerweise aussieht. Intuitiv hätte ich die Haken auf die rechts Seite gemacht, damit man erst den Text von links nach rechts liest und dann abhakt. Es scheint aber üblich zu sein es links zu haben (siehe TODO-Listen). Wenn ich nach "online checklist ux design" suche finde ich aber auch Haken auf der rechten Seite. Beispiele für ansprechendes Design: https://uxchecklist.github.io/ https://ixdchecklist.com/ https://www.lovelyui.com/post/73519835361/checklist-on-osito https://dribbble.com/shots/5850886-Expandable-Problem-Checklist https://dribbble.com/shots/6999913-Factory-Checklist
Sign in to join this conversation.
No Label
No Milestone
No Assignees
1 Participants
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
Cancel
Save
There is no content yet.