اندی کلارک (Andy Clarke)، نویسنده‌ی کتاب پر فروش Transcending CSS: The Fine Art of Web Design، طی مقاله‌ای خلاقانه در وب‌سایت (معرکه‌ی) ۲۴ ways، به معرفی کتاب‌های کمیک (کمیک استریپ) به عنوان منبع الهام بخش برای طراحان وب می‌پردازد. سپس دو نمونه از این ترفند‌های الهام بخش را که طراحان کتاب‌های کمیک از آن بهره می‌برند، به عنوان اثباتی بر مدعای خود پیش روی می‌آورد. این ترفند‌ها، شامل استفاده‌ی نویسنده و یا طراح کتاب‌های کمیک از ابعاد کادرها (پنل‌ها و یا قطعات که تصاویر را در بر می‌گیرند) برای بیان سرعت (و تراکم) وقوع حوادث و ایجاد امکان تمرکز بیشتر خواننده بر روی کادرهای با ابعاد بزرگ، و همچنین استفاده از کادرهای بدون قاب در بین کادرهای قاب‌دار در جهت جلب توجه بیشتر خواننده بر کادر بدون قاب، می‌باشد. من البته این جا قصد تکرار این نکات ظریف را ندارم و توصیه می‌کنم که مقاله‌ی اندی کلارک را قبل از ادامه‌ی نوشته‌ی من مطالعه فرمایید. قصد دارم دو نکته‌ی ظریف از نوع استفاده‌ی طراحان وب از این دو ترفند بیان کنم.

۱

استفاده از فونت (تایپ) بزرگ در صفحات وب، از جمله‌ی روش‌های خلاقانه‌ی طراحی وب است که در چند سال اخیر با معرفی هر چه بیشتر اصول تایپوگرافی (Typography) و طراحی چهارخانه‌ای (Grid design) به طراحی وب، شیوع فراوانی پیدا کرده است. نمونه‌های فراوانی از آن را در وب‌سایت Smashing Magazine (همچنین این نوشته) خواهید یافت. اندی کلارک در مقاله‌ی خود به ترفندی که طراحان کتاب‌های کمیک در استفاده از کادرهای با ابعاد بزرگ به کار می‌گیرند اشاره می‌کند و تاثیری را که این ترفند بر خوانندگان این نوع از کتاب‌ها دارد بیان می‌کند. وجود کادرهای بزرگ در میان کادرهای کوچک در کتاب‌های کمیک سبب می‌گردد که چشم‌های خواننده (خودآگاه و یا ناخودآگاه) زمان بیشتری را صرف مطالعه‌ی تصاویر و نوشته‌های داخل آن کادر بکند. در واقع نویسنده با این ترفند موفق می‌شود که عامل زمان را نیز وارد روایت خود از داستان بکند و از این طریق وقوع حوادث در مدت زمان طولانی را به خوانندگان خود تلقین کند. چنان‌که چندین کادر کوچک کنار هم (که اساسا برای مطالعه‌ی سریع طراحی می‌شوند)، زمان سریع وقوع حوادث و فشردگی آن را تلقین خواهند کرد. اما تاثیر مهمی که این وقفه در تعقیب خط روایی داستان بر خوانندگان دارد، ایجاد فرجه‌ی زمانی بیشتر برای تفکر خواننده بر داستان و در صورت نیاز فراهم آوردن امکان حدس و گمان در خواننده در حین مطالعه‌ی کتاب می‌باشد. فرصتی که به گمان من در داستان‌هایی که بصورت متنی منتشر می‌شوند به سختی فراهم می‌آید (شاید بی‌دلیل نباشد که اکثر داستان‌هایی که بصورت کمیک منتشر می‌شوند روایتی معما گونه و یا پلیسی دارند). همان‌گونه که پیش از این نیز گفتم این ترفند در حوزه‌ی طراحی وب نیز گاها (بخصوص در وب‌سایت‌های موسوم به وب ۲٫۰) مورد استفاده قرار می‌گیرد.

