Apa yang harus ada dalam tata letak situs web: lembar sontekan untuk seorang desainer

Terkadang desainer memberi pelanggan tata letak yang kehilangan sesuatu. Desainer tata letak, backender, dan spesialis teknis lainnya, tentu saja, dapat membuat elemen yang hilang sesuai kebijaksanaan mereka, tetapi mereka tidak akan peduli dengan penampilannya. Alih-alih memilih warna yang dipilih dengan cermat, mereka akan menambahkan warna mereka sendiri, membuat font standar, dan semua upaya desainer akan sia-sia. 





Tata letak juga dapat dikirim kembali untuk direvisi. Oleh karena itu, lebih baik bagi desainer untuk memiliki daftar elemen yang diperlukan dan memeriksanya sebelum tata letak dipindahkan ke tata letak. Ini akan memungkinkan Anda untuk melakukan semuanya sekaligus, tidak kembali ke proyek beberapa kali dan tidak khawatir akan terjadi kesalahan saat merakit halaman. Meskipun sesuatu kemungkinan besar masih akan berhasil.





Hati-hati, ada banyak ilustrasi di artikel tersebut.





Rekomendasi umum

Sebelum berbicara tentang elemen tertentu, ada baiknya menyebutkan poin utama yang tidak boleh dilupakan oleh desainer.





Font

Mereka harus dilampirkan ke tata letak, jika tidak pengembang akan mengunduh beberapa yang salah dan merusak desain.





Objek vektor

Anehnya, ilustrasi vektor harus berupa vektor dan mock-up. Jika Anda memasukkan gambar dengan format yang berbeda ke dalam tata letak, itu akan terlihat bagus di sana, tetapi akan menjadi sabun selama pengujian. Untuk mencegah hal ini terjadi, Anda harus selalu menggunakan vektor: misalnya, lampirkan ikon SVG.





Kotak

Yang terbaik adalah tidak menghapus grid dari tata letak, karena akan lebih mudah untuk menavigasi dengan itu. Ketika ada kisi, lebih mudah untuk membagi tata letak menjadi beberapa bagian, membuat kolom dengan lebar yang diinginkan. Lalu ada lebih sedikit bug dalam tata letak responsif, dan situs secara keseluruhan terlihat lebih rapi.





Kisi pada tata letak situs di Figma
Kisi pada tata letak situs di Figma

Elemen yang dibutuhkan untuk situs

, . - . , . — — , .





404 

, - : , , , .. 





404 — . , 404 . 





404, , , . ,





Dewis 404 halaman
404 Dewis

 

, « ». .





Halaman kosong tanpa opsi di situs "N + 1"
«N+1»

: .





, . , , , . , :





Temukan produk di situs Zara Home
Zara Home

, :





 

, , - . , -. , Open Graph.





Tautan ke Akademi HTML di Vkontakte
HTML Academy

 

- . , , . :





  •    ;





  •    ;





  •    ( , );





  •    ( , );





  •   ;





  •   ;





  •    ;





  •    ( ), ;





  •    «».





Blog Akademi HTML
HTML Academy

, . , - , . , . 





 

- , Snazzy maps. , . , JSON-. 





Gaya berbeda dari peta St. Petersburg pada peta Snazzy
- Snazzy maps

, . , .





Permintaan pencarian Google
Google

. , - . 





Blog Akademi HTML
HTML Academy

 

, , ( ..).





Mengedit profil di ivi.ru
ivi.ru

 

- , . « ».





Artikel National Geographic
National Geographic

«»

, .





Tombol atas saat mencari produk di situs Rumikom
«»

, .





, — .





   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