Konsep Pembangunan Web Semua Pereka Web Perlu Memahami

Ada banyak perkara yang boleh dikatakan pembahagian yang terdapat antara pereka dan pemaju. Memang ada banyak hibrid pereka / pemaju yang boleh faham kedua-dua belah duit syiling, tetapi mereka sedikit dan jauh di antara.

Projek-projek kreatif berkembang maju komunikasi yang betul. Walau bagaimanapun, ini boleh menjadi sukar apabila pereka dan pemaju tidak pasti bagaimana untuk melakukannya bercakap dengan satu sama lain. Saya tidak fikir para pereka perlu tahu cara menulis JavaScript yang betul, dan juga pemaju pemilihan tipografi tuan tidak perlu. Tetapi ada beberapa topik asas yang saya rasa pergi kedua-dua cara.

Topik-topik berikut adalah pengambilan peribadi saya sendiri idea pembangunan web penting yang perlu difahami semua pereka. Sebagai pereka / pemaju sendiri, saya tahu betapa mengelirukannya dapat mengkaji kedua-dua bidang. Tetapi ia sentiasa berbaloi untuk belajar kerana pemahaman yang jelas meningkatkan komunikasi dan menjadikan pereka jauh lebih berharga untuk pasukan kreatif.

Behavior Kod Depan

Pereka web sering dianggap memiliki kemahiran frontend bersama dengan bakat reka bentuk mereka. Ini adalah topik hangat, kebanyakannya kerana ada tiada jawapan yang betul.

Pereka harus melakukan apa yang mereka lakukan selesa dengan. Jika itu bermakna hanya melakukan kerja reka bentuk visual, maka jadilah ia. Walau bagaimanapun pemahaman ringkas mengenai teknologi frontend boleh membuat pereka yang sama lebih intuitif semasa membuat aset untuk pemaju.

Saya percaya setiap pereka harus sekurang-kurangnya memahami tiga bahasa asas pembangunan frontend (HTML, CSS, dan JS) dan bagaimana ia digunakan. Contohnya, kebanyakan menu jatuh turun bergantung pada JavaScript tetapi terdapat alternatif CSS sahaja.

Apabila seorang pereka sedang membuat menu dropdown, mereka boleh memikirkannya kerumitan melaksanakannya melalui kod. Seorang pereka yang memahami unsur-unsur yang memerlukan JavaScript boleh menjadi lebih baik untuk memahami apa yang mereka minta pemaju untuk membina.

Ini mungkin tanpa belajar menulis satu baris kod.

CSS dibuat untuk gaya laman web. Ia kebanyakannya statik selain daripada animasi CSS, dan CSS mewujudkan majoriti visual pada halaman. Ciri-ciri yang dinamik dicipta dengan JavaScript.

Jika anda dapat memahami pembahagian ini, anda akan menghirup usaha sedar ke dalam kerja reka bentuk. Ia juga akan memaksa pereka gerakan UX untuk mempertimbangkan betapa banyak kerja yang dapat menghidupkan antara muka.

Teknik Responsif

Setiap pereka web sekurang-kurangnya tahu istilah itu reka bentuk responsif. Ini membolehkan laman web untuk menyesuaikan diri dengan saiz skrin yang berbeza, untuk masing-masing susun atur yang berbeza. Dimensi peranti apabila susun atur baru digunakan ditakrifkan oleh titik putus, ditambah dalam (salah satu) fail CSS (s).

Titik putus ditentukan oleh a lebar piksel tertentu (dan / atau kadang-kadang ketinggian), sama ada minimum atau maksimum, di mana susun atur menyesuaikan agar muat saiz skrin itu. Oleh itu susun atur responsif akan kelihatan berbeza pada monitor 1080px daripada telefon pintar 320px.

Untuk melihat bagaimana titik putus kerja di tapak sebenar lihat laman web Media Pertanyaan.

Tugas anda sebagai pereka adalah untuk mempertimbangkan bagaimana setiap breakpoint mungkin mempengaruhi mockup. Anda boleh ditugaskan untuk merekabentuk beberapa pemampat, masing-masing sesuai dengan dimensi skrin yang berbeza.

Sebaik sahaja anda memahami bahawa titik pemecahan CSS menentukan syarat-syarat apabila susun atur berubah, anda akan mempunyai masa yang lebih mudah menyampaikan aset ini kepada pasukan dev.

Fikirkan Modular Dengan Reka Bentuk

Pemaju sentiasa mahu kod guna semula sebanyak mungkin, kerana pendekatan ini menjadikan pembangunan kurang verbose dan memotong saiz fail - sebenarnya ia adalah teknik pengoptimuman kod yang penting.

Reka bentuk modular menerangkan kaedah membuat laman web daripada “modul” yang boleh digunakan semula dari masa ke masa. Berfikir butang, input borang, gaya tajuk, atau blok sekat dengan stylings mewah.

Jika awak elemen reka bentuk secara modular, ia menjadi lebih mudah bagi pemaju untuk mengodakan susun atur dengan kelas CSS boleh diguna semula. Ia sentiasa menjadi idea yang baik untuk memikirkan di mana anda boleh munasabah semula warna yang sama, tekstur, dan elemen halaman, namun anda perlu pandai mengenainya tidak membahayakan estetika secara keseluruhan.

