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