کاربران را با طرح های سه بعدی مسحور وب سایت خود کنید. طراحی سه بعدی می تواند به وب سایت شما در برجسته شدن، ایجاد رابط های جذاب و برانگیختن احساسات کاربران کمک کند. البته که طراحی های سه بعدی ممکن است مشکلاتی نیز داشته باشند که برای جلوگیری از مشکلات مربوط به عملکرد، طراحی باید اصولی انجام شود. در ادامه ما شما را با این اصول مهم آشنا خواهیم کرد.
سه بعدی شدن یا سه بعدی نشدن؟
این سوالی است که هنگام طراحی صفحات وب زیاد پرسیده می شود!
امروزه فناوری و طراحی سه بعدی به بخشی ثابت از زندگی ما تبدیل شده است. طراحی سه بعدی در فیلم ها، بازی ها، برنامه های تلویزیونی، تلفن های هوشمند، چاپگر ها، AR و VR وجود دارد. اما سؤال اصلی این است که آیا تکنیک های سه بعدی در طراحی وب سایت نیز جایی دارند؟ اگر چنین است، تا چه حد می توان از آن بهره برد؟ آیا قرار است ما یک وب سایت را به صورت کاملاً سه بعدی ایجاد می کنیم؟ احتمالا نه ما فقط از تکنیک های سه بعدی در بخش هایی از سایت استفاده خواهیم کرد.
برای شروع بهتر است بدانید، همه ی قسمت های وب سایت نباید مانند یک دنیای کاملاً سه بعدی طراحی شود که در آن گم شوید. اگر هدف این است که بازدیدکنندگان را به سایت خود جذب کنید باید اصول خاص طراحی را بدانید. البته در طراحی سه بعدی موضوع عملکرد نیز وجود دارد، مثلاً ممکن است مانیتور شما از 3D پشتیبانی نکند، اما این بدان معنا نیست که 3D در طراحی وب شما جایی ندارد، در واقع، کار های زیادی وجود دارد که می توان با فضای سه بعدی انجام داد.
3D می تواند در میزبانی وب تاثیر زیادی بگذارد، مخصوصاً اگر تصاویر سه بعدی توسط افزونه یا API خارجی ایجاد شوند. بیایید نگاهی به انواع طراحی 3D بیندازیم تا متوجه شویم چه نوع 3D سازی برای طراحی وب مناسب تر است و سپس به چند نمونه عالی از وب سایت هایی که امروزه از 3D استفاده می کنند، نگاهی بیندازیم.
مطالب عنوان شده در حوزه طراحی های 3D
3D در طراحی وب چیست؟
منظور از طراحی وب سه بعدی این است که ما اشیا را در امتداد محور x، محور y و محور z قرار می دهیم. رایج ترین تفسیر طراحی 3D چیزی است که در وب سایت اپل می توانیم مشاهده کنیم:
در این تصویر سبک های اپل واچ سری 7 اپل را می بینید در این تصویر این محصول به صورت سه بعدی نمایش داده شده است. درست است که هیچ گونه حرکتی در گرافیک آن وجود ندارد ولی با این وجود، ما هنوز می توانیم ببینیم که تصویر دارای عمق خاصی است.
این یکی از روش های استفاده از تکنیک های سه بعدی در طراحی است. درست است که ما در این تصویر هیچ گونه حرکت سه بعدی نداریم اما جسم موجود در تصویر جوری قرار گرفته است که گویی فراز و فرود دارد. البته ممکن است در طراحی برخی سایت ها شی هم قرار نگیرد اما باز می توان با به بازی گرفتن سایه ها و رنگ ها به صفحه وب عمق و حرکت بخشید، آن هم بدون وجود حرکتی در صفحه.
بنابراین، بر خلاف طراحی وب در حالت دو بعدی، که تنها طرح ها و اشیاء خود را گسترده تر یا بلند تر می کنید، طراحی وب سه بعدی به شما امکان می دهد به آن ها عمق ببخشید و آن ها را به عقب و جلو حرکت دهید.
تاریخچه استفاده از فناوری 3D در طراحی وب
در دهه 50 تا 60 میلادی، تعدادی برنامه کامپیوتری با قابلیت مدل سازی سه بعدی توسعه یافتند. نرم افزار Robot Draftsman، که با نام Sketchpad نیز شناخته می شود، اولین نرم افزاری بود که از رابط کاربری گرافیکی (GUI) استفاده کرد و راه را برای طراحی کامپیوتری به کمک (CAD) پیش برد.
اگرچه امروزه از CAD برای ایجاد تصاویر سه بعدی از ساختمان ها، محصولات و سایر اشیاء فیزیکی استفاده می شود، اما می توان دریافت که چگونه این فناوری راه را برای طراحی وب سایت های 3D مدرن باز کرده است. یکی از دلایلی که ما لیست غالب های 3D در زمینه طراحی وب را مشاهده نمی کنیم این است که ایجاد آن آسان نیست.
به طور خلاصه می تواند گفت از سال 1994 میلادی که زبان نشانه گذاری واقعیت مجازی (VRML) معرفی شد، تا سال 2014 میلادی که گوگل سیستم Material Design خود را توسعه داد پیشرفت های زیادی در این حوزه اتفاق افتاد. امروزه نیز تعدادی برنامه سه بعدی سازی وجود دارد که طراحان وب را قادر می سازد طرح های سه بعدی سفارشی و پیچیده ایجاد کنند:
- AutoCAD
- blender
- SketchUp
- Vectary
همچنین انواع فناوری های AR و VR وجود دارد که می توانید از آن ها برای ایجاد رندر های سه بعدی برای موارد استفاده خاص استفاده کنید. اگر می خواهید فقط از تکنیک های سه بعدی استفاده کنید،می توانید از ابزار های Elementor’s Style برای افزودن عمق به اجزای وب سایت و Motion Effects برای زنده کردن طرح های خود استفاده کنید.
مزایای استفاده از 3D در طراحی وب
ترند های جدید طراحی وب سایت هر روزه در حال تغییر اند، بنابراین باید از خود بپرسید آیا 3D به عنوان یک تکنیک یا گرایش طراحی ارزش سرمایه گذاری دارد؟. ممکن است از نظر برخی افراد طراحی سه بعدی به دلیل مشکلاتی در طراحی زیاد هم عقلانی نباشد، ولی در ادامه برخی از فواید طراحی های سه بعدی را برای شما بررسی کرده ایم که با توجه به آن ها می توانید در مورد استفاده از 3D تصمیم بگیرید.
متمایز شدن از طراحی های تخت
وقتی اکثر وب سایت ها مسطح هستند، وب سایتی که با استفاده از ویژگی ها و تکنیک های سه بعدی طراحی شود، فوراً برجسته می شود. فقط توجه داشته باشید که حتماً این کار را با سلیقه و حوصله زیاد و مطابق با اصول طراحی وب انجام دهید. اگر صحنه ها یا اشیاء سه بعدی استفاده شده توسط شما بی معنی باشند و فقط ترفندی برای جلب توجه کاربران باشند، وب سایت شما را برجسته نخواهند کرد، بلکه ممکن است از محبوبیت آن نیز بکاهد.
رابط های کاربری جذاب تر
در طراحی های سه بعدی رابط های کاربری جذاب تری وجود دارد. روش های مختلفی وجود دارد که می توانید از آن ها در طراحی وب از 3D استفاده کنید. مثلا:
- هنگام ورود به سایت از تکنیک های 3D استفاده کنید تا تجربه کابری جذاب تری داشته باشید.
- مهم ترین قسمت گرافیکی سایت خود را با استفاده از ویژگی های 3D زنده کنید.
- برای ارائه دقیق تر محصول می توانید نمای 360 درجه و سه بعدی از محصول به بازدیدکنندگان ارائه دهید.
با انتقال عناصر مناسب در طراحی وب سایت خود از سه روش عنوان شده در بالا، تجربه ای جذاب تر برای بازدیدکنندگان خود ایجاد خواهید کرد.
برانگیختن احساسات مخاطبان
حواس ما با احساسات ما ارتباط تنگاتنگی دارد، حتی حس لامسه نیز با احساسات ما در ارتباط است. درست است که بازدیدکنندگان به طور فیزیکی نمی توانند وب سایت سه بعدی ما را لمس کنند، اما طراحی های سه بعدی می تواند حس لامسه آن ها را جوری برانگیخته کند که گویی می توانند صفحه را لمس کنند. این کاری است که طراحی های تخت و دو بعدی هرگز نمی توانند برای ما انجام دهند.
از آنجا که اغلب لمس کردن به افراد کمک می کند تا با دیگران ارتباط بیشتری داشته باشند و تجربیات خود را با جهان عمیق تر کنند، می توان فرض کرد که تعامل با عناصر سه بعدی در یک وب سایت نیز می تواند بازدیدکنندگان را به نام تجاری ما نزدیک تر کند. حتی اگر این طور هم نباشد، طراحی لمسی وب سایت ما می تواند تأثیر ماندگاری بر آن ها بگذارد.
3D می تواند بهینه سازی نرخ تبدیل شما را بهبود بخشد
طراحی های وب سه بعدی دارای کاربرد های زیادی هستند. به عنوان مثال، می توانید رندر های سه بعدی از محصولات، ویژگی ها و رویداد ها را به یک وب سایت اضافه کنید.
ما می دانیم که خرید برخی کالا های آنلاین با قیمت بالا بدون مراجعه شخصی به فروشگاه آن ها چقدر دشوار است. افزودن تصاویری واقعی و سه بعدی از محصولات به وب سایت، می توانید روند تصمیم گیری را برای خریداران بسیار سریع تر و روان تر کند. با این کار خریداران هنگام انتخاب مطمئن تر و راضی تر خواهند بود و به احتمال زیاد محبوبیت و مشتری های بیشتری جذب خواهید کرد.
چند نمونه شگفت انگیز از استفاده 3D در طراحی وب
حتی اگر طراحی سه بعدی در حال حاضر در همه جای وب وجود نداشته باشد، مطمئناً یک ترند ارزشمند است. اگر راه مناسب برای اجرای 3D در وب سایت خود را پیدا کنید، قطعاً موفقیت همراه شما خواهد بود. همچنین اگر به دنبال الهام گرفت در این زمینه هستید، نمونه های 3D خلاقانه زیر را در طراحی وب سایت های مشهور ببینید.
1. Robert Bürgel
بنر مشکی این سایت دارای برش هایی است که نام Robert Bürgel را روی آن نوشته شده است. این حروف تنها زمانی آشکار می شوند که ماهی های نئونی پشت آن در پس زمینه شنا می کنند. این به تصویر ب افراد این احساس را می دهد که در حال تماشای یک آکواریوم پر از ماهی هستند؛ این نوع طراحی جوری است که هرگز توسط مخاطب فراموش نخواهد شد.
2. وب سایت آکادمی Flux
آکادمی Flux مکانی است که طراحان وب برای یادگیری نحوه طراحی و تکمیل مهارت های خود از طریق دوره های آموزشی به آنجا می روند. می بینید که بر روی صفحه اصلی این سایت تعدادی گرافیک سه بعدی وجود دارد، این اولین صفحه و جالب ترین سایت است. در این صفحه همانطور که بازدید کننده صفحه را پایین می آورد، نماد های مربوط به طرح شناور همه به سمت پایین آمده و در جمجمه مجسمه قرار می گیرند، که این یک استعاره ای از هدف کلی شرکت است.
نکته قابل توجه در مورد این مثال این است که گرافیک سه بعدی آن نسبتاً ساده است و در آن تنها نماد های مسطح، یک مجسمه، گوی ها و چهره های مصور قرار دارند. این به شما نشان می دهد که با جلوه های سایه و حرکت مناسب، می توانید یک تجربه سه بعدی بسیار جالب را برای بازدیدکنندگان به ارمغان آورید.
3. وب سایت کمپانی Samsung
اپل تنها شرکت تولیدکننده تلفن های هوشمند نیست که از 3D برای جلب توجه محصولات خود استفاده می کند. به صفحه فرود سامسونگ برای Galaxy Z Fold نگاه کنید. سامسونگ این محصول را از همان لحظه ورود کاربر به سایت به شکل زنده معرفی می کند.
توجه کنید که چگونه هنگام نمایش تصویر موجود در صفحه، برای بارگذاری اولیه، از یک تصویر سه بعدی چرخان شبیه به خود تلفن استفاده کرده اند. بازدیدکنندگان وقتی وارد سایت می شوند، تصویر تلفن واقعی را از زاویه های مختلف و حتی ظاهر آن را هنگام باز و بسته شدن می بینند. این تصویر سه بعدی چگونگی طراحی یک گوشی تاشو را آن قدر خوب به مخاطبان نمایش می دهد، که دیگر نیازی به مراجعه حضوری به فروشگاه ندارند.
4. طراحی سه بعدی سایت KITKAT Chocolatory
وب سایت KITKAT Chocolatory یک وب سایت کاملاً سه بعدی و سرگرم کننده است، که طراحی آن برخلاف وب سایت های دیگر KITKAT است. چرا اینطور است؟ در حقیقت این سایت برای افرادی که می خواهند در مورد نام تجاری KITKAT و محصولات آن بیشتر بدانند، نیست. بلکه در این سایت از مشتریانی که عاشق محصولات KITKAT هستند دعوت می شود تا جدید ترین شکلات های شرکت را سفارش دهند. مشتریان در این سایت می توانند بسته بندی محصولات خود را با عکس های شخصی خود سفارشی کنند.
5. TAG Heuer
TAG Heuer برندی است که به ساعت های شیک شناخته می شود. روش های زیادی برای ایجاد یک وب سایت با کلاس و زیبا وجود دارد، اما هیچ چیزی نمی تواند محصولات شما را به با شکوهی حالت سه بعدی آن نشان دهد. TAG Heuer نیز با محصولات خود همین کار را انجام داده است.
در این عکس ها ما ساعت های زیبایی را می بینیم که در پس زمینه سفید و سیاه تیره قرار گرفته اند. در برخی موارد، این فقط یک عکس از ساعت است و مواردی نیز وجود دارد که ما ساعت را در حال حرکت می بینیم، مانند زمانی که قفل باز و بسته می شود.
البته تکنیک سه بعدی فقط برای استفاده برند های لوکس نیست، بلکه برند های کوچک نیز می توانند از تصاویر سه بعدی محصولات خود برای فروش موثر تر به صورت آنلاین استفاده کنند.
6. Mazda
کاری که مزدا در اینجا انجام داده بسیار شبیه کاری است که شرکت های تجارتی هنگام تغییر رنگ عکس محصول بر اساس انتخاب مشتری انجام می دهند. البته مزدا فقط توانایی انتخاب رنگ یا سفارشی سازی خوردو های خود را در یک مدل دو بعدی ارئه نمی دهد. مزدا در یک تصویر سه بعدی به مشتریان اجازه می دهد تا در داخل و خارج از خودرو حرکت کرده و در داخل آن بچرخند تا از نزدیک مدل ها را ببینند و انتخاب رنگ مورد نظرشان را برای هر قسمت انجام دهند.
وقتی سایتی دارید که یک محصول گران قیمت در آن می فروشد یا حتی محصولی دارید که مشتری واقعاً باید قبل از خرید کاملاً آن را ببیند استفاده از یک ابزار سه بعدی برای شما مانند این یک دارایی بزرگ خواهد بود.
از طراحی وب سه بعدی عاقلانه استفاده کنید!
مهم نیست طرح های سه بعدی شما چقدر بزرگ یا کوچک هستند. مهم ترین نکته ای که هنگام استفاده از 3D در طراحی وب باید به خاطر داشته باشید این است که تجربه کاربری را بهبود ببخشید. شما می خواهید بازدیدکنندگان از آنچه دیده اند شگفت زده شوند و با برند شما بیشتر آشنا شوند، نه آن که متعجب شوند که چرا وقتشان صرف تماشای یک انیمیشن سه بعدی بی ربط شده است.
همچنین، توجه داشته باشید که چگونه 3D بر عملکرد وب سایت های شما تأثیر می گذارد. اگر بازدیدکنندگان مجبور باشند بیش از چند ثانیه منتظر بمانند تا وب سایت شما تمام طراحی های سه بعدی را بارگیری کند، ممکن است وب سایت شما را ترک کرده و هرگز آن ها را مشاهده نکنند.
با این اوصاف، ما امروز نمونه های شگفت انگیزی از طراحی وب سه بعدی را در اینجا مشاهده کرده ایم. از کارهایی که این برند ها انجام داده اند الهام بگیرید، تا بتوانید به چیزی که واقعاً عالی، مفید و سرگرم کننده برای بازدیدکنندگان باشد، دست پیدا کنید.
منبع:
elementor.com