Ia lebih baik jika anda annotate unsur-unsur yang telah anda salin di seluruh makro yang berbeza, supaya pemaju boleh tandakan bahagian-bahagian tapak ini dengan kod berulang - menjadikan pembangunan lebih cepat dan mudah.

Reka bentuk modular berkaitan dengan reka bentuk atom, kedua-dua pendekatan itu agak sesuai untuk pemaju. Walau bagaimanapun visualisasi boleh membantu anda memahami bagaimana kod berfungsi, jadi jika anda berjuang untuk menggambarkan reka bentuk modular semak post ini untuk melihat beberapa contoh.

Memahami Imej Retina & SVG

Biasanya ia adalah tugas pereka untuk menyediakan imej, menangkap gambar yang diperlukan, dan ikon reka bentuk dari awal. Ini bermakna pereka bertanggungjawab sepenuhnya menyampaikan aset visual bahawa pemaju akhirnya memasukkan kod ke dalam susun atur. Itulah sebabnya penting untuk difahami saiz retina dan kepada lulus aset yang disokong retina kepada pemaju bersama dengan mockup akhir (s).

Saya sangat mengesyorkan pos Majalah Smashing ini jika anda ingin mengetahui lebih lanjut mengenai aliran kerja reka bentuk retina. Retinize Ia adalah koleksi percuma tindakan Photoshop yang boleh secara automatik membuat versi retina aset anda.

Kebanyakan pereka sudah tahu untuk menyokong @ 2x imej, tetapi peranti iPhone 6+ yang baru ada @ 3x resolusi. Bagaimanapun, beberapa projek tidak mengganggu dengan saiz imej @ 3x, jadi berbincang dengan pemimpin projek anda sebelum menyelesaikan sebarang aset.

Satu perkara yang perlu dipertimbangkan ialah kemajuan SVG di web. Semua penyemak imbas moden menyokong SVG yang merupakan format imej berasaskan vektor. Ini bermakna ikon SVG akan skala secara automatik tanpa kehilangan kualiti, jadi anda tidak memerlukan aset retina untuk grafik SVG.

Tidak semua pasukan kreatif bersedia menyertai SVGs untuk reka bentuk web walaupun. Mereka disokong oleh pelayar pasti, tetapi dalam beberapa kes, mereka juga boleh menjadi sukar untuk dilaksanakan. Inilah sebabnya komunikasi adalah penting untuk hubungan pereka / pemaju yang berjaya.

Bincangkan kebaikan dan keburukan menggunakan grafik vektor dan tentukan apa yang paling sesuai untuk setiap projek. Dengan hanya memahami ciri-ciri ini, anda dapat berkomunikasi dengan pemaju dengan jelas, dan juga membantu mereka kod susun atur untuk sokongan retina.

Memahami Kebolehcapaian

Peningkatan progresif dan degradasi anggun adalah dua cara yang berbeza untuk menangani masalah yang sama: aksesibiliti. Tidak semua pengguna akan menggunakan peranti atau menjalankan penyemak imbas yang menyokong 100% ciri dinamik laman web.

Pengguna ini masih perlu mendapat pengalaman yang berfungsi, dan ini perlu dikendalikan dengan pengekodan yang betul. Sesetengah pembaca skrin mungkin mengabaikan semua kod JavaScript dan CSS, tetapi laman web masih perlu berfungsi.

Saya baru-baru ini melakukan penutup pos peningkatan progresif secara terperinci, kerana kaedah pembangunan pilihan saya. Peningkatan progresif bermula dengan ciri-ciri yang sangat asas, kemudian berfungsi lebih “maju” ciri-ciri.

Degradasi anggun adalah pendekatan bertentangan di mana semua ciri utama direka terlebih dahulu, maka pemaju memutuskan cara mengendalikan ciri-ciri ini jika pengguna tidak mendukung JavaScript atau CSS.

Ia tidak mungkin seorang pereka akan diminta melakukan mockups untuk mana-mana situasi ini. Tetapi adalah penting bahawa pereka memahami istilah ini dan apa yang mereka maksudkan, kerana mereka boleh menjejaskan proses pembangunan. Ini benar terutamanya untuk projek-projek di mana kebolehaksesan adalah kebimbangan besar.

Dalam Penutupan

Terdapat beberapa topik yang saya langkau kerana saya menganggap mereka pilihan. Kawalan versi, pengendalian ralat, dan animasi JavaScript adalah beberapa topik yang lebih rumit yang direka oleh pereka.

Tetapi dengan jujur, mata yang ditangani dalam jawatan ini lebih daripada membantu pereka memahami keperluan pasukan pembangunan. Dengan hanya memotong permukaan pembangunan web anda akan mendapatkan maklumat tentang yang akan membantu anda menyampaikan idea dan bersimpati dengan masalah yang berlaku semasa pengeluaran.

Jika anda mencari kandungan yang lebih berkaitan lihatlah siaran ini:

• Cara Berkomunikasi Secara Berkesan Dengan Pemaju (smashingmagazine.com)
• Bantu Pereka dan Pembangun Belajar Memahami Setiap Lain-lain (uie.com)
• Belajar kepada Kod Memberi Anda Kelebihan sebagai Pereka UX (jessicaivins.net)