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

ادامه معرفی و استعمال هر چه بیشتر دستگاه های موبایل چیزی است که سال 2012 را سال وب سایت کنش گرا خواهد کرد. طراحان و توسعه دهندگان وب به سوی استفاده از طرح های سیال حرکت خواهند کرد و به جای عرض ثابت و نیاز های رسانه ای به سوی طرح هایی سوق داده خواهند شد که به سایتها این امکان را می دهد تا در دستگاهها و صفحات با اندازه های مختلف دیده شوند.
2 – نوار ناوبری ثابت
همه ما در مواقعی سری به این تکنیک زده ایم، اغلب در وب سایت های شخصی یا وبلاگهای فردی. من شاهد افول زیاد این گرایش در 2010-2011 بودم ، اما تجدید حیات این گرایش در ماههای اخیر مشاهده می شود.
اگر وب سایت شما ناوبری عمده زیادی ندارد، باید تعدادی لینک کوچک ایجاد کنید. اما چرا آنها را همواره در دید کاربران قرار ندهیم؟ این کار عملکرد وب سایت را به صورت چشمگیری ارتقا می دهد و حتی به راحتی با طرح کلی صفحه یکدست می شود. ایده به این صورت است که نوار ناوبری و لینک های داخلی/ لوگو را به صورت قفل شده و ثابت قرار می دهید در حالی که بازدید کنندگان می توانند در محتوای صفحه حرکت کنند.

Jquery در مدل سازی این اثر بسیار سریع عمل کرده است و حتی بدون جاوااسکرسپت شما را قادر می سازد تا برخی کد های CCS را بکار گیرید تا جلوه ناوبری چسبنده را ایجاد نمایید. اغلب نوار ناوبری های ایستا در سال 2011، حرکت کاربر را صفحه به صفحه دنبال می کردند. با این حال در نمونه زیرSimon Wuyts نوار ثابت ناوبری را به مرحله ای جدید رسانده است.

شما هرگز به این فکر نمی کنید که برای سهولت نمایش، محتوای صفحه خود را در پنلی که شبیه نمایش اسلاید است، قرار دهید. این کار نه تنها نگرانی از رزولوشن صفحه را از بین می برد، بلکه سیستم ناوبری به سهولت به مرورگرهای موبایل انتقال می یابد و کار می کند. امیدوارم این تکنیک و همه مزیت هایش را در طراحی مجدد سایت خود در سال 2012 جدی بگیرید.
3 – حلقه ها
این گرایش در چند سال اخیر رو به زوال قرار داشته است و زمان بسیار اندکی است که در طراحی وب عملا مورد توجه قرار گرفته است. در دوره شکوفایی وب 2، طراحان بیشتر بر روی گرایش های دسکتاپ- محور مانند سایه برجسته (drop shadow) و گوشه های گرد تمرکز داشتند. اما حالا با CSS3 ایجاد این جلوه های کادر فانتزی کار ساده ای است.
بعلاوه شما می توانید حلقه ها و شکل ها را بدون نیاز به هیچ تصویری طراحی کنید. این ویژگی ها موجب شده تا طراحان به عکس ها از دید دیگری نگاه کنند. من دائما گزیده کارهای طراحان وب را بررسی می کنم و متوجه افزایش چشمگیر عناصر مدور شده ام. این الگوها می توانند به عنوان لینک های ناوبری، آیکن های پاورقی(footer)، یا حتی نمایش نمونه کارها استفاده شوند، مانند کار زیر:

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

4 – تصویر برداری بزرگ (Big Vector Art)
شخصیت های کارتونی (Goofy mascots) بزرگ اندازه ای که شما می توانید در سراسر وب ببینید، کم کم دارای برند می شوند. چند سال پیش شما نمی توانستید کارهای تصویری زیادی را پیدا کنید که در برندینگ وب ترکیب شده باشد. اما کیفیت استعداد طراحان وب به شدت ارتقا پیدا کرده. و من برای برند بازاریابی، ایده ای بهتر از یک موجود وکتور (تصویر بٌرداری vector-based) دوست داشتنی سراغ ندارم.

قیافه های بسیاری که به کمک موزیلا و فایرفاکس آمدند فقط نوک این کوه یخ را نشان می دهند. MailChimp یک نمونه خوب دیگر است. میمون پستچی بدنام علاوه بر سرتاسر وب در نرم افزارهای اندروید و iOS نیز شناخته شده است.

