Designer Checkliste

Was muss designt werden

Was muss designt werden

1. Startseite

Was muss designt werden

2. Unterseite

Was muss designt werden

3. ggf. spezielle Elemente

Was muss designt werden

4. Darstellung der News (optional)

Was muss designt werden

5. Darstellung der Jobseite (optional)

Was muss designt werden

7. Darstellung des Menüs (optional)

Was muss designt werden

8. mobile Version aller zuvor beschriebener Punkte

Wichtig!

Unsere Webseiten sind bis 320px ausgelegt. 
Das heißt die kleinste Größe in der das Design gut aussehen und nutzbar sein muss sind 320px. 

Optimale Schriftgrössen für Smartphones

Da man auf Smartphones weniger Platz zur Verfügung hat, ist die Schrift in der Regel kleiner als auf dem Desktop. 

Fliesstext:
Obwohl die Schriftgrösse bei Smartphones kleiner ist, sollte der Fliesstext auch hier mindestens eine Grösse von 16px haben. 

Überschriften (H1):
Diese sollten auf Smartphones etwa etwa 1,3-mal grösser sein als der Fliesstext. Bei einer Schriftgrösse von 16px bräuchte man also mindestens 21px um einen ausreichenden Unterschied zu erzeugen. 

Was muss designt werden

9. Seite für Entwickler

Wenn das Design fertig ist und vom Kunden abgesegnet wurde, sollte eine Seite für den Entwickler erstellt werden.

Diese Seite sollte folgende Elemente beinhalten:

Bildschirmfoto 2024-02-28 um 12.57.51.png

Bildschirmfoto 2024-02-28 um 12.58.08.png

        Bildschirmfoto 2024-02-12 um 12.00.10.png

      Bildschirmfoto 2024-02-28 um 12.58.30.png

Was muss designt werden

Worauf ist zu achten

Kontraste zwischen Text und Hintergrund (https://www.siteimprove.com/de/toolkit/color-contrast-checker/ )

Schriftarten: Google Fonts

Schriftgrößen: mobil nicht zu klein werden! 

Für Entwickler vorbereiten

Für Entwickler vorbereiten

1. Bilder für Export markieren

Für Entwickler vorbereiten

2. ggf. Icons exportieren und den Jungs im Trello zur Verfügung stellen

Für Entwickler vorbereiten

3. ggf. Animationen den Jungs im Trello zur Verfügung stellen

Inspiration

Effekte für Bilder: https://freefrontend.com/css-image-effects/ 

Effekte für Links: https://freefrontend.com/css-link-styles/ 

Effekte für Buttons: https://freefrontend.com/css-button-hover-effects/ 

-> Den Jungs reicht ein Link zur jeweiligen Animation. Also z.B. https://codepen.io/jcoulterdesign/pen/LJMxWL 

Für Entwickler vorbereiten

4. Entwicklerlink erstellen