Tinjau kembali gambar gambar – Beragampengetahuan

Saya menyebutkan terakhir kali bahwa saya telah mengerjakan situs web baru untuk komposer game Mike Worth, yang menang untuk Emmy Awards. Dia mempekerjakan saya untuk membuat desain grafis tingkat tinggi untuk memamerkan karyanya.

Mike Loves Animation dari tahun 90 -an, terutama Animasi Disney Cerita bebek dan seri animasi lainnya. Dia menantang saya untuk menemukan cara untuk memasukkan gaya retro tahun 90 -an mereka ke dalam desainnya tanpa menjadikannya sesuatu dari masa lalu. Tapi ini bukan satu -satunya tantangan saya. Saya juga perlu mencapai perasaan 90 -an dengan menggunakan kode terbaru untuk mempertahankan aksesibilitas, kinerja, responsif, dan semantik.

Desain Mike seperti kembali ke desain situs web utama tampaknya lebih spontan dan dikendalikan oleh konvensi dan praktik terbaik. Beberapa orang menggambarkan desain ini sebagai “aneh”:

kata sifat

1. Fantasi atau permainan spontan
2. Berikan aneh; disengaja
3. Cukup, tidak biasa atau hebat

– Kamus Bahasa Inggris Collins

Tapi saya tidak yakin itu benar -benar akurat. “Lucu?” Itu benar. “Fantasi?” mungkin. Tapi “hebat?” Itu tergantung. “Kecurigaan” terdengar berlebihan, jadi saya menyebutnya “ekspresi”.

Saya ingat ketika saya kembali dari desain, mengingat bagaimana situs web biasanya berisi grafik yang menggabungkan branding, konten, dan navigasi. Hampir semua referensi tentang desain web di tahun 90 -an (ketika saya merancang situs web pertama saya) berbicara tentang Warner Bros. Jam Laut Sejak 1996.

Jadi, saya tidak akan melakukan itu.

Merek seperti Nintendo menggunakan beranda mereka untuk memandu orang menguasai konten mereka sambil membuat pernyataan visual merek. Cheestrress menggabungkan grafik dengan navigasi, membuat saya bertanya -tanya mengapa kita tidak melihat desain seperti itu hari ini. Kulit ayam Menggabungkan pendekatan ini biasanya bersama -sama, menggabungkan ilustrasi kartun dengan bentuk terang ke spanduk fungsional dan kaya secara visual terbukti bermanfaat bukan berarti kebosanan.

Di tahun 90 -an, ketika saya mengembangkan grafik untuk situs web tersebut, saya mengirisnya dan meletakkan bagian -bagiannya ke dalam tabel atau sebagian besar peta gambar yang digunakan.

Tinjauan singkat tentang properti dan nilai

Mari kita pelajari dengan cepat. Tanggal peta gambar sepanjang jalan kembali ke HTML 3.2, di mana pertama-tama itu adalah peta sisi server, kemudian gunakan area yang dapat diklik yang ditentukan oleh area yang dapat diklik pada gambar, dan gunakan gambar map Dan area elemen. Mereka populer dalam grafik, peta, dan navigasi, tetapi dengan munculnya CSS, SVG, dan JavaScript, penggunaannya telah menurun.

<map> Tambahkan area yang dapat diklik ke bitmap atau gambar vektor.

<map name="projects">
  ...
</map>

Itu <map> menggunakan usemap milik:

<img usemap="#projects" ...>

Elemen -elemen ini dapat dipisahkan href Dan alt Properti, yang dapat ditingkatkan dengan ARIA untuk meningkatkan aksesibilitas:

<map name="projects">
  <area href="" alt="" … />
  ...
</map>

ini shape Properti menentukan bentuk area. Itu bisa asli circle atau rect Atau satu set poligon yang ditentukan oleh serangkaian absolut x Dan y koordinat:

<area shape="circle" coords=" ... />
<area shape="rect" coords=" ... />
<area shape="poly" coords=" ... />

