4 مورد از بهترین ایده ها برای طراحی فوتر وبسایت

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

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

در این مقاله ، من در مورد اهمیت فوتر وبسایت و اینکه چگونه می توان از آنها برای کمک به کاربران وبسایت در یافتن آسان تر محتوای مورد نظرشان استفاده کرد صحبت خواهم کرد. همچنین در مورد برخی از بهترین ایده هایی که در هنگام طراحی فوتر وبسایت باید در ذهن داشته باشید نیز صحبت می کنم – اهمیت فوتر با یک مگا منو (منوهای مدرن در طراحی سایت حرفه ای) یکسان است.

چرا فوتر وبسایت مهم است؟

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

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

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

بسته به اینکه چه نوع وبسایتی ایجاد کرده اید و اهداف شما چه هستند ، باید برخی موارد زیر را نیز در فوتر وبسایت خود درج کنید:

• نقشه ی سایت
• شرایط و حقوق کپی رایت
• لینکی به سمت شرایط و قوانین استفاده از سایت
• شرایط حفظ حریم خصوصی
• اطلاعات تماس
• ابزارک های رسانه های اجتماعی
• ثبت نام از طریق ایمیل
• بخش جستجو
• وضعیت بازدید های سایت
• تگ ها و دسته بندی ها
• جوایز و مجوز ها
• همکاران و اعضا
• نظرات مشتریان
• آخرین مقاله ها
• رویدادهای پیش رو
• یک ویدئوی تبلیغی از سایت
• فایل صوتی
• دکمه دعوت به عمل (CTA)

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

4 مورد از بهترین ایده ها برای طراحی فوتر وبسایت

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

حالا ، اجازه دهید به مرحله ی بعدی برویم و برخی از بهترین اعمالی که می توانید برای طراحی فوترهایی با ظاهر و کارایی عالی به کار ببندید را بررسی کنیم.

1- درج عناصر تبلیغ برند

فوتر وبسایت شما گاهی فرصت فوق العاده ای برای تقویت و تبلیغ برندتان در ذهن بازدیدکننده ایجاد می کند. می توانید از این فضا برای انتقال ارزش برند به مشتری استفاده کنید.

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

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

Hustle Panda یک مثال عالی از ساده نگاه داشتن طراحی و استفاده از غالب رنگ های مشابه با طراحی سایت و بهره مندی از سایز های مختلف لوگو در گوشه و کنار سایت است. استفاده ی مکرر از طرح پاندا به بازدیدکنندگان پیام برند آنها را یادآوری می کند.

2- ایجاد جاذبه

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

در وبسایت بِهِل از فرم تماس در قسمت فوتر وبسایت استفاده کردیم

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

3- افزودن دکمه های رسانه ی اجتماعی

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

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

اگر به فوتر سایت خوب دقت کرده باشید این نکته کاملا در آن مشهود است.

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

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

4- ایجاد سلسله مراتب مسیریابی

یکی از بهترین کارهایی که می توانید با مگا فوتر خود انجام دهید درج لینک ها در محبوب ترین محتوای سایت است.

تازه کاران می توانند لینک های محبوب ترین صفحات یا دسته بندی ها را به صورت ستونی قرار دهند. دسته بندی لینک ها زیر تیتر ها و عناوین مناسب ، خود یک امتیاز مهم محسوب می شود.

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

اگر پروژه نهال صنعت پاسارگاد را مشاهده کنید ، می بینید در قسمت فوتر وبسایت از این ایده استفاده کرده ایم.

فوتر وب سایت TrueCar به 4 ستون تقسیم شده است – هر ستون دارای یک عنوان دسته است. این کار آنها باعث می شود بازدید کننده به آسانی آنچه را که می خواهد بیابد. همچنین متوجه می شوید که تیترهای هر ستون به گونه ای طراحی شده اند که به راحتی توجه بازدید کننده را جلب کنند.

GitHub نیز با قرار دادن مهم ترین صفحات سایت در چند ستون ، همین کار را انجام داده است. قرار دادن عنوان مناسب برای هر ستون ، باعث می شود یافتن صفحه ی مورد نظر برای کاربران آسان تر شود.

