این مطلب رو مدتهاست می‌خوام بنویسم، ولی کلمات مناسب رو براش پیدا نمی‌کنم. حالا هم تلاشم رو می‌کنم که منظورم رو با کلماتی که می‌تونم منتقل کنم. پیشاپیش عذر میخوام اگر مطلب گنگ هست.

اگر شما هم طراح وب هستید، یا حداقل به تکنولوژی علاقه دارید و اخبار و مقالات مربوط بهش طراحی و توسعه رو در اینترنت دنبال می‌کنید، حتما می‌دونید که این روزها چیزهایی وجود دارن به اسم Trend یا مُد در طراحی.

الان اواخر عمر مد طراحی تخت (Flat Design) هست که شامل چیزهایی مثل استفاده از رنگ‌های مات، سایه‌های بلند (Long Shadow)، عدم وجود گوشه‌های گرد و ... هست. قبل از طراحی تخت، دوران طراحی پارالاکس بود و بعد با مد شدن طراحی تخت، طراح‌ها شروع کردن به نکوهش کسایی که از پارالاکس در طرح‌هاشون استفاده می‌کنن. ترندها تا یه جایی خوب و مفیدن. باعث میشن که طراح‌ها هر روز خلاقیت‌های جدید به خرج بدن و سعی کنن که با بقیه متفاوت باشن، و اینکه کلا رنگ و روی وب رو عوض می‌کنن. اما سبک‌ها و ترندها می‌تونن بیشتر از اینکه مفید باشن، به شدت مخرب باشن:

تمام وب‌سایت‌ها شبیه همدیگه شدن!

ترند/سبک‌های کنونی

چند تا از ترندهایی که طی ۲ سال اخیر خیلی محبوب شدن و تقریبا همه ازشون استفاده می‌کنن رو اینجا توضیح می‌دم و سعی می‌کنم بگم که چه مشکلی در مورد هرکدوم وجود داره.

طراحی تخت

همونطور که بالاتر توضیح دادم، طراحی تخت (Flat) به طرح‌هایی گفته می‌شه که چند خاصیت منحصر به فرد دارن (گاهی همه باهم، گاهی جداگانه): عدم استفاده از سایه‌ها و گردینت‌ها، عدم استفاده از گوشه‌های گرد، استفاده از تصاویر ساده/تک‌رنگ و اشکال هندسی به جای تصاویر چندلایه، چند‌بعدی یا چندرنگ، استفاده از تناژ رنگ منحصر به فرد و مات که تقریبا توی تمام طرح‌ها مشابه هستن، استفاده از یه فرم سایه به اسم Long Shadow که در واقع یه سایه طولانی و بزرگنمایی شده در یک جهت هست.

من قبلا در مورد طراحی تخت توضیحاتی دادم که بد نیست مطالعه کنید. این نوع طراحی وقتی درست و به جا و در زمان مناسب و ترکیب مناسب ازش استفاده بشه، بسیار سبک زیبایی هست، ولی با بیشتر شدن تعداد طرح‌هایی که هر روز بدون توجه به محتوای طرح، از این سبک استفاده نادرست می‌کنن، تبدیل شده به کابوسی که انگار هیچوقت پایانی نداره، تمام سایت‌ها هم رنگ شدن!

طراحی فلت خوبه، ولی به شرطی که طراح‌ها خودشون رو وابسته به قوانین عجیب نکنن. مثلا هیچ ایرادی نداره که یه دکمه سایه، بعد یا گردینت داشته باشه و تو طرح فلت استفاده بشه. قوانین رو خود طراح تعیین می‌کنه نه ترندهای اینترنتی. بعد از فلت واژه جدیدی به وجود اومد به اسم «Almost Flat» به معنی نیمه تخت. گوگل تقریبا توی تمام طراحی‌های جدیدش از این سبک استفاده میکنه که توش عناصر کاملا فلت نیستن و از سایه و گردینت‌های خفیف هم استفاده می‌شه.

تصاویر تار

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

بازی با اسکرول در صفحه