Terlepas dari usia mereka, peta gambar masih membawa banyak manfaat. Mereka ringan dan membutuhkan (hampir) tidak ada javascript. Ada lebih banyak informasi tentang ini hanya dalam satu menit. Saat digunakan, mereka dapat diakses dan semantik altAria, kalau begitu title milik. Bahkan browser seluler modern mendukung gambar gambar meskipun berasal dari era yang berbeda.

Desain saya untuk Mike Worth mencakup beberapa elemen navigasi grafis, yang membuat saya bertanya -tanya apakah peta gambar masih merupakan solusi yang cocok.

Gambar dalam gambar

Mike ingin situs webnya memamerkan pekerjaan masa lalunya dan proyek -proyek yang ingin dia lakukan. Untuk membuat aspek desainnya dapat ditemukan dan menarik ini, saya membuat peta bagi orang -orang untuk menekan area peta untuk membuka modal. Peta berisi lingkaran bernomor, dan menekan lingkaran akan meningkatkan modalitasnya.

Ide pertama saya adalah menanamkan jangkar ke peta eksternal SVG:

<img src=" alt="Projects">

<svg ...>
  ...
  <a href=">
    <circle cx="35" cy="35" r="35" fill="#941B2F"/>
    <path fill="#FFF" d="/>
  </a>
</svg>

Metode ini bermasalah. Jangkar ini hanya aktif saat SVG dilapisi dan tidak <img> elemen. Namun, bahkan jika menentukan koordinatnya dapat melelahkan, peta gambar bekerja dengan baik. Untungnya, ada sejumlah besar alat yang tersedia, yang membuat koordinat yang menentukan lebih sedikit membosankan. Unggah gambar, pilih jenis bentuk, gambar bentuknya, dan salin penanda:

<img src=" usemap="#projects-map.svg">

<map name="projects-map.svg">
  <area href="" alt="" coords=" shape="circle">
  <area href="" alt="" coords=" shape="circle">
  ...
</map>

Pemetaan gambar bekerja dengan baik ketika gambar diperbaiki, tetapi gambar yang fleksibel memiliki masalah karena koordinat peta absolut, tidak relatif terhadap ukuran gambar. Membuat respons peta gambar membutuhkan sedikit javascript untuk menghitung ulang koordinat ini ketika gambar berubah dalam ukuran:

function resizeMap() 

["load", "resize"].forEach(event =>
  window.addEventListener(event, resizeMap)
);

Saya masih tidak senang dengan implementasi ini karena saya berharap seseorang dapat mengandalkan area peta yang lebih besar, bukan hanya lingkaran bernomor.

Setiap <path> Memiliki koordinat yang menentukan bagaimana ia menarik, dan relatif terhadap SVG ViewBox:

<svg width="1024" height="1024">
  <path fill="#BFBFBF" d="…"/>
</svg>

Di sisi lain, peta <area> Koordinat jelas merupakan koordinat paling kiri dari gambar, jadi <path> Nilai perlu dikonversi. Untungnya, Raphael Monnerat menulis Pathtopoints, sebuah alat yang benar -benar dapat melakukannya. Unggah SVG, pilih frekuensi titik, salin koordinat setiap jalur, dan tambahkan ke area peta coords:

<map>
  <area href="" shape="poly" coords=">
  <area href="" shape="poly" coords=">
  <area href="" shape="poly" coords=">
  ...
</map>

Lebih banyak pertanyaan tentang peta gambar

Diagram gambar hardcoded dan memakan waktu dan dapat dibuat tanpa alat. Mereka dapat menantang bahkan jika Anda menggunakan alat yang digunakan untuk menghasilkan grafik gambar, mengonversi jalur ke titik, dan kemudian menghitung ulang mereka menggunakan JavaScript.

<area> Elemen tidak terlihat, kecuali untuk perubahan kursor, dan mereka tidak memberikan umpan balik visual ketika seseorang tetap ada atau menekan tautan. Juga, tidak ada cara mudah untuk menambahkan animasi atau efek interaktif.

Tetapi untuk pemutus transaksi saya, nilai berbasis piksel dari grafik gambar tidak responsif secara default. Jadi, solusi alternatif apa yang mungkin mengimplementasikan peta saya menggunakan CSS, HTML dan SVG?

