وقتی صحبت از طراحی خلاقانه سایت میشه ناخداگاه فکر آدم به سمت طرح های عجیب و غریبی میره که در حد پروتوتایپ در پورتفلوی طراحان دریبل، بیهنس یا پینترست باقی میونه و هیچ وقت اجرایی نمیشه! یا افکت های فضایی و عجبیبی که در فیلم های هالیوودی میبینیم! اما خلاقیت می‌تونه خیلی ساده تر از این چیز ها باشه به سادگی استفاده از یک ترکیب رنگ جدید و البته متفاوت در طراحی! در این مقاله ابتدا با مفهوم خلاقیت و طراحی خلاقانه آشنا می‌شیم و پس از اون با مثال های عینی چند راهکار کاربردی برای طراحی خلاقانه سایت رو بررسی می کنیم.
اگر همین سوال رو گوگل کنید متوجه می‌شید که به تعداد آدم های روی کره زمین پاسخ برای این سوال وجود داره! اما طبق گفته ویکی‌پدیا خلاقیت یا آفرینندگی توان ساختن یا خلق نمودن چیزی نو است، راهکاری نو برای حل یک مشکل، یک روش یا یک دستگاه نو، یا یک شیء یا فرم نو هنری.
بسیار از طراحان سایت منظور از خلاقیت در طراحی سایت را معادل اولین قسمت جمله فوق قلمداد می‌کنند در حالی که وقتی در طراحی صحبت از خلاقیت میشه منظور گزاره دوم یعنی ” راهکاری نو برای حل یک مشکل” است.
خلاقیت محتوایی یعنی ارایه یک محتوا به شکلی متفاوت و جذابتر برای مخاطب که می‌توان به اشکال گوناگونی مانند خلاقیت در موضوع، لحن گفتگو، شیوه روایت، روش ارایه محتوا(درگیر کردن کاربر) و …. اون رو اجرا کرد؛
دیگه همه می‌دونیم که باید در انتخاب عناوین واژه های مثل “چرا”، “چگونه”، “چطور” یا اعداد و پسوند های “تر” و “ترین” رو استفاده کنیم. اما وقتی قرار است کمی خلاق تر باشیم قضیه کمی سخت تر میشه. چند راهکار برای کاربرد خلاقیت در انتخاب یک موضوع وجود داره؛
امروزه به لطف شبکه های اجتماعی مختلف یک جمله یا یک تکه کلام ممکن است تا مدت‌ها بر سر زبان ها باشد. استفاده از این میم‌های کلامی در موضوع محتوا یکی از اشکال خلاقیت محتوایی است.
انسان‌ها ذاتا علاقه مند به داستان سرایی و داستان شنیدن هستن شروع کردن محتوا با یک داستان کوتاه علاوه بر آماده ساختن ذهن مخاطب اون رو درگیر محتوا میکنه و باعث میشه کاربر با اشتیاق بیشتری محتوا رو دنبال کنه. حتی برای جذابتر شده محتوا میتونید بخش روایی داستان رو قبل از محتوای اصلی قرار بدید و پایان بندی داستان رو در پایان محتوا.
شروع کردن یک محتوا با یک پرسش یا چالش مخاطب را روی محتوا قفل میکنه. انسان ها عاشق حل کردن معما و چالش ها هستند . اگر شما با یک پرسش مطلب خود را شروع کنید، تقریبا می توانید مطمئن باشید که مخاطب تا انتها، مطلب شما رو دنبال میکنه به شرطی که پاسخ و یا راه حل رو در انتهای محتوا قرار بدید.
گاهی اگر همونطور که صحبت می‌کنید، بنویسید، حس صمیمیت و همدلی رو در مخاطب بیشتر میکنه و شانس این که مطلب شما رو تا انتها دنبال کنه بیشتر میشه ( مثل همین مقاله).
اعداد و ارقام همیشه برای آدم‌ها کسل کننده و گاهی ترسناک است (البته به جز قشر خاصی از انسان ها!) برای ارایه ارقام و اعداد میتونید از مقیاس های جذاب و البته آشنا استفاده کنید تا علاوه بر ایجاد جذابیت، این اعداد و ارقام رو برای مخاطب قابل درک تر بکنید. این جمله رو رو ببینید : در اروپا هر انسان به طور متوسط سه تن زباله در ماه تولید می‌کند” و با این جمله مقایسه کنید: ” در اروپا هر آدم به طور متوسط معادل وزن دو ماشین سمند در ماه زباله تولید می‌کند” (واقعا؟)
برای محتوا و مقالات خود فقط از متن استفاده نکنید. از تصاویر متحرک(gif)، نمودار های جذاب و میم ها تصویری در بین محتوای خود استفاده کنید.
حتی اگر برای یک شرکت رسمی و بزرگ یا کسب و کار حرفه ای تولید محتوا می‌کنید صرفا ادبیاتی ننویسید و از تکه شوخی های ریز و جملات محاوره ای کوتاه غافل نشید. گاهی لازمه برای شکستن فضا و درگر نگه داشتن مخاطب با محتوا کمی از شکل رسمی و ادبیات دور شد.
وقتی از طراحی سایت خلاقانه صحبت می‌کنیم معموملا جنبه های بصری سایت بیشتر در نظر تداعی میشه، تصاویر خلاقانه که با انیمیشن های جذاب یک یکی وارد صحنه می‌شن افکت‌های انیمیشنی، تصاویر سه بعدی و یا تصاویر تعاملی همه و همه بخشی از خلاقیت بصری هستند. خلاقیت بصری مثل یک چاقوی تیزه همون اندازه که مفید و کار راه اندازه می‌تونه مشکل ساز هم باشه. اگر قراره از انیمشین استفاده کنیم باید به مدت زمانش هم دقت کنیم. به هر حال مخاطب برای تماشای انیمیشن به سایت ما نیومده! یا اگر قراره از فونت خاصی استفاده کنیم باید به خوانایی آن هم توجه کنیم و …
در ادامه با چند راهکار برای خلاق تر کردن ظاهر سایت رو بررسی می‌کنیم؛
معمولا از کد‌های svg در ایجاد تصاویر تعاملی استفاده میشه. منظور از تصاویر تعاملی، تصاویری هستند که نسبت به کنش ها کاربر با سایت واکنش‌های خاصی نشان می‌دهند. برای درک بهتر صفحه نخست سایت مانایید رو نظاره کنید. معمولا برای ایجاد تصاویر تعاملی از فایل‌های ویدیویی یا کد ها svg با کمک جاوا اسکریپت استفاده می‌کنند.
ما وقتی بچه بودیم و می‌رفتیم سینما یکی از قسمت های جذاب و مسحور کننده وقتی بود که اون پرد‌ه‌های بلند کنار می رفت. همیشه جای سوال بود برام که چه کسی این پرده ها رو کنار میزنه. خوبه که در سایت هایی که طراحی می‌کنیم از همین تکنیک استفاده کنیم. استفاده از انیمیشن های پیش بارگذاری (preload) و ظاهر شدن المانها با انیمیشن، دو تا راهکار عالی برای کنار زدن پرده هاست. (دقت کردید که تو این بخش یکی از تکنیک های خلاقیت محتوایی رو استفاده کردیم؟ )
سعی کنید در سایت‌هایی که طراحی می‌کنید از تصاویر اختصاصی استفاده کنید نه تصاویر آماده یا در حد امکان تصاویری با تم رنگی مشابه ایجاد کنید. این کار علاوه بر افزایش اعتبار، سایت شما رو متمایز و منحصر به فرد میکنه در مورد آیکون ها و سایر المان های وکتور هم همینطور. از آیکونها با رنگ بندی متناسب با تم کلی سایت و استایل یکسان استفاده کنید. اگر هم از آیکونهای آماده استفاده می‌کنید، سعی کنید آیکونهای هم خانواده یا استایل مشابه داشته باشند.
اگر با نرم افزارهای گرافیکی آشنا باشید با قدرت فیلترها هم آشنایید. اگر هم آشنا نیستید حتما در اینستاگرام با فیلتر تصاویر آشنا شدید. به کمک Css3 علاوه بر ایجاد فیلتر روی تصاویر میتونید اونها رو به اشکال مختلف برش بزنید (با استفاده از قابلیت ماسک) با ترکیب ویژگی هایی مانند فیلتر تصاویر و ماسک میتونید تصاویر رو از شکل معمول چهار گوش خارج کنید و وب‌سایت‌هایی با ظاهری متفاوت تر و جذاب تر طراحی کنید و به قول دوستان حسابی بترکونید!
در کنار رنگ، تصاویر، متن و فرم ، یکی از اجزای طراحی که معمولا جدی گرفته نمیشه فضای سفیده. فضای سفید علاوه بر نظم بخشید به طراحی، به عنوان ابزاری برای دسته بندی و همچنین زیبا سازی طرح نیز کاربرد داره اما نباید در کاربرد آن زیاده روی کرد چون عملا کاربردش رو از دست میده. استفاده به اندازه و حساب شده از فضای سفید باعث میشه طراحی شما برای مخاطب جذاب تر و قابل فهم تر باشه. البته منظور از فضا سفید الزاما فضایی با رنگ سفید نیست بلکه منظور یک فاصله فضایی بدون هیچگونه المان طراحی است.
احتمالا الان شما هم مثل خودم یکم گیج شدید و با خودتون بگید عجب طراحی تو طراحی شد. پس اجازه بدید قبل از پرداختن به خلاقیت در طراحی سایت، با مفهوم و فرآیند طراحی بیشتر آشنا بشیم. طراحی به مجموعه‌ای از فرآیندها در جهت ایجاد یک روش یا بازنگری در روش‌های موجود و خلق روشی نوین برای حل یک مشکل، گفته می‌شود. بنابراین به زبان خیلی ساده طراحی یعنی پیدا کردن یک راه‌حل نو یا بهتر برای حل یک مشکل است. برای درک بهتر پیشنهاد می‌کنم مقاله تفکر طراحی رو مطالعه کنید.
بنابراین اگر بخواهیم از طراحی استفاده کنیم ابتدا باید مشکل را مشخص کنیم و سپس راه حلی برای آن پیدا کنیم یا راه حلی تازه و بهتر برای رفع آن پیدا کنیم.
تا اینجا متوجه شدیم طراحی یعنی چی. اما چطور به صورت خلاقانه از آن در طراحی وب سایت یا هر رابط کاربری دیگه استفاده کنیم. برای طراحی خلاقانه سایت به کمک طراحی ابتدا باید مشکلات طراحی را شناسایی کنیم و سپس راه حلی برای رفع هر کدام بیابیم.
این مشکلات شامل محتوا، ظاهر بصری، چگونگی کارکرد و چیدمان اجزای سایت میشه در واقع خلاقیت در طراحی یعنی یافتن چهارچوبی متفاوت تر برای چیدمان اجزا در کنار هم و قرار دادن آن در فضای در دسترس به طوری که علاوه بر حفظ زیبایی و انسجام طرح، کاربردی هم باشه در ادامه سعی می‌کنیم چند نمونه از این نوع خلاقیت را بررسی کنیم.
احتمالا شما هم برای یک بار شده به یک صفحه لاگین برخورد کردید که قسمتی که باید نام کاربری یا رمز ورود رو وارد کنید، پشت صفحه کلید پنهان میشه. (یکی از اعصاب رنده کننده ترین اتفاقات). شما میتونید با جایگذاری مناسب ورودی ها این مشکل رو حل کنه. همچنین میتونید با تنظیم کردن درست ویژگی type در ورودی ها نوع مناسب صفحه کلید را برای کاربر تنظیم کنید.
چند وقت پیش در یک سامانه اینترنتی قصد ثبت نام داشتم اما هر بار ورودی های مورد نیاز رو تکمیل می‌کردم و دگمه ثبت نام رو می‌زدم عملا هیچ اتفاقی نمی افتاد. در یکی از آخرین تلاشها در حالی که آماده انفجار بودم متوجه شدم طراح سایت، بنده خدا با کاربر رودر بایستی داشته و یک خطاب کوچولو رو پایین صفحه و فقط برای چند ثانیه نمایش میداده. اکلیلی شدم و کیبورد رو…
مشکل این بود که یکی از قوانین مربوط به انتخاب رمز ورود رو رعایت نکرده بودم اما محل قرار گرفتن پیام خطا واقعا دور از دید بود. به عنوان طراحی باید به کار بفهمانید کجا اشتباه کرده و این کار را می‌توانید با ایجاد پیام های شفاف و صریح یا المانهابی بصری مانند تغییر رنگ قسمتی که خطا اتفاق افتاده مشخص کنید. اینجا جاییه که دقیقا باید خطای کاربر رو به رویش بیارید.
حتما شما هم به سایت‌هایی برخوردید که عکس‌های اونها به دلیل حجم زیاد یا قابلیت Lazy loading دیرتر از بقیه‌ی محتوا باگذاری و نمایش داده می‌شن و باعث میشه که محتواهای بعد از اون مدام دچار پرش بشه ( این کار اعصاب کابر رو واقعا ریز ریز میکنه) و کاربر برای خوندن محتوا دچار مشکل میشه. یک راه حل برای بر طرف کردن این مشکل بارگذاری پیش ساختار( خودم ترجمه کردم) یا همون Skelton است. این ویژگی علاوه بر اینکه مشکل پرش سایر المانها موقع لود شدن یک المنت رو حل میکنه نقش یک لودینگ رو هم بازی میکنه.
خلاقیت هیچ حد و مرزی نداره اما باید در به کاربردن اون به ویژه در طراحی سایت دقت کرد و حد اعتدال رو رعایت کرد. امیدوارم این مقاله بتونه ایده ای به شما بده تا بتونید موتور خلاقیتتون رو به کار بیاندازید. اگر شما هم در تجاربتون موردی از کاربرد خلاقیت داشتید. میتونید از طریق کامنتها با ما به اشتراک بگذارید.