اما گاهی وقت‌ها طراحان وب که از دلایل وجود این گونه شیوه‌های طراحی (استایل‌ها) آگاهی کافی ندارند آن را بگونه‌ای نامناسب به کار می‌گیرند. یک نمونه از این استفاده‌های نابجا، عناوین و یا لوگو (برند) با فونت بزرگ در طراحی صفحات وب می‌باشد — که البته خود من نیز در طرح اولیه‌ی همین وبلاگ مرتکب این اشتباه شده بودم. در صورتی که در حالت معمول هیچ نکته‌ی تامل برانگیز در عنوان سایت‌ها وجود ندارد، اساسا نیازی بر مکث خواننده بر لوگوی وب‌سایت نیست و این ترفند البته هیچ سودی در جهت افزایش کارخوری (Usability) وب‌سایت‌ها ندارد؛ هر چند همگان بر این نکته واقفیم که لوگوی سایت اهمیت زیادی در ایجاد تصویری ماندگار در ذهن بازدیدکنندگان سایت‌ها دارد، ولی فکر نمی‌کنم که نکته‌ی مذکور منافاتی با این مهم داشته باشد. بنابر این بهتر است که این ترفند در صورتی که دلایل کافی در استفاده از آن وجود داشته باشد مورد استفاده‌ی طراحان قرار گیرد. تعداد زیادی از وب‌سایت‌هایی که دچار این اشتباه شده‌اند را در همان دو نوشته‌ی Smashing Magazine که در بالا آورده‌ام، خواهید یافت.

۲

همواره وب‌سایت ادوبی.کام، با آن طرح جسورانه‌اش به عنوان سایت رسمی یک شرکت معتبر نرم‌افزاری، من را به شگفتی واداشته است. برای این که منظورم را به خوبی متوجه شوید، کافی است فقط ترکیب رنگ این سایت را با سایت‌های شرکت‌هایی مثل IBM، سان و مایکروسافت مقایسه بکنید. بهتر است توجه شمار را به این نکته‌ی شگفت جلب بکنم که وب‌سایت ادوبی.کام تنها وب‌سایت شرکتی است که تا این اندازه جسورانه برند (لوگو) خود را در طراحی نادیده می‌گیرد، طوری که اگر لوگوی سایت را که در منتها الیه گوشه‌ی بالا، سمت راست صفحه کنار موتور جستجو جای گرفته است نادیده بگیریم (حتی سمت راست برای یک سایت به زبان چپ-به-راست جای مناسبی برای قرار گیری لوگو نیست)، می‌توان گفت که سایت رسمی شرکت ادوبی فاقد لوگو می‌باشد! توجه داشته باشید که در نمایش‌گرهای عریض که صفحات با عرض زیاد نمایش داده می‌شوند، همین لوگو نیز بکلی از کادر اصلی سایت که در انتهای سمت چپ صفحه‌ی نمایش قرار می‌گیرد، خارج می‌گردد. اما نکته‌ای که می‌خواهم این جا بدان اشاره بکنم، طرحی است که اندی کلارک از کتاب‌های کمیک استریپ الهام می‌گیرد و به نظر می‌رسد که طراحان باهوش ادوبی نیز بر آن واقف‌اند.

اندی کلارک در مقاله‌ی خود به وجود کادر‌های بدون قاب (Border) در کتاب‌های کمیک در میان کادرهای قاب‌‌دار اشاره می‌کند و به بیان این نکته که چگونه نبود قاب محدود کننده به دور این کادرها، سبب می‌گردد که آن کادر در مقابل دیگر بخش‌های صفحه مشخص‌تر به نظر آید و چنین به نظر رسد که گویی آن کادر — که لزوما ابعاد متفاتی با کادرهای دیگر ندارد — تمام صفحه را در بر گرفته است. در صورتی که روال معمول در طراحی وب ایجاد کادر به دور المان‌های مهم و در خور توجه می‌باشد؛ خود اندی کلارک نیز به این نکته‌ی قابل تامل اشاره دارد. در طرح سایت ادوبی نیز — به خصوص در میان صفحات فرعی سایت مثل صفحه‌ای که به فلش پلیر اختصاص یافته است — متوجه می‌شویم که قسمت سربرگ (Header) وب‌سایت خارج از قابی که سایر بخش‌های صفحه را در بر می‌گیرد، قرار گرفته است. همین امر سبب گشته است که قسمت سربرگ و بخصوص المان پراهمیت نویگیشن (Navigation) در مقابل دیگر قسمت‌های سایت، با وجود جای کمی که اشغال می‌کند پر رنگ‌تر به نظر رسد. در طرح زیبای سایت فونت شاپ نیز شاهد استفاده‌ی زیرکانه از همین ترفند هستیم.