Jangkar yang terletak di peta saya tidak menyelesaikan masalah penentuan posisi berbasis piksel, juga tidak memberi saya area yang dapat diklik dari bentuk tidak teratur yang saya inginkan. Jangkar di dalam SVG eksternal juga tidak berfungsi dengan baik.

Tapi solusinya menatap wajahku. Saya menyadari bahwa saya perlu:

1. Buat jalur SVG baru untuk setiap area yang dapat diklik.
2. Membuat jalan ini tidak terlihat.
3. Bungkus setiap jalur di dalam jangkar.
4. Tempatkan jangkar di bawah elemen lain di ujung sumber SVG saya.
5. Ganti file eksternal ini dengan SVG inline.

Saya membuat satu set enam jalur yang lebih besar yang mendefinisikan area yang dapat diklik, masing -masing dengan tersendiri fill Cocokkan lingkaran bernomornya. Saya menempatkan setiap jangkar di ujung sumber SVG:

<svg … viewBox="0 0 1024 1024">

  <!-- Visible content -->
  <g>...</g>

  <!-- Clickable areas -->`
  <g id="links">`
    <a href="><path fill="#B48F4C" d="/></a>`
    <a href="><path fill="#6FA676" d="/></a>`
    <a href="><path fill="#30201D" d="/></a>`
    ...
  </g>
</svg>

Lalu, saya mengurangi jangkar itu opacity tiba 0 Dan menambahkan bagian kecil transition Ke keadaan hover penuh mereka:

#links a 
  opacity: 0;
  transition: all .25s ease-in-out;


#links a:hover 
  opacity: 1;

Menggunakan peta gambar <area> Sayangnya, tidak ada umpan balik visual, jangkar tertanam, yang isinya dapat menanggapi tindakan seseorang, mengisyaratkan apa yang akan terjadi, dan menambahkan detail dan kedalaman desain.

Saya dapat menambahkan kilau pada lingkaran bernomor untuk menyelaraskan dengan merek yang saya rancang untuk Mike. Atau, saya bisa memasukkan gambar, judul, atau sesuatu untuk melihat pratinjau mode popup:

<g id="links">
  <a href="…">
    <path fill="#B48F4C" d="/>
    <image href=" ... />
  </a>
</g>

Cobalah sendiri:

Desain Ekspresif, Teknologi Modern

Mendesain situs web Mike Worth memberi saya kesempatan untuk memadukan desain ekspresi dengan teknik pengembangan modern, dan meninjau kembali peta gambar mengingatkan saya tentang pentingnya peta gambar alat yang sangat saya sukai selama periode ini.

Pada akhirnya, peta gambar bukan alat yang tepat untuk situs web Mike. Tetapi menjelajahi mereka membantu saya memahami apa yang benar -benar saya butuhkan: cara untuk mendapatkan kembali ekspresi dan kepribadian desain situs web 90 -an menggunakan teknologi modern yang mudah diakses, ringan, responsif, dan semantik. Itulah tentang desain: memilih alat yang tepat untuk pekerjaan itu, bahkan jika itu kadang -kadang berarti melihat ke belakang dan bergerak maju.

Biografi: Andy Clarke

Sering dikenal sebagai salah satu pelopor desain web, Andy Clarke memainkan peran dalam mendorong batas -batas desain web dan dikenal karena desainnya yang kreatif dan menakjubkan secara visual. Karyanya telah menginspirasi banyak desainer untuk mengeksplorasi potensi penuh desain produk dan situs web.

Andy telah menulis beberapa buku terkemuka di industri, termasuk Di luar CSS,,,,, Desain web yang dimasakDan Panduan Artistik untuk Internet. Dia juga bekerja dengan perusahaan dari semua ukuran dan industri untuk mencapai tujuan melalui desain.

Kunjungi studio Andy, hal -hal, dan omong kosong dan periksa Killer Kontraknya, templat kontrak desain web yang populer yang dipercaya oleh ribuan desainer dan pengembang web.

Tinjau kembali peta gambar yang awalnya diterbitkan di beragampengetahuan, bagian dari keluarga Digitalocean. Anda harus menerima buletin.