همچنین بیزنسمن کوچک Freelance Switch واقعا در ذهن من ماندگار شده. تعداد زیادی شخصیت بٌرداری منحصربفرد در طراحیشان وجود دارد. این نوع کار در قلمرو جدیدی از زیبایی شناسی وب سایت پذیرفته شده است. و اگر سال 2011 چیزی برای ارایه داشته این است که سال 2012 مملو خواهد بود از این لوگو های بٌرداری دوست داشتنی!
5 – منوهای چند ستونی
برخلاف نمونه قبلی ما، مواقعی وجود دارد که یک وب سایت باید تعداد زیادی لینک را مدیریت کند. قاعدتا نوع استاندارد ناوبری خیلی شلوغ و نامرتب خواهد شد مگر اینکه لینک ها را به نوارکناری منتقل کنید. اما بررسی تجربه کاربران نشان می دهد که نگه داشتن لینک های اصلی در بالای صفحات نتایج بسیار بهتری دارد.

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

برای اینکه با این حالت راحت باشید باید تمرین کنید. چند مقاله اخیر در این زمینه را چک کنید تا در زمینه گرایشها در ناوبری وب اطلاعات بیشتری کسب کنید. طراحان هر سال با ایده های جدید و با اشتیاق زیاد به میدان آزمایش خیز برمی دارند. واضح است که اصلاح ناوبری استاندارد سهم بسزایی در این زمینه دارد.
6 - انیمیشن jQuery/CSS3/HTML5
من همیشه کاربرد جلوه های jQuery در سطح کوچک را توصیه کرده ام. طراحی وب باید علاوه بر تجربه کاربر ، زیبایی شناسی فانتزی و انیمیشن های اضافی را نیز در برگیرد. خوشبختانه پیشرفتهای صورت گرفته در کتابخانه jQuery و ویژگی های CSS3 ، جلوه های عالی و با خط کدهای بسیار کمتری را ممکن ساخته است.
تنها در سال گذشته در وب من به تعدادی خودآموز در این زمینه برخورد کرده ام. jQuery پیشرو جلوه های مرورگر است اما متاسفانه حمایت 100 درصد نمی شود. از این رو استفاده از روش های قبلی به همراه CCS به این معنی است که وب سایت شما تقریبا با همه بازدیدکنندگان سازگار است و تجربه استثنایی را نیز فراهم می سازد.
7 – روبان ها و بنر
این طراحی توجه مرا در سال 2011 خیلی بیشتر جلب کرده بود. طراحان شروع کردند به نوشتن خودآموزهای ساده برای ایجاد روبان ها، بنرها، بوکمارک ها و دیگر انواع علائم نمایشی. ظهور گسترده اطلاعات رایگان نیز موجب شده ، طراحان بیشتری به استفاده از گرایشها روی آورند.

شگفت زده خواهید شد اگر بدانید که چه تعداد زیادی از وب سایتها از این شیوه تنها در 6 ماه اخیر استفاده کرده اند. اغلب برای آزمایش نسخه بتا از این روبان ها استفاده می کنند تا نسخه منتشر شده کنونی نرم افزار را دسته بندی کنند. بعلاوه شما می توانید روبان ها را دور دانلود های رایگان یا مقاله های ویژه در بلاگ ها ببینید. من تعدادی از روبان های دانلود PSD مورد علاقه ام را در ادامه آورده ام. آنها را چک کنید و چشمهایتان را برای دانلود های رایگان باز نگه دارید.
8 – فونت های سفارشی
کتابخانه آنلاین و رایگان فونت Typekit نسخه آزمایشی رایگانی را برای طراحان علاقه مند ارایه می کند. این ابزار با کمی جاوااسکریپت به شما اجازه می دهد تا هر فونت سفارشی را در قالب های CSS بنویسید. در سال 2011 این گرایش رواج یافت ، مخصوصا بین طراحان ورد پرس که تلاش داشتند بلاگ هایشان از بقیه متمایز باشد.
Typekit اما سیستمی باگدار بود و تا چند سال پیش پشتیبانی اندکی داشت. اکنون فونت های وب گوگل به آنها کمک کرده و به نظر می رسد که بیش از همیشه پرطرفدار شده اند! کافی است شما سراغ یک کتابخانه فونت های پشتیبانی شده بروید و گوگل کدی را که شما نیاز دارید تحویل می دهد. سپس هنگام دادن جزئیات خانواده فونت CCS در html شما به سادگی هر فونت را با نام ارجاع می دهید.

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

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

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