سبک های مختلف طراحی سایت همراه با مثال | آموزش طراحی سایت تبریز

انواع سایت و معرفی سبک های مختلف طراحی سایت

انواع سایت و معرفی سبک های مختلف طراحی سایت

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

انواع سایت

به طور کلی وب سایت ها به سه دسته ی داینامیک ، نیمه داینامیک و استاتیک دسته بندی میشوند .

  • استاتیک یا ایستا
    سایت هایی هستند که محتوای آنها ثابت است و تغییری نخواهد کرد ، اغلب برای معرفی کسب و کار ، یا ارائه رزومه کاری و مواردی که قرار نیست چیزی به سایت اضافه شود .
    در صورتی که قصد تغییری در سایت داشته باشید طراح با تغییر کد سایت تغییرات را اعمال خواهد کرد.
  • داینامیک یا پویا
    نیاز به تغییر مداوم اطلاعات و محتوا داشته و بنا به نیازمندی و کاربرد سایت، طراحی و توسعه می یابند. هزینه های طراحی سایت و نگهداری اینگونه وب سایت ها بیشتر از سایت های استاتیک بوده ولی هزینه های بعدی را در پی نخواهد داشت.
  • نیمه پویا
    وب سایت هایی که در حد وسط ایستا و پویا قرار دارند را شامل میشود ، در این قبیل سایت ها محتوای سایت ثابت است و در بخشی از سایت محصولی ثابت برای فروش قرار داده میشود ، یا قسمتی برای تماس با کاربر و تعامل با کاربر ایجاد میشود .مثلا در مورد وب سایت های استاتیک سایت : https://roots.netlify.com/ جزوه ۱۰ سایت استاتیک برتر ۲۰۱۶ است . در مورد سایت داینامیک هم میتوان به همین وب سایت هنرجو اشاره کرد و در مورد سایت های نیمه پویا https://www.gitbook.com/ مثال مناسبیست .

سبک های مختلف طراحی سایت

 

طراحی تخت ، Flat Design

سبک های مختلف طراحی سایت همراه با مثال | آموزش طراحی سایت تبریز
نمونه سایت طراحی تخت

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

 

طراحی تک صفحه ایی ، One Page Design

سبک های مختلف طراحی سایت همراه با مثال | آموزش طراحی سایت تبریز
نمونه طراحی تک صفحه ای

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

بیشتر بخوانید »»» آموزش طراحی سایت

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

تجربه کاربری لذت بخش و آسان باعث شده که طراحی سایت تک صفحه ای به نسبت سایر طراحی سایت ها از محبوبیت بیشتری در نزد کاربران برخوردار باشد و مدیران سایت ها نیز علی رغم محدودیت های این نوع طراحی وب سایت از آن استفاده کنند.

 

طراحی ریسپانسیو ، Responsive Design

سبک های مختلف طراحی سایت همراه با مثال | آموزش طراحی سایت تبریز
نمونه طراحی ریسپانسیو که به دیوایس هایی با اندازه مختلف واکش نشان میدهد و وفق پیدا میکند

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

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

همچنین گوگل از سال ۲۰۱۵، طراحی سایت ریسپانسیو را یکی از عوامل رتبه بندی اعلام کرد.

 

طراحی انیمیشنی ، Animated Design

سبک های مختلف طراحی سایت همراه با مثال | آموزش طراحی سایت تبریز

وجود بخش های متحرک در وب سایت باعث جذابیت بیشتر وب سایت و پویا بودن آن می گردد و در صورتی که این کار به درستی انجام گردد حس بهتری نسبت به سایت های بدون تحرک در کاربر ایجاد می گردد.

بیشتر بخوانید »»» آموزش MVC

متحرک سازی معمولا با استفاده از HTML و CSS و کتابخانه های جاوا اسکریپت نظیر JQUERY و MOOTOOLS و … انجام می گردند که حجم پیاده سازی انیمیشن به مراتب پایین تر از فلش می باشد.

 

طراحی پارالاکس ، parallax design

سبک های مختلف طراحی سایت همراه با مثال | آموزش طراحی سایت تبریز

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

جذابیت این تکنولوژی به دلیل ارتقای تجربه کاربری به وسیله عکس‌العمل‌های تصویری است. با اسکرول کاربر اجزای مختلف صفحه وب سایت با سرعت‌های متفاوت حرکت می‌کنند؛ حرکت آهسته‌تر پس‌زمینه نسبت به تصویرهای پیش‌زمینه، باعث ایجاد تصور عمق در صحنه‌ای دو بعدی می‌شود.

 طراحی اسکرول پارالاکس برای SEO مناسب نیست.

سایت هایی که این نوع طراحی را دربرمی گیرند معمولا از یک صفحه ساخته می شوند و در نتیجه جستجوی محتوای متن توسط موتورهای جستجو به کندی صورت

می گیرد.

 

طراحی منوی همبرگری

سبک های مختلف طراحی سایت همراه با مثال | آموزش طراحی سایت تبریز
نمونه منوی همبرگری که میتوانید در وب سایت هنرجو مشاهده کنید

امروزه از آنجایی که دیوایس های قابل حمل بسیار رایج شده اند، طراحان وب سایت ها، منو (Navigation Menu) را خلاصه کرده و تحت یک منو به نام منوی موبایلی/همبرگری (Hamburger Menu) قرار می دهند.

ممنون که انتهای مقاله همراه ما بودید ، لفطا انتقادات و پیشنهادات خود را در رابطه با این مقاله برایمان ارسال کنید.


منبع : هنرجو | hoonarjo.com

دیگر مقالات مفید سایت آکادمی هنرجو: