گرافیک در طراحی صفحات وب

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

البته گرافیک فقط نقش تزئینی و جانبی در این زمینه ندارد. گرافیک صفحات وب در مرحله اول باید سهولت دسترسی و نظم دهی به محتوا را تضمین کند و بعد به جنبه های تزئینی بپردازد. نوع و سایز فونت ها، رنگ ها، نحوه چینش محتوا و طراحی علائم باید با در نظر گرفتن محدودیت های برنامه نویسی و در راستای هدف اصلی وبسایت قرار بگیرند.
اما از آنجایی که طراحی وب نیاز به دانستن زبان های برنامه نویسی دارد، کمتر اتفاق می افتد که یک گرافیست این کار را انجام دهد. گرافیست ها اغلب از دیزاین به شیوه کدنویسی رویگردانند و در مقابل مهندسان کامپیوتر و برنامه نویسان وب، بدون توجه به اهمیت موضوع، خود طراحی صفحات را به عهده می گیرند. از آنجایی که حوزه کاری و دغدغه مهندسان شیوه های برنامه نویسی و استفاده از پایگاه های داده است، اکثر وبسایت های طراحی شده از لحاظ سیستم برنامه نویسی در سطح قابل قبول، اما از نظر استانداردسازی نحوه نمایش محتوا و طراحی گرافیک در حد بسیار ضعیفی قرار دارند. از طرفی، سایت های طراحی شده توسط گرافیست ها (هر چند محدود) عاری از نکات کلیدی و کاربردی در حوزه برنامه نویسی هستند و غالبا حجم زیادی برای دانلود می گیرند.
برای مثال در چند سال اخیر و با گسترش روزافزون وبسایت های دولتی، شاهد سطح گرافیکی بسیار پایینی در اکثر اینگونه وبسایتها هستیم. این به خاطر آن است که مسئولان معمولا طراحی و راه اندازی وبسایت را به مهندسان متخصص حوزه برنامه نویسی وب می سپارند و از اهمیت گرافیک سایت و طراحی وب غافل می مانند. به طوری که بسیاری از کاربران اینترنت هنگام مراجعه به اینگونه وبسایتها دچار نوعی تشویش بصری می شوند.
راه اندازی سایت به طور کلی به دو حوزه کاملا متفاوت تقسیم می شود: طراحی استاتیک و برنامه نویسی داینامیک. طراحی استاتیک شامل طراحی گرافیک سایت، لی آوت، تعیین رنگها، فونتها و یونیفرم تمام صفحات می باشد که تماما باید تحت زبان برنامه نویسی HTMLو CSS اجرا شود. معمولا پیش طرح سایت در نرم فزاری مثل فتوشاپ به طور کامل طراحی، و بعد تحت کدهای استاتیک و با استفاده از تصاویر و انیمیشنهای فلش اجرا می شود. حوزه دوم مربوط به برنامه نویسی داینامیک سایت می شود. می توان گفت برنامه نویسی داینامیک، مربوط به پشت صحنه سایت می شود و مربوط به دریافت یا ارسال اطلاعات از پایگاه های داده می باشد. به عنوان مثال سیستم های مدیریت محتوا (CMS) سیستمهای داینامیکی هستند که کاربر می تواند با استفاده از آنها به راحتی وبسایت خود را به روز کند.
در طراحی حرفه ای یک وبسایت، باید طراحی استاتیک سایت به عهده گرافیستی قرار بگیرد که به کدهای استاتیک و محدویت های آنها کاملا مسلط باشد و نیز به استانداردهای رایج در طراحی وب و شیوه ها و سبک های نوین آشنایی داشته باشد. در مرحله بعد، یک برنامه نویس داینامیک می تواند محتوای سایت را از پایگاه های داده به قالب استاتیک سایت انتقال دهد.
به عنوان مثال به مقایسه وبسایتهای دو دانشگاه تربیت معلم سبزوار و دانشگاه هاروارد می پردازم. با یک نگاه کلی به تقسیم فضاها و لی آوت وبسایت هاروارد متوجه انسجام و ترکیب بندی و انتخاب رنگ صحیح آن می شویم. عناوین خبری به همراه تصاویرشان اسلاید می شوند تا از شلوغی صفحه کاسته شود و همچنین به راحتی می توانیم از منوی بالای سایت به سه بخش مجزای اداری، آموزشی و معرفی دانشگاه دست پیدا کنیم. در مرکز وبسایت تصویر نسبتا بزرگی از یکی از نماهای دانشگاه دیده می شود که با تیتر و توضیحات مناسبی کنار آن همراه است. حجم این تصویر نزدیک بیست کیلوبایت است و ضمنا ساختار کدنویسی استاتیک آن بر مبنای CSS است که سرعت بارگزاری را بسیار کمتر می کند.
ساختار وبسایت دانشگاه تربیت معلم سبزوار، سه ستونی با یک هدر است که جزو سنتی ترین ساختارهای طراحی است. گزینه های منوی سمت راست بی هیچ ترتیب خاصی زیر هم چیده شده اند و در نهایت به دو لینک به سایت های خارجی رسیده اند. ستون سمت چپ کاملا بلااستفاده مانده و فقط تعداد بازدید در آن درج شده است. در ستون میانی نیز ابتدا یک لینک درشت بدون تصویر به خبر یک همایش گذاشته شده که حتی رنگ آن نیز رنگ پیش فرض است. بخش آخرین اخبار دانشگاه بدون تاریخ و تصویر است و بخشی تحت عنوان سایر زیر آن قرار دارد که جایگاه آن در نقشه سایت معلوم نیست. در پیشانی سایت، چند عکس ریز از سبزوار و یک عکس ناقص و تار از ساختمان اداری در میان تزئینات زائد درج شده. حجم این تصویر نزدیک چهل کیلوبایت است و ضمنا ساختار کدنویسی استاتیک آن برمبنای Tableاست که در سرعت بارگذاری تاثیر منفی دارد.
البته باید یادآوری کنم که ما دانش و تخصص مربوط به این حوزه ها را (هرچند محدود) داریم و اما از اهمیت و کاربرد آنها غافلیم. دانشجویان گرافیک ما طراحی را محدود به پوستر می دانند و آموزشکده ها نیز از هنر دیجیتال به عنوان هنری منحرف و دست دوم یاد می کنند! در حالی که نیاز امروز فعالیت در عرصه های جدید و گاه تلفیقی را می خواهد و همچون هزاران سال گذشته، از گرافیک، انعطاف پذیری و کاربردی بودن را انتظار دارد.
انتظار می رود هم گرافیست ها خود را از رویکرد سنتی نسبت به طراحی رها کنند و هم مدیران و مسئولان به گرافیک و اهمیت آن در طراحی سایت ها توجه داشته باشند