طراحي سايت

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

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

استفاده از فونت اختصاصي به كاربر كمك ميكند كه سريعا حضور در سايت شما را تشخيص دهد. اين تكنيك در اولين بازديد موجب جلب توجه كاربران و در مراجعات بعدي روشي براي تثبيت هويت برند شما خواهد بود.

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

طراحي سايت با فونت اختصاصي

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

فرمت فايل فونت براي مرورگرها و دستگاه هاي مختلف فرق ميكند و شما بايد فونت خود را به گونه اي طراحي كنيد كه در همه فرمت ها در دسترس بوده و در تمامي مرورگرها نمايش مناسبي داشته باشد.

تصاوير بزرگ و البته ريسپانسيو در طراحي سايت
تكنيك استفاده از تصاوير بزرگ در طراحي سايت كه اصطلاحا با نام hero images شناخته ميشود يكي از رايج ترين المان هاي موجود در سايت هاي مدرن محسوب ميشود و مهمترين دليل رواج آن كارايي بالا براي انتقال سريع و شفاف پيام به مخاطب است. ميتوان گفت اين تكنيك جايگزين مناسبي براي اسلايدر است كه هم موجب ميشود حجم صفحه بالا نرود و هم به جاي نمايش چند اسلايد تمركز آن بر روي يك پيام مشخص است.

استفاده از تصاوير بزرگ به همراه متن يا عنوان بر روي آن به شما اجازه ميدهد پيام خود را همراه با تصوير به كاربران منتقل كنيد و در يك نگاه همه توجه كاربر را به اين پيام معطوف كنيد. اگر پيام شما واضح و البته جذاب باشد كاربر براي مشاهده ادامه صفحه و مطالعه محتواي آن ترغيب ميشود. طراحي سايت بانيلينك را ميتوان يك نمونه مناسب از بكارگيري تكنيك Hero Header دانست.

طراحي سايت مدرن با استفاده از hero header

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

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

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

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

مهمترين دليل جذابيت ويديو بك گراند آن است كه كاربر را از همان لحظه اول با سايت درگير كرده و زمان حضور او در سايت را افزايش ميدهد. تحقيقات نشان ميدهد درك انسان از ويديو ۶۰ هزار بار سريعتر از مطالعه يك متن انجام ميشود و عموما كاربران سايت علاقه زيادي به مطالعه متن هاي موجود در صفحه ندارند.

طراحي سايت بااستفاده از ويديو در بك گراند

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

طراحي سايت با تكنيك نيمه فلت
در سال ۲۰۱۳ كمپاني اپل طراحي سايت خود را از پايه تغيير داده و از طراحي فلت در طراحي سايت خود استفاده نمود. طراحي فلت به معني پرهيز از هرگونه طراحي سه بعدي در صفحه مانند سايه است. طراحي فلت موجب ميشود درك كاربران از محتواي صفحه افزايش يافته و سرعت بارگذاري صفحه افزايش يابد.

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

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

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

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

منبع: طراحي سايت

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

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

استفاده از فونت اختصاصي به كاربر كمك ميكند كه سريعا حضور در سايت شما را تشخيص دهد. اين تكنيك در اولين بازديد موجب جلب توجه كاربران و در مراجعات بعدي روشي براي تثبيت هويت برند شما خواهد بود.

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

طراحي سايت با فونت اختصاصي

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

فرمت فايل فونت براي مرورگرها و دستگاه هاي مختلف فرق ميكند و شما بايد فونت خود را به گونه اي طراحي كنيد كه در همه فرمت ها در دسترس بوده و در تمامي مرورگرها نمايش مناسبي داشته باشد.

تصاوير بزرگ و البته ريسپانسيو در طراحي سايت
تكنيك استفاده از تصاوير بزرگ در طراحي سايت كه اصطلاحا با نام hero images شناخته ميشود يكي از رايج ترين المان هاي موجود در سايت هاي مدرن محسوب ميشود و مهمترين دليل رواج آن كارايي بالا براي انتقال سريع و شفاف پيام به مخاطب است. ميتوان گفت اين تكنيك جايگزين مناسبي براي اسلايدر است كه هم موجب ميشود حجم صفحه بالا نرود و هم به جاي نمايش چند اسلايد تمركز آن بر روي يك پيام مشخص است.

استفاده از تصاوير بزرگ به همراه متن يا عنوان بر روي آن به شما اجازه ميدهد پيام خود را همراه با تصوير به كاربران منتقل كنيد و در يك نگاه همه توجه كاربر را به اين پيام معطوف كنيد. اگر پيام شما واضح و البته جذاب باشد كاربر براي مشاهده ادامه صفحه و مطالعه محتواي آن ترغيب ميشود. طراحي سايت بانيلينك را ميتوان يك نمونه مناسب از بكارگيري تكنيك Hero Header دانست.

طراحي سايت مدرن با استفاده از hero header

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

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

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

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

مهمترين دليل جذابيت ويديو بك گراند آن است كه كاربر را از همان لحظه اول با سايت درگير كرده و زمان حضور او در سايت را افزايش ميدهد. تحقيقات نشان ميدهد درك انسان از ويديو ۶۰ هزار بار سريعتر از مطالعه يك متن انجام ميشود و عموما كاربران سايت علاقه زيادي به مطالعه متن هاي موجود در صفحه ندارند.

طراحي سايت بااستفاده از ويديو در بك گراند

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

طراحي سايت با تكنيك نيمه فلت
در سال ۲۰۱۳ كمپاني اپل طراحي سايت خود را از پايه تغيير داده و از طراحي فلت در طراحي سايت خود استفاده نمود. طراحي فلت به معني پرهيز از هرگونه طراحي سه بعدي در صفحه مانند سايه است. طراحي فلت موجب ميشود درك كاربران از محتواي صفحه افزايش يافته و سرعت بارگذاري صفحه افزايش يابد.

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

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

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

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

منبع: طراحي سايت