۴۰ مثال برای طراحی صفحه تماس با ما

۴۰ مثال برای طراحی صفحه تماس با ما

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

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

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

۰۱. دوستانه و مفید بودن


هیچ چیز نمی تواند بهتر از یک سلام یا Hello بزرگ، عمل کند. سایت Infinum توانسته است به خوبی مفید و دوستانه بودن را با یک صفحه تماس مناسب، که برای استفاده آسان و بسیار خوانا است، نشان دهد. این سایت، با سوال ” چه کمکی به شما می توانم بکنم؟” و از کاربران خواسته است که بر روی دکمه های “پیوستن Join Us” یا “Hire us ما را استخدام کنید” یا برای هر کار دیگر، ایمیل بزنید.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۰۲. قرار دادن شعبه های جهانی دیگر


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۰۳. ساده کردن پروسه ی ارتباط برقراری


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۰۴. شخص سازی آن با عکس


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۰۵. تشویق کردن کاربران برای گفتن سلام


از اینکه کاربران می دانند، شما دوست دارید که از آن ها جوابی بشنوید، اطمینان حاصل کنید، برای این کار می توانید یک Call to action مانند ” سلام کنید Say Hello ” به این صفحه اضافه کنید. این کال تو اکشن، به خوبی بر سایت Hello Innovation نشسته است، هرچند که کلمه سلام در نام کمپانی است، اما شرکت از آن به درستی استفاده کرده و Hi را نیز در ایمیل آدرس قرار داده است. این کار شما را برای گفتن سلام، ترغیب نکرده است؟

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۰۶. استفاده از یک عکس مرتبط


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۰۷. خلق طرحی به یادماندنی

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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۰۸. براساس برند بودن


از اینکه ظاهر و حس و حال صفحه تماس شما، بر اساس برند شرکت باشد، اطمینان حاصل کنید. سایت زیبا و حرفه ای Boone Selections پالت رنگی ظریف، تایپوگرافی های محدود، و طراحی پیمایشی، را برای منعکس کردن کسب و کار وارد کننده نوشیدنی استفاده کرده است.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۰۹. نشان دادن نحوه یافتن شما به کاربران


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۰. ایجاد یک صفحه دستوری


درحالیکه سایت Deux Huit Huit، هیچ نوع جزئیات تماسی را به کاربر در صفحه ی خود نداده است، با این حال، در تماس بودن با شرکت را برای کاربر، ساده و مشتاقانه ساخته است.☺” “say Hello یک کال تو اکشن دوستانه است که با یک صفحه ی دستوری Propmt که در ابتدای آن نوشته است ‘Dear Deux Huit Huit.’ همراه شده است.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۱. اضافه کردن ساعت های شروع به کار


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۲. استفاده از فونت خاص

سایت Panache از یک فونت گیرا برای گروه ‘Travaillons Ensemble,’ استفاده کرده، که یک کال تو اکشن برای تشویق کردن کاربران برای برقراری ارتباط و کار کردن با همدیگر است. طراحی کلی از رنگ های روشنی که به خوبی درباره ی آنها فکر شده است، استفاده کرده و جزئیات تماس شامل ایمیل، آدرس، شماره تلفن، فرم تماس و لینک های صفحات اجتماعی را در آن قرار داده است.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۳. استفاده از یک پالت رنگی شاد


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۴. خلق تصویرسازی مناسب با هویت سایت


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۵. استفاده از اشکال ساده


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۶. بکاربری فرم تماس را برای برقراری ارتباط


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۷. استفاده از پالت تک رنگ


صفحه ی تماس با ما برای سایت Joseph A Avoue از یک متن سفید ظریف استفاده کرده که به خوبی در فضای درونی یک دایره در پس زمینه ی صورتی رنگ قرار گرفته است. بسیار ساده، و کلاسیک، با قابلیت خوانایی بالا.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۸. شوخ طبع بودن


بازدیدکنندگان را بخوانید. طراحی یک صفحه تماس با مای بی ربط و یا خنده دار مانند Bio-Bak این کار را می تواند بکند. ‘Insert letter combinations’ “وارد کردن متن نامه”، به بازدید کنندگان توصیه کرده که کجا تایپ کرده، در عین حال دستورالعملی را به آن ها برای تایپ کردن داده است: ” یک سری کلید روی کیبورد هست، آن را فشار دهید تا یک سری کلمه ایجاد شود، مانند اردک یا طوطی”

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۱۹. پرکردن مکان های خالی


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۰. هویت دهی به شعبه های دیگر در جهان


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۱. معرفی کردن حرفه


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۲. قرار دادن فیلم در پس زمینه


MoodBoord یک استودیوی تولید فیلم است و پس زمینه ی صفحه تماس آن، یک فیلم کلوزآپ بسیار حرفه ای و زیبا از تایپ کردن یک تایپیست می باشد.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۳. استفاده از لایه گرید


استفاده از لایه گرید، به خوبی در صفحه ی تماس سایت Urban Influence، برای نظم دادن به فضای صفحه و اطلاعات درون آن، انجام شده است. جزئیات تماس در بالا سمت چپ قرار داشته و فرم تماس در بالا سمت راست، و نقشه ای نیز در نیمه ی پایینی صفحه به نمایش گذاشته شده است.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۴. کاربرپسند بودن


