Was sollte in einem Website-Layout sein: ein Spickzettel für einen Designer

Manchmal stellt der Designer dem Kunden ein Layout zur Verfügung, bei dem etwas fehlt. Layoutdesigner, Backender und andere technische Spezialisten können das fehlende Element natürlich nach eigenem Ermessen herstellen, aber das Erscheinungsbild ist ihnen egal. Anstelle sorgfältig ausgewählter Farbtöne werden sie ihre eigenen Farben hinzufügen, Standardschriftarten erstellen und alle Bemühungen des Designers werden umsonst sein. 





Das Layout kann auch zur Überarbeitung zurückgeschickt werden. Daher ist es für den Designer besser, eine Liste der erforderlichen Elemente zur Hand zu haben und diese zu prüfen, bevor das Layout in das Layout übertragen wird. Auf diese Weise können Sie alles auf einmal erledigen, nicht mehrmals zum Projekt zurückkehren und sich keine Sorgen machen, dass beim Zusammenstellen der Seite etwas schief geht. Obwohl höchstwahrscheinlich noch etwas funktionieren wird.





Seien Sie vorsichtig, der Artikel enthält viele Abbildungen.





Allgemeine Empfehlungen

Bevor auf bestimmte Elemente eingegangen wird, sollten die wichtigsten Punkte erwähnt werden, die der Designer nicht vergessen sollte.





Schriftarten

Sie müssen an das Layout angehängt werden, sonst lädt der Entwickler einige falsche herunter und ruiniert das Design.





Vektorobjekte

Überraschenderweise sollte die Vektorillustration Vektor und Modell sein. Wenn Sie ein Bild eines anderen Formats in das Layout einfügen, sieht es dort gut aus, wird aber während des Tests seifig. Um dies zu verhindern, sollten Sie immer einen Vektor verwenden: Fügen Sie beispielsweise SVG-Symbole hinzu.





Gitter

Es ist am besten, das Raster nicht aus dem Layout zu entfernen, da es bequem ist, daran zu navigieren. Wenn es ein Raster gibt, ist es einfacher, das Layout in Teile zu teilen und Spalten mit der gewünschten Breite zu erstellen. Dann gibt es weniger Fehler im reaktionsschnellen Layout, und die Site als Ganzes sieht ordentlicher aus.





Raster auf einem Site-Layout in Figma
Raster auf einem Site-Layout in Figma

Erforderliche Elemente für die Site

, . - . , . — — , .





404 

, - : , , , .. 





404 — . , 404 . 





404, , , . ,





Dewis 404 Seite
404 Dewis

 

, « ». .





Leere Seite ohne Optionen auf der Website "N + 1"
«N+1»

: .





, . , , , . , :





Produkte finden Sie auf der Zara Home-Website
Zara Home

, :





 

, , - . , -. , Open Graph.





Link zur HTML Academy in Vkontakte
HTML Academy

 

- . , , . :





  •    ;





  •    ;





  •    ( , );





  •    ( , );





  •   ;





  •   ;





  •    ;





  •    ( ), ;





  •    «».





HTML Academy Blog
HTML Academy

, . , - , . , . 





 

- , Snazzy maps. , . , JSON-. 





Verschiedene Stile der St. Petersburg Karte auf Snazzy Karten
- Snazzy maps

, . , .





Google-Suchanfrage
Google

. , - . 





HTML Academy Blog
HTML Academy

 

, , ( ..).





Bearbeiten eines Profils auf ivi.ru.
ivi.ru

 

- , . « ».





National Geographic Artikel
National Geographic

«»

, .





Schaltfläche Nach oben bei der Suche nach Produkten auf der Rumikom-Website
«»

, .





, — .





Auswahl der Produkte auf Ozon
Ozon

«/ » .





   Ozon
Ozon

.





   Ozon
Ozon

(… …).





    Ozon
Ozon

:





    Ozon
Ozon

:





    Ozon
Ozon

, . .





   Zara.Home
Zara.Home

. , . .





 YouTube  Google
YouTube Google

 

, - — .





   Ozon
Ozon

, : 





  • « »





  • « , »





. , - . 





,   ::









  • ;





  • ;





  • .





- , .





   Aviasales.ru
Aviasales.ru

UI kit

. , , Ul kit. , . UI kit — . UI Kit , , , , , , (, ), 





    UI Garage
UI Garage

, . , , , - : , .. , , . . . 






, , HTML CSS "HTML CSS. ". SKUCHNO .





. .






:





,





,





-




















All Articles