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
- 9. Seite für Entwickler
- Worauf ist zu achten
- Für Entwickler vorbereiten
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
- Font Hierarchie inkl. Beschreibung für Desktop & für die mobile Version
- Alle erstellten Elemente inkl. aller möglichen Stati (aufgeklappt, zugeklappt, hover, active...)
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
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/
Effekte für Links: https://freefrontend.com/css-link-styles/
-> Den Jungs reicht ein Link zur jeweiligen Animation. Also z.B. https://codepen.io/jcoulterdesign/pen/LJMxWL