جزيره فناوري اطلاعات

​

چگونه بازديد وب سايت را با طراحي وب بالا ببريم؟ طراحي وب چه تاثيري در بالا بردن بازديد وب سايت دارد؟ داشتن يك طراحي وب جذاب براي موفقيت يك سايت بسيار مهم است، زيرا 38 درصد از بازديدكنندگان سايت را در صورتي كه از نظر بصري جذاب نباشد، ترك مي كنند. اگر به تازگي شروع به ايجاد سايت خود كرده ايد، ممكن است دشوار باشد كه بفهميد چه چيزي باعث حفظ يا دور كردن بازديدكنندگان مي شود. بنابراين، يادگيري در مورد بهترين شيوه هاي طراحي وب به شما نقطه شروعي براي تصميم گيري استراتژيك و جلوگيري از اشتباهات طراحي مي دهد.

در اين مقاله، راهنماي كاملي در مورد بهترين روش‌ها ارائه مي‌كنيم تا به شما كمك كند بازديدكنندگان بيشتري جذب كنيد و بهترين استفاده را از سايت خود ببريد. بهترين روش هاي طراحي وب سايت ، طراحي يك وب سايت جذاب نه تنها به توجه به زيبايي شناسي نياز دارد، بلكه به تجربه كاربري نيز نياز دارد ، عملكرد ضعيف باعث مي شود 42 درصد از مردم يك وب سايت را ترك كنند. همچنين نرخ تبديل را كاهش مي دهد و نرخ پرش را افزايش مي دهد و بر عملكرد و سئو سايت تأثير مي گذارد.

براي كمك به جلوگيري از اين مشكلات، نگاهي عميق به بهترين شيوه هاي طراحي وب بر اساس استاندارد هاي زير خواهيم داشت : نام تجاري سلسله مراتب بصري ، جهت يابي كد نويسي ، دسترسي نام تجاري ، برند سازي نقش مهمي در طراحي وب ايفا مي كند، زيرا ادراكات بازديدكنندگان از سايت شما را شكل مي دهد، به ايجاد اعتبار كمك مي كند و مشتريان بالقوه را جذب مي كند.

براي آسان‌تر كردن فرآيند، سه مرحله اصلي را براي اطمينان از برند سازي ثابت هنگام طراحي وب‌ سايت مرور مي‌كنيم.

1. بهترين روش هاي طراحي وب سايت

هدف خود را بشناسيد شناسايي مخاطبان خود به شما كمك مي كند تا برند سايت را تنظيم كنيد و طراحي آن را مطابق با آن سفارشي كنيد. در اينجا چندين روش براي كمك به درك مخاطبان وجود دارد:

تحليل مخاطب : در مورد جمعيت شناسي و روان شناختي مخاطبان خود تحقيق كنيد. اين شامل اطلاعاتي مانند محدوده سني، جنسيت، موقعيت مكاني، وضعيت اجتماعي-اقتصادي، علايق و انتخاب سبك زندگي مخاطبان شما مي شود. مصاحبه مشتري افرادي را كه قبلاً محصول يا خدمات شما را خريده اند به مصاحبه دعوت كنيد. علاوه بر ارائه بينش در مورد نوع فردي كه آنها هستند و چرا محصول شما را انتخاب كرده اند، به تقويت ارتباط با مخاطبان شما نيز كمك مي كند.تحليل رقبا به وب سايت و پروفايل هاي رسانه هاي اجتماعي رقيب خود نگاهي بيندازيد.

​

ببينيد آنها چگونه برند خود را قرار مي دهند و چه نوع محتوايي باعث ايجاد تعامل بيشتر مي شود. نكته تخصصي اولين قدم در طراحي يك وب سايت جديد، شناخت هدف و مخاطبان سايت شماست. به عنوان مثال، اگر يك وب سايت تجارت الكترونيك براي فروش اسباب بازي هاي آموزشي ايجاد مي كنيد، مشخص كنيد كه مشتريان چه كساني خواهند بود. ممكن است متوجه شويد كه بازار هدف شما بيشتر مادراني است كه براي اولين بار فرزند به دنيا مي آورند. بنابراين، مي‌خواهيد با استفاده از رنگ‌ها، فونت‌ها، تصاوير و طرح‌بندي مناسب در وب‌سايت خود، اين مخاطبان را جذب كنيد.

2. ايجاد پالت رنگي براي بازديد بيشتر وب سايت

يك پالت رنگ بسازيد در حالي كه انتخاب يك طرح رنگ براي سايت شما بصري به نظر مي رسد، انجام آن به صورت استراتژيك عناصر ضروري را برجسته مي كند، ادراك بازديد كنندگان شما را شكل مي دهد و آنها را وادار به اقدام مي كند. برندهايي كه به طور مداوم از رنگ‌ هاي يكسان در مواد بازاريابي خود استفاده مي‌كنند، نرخ شناسايي برند را تا 80 درصد بهبود مي‌بخشند.

