برترین دوره های طراØÛŒ وب آنلاین
بسياري از وب سايت ها با رنگ، تصاوير زنده Ùˆ Ù…Øتواي Ù…Ùيد مي درخشند. اما اگر رنگ، Ùيلم، تصاوير، Ù…Øتوا را جدا کنيد، Ú†Ù‡ چيزي باقي مي ماند؟ شما به استخوان‌هاي خالي ÙŠÚ© وب‌سايت مي‌رسيد Ùˆ ناگهان متوجه مي‌شويد: اين طرØ‌بندي است Ú©Ù‡ واقعاً درخشش را به وب‌سايت مي‌اÙزايد.
چيدمان وب سايت چيست؟
Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠ وب سايت ÙŠÚ© الگو (يا چارچوب) است Ú©Ù‡ ساختار ÙŠÚ© وب سايت را تعري٠مي کند . اين نقش ساختاردهي اطلاعات موجود در ÙŠÚ© سايت را هم براي صاØب وب سايت Ùˆ هم براي کاربران دارد. مسيرهاي روشني را براي پيمايش در صÙØات وب Ùراهم مي کند Ùˆ مهمترين عناصر ÙŠÚ© وب سايت را در جلو Ùˆ مرکز قرار مي دهد.
طرØ‌بندي وب‌سايت سلسله مراتب Ù…Øتوا را مشخص مي‌کند، صر٠نظر از اينکه در Øال يادگيري Ù†Øوه راه‌اندازي ÙŠÚ© وبلاگ يا ساختن ÙŠÚ© وب‌سايت ساده براي کسب‌وکار Ú©ÙˆÚ†Ú© خود هستيد يا خير . Ù…Øتوا بازديدکنندگان را در سراسر وب سايت راهنمايي مي کند Ùˆ بايد پيام شما را تا Øد امکان به آنها منتقل کند.
نمونه چيدمان وب سايت
به بيان کوتاه، طرØ‌بندي وب‌سايت عناصر مهمي هستند Ú©Ù‡ ÙŠÚ© وب‌سايت را به موÙقيت يا شکست تبديل مي‌کنند.
چرا بايد ÙŠÚ© Ø·Ø±Ø Ø±Ø§ بر ديگري انتخاب کنيد؟
شما بايد با دقت انتخاب کنيد. به اين دليل:
ÙŠÚ© چيدمان خوب کاربران را در سايت Ù†Ú¯Ù‡ مي دارد زيرا باعث مي شود اطلاعات مهم به راØتي در دسترس Ùˆ بصري باشند. چيدمان بد کاربران را نااميد مي کند Ùˆ به سرعت سايت را ترک مي کنند زيرا نمي توانند چيزي را Ú©Ù‡ به دنبال آن هستند پيدا کنند.
به همين دليل، بهتر است تا زماني Ú©Ù‡ نياز داريد براي ياÙتن ÙŠÚ© چيدمان خوب وقت بگذاريد زيرا کاربران بيش از چند ثانيه از زمان خود را در اختيار شما قرار نمي دهند.
ÙŠÚ© رابطه قوي بين چيدمان Ùˆ تعامل کاربران با وب سايت وجود دارد. تعيين مي‌کند Ú©Ù‡ Ú†Ù‡ مدت در صÙØات وب‌سايت باقي بمانند، Ú†Ù‡ تعداد صÙØÙ‡ را مرور مي‌کنند Ùˆ چند بار به وب‌سايت باز مي‌گردند.
بنابراين، علاوه بر غلبه بر مشکل انتخاب چند ثانيه اي، ÙŠÚ© چيدمان خوب مزاياي بيشتري نيز به همراه دارد. جذب بازديدکنندگان مي تواند ÙŠÚ© تلاش Ù…Ùيد باشد.
هنگام انتخاب ÙŠÚ© طرØØŒ ممکن است Ù…Ùيد باشد Ú©Ù‡ قانون بسته شدن گشتالت را نيز در نظر بگيريد . مي گويد Øتي اگر Ø´Ú©Ù„ تصوير کامل نباشد، چشم انسان تمايل دارد شکا٠هاي بصري را پر کند Ùˆ تصوير را به عنوان ÙŠÚ© Ú©Ù„ تشخيص دهد. اين چگونه مي تواند براي شما Ù…Ùيد باشد؟
شما به جزئيات توجه نخواهيد کرد، بلکه روي نماي کلي صÙØات تشکيل دهنده وب سايت تمرکز مي کنيد. کاربران مسير معني را پيدا خواهند کرد.
شما به جزئيات توجه مي کنيد Ùˆ از چند ثانيه اضاÙÙŠ براي رشد تصاعدي تعامل استÙاده مي کنيد.
شما عمداً به جزئيات توجه نخواهيد کرد، Ùˆ اجازه مي دهيد اصالت خود صØبت کند. کاربران مسير معني را براي خود پيدا خواهند کرد Ùˆ ØاÙظه اي قوي از وب سايت شما ØÙظ خواهند کرد.
مثالي از Ù†Øوه عملکرد قانون بسته شدن گشتالت
آشنايي با بهترين شيوه هاي طراØÙŠ چيدمان
براي گذراندن زمان پربار براي انتخاب Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠØŒ مهم است Ú©Ù‡ با برخي Ù…Ùاهيم اوليه مرتبط با Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠ وب سايت آشنا شويد. ما مجموعه‌اي از Ù…Ùاهيم را جمع‌آوري کرده‌ايم Ú©Ù‡ به شما Ú©Ù…Ú© مي‌کند تا به ÙˆÙور طرØ‌بندي‌هاي از پيش تعريÙ‌شده وب‌سايت توجه کنيد.
وزن بصري Ùˆ Ùضاي منÙÙŠ
وزن بصري توسط اÙراد زماني درک مي شود Ú©Ù‡ برخي از اشياء در وب سايت داراي نيروي بصري قوي تري هستند. اين نيروي بصري را مي توان از طريق تکنيک هاي مختل٠به عناصر خاصي القا کرد. در ميان آنها، Ùضاي منÙÙŠ همان چيزي است Ú©Ù‡ مستقيماً ما را در اينجا مورد علاقه قرار مي دهد.
Ùضاي منÙÙŠ (Ùضايي Ú©Ù‡ Ùاقد هر عنصري است) از طريق نيروي بصري متمرکز بر عناصر، توجه را به سمت عناصري سوق مي دهد Ú©Ù‡ بيش از بقيه هستند.
نمونه اي از وزن بصري ايجاد شده از طريق Ùضاي منÙÙŠ
Ùضاي بين مربع سياه Ùˆ مربع سÙيد چشم ها را به سمت عنصر سمت Ú†Ù¾ هدايت مي کند. اما عنصر سمت Ú†Ù¾ با 4 مربع سÙيد کوچکتر بيشتر است. مربع سياه داراي نيروي بصري قوي تري است.
چيدمان هاي وب سايت متعادل
در طراØÙŠ متوازن وب، عناصر تشکيل دهنده Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠ از يکديگر پشتيباني مي کنند تا کاربر Ù…Øتواي متن را با اهميت يکسان ببيند. علاوه بر اين، عناصر کليک کنيد به راØتي در طرØÙŠ قابل اسکن هستند Ú©Ù‡ به طور موثر همه آنها را ارائه مي دهد. طراØÙŠ اØساس ثبات مي دهد Ùˆ از نقطه نظر زيبايي شناسي واقعاً دلپذير است.
ÙŠÚ©ÙŠ از Ù…Øبوب ترين Ø·Ø±Ø Ù‡Ø§ÙŠ متعادل، تعادل متقارن است Ú©Ù‡ در آن، مشابه تصوير آينه اي، ÙŠÚ© عنصر بصري در دو طر٠مرکز يکسان به نظر مي رسد. تقارن تعادل، ظراÙت Ùˆ لذت را تداعي مي کند. اØتمالاً شما هم با نگاه کردن به معماري برخي ساختمان‌ها، باغ‌ها Ùˆ Øتي بال‌هاي ÙŠÚ© پروانه آن را اØساس کرده‌ايد.
بخش هايي براي مخاطبان يا ويژگي هاي خاص
ترتيب عناصر قابل تغيير به اين معني Ú©Ù‡ کاربران به راØتي مي توانند به بخش هاي ديگر وب سايت سوئيچ کنند. براي Ú©Ù…Ú© به شما در Ùهميدن اينکه چگونه اين امکان پذير است، پيشنهاد مي کنيم به وب سايت هاي مد Ùکر کنيد Ú©Ù‡ هم مردان Ùˆ هم زنان را مورد خطاب قرار مي دهند.
اين Ø·Ø±Ø Ø§Ø² 2 بخش متمايز در وب سايت پشتيباني مي کند Ú©Ù‡ ÙŠÚ©ÙŠ به پوشاک مردانه Ùˆ ديگري به پوشاک زنان اختصاص دارد. تقسيم Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠ Ù…Øتواي کاربردي را ارائه مي دهد Ú©Ù‡ براي 2 مخاطب هد٠متمايز بسيار Ù…Ùيد است.
از طرØ‌بندي‌هاي استاندارد خارج شويد
در Øالي Ú©Ù‡ برخي از طرØ‌بندي‌ها با هد٠ارائه بهترين عملکرد، مسير سنتي را دنبال مي‌کنند، ساير چيدمان‌ها از طرØ‌ها Ùˆ ساختارهاي جسورانه با هد٠تأثيرگذاري بر کاربر استÙاده مي‌کنند. شکستن قالب به معناي چيدمان غيرمنتظره عناصر در صÙØÙ‡ وب است، Ùˆ تجربياتي Ú©Ù‡ باعث ايجاد آن در دريايي از وب سايت هاي استاندارد مي شود، Ú©Ù‡ کاربر نمي تواند وب سايت شما را به خاطر بسپارد.
وب سايت Schweppes
منبع: Schweppes.ca
با اين Øال به ياد داشته باشيد Ú©Ù‡ UX طراØÙŠ را شکست مي دهد. هميشه به کاربر نهايي Ùکر کنيد. قبل از انتشار هر چيزي آزمايشات را انجام دهيد.
ايجاد تنش بصري براي چيدمان هاي Ù…Øرک چشم نواز
در طراØÙŠ وب، تنش بصري توجه کاربران را با تمرکز بر روي نکات کليدي وب سايت تØت Ùشار قرار مي دهد. تنش بصري با تضاد Ùضا، رنگ يا درخشندگي بيرون مي‌آيد، Ùˆ اگر در تعادل کلي عناصر در هم تنيده شود، به راØتي قابل مشاهده است.
نقش آن اين است Ú©Ù‡ کاربران را به صورت بصري تØريک کند تا روال وب گردي را قطع کنند Ùˆ اطلاعات موجود در وب سايت را در ÙŠÚ© نور کاملاً جديد پردازش کنند.
تنش بصري در طرØ‌بندي وب‌سايت، از طريق قرار دادن غيرمنتظره برخي عناصر – منبع: Stripe
از نقاط کانوني براي جلب توجه به عناصر خاص استÙاده کنيد
ÙŠÚ© دکمه Ùراخوان مي تواند ÙŠÚ© نقطه کانوني باشد. ÙŠÚ© تصوير مي تواند ÙŠÚ© نقطه کانوني باشد. سرÙصل ها همچنين مي توانند نقاط کانوني باشند. همه چيز به Ù†Øوه ادغام آنها در طرØ‌بندي وب‌سايت بستگي دارد، بنابراين به بزرگترين نقاط مورد علاقه در ÙŠÚ© وب‌سايت تبديل مي‌شوند Ú©Ù‡ توجه کاربر را به خود جلب مي‌کنند.
عناصر غالب در Ø·Ø±Ø Ù‡Ø§ÙŠ طراØÙŠ نقطه کانوني
منبع: Tesla.com
به دليل نقاط کانوني، شما کاربران خود را در نيمه راه تبديل خواهيد داشت (هر «تبديل» ممکن است براي وب سايت خاص شما باشد) – کاربران توجه خود را روي آن نقاط کانوني متمرکز مي کنند Ùˆ تمايل بيشتري به انجام اقداماتي Ú©Ù‡ مي خواهيد انجام مي دهند. گرÙتن
طرØ‌بندي‌هايي را طراØÙŠ کنيد Ú©Ù‡ اهدا٠وب‌سايت را Ù…Øقق مي‌کنند
بهترين روش اين است Ú©Ù‡ قبل از شروع به طراØÙŠ ÙŠÚ© Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠ/ براي مرور قالب هاي Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠØŒ بايد اهدا٠وب سايت را مشخص کنيد . آنها ممکن است براي Ùروش Ù…Øصولات، جمع آوري تراÙÙŠÚ©ØŒ يا صرÙاً مسØور کردن کاربران با ÙŠÚ© قطعه هنري باشند. Ø·Ø±Ø ÙˆØ¨ سايت بايد بر اساس اهدا٠وب سايت انتخاب شود. رÙتارهاي کاربران خاصي را تØريک مي کند Ú©Ù‡ منجر به تکميل آن اهدا٠مي شود.
اکنون یک وب سایت ØرÙÙ‡ ای ایجاد کنید