این صفحه تماس با ما از سایت Deda هم خوانا و هم کاربر پسند است، این صفحه یک کال تو اکشن در بالا داشته و یک فرم تماس در سمت راست ( با باکس های Prompt) ، و جزئیات تماس در حباب در سمت راست، دارد.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۵. پیشروی پله به پله


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۶. افزودن میانبرهای تماسی


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۷. هماهنگ کردن آن با مابقی طرح سایت


سایت Robby Leonardi مانند یک بازی کامپیوتری است که کاربران با دنبال کردن کاراکتر اصلی، راه خود را در آن می یابند. مرحله ی آخر آن، صفحه ی تماس و فرم تماس است که کاملاً با طراحی کل سایت هماهنگی دارد.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۸. اضافه کردن عکس گروهی


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۲۹. استفاده از فضای منفی


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۰. خلق عکسی با تایپوگرافی


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۱. نگه داشتن صفحه


مانند سایت Mark Jaworkski Studios، یک عکس از خود یا تیم همکاران را، در حالی که یک نماد یا صفحه یا بخشی از کاغذ، که جزئیات تماس در آن قرار گرفته، را بالا نگه داشته است، استفاده کنید.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۲. نشان دادن لینک های صفحات اجتماعی


تم وردپرس سایت Retro Portfolio از یک فونت قدیمی استفاده کرده است که با نام و سبک سایت، هماهنگ است. این صفحه تعداد زیادی لینک های واضح دارد که پروفایل های مختلف صفحات اجتماعی آن را پوشش داده است و جمله ی I am Social به معنی من در اجتماع، را برای مشخص کردن راه های ارتباطی دیگر، بکار برده است.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۳. بهره بری از فرم سنتی ارتباطات


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۴. استفاده از متون گستاخانه


استودیو طراحی سوئدی Snask در صفحه تماس با مای خود از مطلب طنز و گستاخانه مانند ” برای خود شیرینی، غیبت و یا مسخره کردن، تماس بگیرید..” یا در جای دیگر ” تا زمانی که علامت صورتی را ندیده اید، راه بروید” در آدرس دهی خود بکار گرفته است و همین سبک نیز برای بیان دلیل تماس، استفاده شده در آنجا که نوشته است : ” می خواهید شرکت هوایی خود را دوباره برندسازی کنید؟”

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۵. هویت دادن


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۶. طراحی کردن اینفوگرافیک


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

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۷. انیمه کردن تیم کاری


از عکس های شبه کارتونی یا انیمه از اعضای گروه خود استفاده کنید. Melonfree، طراح و توسعه دهنده را برای اینکه کاربران دریابند، با چه کسی در ارتباطند، استفاده کرده است.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۸. استفاده از اشکال شفاف در طراحی صفحه تماس با ما


از اشکال شفاف شده، مانند صفحه ی تماس Indofolio ، استفاده کنید، تا جزئیات تماس بدون اینکه افکت بصری پس زمینه بر روی آن تاثیری بگذارد، خوانده شود.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۳۹. دادن افکت دست نوشته


صفحه ی تماس Mario Petrone، افکت بصری با استفاده از دست نوشته های کشیده شده، ایجاد کرده است. متون صورتی و قرمز، و نقاشی های کشیده شده در کاغذ شبکه بندی شده، ظاهری شخصی سازی شده و شاداب را به آن داده است.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

۴۰. استفاده از باکسی که پایین کشیده می شود.


صفحه ی تماس با ما سایت Spokes Pedicabs یک صفحه نیست. کافیست تنها بر روی لینک در بالای سمت راست، کلیک کرده و باکس نارنجی با یک “contact us” و تمام جزئیات ضروری، پایین می آید.

طراحی صفحه تماس با ما

طراحی صفحه تماس با ما

نوبت شماست


صفحه تماس با ما باید یکی از کاربرپسندترین صفحات در سایت شما باشد. یکی از بهترین راه ها برای اینکه از مفید بودن طراحی صفحه تماس با ما مطمئن شوید، این است که از دوستان، خانواده، و همکاران خود بخواهید که آن را امتحان کنند و سپس سوال های زیر را از آن ها بپرسید.

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

باید اینگونه باشد، چون این تنها دلیلی است که شما این صفحه را درست می کنید.

درباره نویسنده

سارا حسینی

بدون دیدگاه

ارسال پاسخ



تماس با ما


به راحتی با ما در تماس باشید و سفارش خود را ثبت کنید.




لطفا گزینه زیر را تیک بزنید تا صحت اطلاعات تایید شود.

نشانی دفتر:

اصفهان – چهارباغ بالا ، ایستگاه متروی شریعتی ، بن بست 25 ، ساختمان سینا ، طبقه همکف ، واحد A

شماره تماس دفتر:

۰۲۱-۴۷۶۲۴۸ (پاسخگویی شنبه تا چهارشنبه ۹ الی ۱۸ ، پنجشنبه ها ۹ الی ۱۵)

شماره تماس مدیریت:

۰۹۰۲۹۰۲۳۳۴۴ (پاسخگوئی در تمام ایام هفته از ساعت ۹ الی ۲۱)

شماره تلگرام:

۰۹۱۰۳۲۶۹۱۰۰ (صرفاً جهت اطلاع رسانی و پشتیبانی)

عکس مارکت وب سرویس ارائه دهنده خدمات نوین چاپ و طراحی در ایران

© کلیه حقوق محفوظ و مربوطه به عکس مارکت می باشد

telegram
Support_AxMarketپشتیبانی تلگرام