نتیجه

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

من برخی از عناصر مختلفی که می توانید در فوتر سایت خود به کار ببرید را لیست کردم و برخی از بهترین ایده هایی که می توانید در آن به کار ببرید را نیز توضیح دادم. شناسایی اهداف خود و سپس افزودن عناصر مناسب و صحیح در فوتر وبسایت می تواند برای رسیدن به اهداف اصلی شما کمک بزرگی باشد.

منبع: webdesignerdepot.com

3 نمونه رو به رشد و ضروری از نکات طراحی

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

در ادامه با نکات طراحی رو به رشدی آشنا می شوید که در طرح های جدید به چشم می خورند:

1- رنگ های رنگین کمانی

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

اما رنگ های رنگین کمانی امروزی فرق دارند و دیگر فاجعه بار نیستند. آنها با کلاس و ساده بوده و میزان رنگ کافی و مناسبی برای پروژه های متعدد ایجاد کرده اند. الگوهای رنگین کمانی فقط مخصوص وب سایت های کوچک نیستند، برندهای بزرگی از جمله Github Universe Conference ، Southwest Airlines و London Grammer همه از الگوهای رنگین کمانی جالب توجهی استفاده کرده اند.

جالب تر این است که هر طراحی از همان مفهوم رنگی مشابه ، اما به روش های بسیار متفاوت استفاده می کند.

• عناصر متنی رنگین کمانی در یک محیط تاریک: Github از یک محیط زیبای تاریک ساده با متون رنگین کمانی و عناصر رابط کاربری خاص و همچنین از اطلاعات کلیدی (مثل تاریخ) به عنوان دکمه اقدام (CTA) اصلی (فروش بلیط) برای جلب توجه ، استفاده کرده است. استفاده از روش رنگین کمانی ، ساده و نامحسوس است ، در عین حال این روش حس فرصت طلبی و مثبت گرایی را در کاربر ایجاد می کند. به نظر می آید که این روش ترکیب صحیح و مناسبی برای تشویق و ترغیب کاربران به ثبت نام در یک کنفرانس را ارائه می دهد.
• خطوط هوایی Southwest روش دیگری را با استفاده از عناصر پشت زمینه ی رنگین کمانی و متن های موجود در یک قسمت روشن تر به کار گرفته است. طراحی رنگین کمانی برای سایتی که دارای محتوای خسته کننده ای می باشد ، یک مزیت دیداری ایجاد می کند. رنگ ها به مطالعات موردی روح می بخشند و بیشتر کاربر را تشویق و ترغیب به کلیک کردن روی آنها می کنند.
• London Grammer از یک گوی رنگین کمانی بزرگ برای جلب توجه کاربران به شرکت در تجربه ی ترکیب صدا به وسیله نرم افزار Spotify استفاده می کند. این حباب رنگین کمانی با استفاده از یک انیمیشن آهسته حرکت می کند و حس شناور بودن روی آب را القا می کند. رنگ ها حرکت کرده و ادغام می شوند و این چیزی است که اگر حواستان نباشد می تواند کل روز شما را مشغول و محو خود کند. جنبه ی تولید عنصر رنگی نیز جالب است ، اما قطعا رنگ است که در ابتدای کار توجه کاربر را جلب می کند.

2- کنار گذاشتن تیترهای قوی و خاص

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

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

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

3- انیمیشن های تاریک

در حال حاضر این روش جالب ترین روش برای طراحی سایت حرفه ای است: افکت های متحرک تاریکی که در بالای طرح های رنگی تاریک اعمال می شوند. طرح تاریک در تاریک ، اسرار آمیز است. این روش از نظر دیداری جالب است و واقعا باعث جلب توجه کاربر شده و کاربر را با طراحی درگیر می کند.

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

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

همچنین جذابیتی در ترکیب رنگ های تاریک و عدم وجود رنگ های متنوع وجود دارد که توجه شما را جلب می کند (به نوعی غیر قابل توصیف است).

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

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

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

نتیجه

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

منبع: webdesignerdepot.com