ترندی که من شخصا باهاش مشکل دارم، بازی با اسکرول در صفحات وب هست. حتما شما هم طرح‌هایی رو دیدید که وقتی در حال اسکرول در صفحه هستید، به جای اسکرول شدن و بالا رفتن عادی محتوی، اتفاقات دیگه‌ای می‌افته. مثلا وقتی دارید اسکرول می‌کنید، اسکرول بار ثابت هست و به جاش یه تصویر وسط صفحه می‌چرخه، تغییر حالت می‌ده یا پدید/ناپدید می‌شه و بعد از مدتی اسکرول کردن اون قسمت آزاد می‌شه و وارد قسمت بعدی می‌شید.

به این کار می‌گن Scroll Hijacking یا دزدیدن اسکرول؛ و در کل کار پسندیده‌ای نیست، بخاطر اینکه کاربرای اینترنت، سالهاست «اسکرول‌کردن» رو یاد گرفتن و این عمل ساده، تبدیل شده به یکی از عاداتشون، یه چیزی مثل راه رفتن. برای اینکه درک کنید Scroll Hijacking چقدر ناراحت‌کننده هست، تصویر کنید که وقتی در حال راه رفتن در پیاده‌رو هستید، مسیرتون مارپیچ یا زیگ‌زاگ بشه و یه قدم در میون مجبور بشید از روی یه چاله بپرید یا مثلا یه جا وایستید و برای ادامه مسیر مجبور شید با کسی دعوا کنید! مختل کردن اسکرول در صفحه با اینکه برای ما برنامه‌نویس‌ها از لحاظ فنی چشمگیر و جذاب هست، برای کاربرها بیشتر از اینکه مفید باشه، ضرر به همراه داره.

تایپوگرافی متفاوت

من قبلا در مورد تایپوگرافی در وب مطالبی نوشتم. تایپوگرافی متفاوت و جذاب یکی از چیزهایی هست که برای من شخصا خیلی در طراحی اهمیت داره. اما تایپوگرافی متفاوت، وقتی جذاب هست، که با محتوی طرح همخوانی داشته باشه و روند مطالعه کاربر و دسترسیش به محتوی رو زیر سوال نبره. خوشبختانه با وجود تعداد زیادی قلم مختلف در دنیا که برای وب بهینه‌سازی شدن، در زمینه تایپوگرافی پیشرفت‌های خوبی شکل گرفته. ولی متاسفانه در ایران اینطور نیست.

یکی از مهم‌ترین دلایل این مشکل در ایران، عدم وجود تعداد کافی قلم بهینه‌سازی شده برای وب هست. بخاطر همین خیلی از طراح‌ها توی «تمام» طرح‌هاشون از قلم «یکان» استفاده می‌کنن. یکان یکی از قلم‌هایی هست که بخاطر فرم هندسی و ساده‌ای که داره، بهتر می‌شه در وب ازش استفاده کرد و چیزی معادل قلم Helvetica در فارسی هست (از لحاظ مقیاس استفاده و مقدار کاربرد نه از لحاظ ظاهری و خوانایی). بیشتر طراح‌ها بدون توجه به قوانین تایپوگرافی (سایز مناسب قلم برای خوانایی، فاصله خطوط از هم، طول خطوط و تعداد حروف در هر خط، هم‌تراز کردن یا نکردن متون) از قلم یکان و چند قلم محدود دیگه استفاده می‌کنن و در نتیجش خوانایی بیشتر وب‌سایت‌های فارسی از بین می‌بره. دیدید خیلی از وب‌سایت‌هایی که متن‌هاشون پررنگ و طولانی هستند و خطوط به هم چسبیدن و خواناییشون خیلی پایین هست.

پارالاکس

طراحی پارالاکس یکی از تکنیک‌هایی هست که حدود ۲ سال پیش به اوج محبوبیتش رسید، اونقدر که صدها راه و روش برای پیاده‌سازیش در وب به وجود اومد و مقالات مختلفی در موردش نوشته شد و تقریبا تمام طراح‌های وب حداقل یک‌بار از این تکنیک در طرح‌هاشون استفاده کردن.

پارالاکس هم یه جور بازی با اسکرول صفحه هست که عموما به این شکله که وقتی شما به یک جهت، مثلا پایین، حرکت می‌کنید، بخشی از تصاویر یا محتوی با یک سرعت متفاوت (تندتر یا کندتر) در جهت مخالف اسکرول شما حرکت می‌کنن تا جلوه بصری پارالاکس به وجود بیاد. ممکنه که این حرکت در جهت مخالف اسکرول نباشه و در جهت موافق ولی با یک سرعت متفاوت باشه.

