# Designer Checkliste # Was muss designt werden # 1. Startseite # 2. Unterseite # 3. ggf. spezielle Elemente # 4. Darstellung der News (optional) # 5. Darstellung der Jobseite (optional) # 7. Darstellung des Menüs (optional) # 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. # 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: - verwendete Farben [![Bildschirmfoto 2024-02-28 um 12.57.51.png](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/scaled-1680-/bildschirmfoto-2024-02-28-um-12-57-51.png)](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/bildschirmfoto-2024-02-28-um-12-57-51.png) - Font Hierarchie inkl. Beschreibung für Desktop & für die mobile Version [![Bildschirmfoto 2024-02-28 um 12.58.08.png](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/scaled-1680-/bildschirmfoto-2024-02-28-um-12-58-08.png)](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/bildschirmfoto-2024-02-28-um-12-58-08.png) - Alle erstellten Elemente inkl. aller möglichen Stati (aufgeklappt, zugeklappt, hover, active...) [ ![Bildschirmfoto 2024-02-12 um 12.00.10.png](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/scaled-1680-/bildschirmfoto-2024-02-12-um-12-00-10.png)](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/bildschirmfoto-2024-02-12-um-12-00-10.png) - klassischer Button inkl. Hover State [ ](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/bildschirmfoto-2024-02-12-um-12-00-40.png)[![Bildschirmfoto 2024-02-28 um 12.58.30.png](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/scaled-1680-/bildschirmfoto-2024-02-28-um-12-58-30.png)](https://docs.hauer-heinrich.com/uploads/images/gallery/2024-02/bildschirmfoto-2024-02-28-um-12-58-30.png) # Worauf ist zu achten Kontraste zwischen Text und Hintergrund ([https://www.siteimprove.com/de/toolkit/color-contrast-checker/](https://www.siteimprove.com/de/toolkit/color-contrast-checker/) ) Schriftarten: Google Fonts Schriftgrößen: mobil nicht zu klein werden! # Für Entwickler vorbereiten # 1. Bilder für Export markieren # 2. ggf. Icons exportieren und den Jungs im Trello zur Verfügung stellen # 3. ggf. Animationen den Jungs im Trello zur Verfügung stellen **Inspiration** Effekte für Bilder: [https://freefrontend.com/css-image-effects/](https://freefrontend.com/css-image-effects/) Effekte für Links: [https://freefrontend.com/css-link-styles/](https://freefrontend.com/css-link-styles/) Effekte für Buttons: [https://freefrontend.com/css-button-hover-effects/](https://freefrontend.com/css-button-hover-effects/) -> Den Jungs reicht ein Link zur jeweiligen Animation. Also z.B. [https://codepen.io/jcoulterdesign/pen/LJMxWL](https://codepen.io/jcoulterdesign/pen/LJMxWL) # 4. Entwicklerlink erstellen