ساخت Ùˆ طراØÛŒ سایت ارزان
طراØÙŠ ÙˆØ¨ ايجاد وب سايت ها Ùˆ ØµÙØØ§ØªÙŠ است Ú©Ù‡ برند Ùˆ اطلاعات ÙŠÚ© شرکت را منعکس مي کند Ùˆ تجربه اي کاربرپسند را تضمين مي کند. ظاهر Ùˆ طراØÙŠ Ø¨Ù‡ عنوان عناصر ØÙŠØ§ØªÙŠ Ø§Ø¯ØºØ§Ù… مي شوند، Ú†Ù‡ در ØØ§Ù„ طراØÙŠ ÙŠÚ© وب سايت، برنامه تلÙÙ† همراه يا ØÙظ Ù…ØØªÙˆØ§ در ÙŠÚ© ØµÙØÙ‡ وب باشيد. شما مي توانيد طراØÙŠ ÙˆØ¨ را ياد بگيريد تا ÙŠÚ© سايت براي کسب Ùˆ کار خود ايجاد کنيد يا به ÙŠÚ© Ø·Ø±Ø§Ø ÙˆØ¨ ØØ±ÙÙ‡ اي تبديل شويد Ú©Ù‡ سايت هايي براي مشتريان ايجاد مي کند. در اين مقاله، طراØÙŠ ÙˆØ¨ چيست Ùˆ همچنين عناصر Ùˆ کاربردهاي رايج را ØªÙˆØ¶ÙŠØ Ù…ÙŠ دهيم.
Ø·Ø±Ø§ØØ§Ù† وب Ú†Ù‡ مي کنند؟
طراØÙŠ ÙˆØ¨ØŒ اهدا٠يک وب سايت يا ØµÙØÙ‡ وب را مشخص مي کند Ùˆ دسترسي همه کاربران بالقوه را ارتقا مي دهد. اين ÙØ±Ø¢ÙŠÙ†Ø¯ شامل سازماندهي Ù…ØØªÙˆØ§ Ùˆ تصاوير در ÙŠÚ© سري از ØµÙØØ§ØªØŒ يکپارچه سازي برنامه ها Ùˆ ساير عناصر تعاملي است.
متخصصاني Ú©Ù‡ اين ÙØ±Ø¢ÙŠÙ†Ø¯ را انجام مي دهند Ø·Ø±Ø§Ø ÙˆØ¨ ناميده مي شوند Ùˆ شغل آنها شامل وظاي٠زير است:
انتخاب Ùونت هاي خوانا
انتخاب Ø·Ø±Ø Ù‡Ø§ÙŠ رنگي جذاب Ú©Ù‡ Ùونت هاي خوانا را نيز ÙØ¹Ø§Ù„ مي کند
پياده سازي هويت ÙŠÚ© برند در رنگ ها، Ùونت ها Ùˆ طرØ
ايجاد نقشه اي از ساختار وب سايت براي اطمينان از ناوبري بصري
قرار دادن تصاوير، آرم ها، متن، Ùيلم ها، برنامه ها Ùˆ ساير عناصر
Ø§Ø³ØªÙØ§Ø¯Ù‡ از زبان هاي کدنويسي مانند HTML Ùˆ CSS براي ايجاد Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠ Ùˆ استايل دادن به ØµÙØØ§Øª
ساختن نسخه هاي بهينه وب سايت ها Ùˆ ØµÙØØ§Øª براي مشاهده دسکتاپ Ùˆ موبايل
دو روش متداول طراØÙŠ ÙˆØ¨ وجود دارد: طراØÙŠ ØªØ·Ø¨ÙŠÙ‚ÙŠ ??Ùˆ واکنش گرا. در طراØÙŠ ØªØ·Ø¨ÙŠÙ‚ÙŠØŒ Ù…ØØªÙˆØ§ÙŠ ÙˆØ¨ سايت با Ø§Ø³ØªÙØ§Ø¯Ù‡ از اندازه هاي استاندارد ØµÙØÙ‡ نمايش به عنوان قاب براي Ø·Ø±ØØŒ ايجاد مي شود. در طراØÙŠ ÙˆØ§Ú©Ù†Ø´ گرا، Ù…ØØªÙˆØ§ با توجه به اندازه ØµÙØÙ‡ نمايش به صورت پويا ØØ±Ú©Øª مي کند. Ø·Ø±Ø§ØØ§Ù† وب از مراØÙ„ Ù…Ø®ØªÙ„Ù ÙØ±Ø¢ÙŠÙ†Ø¯ کلي طراØÙŠ ÙˆØ¨ براي Ø§Ø³ØªÙØ§Ø¯Ù‡ از اين روش هاي طراØÙŠ Ø¨Ø³ØªÙ‡ به ØªØ±Ø¬ÙŠØØ§Øª Ùˆ اهدا٠مشتري يا Ú©Ø§Ø±ÙØ±Ù…ا براي سايت Ø§Ø³ØªÙØ§Ø¯Ù‡ مي کنند.
بيشتر بياموزيد: درباره Ø·Ø±Ø§Ø ÙˆØ¨ بودن بياموزيد
عناصر طراØÙŠ ÙˆØ¨ چيست؟
ÙØ±Ø¢ÙŠÙ†Ø¯ طراØÙŠ ÙˆØ¨ به Ø·Ø±Ø§ØØ§Ù† اين امکان را مي دهد Ú©Ù‡ با هر اولويتي سازگار شوند Ùˆ راه ØÙ„ هاي موثري ارائه دهند. بسياري از اجزاي استاندارد هر طراØÙŠ ÙˆØ¨ وجود دارد، از جمله:
چيدمان
تصاوير
سلسله مراتب بصري
Ø·Ø±Ø Ø±Ù†Ú¯ÙŠ
تايپوگراÙÙŠ
خوانايي
جهت يابي
Ù…ØØªÙˆØ§
سيار
چيدمان
Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠ وب سايت Ù†ØÙˆÙ‡ نمايش مطالب در ÙŠÚ© ØµÙØÙ‡ است. انتخاب چيدمان ÙŠÚ© کار ضروري براي Ø·Ø±Ø§Ø Ø§Ø³Øª. بايد ساده، شهودي Ùˆ در دسترس باشد. Ø·Ø±Ø§ØØ§Ù† وب مي توانند از قسمت هاي خالي به نام ÙØ¶Ø§Ù‡Ø§ÙŠ Ø³Ùيد براي سازماندهي عناصر سايت با Ø·Ø±Ø Ù‡Ø§ÙŠ شبکه اي Ø§Ø³ØªÙØ§Ø¯Ù‡ کنند تا آنها را مرتب Ù†Ú¯Ù‡ دارند.
Ø·Ø±Ø§ØØ§Ù† مي توانند Ø·Ø±Ø Ø¨Ù†Ø¯ÙŠ هاي تخصصي براي ØµÙØÙ‡ نمايش دسکتاپ Ùˆ دستگاه هاي تلÙÙ† همراه ايجاد کنند. وب سايت هاي سازگار با موبايل ÙŠÚ© ضرورت هستند زيرا بسياري از بازديدکنندگان از طريق تلÙÙ† همراه يا تبلت خود به وب سايت ها دسترسي دارند. براي اطمينان از اينکه ÙŠÚ© وب سايت براي بازديدکنندگان تلÙÙ† همراه آماده است، Ø·Ø±Ø§Ø Ù…ÙŠ تواند از ÙŠÚ© الگوي واکنش گرا Ø§Ø³ØªÙØ§Ø¯Ù‡ کند Ú©Ù‡ با اندازه هاي Ù…Ø®ØªÙ„Ù ØµÙØÙ‡ تطبيق مي يابد يا ظاهري Ùقط براي تلÙÙ† همراه Ú©Ù‡ با اتصال دستگاه غير روميزي به وب سايت ÙØ¹Ø§Ù„ مي شود. ÙŠÚ© Ø·Ø±Ø Ø«Ø§Ø¨Øª بين پشتيباني ها به اعتماد بازديدکنندگان Ú©Ù…Ú© مي کند.
تصاوير
تصاوير، تصاوير، گراÙÙŠÚ© ها، عکس ها، نمادها Ùˆ موارد ديگر هستند Ú©Ù‡ براي ارائه اطلاعات تکميلي به متن Ø§Ø³ØªÙØ§Ø¯Ù‡ مي شوند. براي ايجاد جلوه مورد نظر، Ø·Ø±Ø§ØØ§Ù† مي توانند تصاويري را انتخاب کنند Ú©Ù‡ مکمل يکديگر Ùˆ برندي باشد Ú©Ù‡ وب سايت نشان دهنده آن است.
سلسله مراتب بصري
سلسله مراتب بصري ترتيبي است Ú©Ù‡ کاربر اطلاعات موجود در سايت را پردازش مي کند. Ø·Ø±Ø§Ø Ø¢Ù† را با اعمال ÙŠÚ© الگوي بصري در وب سايت ايجاد مي کند. الگوي بصري روشي است Ú©Ù‡ طراØÙŠ Ø¨Ù‡ چشم Ùˆ Ø±ÙØªØ§Ø± بازديدکنندگان هدايت مي کند. به عنوان مثال، الگوهاي F يا الگوهاي Z بر بخش اÙقي بالاي سايت شما تأکيد دارند، جايي Ú©Ù‡ اکثر Ø·Ø±Ø§ØØ§Ù† ناوبري Ùˆ لوگوي برند Ùˆ گاهي اوقات ÙŠÚ© کادر جستجو قرار مي دهند. اينها عناصري هستند Ú©Ù‡ الهام بخش تعامل کاربر Ùˆ شناخت برند هستند.
مطالب مرتبط: درباره Ø·Ø±Ø§Ø UX بودن بياموزيد
Ø·Ø±Ø Ø±Ù†Ú¯ÙŠ
Ø·Ø±Ø Ø±Ù†Ú¯ ترکيبي از رنگ هاست Ú©Ù‡ با برند Ùˆ صنعتي Ú©Ù‡ نمايندگي مي کند هماهنگ است. براي رسيدن به اين Ù‡Ø¯ÙØŒ آنها ÙŠÚ© رنگ غالب Ùˆ چند رنگ ديگر را براي ايجاد ÙŠÚ© پالت انتخاب مي کنند. ÙŠÚ© پالت رنگ مي تواند تک رنگ (سايه هاي مختل٠يک رنگ)ØŒ مشابه (رنگ هاي نزديک به يکديگر) يا مکمل باشد. Ø·Ø±Ø§ØØ§Ù† همچنين به اين موضوع اشاره مي‌کنند Ú©Ù‡ کاربران به Ú†Ù‡ رنگ‌هايي بيشتر جذب مي‌شوند.
تايپوگراÙÙŠ
تايپوگراÙÙŠ سبک يا Ùونت Ù…ØØªÙˆØ§ÙŠ Ù†ÙˆØ´ØªÙ‡ شده است. Ø·Ø±Ø§ØØ§Ù† وب ÙŠÚ©ÙŠ يا ترکيبي را انتخاب مي کنند Ú©Ù‡ جذاب Ùˆ خواندني باشد. براي انجام بهترين انتخاب، آنها بايد Ùونتي را انتخاب کنند Ú©Ù‡ با مخاطب هد٠مطابقت داشته باشد. برخي از سايت ها ممکن است در Ùونت هاي سري٠بهتر باشند در ØØ§Ù„ÙŠ Ú©Ù‡ برخي ديگر بسته به صنعت سايت، هد٠و کاربر معمولي مي توانند از Ùونت هاي غير Ø³Ø±ÙŠÙ Ø§Ø³ØªÙØ§Ø¯Ù‡ کنند.
مطالب مرتبط: با Ø·Ø±Ø§Ø Ú¯Ø±Ø§ÙÙŠÚ© بودن آشنا شويد
خوانايي
خوانايي زماني است Ú©Ù‡ متن Ù…ØØªÙˆØ§ در ÙŠÚ© ØµÙØÙ‡ وب به Ø±Ø§ØØªÙŠ Ù‚Ø§Ø¨Ù„ مشاهده Ùˆ خواندن باشد. متن روي وب سايت بايد خوانا باشد زيرا بازديدکنندگان معمولا زمان کمي را صر٠آن مي کنند Ùˆ بايد به سرعت اطلاعات را پيدا کنند. Ø·Ø±Ø§ØØ§Ù† مي توانند با انتخاب اندازه Ùˆ پيکسل مناسب براي متن به اين امر دست يابند. کنتراست بين متن Ùˆ رنگ هاي پس زمينه سايت نيز خوانايي را بهبود مي بخشد.
جهت يابي
عناصر ناوبري ابزارهايي هستند Ú©Ù‡ به کاربران اين امکان را مي دهند تا جايي Ú©Ù‡ مي خواهند در ÙŠÚ© وب سايت بروند را انتخاب کنند. بسته به Ø·Ø±Ø Ùˆ ساختار سايت، ممکن است در سربرگ، بدنه Ùˆ پاورقي وب سايت وجود داشته باشند. اين عناصر ضروري هستند زيرا بازديدکنندگان را در اسرع وقت به اطلاعاتي Ú©Ù‡ مي خواهند هدايت مي کنند.
Ø·Ø±Ø§ØØ§Ù† مي‌توانند انواع طرØâ€ŒÙ‡Ø§ Ùˆ طرØâ€ŒØ¨Ù†Ø¯ÙŠâ€ŒÙ‡Ø§ÙŠ Ù†Ø§ÙˆØ¨Ø±ÙŠ را انتخاب کنند، مانند Ø§Ø³ØªÙØ§Ø¯Ù‡ از دکمه‌اي Ú©Ù‡ منوهاي ناوبري را پنهان Ùˆ آشکار مي‌کند. آنها همچنين مي توانند Ùلش هاي ÙŠÚ© کليک Ùˆ دکمه هاي ديگري را Ú©Ù‡ کاربران را به بالاي ØµÙØÙ‡ØŒ به ÙŠÚ© منطقه خاص از ÙŠÚ© ØµÙØÙ‡ يا به طور کامل ØµÙØÙ‡ ديگر هدايت مي کند، ترکيب کنند.
Ù…ØØªÙˆØ§
Ù…ØØªÙˆØ§ تمام اطلاعات موجود در وب سايت است. اين ÙŠÚ© عنصر Ù…ØÙˆØ±ÙŠ Ø§Ø³Øª زيرا بازديدکنندگان مي خواهند به سرعت اطلاعات را Ø¯Ø±ÙŠØ§ÙØª کنند. وقتي وب سايت به ÙˆØ¶ÙˆØ Ø§Ø±ØªØ¨Ø§Ø· برقرار مي کند Ùˆ توجه خوانندگان را به خود جلب مي کند، به Ø§ØØªÙ…ال زياد آنها را به مصر٠کننده تبديل مي کند. Ø·Ø±Ø§Ø Ù…ÙŠ تواند با Ø§Ø³ØªÙØ§Ø¯Ù‡ از Ù„ØÙ† مناسب Ùˆ ارائه اطلاعات صØÙŠØ در Ú©Ù„ وب سايت از جمله ØµÙØØ§Øª «درباره» Ùˆ «تماس» به اين مهم دست يابد.
طراØÙŠ ÙˆØ¨ Ú†Ù‡ کاربردي دارد؟
طراØÙŠ ÙˆØ¨ براي بسياري از وظاي٠و قیمت طراØÛŒ سایت اهدا٠مهم Ø§Ø³ØªÙØ§Ø¯Ù‡ مي شود، از جمله:
بهينه سازي موتور جستجو
بهينه سازي موتور جستجو (SEO) روشي براي Ø§ÙØ²Ø§ÙŠØ´ شانس ÙŠØ§ÙØªÙ† وب سايت توسط موتورهاي جستجو است. طراØÙŠ ÙˆØ¨ اطلاعات را به گونه اي کد مي کند Ú©Ù‡ موتورهاي جستجو بتوانند آن را بخوانند. اين مي تواند کسب Ùˆ کار را تقويت کند زيرا سايت در ØµÙØÙ‡ هاي برتر نتايج جستجو نشان داده مي شود Ùˆ به Ø§ÙØ±Ø§Ø¯ Ú©Ù…Ú© مي کند آن را پيدا کنند.
مورد از بهترین طراØÛŒ های وب سایت برای الهام بخشیدن به شما