این روش طراحی حالا در دنیا به سرعت داره محبوبیتش رو از دست میده و همون کسایی که بیشتر از همه از پارالاکس استفاده می‌کردن، حالا دارن از دیگران برای استفاده از پارالاکس انتقاد می‌کنند. پارالاکس تکنیک طراحی جذابی هست ولی مثل طراحی تخت، باید به شکل و در جای مناسب ازش استفاده کرد تا اون جلوه بصری، تاثیرش رو روی مخاطب بذاره.

سایت مدیوم توی هدر مقالات از یه پارالاکس خیلی ملایم استفاده کرده که نشون میده پارالاکس هم در جای مناسب میتونه جذاب باشه.

فریم‌ورک‌ها

یکی از مهم‌ترین اتفاقات چند سال گذشته، پیدایش فریم‌ورک‌های مختلف برای طراحی مثل Bootstrap و Foundation بود. فریم‌ورک‌ها یه مجموعه از اجزای از پیش طراحی شده و قوانین ثابت هستن که به طراح‌ها اجازه می‌دن به سرعت و بدون دردسر طراحی هر جزء یک طرح، به نتیجه مورد نظرشون برسن و کار رو در کوتاه‌ترین زمان ممکن آماده کنن.

فریم‌ورک‌ها ذاتا مفید هستن، مثلا برای ساخت یک نمونه اولیه (پروتوتایپ)، محیط مدیریت وب‌سایت که فقط برای تیم مدیریتی وب‌سایت در دسترس هست، وب‌سایت‌های داخلی سازمان‌ها و موارد مشابه، خیلی به صرفه‌تر و عاقلانه‌تر هست که به جای طراحی از پایه، از یه فریم‌ورک مثل بوت‌استرپ یا بهتر، Foundation (یا فریم‌ورک‌های دیگه مثل Semantic UI استفاده بشه.

مشکل اصلی از اونجا شروع شد که طراح‌ها بدون تغییر دادن اساسی فریم‌ورک‌ها، از اون‌ها در طرح‌های اصلیشون استفاده کردن، برای اینکه کارشون به سرعت انجام بشه و خیلی دردسر طراحی نداشته باشن. در نتیجه کل اینترنت به سرعت پر شد از سایت‌هایی که تا حدود زیادی به هم شبین بودن. و الان هم هستن. و این خیلی دردناک هست که وقتی وب‌سایتی رو باز کنی و ببینی که شبیه تمام وب‌سایت‌های دیگست. طراح‌ها با وجود این فریم‌ورک‌ها تنبل شدن و دیگه به خودشون زحمت خلاقیت و طراحی نمی‌دن.

یکی از اتفاقات ناراحت‌کننده اخیر این بود که وب‌سایتی به نام DesignModo به تقلید از طراحی Layervault یه فریم‌ورک طرح کرد به اسم Flat UI که روی فریم‌ورک بوت‌استرپ سوار می‌شه و طراح‌های تنبل و ذوق‌زده، به سرعت در تمام طرح‌هاشون از این فریم‌ورک استفاده کردن و بازهم خیلی از وب‌سایت‌ها شبیه هم شدن. حتی اون‌هایی که از خود Flat UI استفاده نکردن، از رنگ‌هاش توی طرح‌هاشون استفاده کردن و وب‌سایت‌هایی که ظاهرشون شبیه بوت‌استرپ نبود، رنگ این فریم‌ورک رو به خودشون گرفتن.

انیمیشن‌های CSS3

مرورگرها روز به روز پیشرفته‌تر می‌شن و از امکانات جدید HTML5 و CSS3 پشتیبانی می‌کنن. یکی از مهم‌ترین قابلیت‌های CSS3 امکان استفاده از انیمیشن‌های روان و جذاب هست، کارهایی که قبلا خیلی سخت با جاواسکریپت قابل انجام بودن، حالا به راحتی و با یه خط کد CSS امکان‌پذیر شدن و برای همین خیلی از طراح‌ها دوست دارن توی طرح‌هاشون از انیمیشن استفاده کنن.

اما این علاقه به جایی رسیده که توی بیشتر وب‌سایت‌های امروزی، نشانگر ماوس رو روی هرچیزی در صفحه ببرید، حرکت می‌کنه! حتی چیزهایی که هیچ کاری انجام نمی‌دن و از لحاظ معنایی اهمیت خاصی ندارن، انیمیشن دارن و تکون می‌خورن. این استفاده نابجا از انیمیشن ۲ مشکل اساسی به همراه داره: ۱- تمرکز کاربر با وجود این همه عنصر متحرک در صفحه از بین می‌ره و نمی‌تونه روی محتوای اصلی به درستی تمرکز کنه و ۲- سرعت اجرای صفحه توسط مرورگر و پیمایشش توسط کاربر به شدت پایین میاد. هربار که کاربر اسکرول می‌کنه، و محتوای صفحه از زیر نشانگر ماوسش رد می‌شن، مرورگر مجبوره پیکسل به پیکسل همه چیز رو دوباره در صفحه ترسیم کنه و این موضوع شاید در کامپیوترهای قوی به چشم نیاد، ولی کامپیوترهای ضعیف‌تر رو حسابی اذیت می‌کنه.

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

فیلم‌های تکرار شونده در پس زمینه

فیلم‌های کوتاه ۱۰ ثانیه‌ای که به جای عکس به عنوان پس‌زمینه در وب‌سایت‌ها استفاده می‌شن، یکی از ترندهای جدید در طراحی هستن. این فیلم‌ها تقریبا بعد از معرفی شدن سرویس Vine در طراحی بکار برده شدن و هنوز هم ازشون استفاده می‌شه.

این یکی از ترندهای جذاب هست، ولی باز هم داره به سرعت داره ازش استفاده سوء میشه، تموم وب‌سایت‌ها دارن پر می‌شن از فیلم‌هایی که همش تکرار می‌شن و مانع تمرکز روی محتوی هستن.

اهمیت طراحی

مرورگرها هر روز درحال پیشرفته‌تر شدن هستن و کارهای جدیدتر و پیچیده‌تری رو می‌شه باهاشون انجام داد خیلی خیلی‌هاشون چشم‌نواز هم هستن و از لحاظ فنی جذاب. ولی آیا ما برای مرورگرها طراحی می‌کنیم یا برای آدم‌ها؟ این سوالی هست که هر طراحی باید از خودش بپرسه.

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

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

به جای دنبال کردن ترندهای روز، کاربرد هر سبک در طراحی رو یاد بگیریم و درکشون کنیم که بتونیم جایی که بهشون نیاز هست ازشون استفاده کنیم. ما به عنوان طراح باید مینیمالیسم رو درک کنیم و بدونیم که کجا نباید مینیمال بود، کاربرد رنگ‌ها و روان‌شناسیشون رو بدونیم، قواعد تایپوگرافی رو یاد بگیریم و رعایتشون کنیم، بتونیم از طبیعت و محیط اطرافمون و آدم‌ها برای طراحی الهام بگیریم و از هر سبک متناسب با کاری که می‌خوایم بکنیم بهره ببریم.

طراحی زیر مجموعه هنر هست، و در هنر، این ذوق، سلیقه، دانش و شناخت هنرمند از جهان پیرامونش هست که باعث خلق اثر هنری می‌شه. هیچ قانونی وجود نداره که بگه شما نمی‌تونید در طراحی فلت از تصاویر تار، گردینت، گوشه گرد و سایه ملایم استفاده کنید، این شما هستید که طرحتون رو خلق می‌کنید، و شما هستید که باید بدونید که مخاطبتون به چی نیاز داره.

حرف آخر

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

<div class="videoWrapper"><iframe src="https://player.vimeo.com/video/12793996?title=0&amp;byline=0&amp;portrait=0" height="364" width="640" allowfullscreen="" frameborder="0"></iframe>
</div>

ولی مهم‌ترین چیز اینه که «اصل» باشیم. خودمون باشیم. از کار دیگران الهام بگیریم، ایده بگیریم، ولی خودمون رو محدود نکنیم به مد روز. مدها میان و میرن و این طرح و اثر ماست که باید با گذر زمان اصالتش رو حفظ کنه. تاحالا فکر کردید که چرا بعضی محصولات بعد از گذشت ده‌ها سال از زمانی که طراحی شدن، هنوز هم جذابن؟

<style type="text/css">.size-full{
    max-width: 100%;
    height: auto;
}.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin-bottom: 1em;
}.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}</style>