گاهی می توان به پروژه های موجود در وب سایت ها نگاه کرد و به سادگی طرز فکر طراحان را درک کرد. نکات طراحی این ماه با انتخاب رنگ های خاص ، کنار گذاشتن روش سنتی تیترهای قوی و خاص و انیمیشن های تاریک که کمی اسرار آمیز هستند ، مفهوم را می رسانند.
نظر شما چیست؟ آیا آمادگی گزینه های تایپوگرافی کمتر ، جزئیات پردازی دقیق و الگوهای خاص و زیبا را دارید؟ شاید دوست داشته باشید چند نمونه از این پروژه های طراحی را ببینید.
در ادامه با نکات طراحی رو به رشدی آشنا می شوید که در طرح های این ماه به چشم می خورند:
1- رنگ های رنگین کمانی
وقتی واژه ی”رنگ های رنگین کمانی” به گوش می خورد ، به احتمال زیاد اولین چیزی که به ذهن می رسد یک طراحی نه چندان جالب است. نمونه های زیادی از پروژه های پر زرق و برق که با استفاده از الگوهای رنگی رنگین کمانی انجام شده اند وجود دارند که در آنها زیاده روی شده و راستش را بخواهید طراحی های فاجعه باری دارند.
اما رنگ های رنگین کمانی امروزی فرق دارند و دیگر فاجعه بار نیستند. آنها با کلاس و ساده بوده و میزان رنگ کافی و مناسبی برای پروژه های متعدد ایجاد کرده اند. الگوهای رنگین کمانی فقط مخصوص وب سایت های کوچک نیستند، برندهای بزرگی از جمله Github Universe Conference ، Southwest Airlines و London Grammer همه از الگوهای رنگین کمانی جالب توجهی استفاده کرده اند.
جالب تر این است که هر طراحی از همان مفهوم رنگی مشابه ، اما به روش های بسیار متفاوت استفاده می کند.
- عناصر متنی رنگین کمانی در یک محیط تاریک: Github از یک محیط زیبای تاریک ساده با متون رنگین کمانی و عناصر رابط کاربری خاص و همچنین از اطلاعات کلیدی (مثل تاریخ) به عنوان دکمه اقدام (CTA) اصلی (فروش بلیط) برای جلب توجه ، استفاده کرده است. استفاده از روش رنگین کمانی ، ساده و نامحسوس است ، در عین حال این روش حس فرصت طلبی و مثبت گرایی را در کاربر ایجاد می کند. به نظر می آید که این روش ترکیب صحیح و مناسبی برای تشویق و ترغیب کاربران به ثبت نام در یک کنفرانس را ارائه می دهد.
- خطوط هوایی Southwest روش دیگری را با استفاده از عناصر پشت زمینه ی رنگین کمانی و متن های موجود در یک قسمت روشن تر به کار گرفته است. طراحی رنگین کمانی برای سایتی که دارای محتوای خسته کننده ای می باشد ، یک مزیت دیداری ایجاد می کند. رنگ ها به مطالعات موردی روح می بخشند و بیشتر کاربر را تشویق و ترغیب به کلیک کردن روی آنها می کنند.
- London Grammer از یک گوی رنگین کمانی بزرگ برای جلب توجه کاربران به شرکت در تجربه ی ترکیب صدا به وسیله نرم افزار Spotify استفاده می کند. این حباب رنگین کمانی با استفاده از یک انیمیشن آهسته حرکت می کند و حس شناور بودن روی آب را القا می کند. رنگ ها حرکت کرده و ادغام می شوند و این چیزی است که اگر حواستان نباشد می تواند کل روز شما را مشغول و محو خود کند. جنبه ی تولید عنصر رنگی نیز جالب است ، اما قطعا رنگ است که در ابتدای کار توجه کاربر را جلب می کند.
2- کنار گذاشتن تیترهای قوی و خاص
استفاده از تیترهای بسیار بزرگ همراه با تصویر یا اسلایدر سال هاست که در طراحی وب سایت ها استفاده می شود. اما روشی وجود دارد که با استفاده از آن می توان از الگوی تکراری استفاده ی بیش از حد از اسکرول ماوس برای رسیدن به مطلب اصلی و وجود عناصر بیش از حد در وب سایت پرهیز کرده و حس پیچیدگی کمتری را تجربه کرد. نتیجه ی چنین روشی ، استفاده از تیترهای سفید یا رنگی دارای بخش های جالب توجه و خنده داری است که در اطراف آنها شناور هستند. در مورد این روش ، سلایق و نظرهای مختلفی وجود دارند. برخی از موارد بصری جالب هستند ، اما در کل به نظر می آید کمبود جلب توجه کاربران و همچنین کمبود دکمه های اقدام (CTA) از جمله نکات منفی این روش هستند.
چیزی که در مورد کنار گذاشتن تیترهای خاص جالب است این است که کوچکترین تلاش باعث جلب توجه کاربران می شود. این روش فرق دارد. سوال اینجاست که آیا این روش به اندازه ی کافی پیام و منظور را می رساند ، یا آیا کاربران به وب سایتی با عناصر بصری کمتر واکنش مثبت نشان می دهند یا خیر؟
باید صبر کنیم و سرانجام این روش را ببینیم. چون این روش تازه در مراحل ابتدایی تکاملش به سر می برد. طراحان آماده اند تا کاری متفاوت با تیتر صفحه ها انجام دهند (و آنها را قابل درک تر کنند). این تکرار در پروژه ها تازه اولین قدم به سمت روشی نوین است. برخی طراحان ممکن است توسط ترکیبات یا عناصر عجیبی که در بیشتر این طرح ها وجود دارند گیج شوند. باید صبر کنیم و ببینیم این روش پس از این مرحله به کجا می رسد ، اما ارزش توجه و صبر کردن را دارد.
3- انیمیشن های تاریک
در حال حاضر این روش جالب ترین روش برای طراحی سایت حرفه ای است: افکت های متحرک تاریکی که در بالای طرح های رنگی تاریک اعمال می شوند. طرح تاریک در تاریک ، اسرار آمیز است. این روش از نظر دیداری جالب است و واقعا باعث جلب توجه کاربر شده و کاربر را با طراحی درگیر می کند.
علاوه بر این ، این طرح با روش های مختلفی قابل پیاده سازی است. هیچ قانون یا پیش فرضی برای سایز یا نوع انیمیشن یا افکت ها وجود ندارد. هر کدام از نمونه های زیر به روش های مختلفی از افکت های انیمیشن تاریک استفاده می کنند که همه دارای نوعی تعامل بین حرکت موس و افکت های درخشان ایجاد شده برای غافلگیری و جلب توجه می باشند (برای درک این مورد بهتر است روی لینک ها کلیک کنید). اگرچه این طراحی واقعا جالب به نظر می رسد ، اما همچنین ممکن است چالش و مشکل هایی نیز داشته باشند. همه ی کاربران از چنین محیط تاریکی لذت نمی برند. این طراحی ممکن است در همه نوع شرایط محیطی عملکرد خوب و مناسبی نداشته باشد. این طراحی ها قطعا در کامپیوترهای خانگی نسبت به دستگاه های کوچکتر عملکرد بهتری دارند.
اما این روش برای طراحانی که می خواهند متفاوت به نظر برسند و حس و حال خاصی را القا کنند جایگاه ویژه ای دارد.
همچنین جذابیتی در ترکیب رنگ های تاریک و عدم وجود رنگ های متنوع وجود دارد که توجه شما را جلب می کند (به نوعی غیر قابل توصیف است).
برای حداکثر بهره مندی از مزایای روش تاریک در تاریک ، حتما از تنوع و مغایرت کافی در عناصر تاریک استفاده کنید تا اطمینان حاصل کنید که عناصر قابل دیده شدن بوده و اینکه انیمیشن ها و تحرکات قابل تشخیص هستند. برای هر پروژه از ترکیبات مشکی غنی با ترکیبات مغایر استفاده کنید تا حس و حال مناسب را القا کنید.
اگرچه نمونه های زیر همه کاملا دارای کمبود رنگ هستند ، ولی با این حال ، شما از عنصر مغایر دیگری به جز رنگ سفید برای تاکید بر نکات کلیدی استفاده کنید. (یک دکمه اقدام رنگی با داشتن عناصر مشکی مغایر بیشتر جلب توجه می کند).
نکته ی مهم دیگر درباره ی این روش ساده بودن انیمیشن های به کار رفته است. هیچکدام از تحرکات نباید بیش از حد پیچیده باشند. سادگی و یکنواختی حرکت باید همانند تغییر رنگ در یک جعبه مداد رنگی باشد ، سادگی و عدم تغییر ناگهانی کلید رسیدن به موفقیت در این روش طراحی است.
نتیجه
تغییر در استفاده از رنگ ها که در روش های این ماه مشاهده شد ، هم جالب و هم تاثیرگذار بود. رنگ های رنگین کمانی بسیار جالب هستند و پیشرفت خوبی داشتند ، در حالی که الگوهای سیاه و سفید فضای بهتری برای تامل و واکنش فراهم می کنند. هنر انتخاب رنگ واقعا با حس و حال طراحان در مورد پروژه رابطه ی مستقیم دارد.
منبع: webdesignerdepot.com