بيشتر بدانيد : آموزش راه اندازي وب سايت بدون برنامه نويسي

بهترين روش هاي طراحي وب سايت براي ايجاد يك پالت رنگي جذاب عبارتند از : كاوش در تئوري رنگ قبل از ساختن يك پالت رنگ، خوب است بدانيد كه رنگ هاي خاص چه ارتباطي ممكن است داشته باشند. در مرحله بعد، انواع تم هاي رنگي مانند تك رنگ ، سه گانه ، مشابه و مكمل را بياموزيد تا تركيب رنگ خوبي براي برند خود پيدا كنيد. كنتراست را ناديده نگيريد استفاده از رنگ هاي بسيار متضاد خوانايي و دسترسي را بهبود مي بخشد.

از قانون 60/30/10 پيروي كنيد. يك رنگ اصلي را انتخاب كنيد كه 60٪ از سايت شما را تشكيل مي دهد و يك رنگ ثانويه براي 30٪ . 10% نهايي بايد از رنگ برجسته اي استفاده كند كه يا متضاد يا مكمل رنگ اصلي باشد. رنگ هاي مكمل را اجرا كنيد. در يك سايت پيمايش طولاني، استفاده از رنگ هاي مكمل مانند زرد و بنفش را براي تشخيص بخش ها در نظر بگيريد.به عنوان مثال، پالت رنگ در وب سايت Trevor Blount Pilates از سه رنگ اصلي تشكيل شده است ، كرم به عنوان اصلي، سياه به عنوان رنگ ثانويه و قرمز به عنوان رنگ برجسته. اين تركيب يك طرح رنگي ساده و در عين حال هماهنگ ايجاد مي كند و تمركز را روي عنوان وب سايت و تصوير برجسته قرار مي دهد. سايت Trevor Blount Pilates عنوان و تصوير قهرمان را در مركز نمايش مي دهد.

​