*عکس کمیک استریپ از کتاب Concrete اثر Paul Chadwick؛ بر گرفته از همان مقاله‌ی اندی کلارک.

۷ نظر برای “الهام از کمیک استریپ در طراحی صفحات وب: دو نکته‌ی تامل برانگیز”

1. یونس
   ۵م اسفند ۱۳۸۷ در ۱۱:۳۹ ق.ظ

   کجایی مهندس؟

2. نیما
   ۷م اسفند ۱۳۸۷ در ۶:۳۳ ب.ظ

   سلام حالت چطوره؟

   پست خیلی مفیدی نوشتی ممنون بابته نوشتنش حسابی مطلب جدید یاد گرفیتم :)

3. بهمن
   ۱۰م اسفند ۱۳۸۷ در ۴:۳۱ ق.ظ

   دوست عزیز سلام
   به تازگی ( تقریبا ۱ ساعت هست ) که بخش مقالات سایت گاتریا http://www.gatriya.com را راه اندازی کردم و قصد داریم یه منبع خوبی از مقالات وب تهیه کنیم .. از مطلب اخیر شما هم استفاده شده است که البته این کامنت در راستای کسب اجازه از شما می باشد .. اگر مایل هستید که از مطالب مفید شما در بخش مقالات گاتریا استفاده بشود ( در ضمن می توانید سیاست کاری این بخش را در این جا بخوانید http://www.gatriya.com/gcms/?part=page&id=۷ و در صورت نیاز می توانیم بیشتر هم با هم صحبت کنیم ) لطفا اطلاع دهید . در ضمن ما یک مبلغی خیلی ناچیز را به این بخش اختصاص داده ایم که بیشتر به عنوان انگیزه است نه پاداش کاری که شما انجام می دهید .
   با تشکر
   بهمن

4. یاسین الوندی
   ۱۰م اسفند ۱۳۸۷ در ۲:۴۳ ب.ظ

   @ بهمن خواهش می‌کنم؛ این نظر لطف شماست. همین که مقاله‌ی من رو قابل دونستید که جزوی از این طرح قابل تحسین‌تون باشه، بسی مایه‌ی خوش‌وقتی من هست. هزینه‌ای را هم که به کار من اختصاص دادید، به پاس تلاش‌تون پیش خود نگه دارید، به امید این که در آینده مقالات پرباری رو در بخش مقالات سایت gatriya.com بخوانیم و استفاده بکنیم.

5. ياسر
   ۱۱م اسفند ۱۳۸۷ در ۹:۵۸ ق.ظ

   جالبه كه اين آقاي اندي كلارك توي يكي از توئيت هاش به اين نوشته شما واكنش نشون داده
   http://twitter.com/Malarkey/statuses/۱۲۵۳۶۵۸۳۳۹

6. یاسین الوندی
   ۱۱م اسفند ۱۳۸۷ در ۱۱:۲۵ ق.ظ

   @ یاسر ممنون یاسر جان از این که خبر دادی. در این تویت و این تویت جواب سوالشون رو دادم.

7. rozan
   ۱۰م فروردین ۱۳۸۸ در ۱:۴۴ ق.ظ

   salam mamnonam be khatere matneton kheli be dardam khord bebakhshid mitonid matalebe bishtari dar rabete ba amozeshe photoshop ba tekye bar web to sit bezarin man kheili niaz daram mamnon

در ارتباط با این نوشته نظر بدهید