نكته تخصصي : من معمولا با يك رنگ اصلي شروع مي كنم و بر اساس آن طرح هاي رنگي مي سازم. اگر مبتدي هستيد و يك پالت رنگ مشابه يا تك نگاري را انتخاب مي كنيد، انتخاب سايه هاي نزديك ساده ترين راه است. با اين حال، اگر مي خواهيد رنگ اصلي برجسته باشد، يك طرح رنگ سه گانه يا رنگ هاي مكمل را انتخاب كنيد.در نهايت، رنگ هاي خنثي را اضافه كنيد تا متعادل شود. براي رنگ هاي فونت، از استفاده كامل سياه (000000#) خودداري كنيد و به جاي آن سايه كمي روشن تر انتخاب كنيد. انجام اين كار باعث كاهش خستگي چشم هنگام خواندن مطالب طولاني مي شود.

بيشتر بدانيد : اموزش ساخت فروشگاه و سايت پيشرفته

3. تايپوگرافي مناسب براي بازديد بيشتر وب سايت

تايپوگرافي يك سايت از سبك فونت، اندازه، ظاهر و ساختار تشكيل شده است. انتخاب تايپوگرافي وب سايت مناسب نه تنها زيبايي سايت را بهبود مي بخشد، بلكه تجربه و دسترسي كاربر را نيز بهينه مي كند. به عنوان مثال، براي انتقال پيام‌هاي جدي و اطلاعات مهم، سبك قلمي را انتخاب كنيد كه به اندازه فونت‌هاي سبك‌ دار حواس‌ تان را پرت نمي‌كند.

بهترين روش هاي ديگر طراحي وب براي بهبود تايپوگرافي سايت شما عبارتند از: تعداد سبك هاي فونت را محدود كنيد. استفاده از سبك هاي زياد باعث مي شود سايت شما غيرحرفه اي به نظر برسد. چسبيدن به دو سبك فونت سازگار بصري و در عين حال قابل تشخيص براي حفظ ثبات بهتر است. از فونت هاي ايمن وب استفاده كنيد. فونت هاي ايمن وب به احتمال زياد به شكل مورد نظر در مرورگرها و دستگاه هاي مختلف ارائه مي شوند و برند شما را ثابت نگه مي دارند و خوانايي سايت را بهينه مي كنند.

​

اندازه متن متناسب را تنظيم كنيد يك قانون خوب اين است كه متن وب سايت خود را روي حداقل اندازه 16 پيكسل يا 12 POINT تنظيم كنيد. براي آزمايش اندازه متن و پيش نمايش نحوه نمايش آنها در سايت، از ابزارهاي آنلاين مانند Gridlover استفاده كنيد. از 50 تا 75 كاراكتر در هر خط استفاده كنيد. براي جلوگيري از خستگي و خستگي چشم، كاراكترهاي بيشتري اضافه نكنيد.

سلسله مراتب بصري چيدمان استراتژيك عناصر طراحي، بازديدكنندگان را به بخش هاي مهم صفحه وب هدايت مي كند. در اينجا چندين فاكتور براي ايجاد يك سلسله مراتب بصري واضح وجود دارد:

• تعادل نحوه توزيع : عناصر بصري توسط طراحان وب در صفحات سايت تعيين كننده تعادل آن است. هنگام تخصيص عناصر طراحي خود، مطمئن شويد كه آن را به تناسب انجام دهيد تا حس وحدت و جذابيت بصري ايجاد كنيد. بخش‌هاي زير محبوب‌ترين روش‌هاي طراحي را براي متعادل‌ تر كردن سايت شما پوشش مي‌دهند.

• طراحي متقارن :طراحي متقارن با قرار دادن عناصر به طور مساوي در خط مركزي صفحه تعادل ايجاد مي كند. به عنوان مثال، اگر يك آيتم بصري سنگين در سمت راست داريد، بايد يك مورد به همان اندازه سنگين را در سمت چپ اضافه كنيد. اين نوع طراحي بسيار محبوب است زيرا براي همه اندازه هاي صفحه نمايش مناسب است. وب سايت نمونه كارها Adham Dannaway يك نمونه عالي از طراحي متقارن است. همانطور كه او كاريكاتور بزرگي از خود به عنوان نقطه كانوني مي سازد، بلوك هاي متن از نظر اندازه و موقعيت يكديگر را آينه مي كنند. صفحه اصلي نمونه كارها Adham Dannaway طراحي نامتقارن از سوي ديگر، چيدمان اقلام در طراحي نامتقارن از خط مركزي پيروي نمي كند. براي دستيابي به تعادل، طراحان رنگ ها و بافت ها را تركيب مي كنند يا چشم انداز را دستكاري مي كنند. به عنوان مثال، اگر عنصر برجسته تري را در نزديكي خط مركزي قرار دهيد، خوب است كه عنصر كوچكتر را كمي دورتر از آن قرار دهيد. ببينيد مرسدس بنز چگونه يك عنصر بزرگتر را با يك بلوك نوشتاري كوچك تر متعادل مي كند.

• طراحي موزاييك : بر خلاف دو نوع ديگر، طرح موزاييك باعث ايجاد احساس ناراحتي مي شود. اين چيدمان به طور كلي حركت و عمل را نشان مي دهد و با سبكي مدرن و پويا مي تواند توجه را به خود جلب كند. وب سايت جانسون بنكس از شبكه هاي موزاييك مانند براي سازماندهي اطلاعات استفاده مي كند.

• تركيب : تركيب به سازماندهي عناصر وب سايت براي دادن ساختار منسجم به سايت شما اشاره دارد. يك چارچوب پركاربرد قانون يك سوم است. اين روش با استفاده از شبكه‌اي از 9 كادر، يك طرح يا عكس را به يك سوم تقسيم مي‌كند و دستورالعمل‌هايي را براي تراز كردن متن، تنظيم اشيا و به طور كلي چيدمان عناصر ارائه مي‌كند. نمونه اي از اين قانون در عمل صفحه فرود هاستينگر است كه در آن عناصر به سه شبكه عمودي تقسيم مي شوند. صفحه فرود هاستينگر، با نمايش متن "Hosting + Free Domain" در مركز

​

• مقياس : در طول فرآيند طراحي وب سايت، مي توانيد از مقياس براي جلب توجه به جزئيات مهم استفاده كنيد. در اينجا برخي از بهترين شيوه هاي طراحي وب براي استفاده از تفاوت اندازه به نفع خود آورده شده است: چوب با سه اندازه در حداكثر. اندازه هاي كوچك، متوسط ​​و بزرگ كافي است تا در عين داشتن سلسله مراتب وب سايت، تنوع را به شما بدهد. به طور كلي، اندازه ها از 14 پيكسل تا 16 پيكسل براي كپي متن، 18 پيكسل تا 22 پيكسل براي عنوان هاي فرعي و حداكثر تا 32 پيكسل براي عنوان ها متغير است. عناصر مهم را بزرگ كنيد حداكثر دو عنصر كليدي را براي بزرگ‌ نمايي انتخاب كنيد تا برجسته شوند. به عنوان مثال، وب سايت FluxAcademy با استفاده از يك فونت بزرگ بر روي كپي تأكيد مي كند. سايت فلوكس آكادمي متن بزرگي را در مركز نمايش مي دهد كه مي گويد "هنر و تجارت طراحي وب را بياموزيد"

• الگو: هنگام بازديد از يك وب سايت، افراد از الگوي مشاهده خاصي براي اسكن محتوا پيروي مي كنند. بسته به نوع محتوا، عموماً از شكل حروف F و Z پيروي مي كنند. طراحي صفحه‌ آرايي مطابق با اين الگوها، جريان اطلاعات را هموار تر كرده و تجربه كاربري را بهبود مي‌بخشد. بياييد با جزئيات بيشتري به آنها نگاه كنيم. در الگوي Z، خوانندگان صفحه را از بالا سمت چپ به سمت راست بالا اسكن مي كنند. سپس به صورت مورب به سمت چپ پايين و در سراسر صفحه به سمت راست پايين اسكن مي كنند.

اين الگو براي طراحي صفحات با حداقل كپي و عناصر طراحي، مانند صفحات فرود، ايده آل است. الگوي F در همين حال، اين الگو از شكل "F" پيروي مي كند - بازديدكنندگان وب سايت محتوا را از بالا سمت چپ به سمت راست بالا اسكن مي كنند و اين روند را در خطوط زير تكرار مي كنند. بخش فناوري نيويورك تايمز از الگوي اسكن F پيروي مي كند قرار دادن مهم ترين محتوا در بالا بهترين كار براي جذب بازديد كنندگان است زيرا اولين چيزي است كه مي بينند. اين طرح‌بندي براي سايت‌هاي متني مانند نيويورك تايمز مناسب است.

• فضاي خالي : فضاي خالي بين عناصر يك صفحه است. طراحان وب از آن براي شكستن متن، توجه به نكات خاص و ساده كردن تجربه كلي كاربر استفاده مي كنند. مي توانيد از رنگ، بافت و حتي تصاوير به عنوان فضاي خالي استفاده كنيد. برخي از بهترين شيوه هاي طراحي وب براي استفاده از فضاي خالي عبارتند از: از فضاي خالي ميكرو و ماكرو استفاده كنيد. فضاي خالي ميكرو با قرار دادن فضاي كافي بين كلمات و پاراگراف ها خوانايي را بهبود مي بخشد. در همين حال، فضاي سفيد ماكرو عناصر بزرگ‌تري مانند لوگو يا سرفصل‌هاي وب‌سايت را احاطه مي‌كند و باعث مي‌شود طراحي سايت متعادل و كمتر به هم ريخته شود. فضاي خالي بيش از حد باعث مي شود سايت شما خالي به نظر برسد، در حالي كه خيلي كم آن را به هم ريخته مي كند.

بيشتر بدانيد : دوره ها و اموزش هاي لازم براي ساخت وبسايت

• گروه بندي : بر اساس اصل مجاورت، افراد اقلام نزديك به يكديگر را متعلق به يك گروه مي دانند. اگر موارد به اشتباه گروه بندي شوند، بازديدكنندگان در درك ساختار سايت شما و اينكه توجه خود را به كجا معطوف كنند مشكل خواهند داشت. براي گروه بندي كارآمد، چند نكته وجود دارد كه بايد در نظر داشته باشيد، مانند: آن را با فضاي خالي تركيب كنيد. از فضا براي گروه بندي و جداسازي عناصر با توجه به عملكرد آنها استفاده كنيد.عناصر اضافي را اضافه كنيد. مرزها و پس زمينه ها به عنوان نشانه هاي بصري، متمايز يا گروه بندي عناصر عمل مي كنند. فرم سفارش در وب‌ سايت آديداس نمونه خوبي از اين است كه چگونه گروه‌بندي اطلاعات مرتبط مرتب‌ سازي اطلاعات را آسان‌تر مي‌كند. فرم سفارش آديداس كه مكان‌هايي را براي آدرس حمل و نقل، گزينه‌هاي تحويل، جزئيات تماس و اعتبارنامه‌هاي ورود به سيستم نشان مي‌دهد.

• بافت ها : بافت ها عناصر بصري شبيه يك سطح سه بعدي هستند كه به طراحي شما تضاد مي دهند. آنها ساختار سايت را تقويت مي كنند، صفحات متن سنگين را خواناتر مي كنند و لحن برند شما را مشخص مي كنند.به عنوان مثال، وب‌ سايت آژانس بلك شيپ از بافت براي افزودن شخصيت و بعد به يك پس‌ زمينه جامد كسل‌ كننده استفاده مي‌كند، عناصر را به هم گره مي‌زند و طراحي وب‌سايت را اصلاح‌ تر مي‌كند. آژانس بلك شيپ از يك فونت بزرگ براي عنوان سايت استفاده مي كند كه در مركز قرار داده شده است. در اينجا چند روش طراحي وب وجود دارد كه بايد هنگام افزودن بافت به سايت خود در نظر بگيريد: سادگي را هدف بگيريد بافت بيش از حد مي تواند بازديدكنندگان را تحت تأثير قرار دهد و توجه آنها را از محتواي شما منحرف كند. هدف آن را مشخص كنيد. از بافت ها عمدا استفاده كنيد، چه براي تقسيم بخش ها يا برجسته كردن تصاوير. متن را خوانا نگه داريد. بافت ها نبايد مركز توجه باشند يا اطلاعات مهم را تحت الشعاع قرار دهند.

​

• تصاوير : تصاوير و ويديو هاي با كيفيت مي توانند وب سايت شما را از نظر بصري جذاب كنند و بازديدكنندگان را درگير خود نگه دارند. هنگامي كه آنها را به سايت خود اضافه مي كنيد، در اينجا بهترين روش هاي طراحي وب سايت وجود دارد كه بايد در نظر بگيريد: تصوير قهرمان را به نمايش بگذاريد. تصوير قهرمان كه در قسمت بالاي صفحه نمايش داده مي‌شود، اولين تصور را از برند شما ايجاد مي‌كند و به ايجاد اعتماد بين بازديدكنندگان كمك مي‌كند. وب سايت Garoa يك تصوير قهرمان از يك زن و متن "در هر فصل پوست خود را درمان كنيد" در مركز ارائه شده است. از چرخ فلك ها با دقت استفاده كنيد. چرخ فلك‌ هايي كه طراحي ضعيفي دارند ممكن است باعث حواس‌ پرتي شوند، دسترسي را كاهش دهند، يا حتي شبيه تبليغات شوند و بازديدكنندگان را وادار كند تا محتوا را مرور كنند. بنابراين، هر اسلايد را ساده و مرتبط نگه داريد و به بازديدكنندگان اجازه دهيد تا جريان خود را كنترل كنند. تصاوير و ويديوهاي واكنش گرا اضافه كنيد. طراحي واكنش گرا تضمين مي كند كه تصاوير بدون توجه به اندازه صفحه نمايش يا دستگاه به درستي نمايش داده مي شوند. علاوه بر اين، مطمئن شويد كه همه تصاوير را بهينه كنيد تا سريعتر بارگذاري شوند. به فرمت هاي تصوير دقت كنيد. انتخاب فرمت هاي تصوير صحيح مي تواند به بهبود عملكرد سايت و تجربه كاربري شما كمك كند. جهت يابي يكي ديگر از جنبه هاي مهم اين است كه اطمينان حاصل شود كه بازديد كنندگان مي توانند به طور يكپارچه در سايت شما حركت كنند و اطلاعات مهم را پيدا كنند.

در بخش‌هاي بعدي، بهترين شيوه‌هاي طراحي وب براي عناصر ناوبري را مورد بحث قرار خواهيم داد.

1. يك منوي بصري ايجاد كنيد به عنوان عنصر ناوبري اوليه كه بازديدكنندگان با آن تعامل دارند، هدف طراحان ايجاد منوهاي بصري و ساده است كه تجربه كاربري روان را تضمين مي كند. برخي از رويكردهاي محبوب براي طراحي منوي ناوبري عبارتند از: منوي افقي اين منوي پيمايش در بالاي يك سايت به عنوان يك نوار افقي ظاهر مي شود كه صفحات وب اصلي را فهرست مي كند. بيشتر وب‌ سايت‌ها از اين منوي پيمايش براي نمايش بخش‌ هايي استفاده مي‌كنند كه بازديد كنندگان انتظار دارند پيدا كنند، مانند «درباره»، «مخاطبين»، «محصولات» و «قيمت». از طرف ديگر، مي‌توانيد دسته‌هاي خاصي را فهرست كنيد تا محتواي مهم را برجسته كنيد

بيشتر بدانيد : هاست چيست؟

وب سايت Wozber از منوي افقي براي فهرست كردن محصولات و خدمات خود استفاده مي كند. منوي نوار كناري عمودياين نوع پيمايش منو داراي يك نوار كناري حاوي ليستي از پيوندها به صفحات خاص است. به عنوان مثال، رستوران Arbor از منوي نوار كناري عمودي قابل پيمايش با اطلاعات مربوط به رستوران، منوها ، رويدادها و گزينه‌هاي رزرو استفاده مي‌كند. وب سايت رستوران آربور از منوي عمودي نوار كناري استفاده مي كند. منوي كشويي همه صفحات موجود را پس از كليك كردن يا نگه داشتن ماوس روي آن توسط كاربران ليست مي كند. معمولاً توسط خرده‌ فروشان آنلاين استفاده مي‌شود، اين نوع منو براي وب‌ سايت‌هايي با صفحات زياد مناسب است، زيرا در عين حال دسترسي آسان را كاهش مي‌دهد.

بياييد وب سايت H&M را به عنوان مثال در نظر بگيريم. از آنجايي كه دسته بندي لباس هاي مختلفي را ارائه مي دهد، از يك نوار ناوبري سطح بالا براي نمايش موارد عمومي تر استفاده مي كند. هنگامي كه بازديدكنندگان روي بخش‌هاي خاصي كليك مي‌كنند يا نشان مي‌دهند، يك منوي كشويي حاوي فهرستي از دسته‌هاي خاص‌تر ظاهر مي‌شود. منوي كشويي H&M كه جزئيات مربوط به دسته بچه ها را نشان مي دهد.

منوي همبرگر ، اين نوع منو به صورت يك نماد سه خطي ظاهر مي شود. هنگامي كه بازديدكنندگان روي آن كليك مي كنند، يك منوي كشويي يا نوار كناري نمايش داده مي شود تا پيوندها را نشان دهد. منوي همبرگر يك گزينه عالي براي سايت هاي موبايل است زيرا از فضاي صفحه نمايش كمتري استفاده مي كند. علاوه بر اين، نماد به طور گسترده شناخته شده آن يك رابط بصري ايجاد مي كند. Google Maps يك برنامه محبوب است كه از اين نوع منوي ناوبري استفاده مي كند. منوي همبرگر در Google Maps

2. CTA ها و دكمه ها را به صورت استراتژيك قرار دهيد عملكرد اصلي يك فراخوان براي اقدام (CTA) اين است كه بازديد كنندگان را به انجام اقدامات و صرف زمان بيشتري در وب سايت شما سوق دهد. خواه يك متن، تصوير يا دكمه باشد، بايد آن را در جايي قرار دهيد كه به راحتي براي بازديدكنندگان قابل مشاهده باشد. نكته تخصصي براي ايجاد يك CTA متقاعد كننده، از كلمات ساده، قابل درك و كاربردي استفاده كنيد، مانند «شروع به كار»، «بيشتر بدانيد» و «افزودن به سبد خريد».

با انتخاب رنگ متضاد و استفاده از آن براي ساير عناصر قابل كليك، CTA خود را از بقيه مطالب متمايز كنيد.در نهايت، از فضاي خالي براي هدايت چشم بازديدكنندگان استفاده كنيد و CTA را به صورت استراتژيك براي جلب توجه قرار دهيد. علاوه بر اين، در نظر بگيريد كه چقدر تلاش مي شود تا روي دكمه CTA كليك كنيد، به خصوص در دستگاه هاي تلفن همراه. مقايسه قرارگيري خوب و بد يك دكمه CTA : وب سايت نتفليكس نمونه خوبي از بهترين شيوه هاي طراحي وب است. به عنوان مثال، دكمه‌هاي «شروع به كار» و «ورود به سيستم» از كنتراست رنگ، مقياس و فضاي خالي براي جلب توجه بازديدكنندگان استفاده مي‌كنند. صفحه فرود نتفليكس. نامحدود فيلم، برنامه هاي تلويزيوني، و بيشتر.

3. يك پاورقي اضافه كنيد : اغلب، بازديدكنندگان به پايين صفحه پيمايش مي كنند و انتظار دارند اطلاعاتي مانند جزئيات تماس، مشخصات شركت، پيوندهاي رسانه هاي اجتماعي و محصولات يا خدمات اضافي ارائه شده را بيابند. عناصري كه بايد در پاورقي بگنجانيد به اهداف سايت شما بستگي دارد، اما در مجموع، براي شفاف و موثر نگه داشتن آن، بهترين شيوه هاي طراحي وب را دنبال كنيد: از زبان واضح استفاده كنيد. از عبارات مبهم اجتناب كنيد تا بازديد كنندگان بدانند قبل از كليك بر روي يك پيوند چه انتظاري دارند. محتوا را به دسته ها تقسيم كنيد.

بيشتر بدانيد : تفاوت هاست و دومين در چيست؟

صفحاتي را كه مي خواهيد اضافه كنيد تعريف كنيد و آنها را گروه بندي كنيد تا مكان يابي محتوا آسان تر شود. طراحي آن را ساده و سازگار نگه داريد. اطمينان حاصل كنيد كه خوانا است و برندسازي ثابت را حفظ كنيد. لينك هاي خراب را بررسي كنيد. اطمينان حاصل كنيد كه همه پيوندها بازديدكنندگان را به محتواي مناسب هدايت مي كنند. وب سايت BrainBox AI يك نمونه عالي از يك پاورقي واضح و موثر دارد. با طراحي مينيماليستي، پاورقي آن به محتوايي كه در منوي اصلي موجود نيست، مانند صفحات مشاغل، شركا و مقالات، پيوند مي‌دهد. علاوه بر پيوندهاي ناوبري، بازديدكنندگان را نيز دعوت مي كند تا در خبرنامه خود ثبت نام كنند. بخش پاورقي BrainBox AI فرم ثبت نام در خبرنامه، منوي پيمايش عمودي و پيوندهاي رسانه هاي اجتماعي را نشان مي دهد.كد نويسي هنگامي كه يك طراحي خوب ساختار يافته و از نظر بصري دلپذير داريد، گام بعدي اين است كه مطمئن شويد سايت شما در موتورهاي جستجو قابل كشف است، بازديد آن ايمن است و به خوبي اجرا مي شود.

در بخش‌هاي بعدي، چندين استاندارد كد نويسي را پوشش خواهيم داد كه به شما در انجام اين كار كمك مي‌كند، از جمله SEO، رويكرد اول موبايل، امنيت سايت و عملكرد.

​

• 1. سئو را تقويت كنيد: بهينه سازي موتورهاي جستجو (SEO) در هر استراتژي بازاريابي ديجيتال بسيار مهم است. اين به بهبود رتبه سايت شما در نتايج موتورهاي جستجو، جذب بازديدكنندگان بيشتر و افزايش تبديل كمك مي كند. شما مي توانيد سئوي سايت خود را با رعايت نكات آزمايش شده و آزمايش شده سئو وردپرس افزايش دهيد. به خاطر داشته باشيد كه بيشتر توصيه‌ها براي سايت‌هاي غير وردپرس نيز قابل اجرا هستند، مانند : توضيحات متا با كيفيت بنويسيد. يك توضيح جذاب، بازديدكنندگان را تشويق مي كند تا روي آن كليك كنند و ترافيك ارگانيك بيشتري را به سايت شما بياورند. متن هاي جايگزين را اضافه كنيد توصيف تصاويرتان با متن جايگزين، دسترسي افرادي را كه از صفحه‌خوان‌ها استفاده مي‌كنند، بهبود مي‌بخشد و به موتورهاي جستجو مانند Google كمك مي‌كند محتواي شما را درك كنند.ساختار URL را بهينه كنيد. براي كمك به موتورهاي جستجو در يافتن و درك بهتر محتواي سايت شما، كلمه كليدي تمركز را در URL خود قرار دهيد. علاوه بر اين، اجراي استانداردهاي كدنويسي زير سئوي سايت شما را نيز بهبود مي بخشد.

• 2. از يك رويكرد موبايل اول استفاده كنيد : 50 درصد از ترافيك ارگانيك از دستگاه هاي تلفن همراه مي آيد، بنابراين مطمئن شويد كه سايت شما براي موبايل مناسب است. با رويكرد اول موبايل، طراحان سايت موبايل را قبل از رفتن به نسخه دسكتاپ ايجاد مي كنند. در حالي كه يكپارچه سازي يك طراحي واكنش گرا گزينه خوبي است، استفاده از اين رويكرد به شما مزيتي مي دهد. شروع با تلفن همراه و رفتن به صفحه نمايش هاي بزرگتر بسيار ساده تر خواهد بود، زيرا نيازي به حذف عناصر يا بازسازي كل طرح براي جا دادن صفحه نمايش هاي كوچكتر نخواهد بود. در اينجا چندين بهترين روش طراحي وب براي طراحي يك وب سايت سازگار با موبايل آورده شده است: اول محتوا را قرار دهيد قبل از افزودن عناصر ديگر، محتواي مهم را اولويت بندي كنيد تا بازديدكنندگان بتوانند به راحتي آنچه را كه به دنبال آن هستند پيدا كنند. ناوبري را بصري كنيد. از يك منوي بصري مانند دكمه همبرگر استفاده كنيد زيرا بازديدكنندگان به طور كلي با آن آشنا هستند و فضاي زيادي را اشغال نمي كند. همچنين، يك نوار جستجو اضافه كنيد تا يافتن مطالب ديگر آسان شود. پاپ آپ هاي مخرب را كاهش دهيد. در تلفن همراه، بازديدكنندگان ممكن است به طور تصادفي روي يك پنجره بازشو كليك كنند و در هنگام تلاش براي بستن آن، تجربه كاربري ناخوشايندي ايجاد كند. سايت خود را تست كنيد براي بررسي اينكه آيا سايت شما براي موبايل مناسب است يا خير، از تست دوستدار موبايل گوگل يا ابزارهاي ديگر استفاده كنيد.وب سايت پاسخگوي تلفن همراه HubSpot يك نمونه عالي از اين رويكرد است، با متني آسان براي خواندن، منوي همبرگر، و نوار جستجو براي اطمينان از ناوبري روان.

بيشتر بدانيد : استفاده از هاست يا سرور ؟

• 3. سايت را ايمن نگه داريد : ايمن سازي وب سايت شما براي ايجاد اعتبار و جلوگيري از ضررهاي مالي و داده ها ضروري است. حتي اگر از يك پلت فرم امن مانند وردپرس استفاده مي كنيد، اجراي اقدامات امنيتي اضافي وب سايت به جلوگيري از تهديدات سايبري كمك مي كند. گواهي SSL دريافت كنيد. با گواهي SSL، انتقال داده ها بين سايت و بازديدكنندگان آن رمزگذاري مي شود تا از دسترسي كاربران غيرمجاز جلوگيري شود. اين به محافظت از داده‌هاي بازديدكنندگان كمك مي‌كند، به‌ ويژه اگر سايت شما از آن‌ها بخواهد اطلاعات حساسي را ارسال كنند. از اعتبار ورود خود محافظت كنيد. رمزهاي عبور قوي ايجاد كنيد و مرتباً آنها را به روز كنيد. با استفاده از مديريت رمز عبور مانند Password و فعال كردن احراز هويت دو مرحله اي، اعتبار خود را ايمن نگه داريد. نرم افزار ضد بدافزار نصب كنيد. به طور منظم كل سايت خود را براي بدافزار اسكن كنيد.يك ميزبان وب امن انتخاب كنيد. انتخاب يك پلتفرم ميزباني قابل اعتماد مانند هاستينگر، امنيت سايت شما را با گواهينامه هاي رايگان SSL و ويژگي هاي امنيتي سرور تقويت مي كند.

• 4. بهينه سازي عملكرد سايت : اگر فرآيند بارگذاري بيش از 3 ثانيه طول بكشد، 40 درصد از بازديدكنندگان سايت را ترك خواهند كرد. از اين رو، بهينه سازي عملكرد سايت شما بايد در اولويت باشد. براي شروع، سرعت سايت خود را با ابزارهايي مانند GTmetrix بررسي كنيد تا مشكلات را شناسايي كرده و پيشنهاداتي براي رفع آنها دريافت كنيد. وب سايت شما چقدر سريع بارگذاري مي شود؟ با GTmetrix آشنا شويد. همچنين هنگام بهينه سازي وب سايت به اين نكات توجه كنيد: فعال كردن كش مرورگر ، كش كردن محتوا را در حافظه محلي ذخيره مي كند، بنابراين مرورگرها نيازي به بازيابي فايل هاي سايت شما از سرور ندارند و سرعت بارگذاري را بهبود مي بخشد. كد خود را كوچك كنيد كاراكترها و خطوط غير ضروري را از فايل هاي HTML، CSS و جاوا اسكريپت خود حذف كنيد. يك شبكه تحويل محتوا (CDN) راه اندازي كنيد. انتخاب يك برنامه ميزباني وب با CDN يك راه مناسب براي بهبود سرعت سايت است، زيرا محتواي ثابت را از نزديكترين سرور به بازديدكنندگان سايت ارائه مي دهد.

• 5. طراحي براي دسترسي : دسترسي به وب يكي ديگر از جنبه هاي مهم طراحي وب است كه به افراد داراي معلوليت كمك مي كند تا به راحتي به محتواي شما دسترسي داشته باشند. هنگام طراحي براي دسترسي به وب، از استانداردهاي دسترسي W3C مانند اضافه كردن متن هاي جايگزين و توجه به كنتراست رنگ سايت خود پيروي كنيد. براي پيمايش بهتر، پيوندهاي قابل دسترسي با صفحه كليد ايجاد كنيد. در نهايت، از ابزارهاي تست تاييد شده توسط Web Accessibility Initiative استفاده كنيد تا بررسي كنيد كه آيا وب سايت شما با استانداردهاي دسترسي W3C مطابقت دارد يا خير. پياده‌ سازي ويژگي‌هاي دسترس‌ پذيري تجربه كاربر را بهبود مي‌بخشد، ترافيك ارگانيك بيشتري را به ارمغان مي‌ آورد و سئوي سايت شما را افزايش مي‌دهد. نكته تخصصي در آخرين مرحله از فرآيند طراحي وب سايت خود، خوب است كه طراحي وب خود را ارزيابي كنيد. در نظر بگيريد كه آيا هدف خود را برآورده مي كند و آيا بازديدكنندگان مي توانند به راحتي محتوا را اسكن و پيمايش كنند. براي انجام اين كار، مي توانيد از يك نقشه حرارتي آنلاين مانند نقشه حرارتي هوش مصنوعي Zyro يا يك ابزار تست قابليت استفاده سريع مانند Maze استفاده كنيد.نتيجه طراحي وب سايت مستلزم آزمون و خطاي زيادي است.

با اين حال، دانستن بهترين روش‌هاي طراحي وب به شما يك پايه محكم در هنگام تصميم‌گيري در مورد طراحي مي‌دهد. در اين مقاله، تمام آنچه را كه بايد در مورد طراحي يك وب سايت جذاب بر اساس استانداردهاي طراحي وب و اصول UI/UX بدانيد، پوشش داده ايم. به خاطر داشته باشيد كه هيچ راه درستي براي طراحي يك وب سايت وجود ندارد – چيزي كه براي يك سايت مناسب است ممكن است براي سايت ديگر كارايي نداشته باشد. جنبه كليدي كه بايد به خاطر بسپاريد اولويت بندي ثبات، دسترسي و تجربه كاربر است. اميدواريم اين مقاله براي شما مفيد بوده باشد.

​