بخش دوم مربوط به سایت سازهای مشهور وب می باشد ،  سیر تحول آنها و آنچه  که آنها برای تطبیق با WebDesign 3.0 به آن احتیاج دارند .آیا سایت سازها ، از روند طراحی مدرن وب، مبتنی بر Bootstrap استفاده می کنند؟ متأسفانه ، درست است هر روز تاخیر آشکارتر و مشهود تر می شود بیاید تا علت این موضوع  رو با جزئیات بیشتر بررسی کنیم

تحول سایت سازها

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

بیایید این تحول ها را با جزئیات  بررسی کنیم:

 تحول به ویراستاران ویژوال

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

تحول دوم ،  ظهور سیستم های وبلاگ مانند وردپرس و جوملا و ابزارهای تولید پوسته (قالب) وب سایت مانند  Artisteer بود. میلیون ها قالب سایت در Artisteer طراحی شده است. اما در طی چند سال ، طرح های تم Artisteer منسوخ شد.

برخی از سایت سازها محبوب و افزونه های WordPress منتشر شده اند مانند  Webflow ، VisualCompuser ، Elementor ، Divi و سایر افزونه هایی از این دست که  بیشتر آنها مبتنی بر بوت استرپ هستند ، در نتیجه صرفا برای طراحی وب 2.0 مناسب  هستند .

چیزی که در این سازنده ها و افزونه های وب سایت  نسبت به طراحی وب 3 ندارند این است که  فاقد قابلیت لایه بندی و جانمایی آزاد هستند .   همچنین ، آنها سادگی و راحتی ابزارهای طراحی گرافیکی را که طراحان به آن نیاز دارند ارائه نمی دهند.

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

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

تحول به طراحی وب 3.0

تحول  فعلی به سوی Web Design 3.0 است. و در حال حاضر در حال انجام است ، اما متأسفانه بسیاری از سایت سازها برای طراحی های مدرن آماده نیستند.

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

موارد زیر را مرور خواهیم کرد: فقدان خلاقیت ، ویکس و گوتنبرگ.

فقدان خلاقیت

شاید باورش سخت باشد ، اما گاهی اوقات توسعه دهندگان در جهت مخالف حرکت می کنند. برخی از ابزارهای  نوظهور  مانند Wix ADI ، GoDaddy Site Builder و Mobirise مجموعه ای ثابت از قالب های از پیش ساخته را دارند. کاربران فقط می توانند متن و تصاویر را تغییر دهند ، نه طرح را . آیا توسعه دهندگان می خواهند همه وب سایت ها یکسان به نظر برسند؟ این نوع خلاقیت و تکامل طراحی وب چیست؟

درست است که ابزارها می توانند آسان باشند ، زیرا نمی توانید طراحی را تغییر دهید. شاید ، برخی از کاربران موافقت خود را با سادگی و “بدون امکان تغییر طرح” انجام دهند. اما هدف ما داشتن ساده ترین سازنده و در عین حال حفظ حداکثر آزادی برای خلاقیت است. ما به پیشرفت انقلابی در ابزارها نیاز داریم.

گوتنبرگ

مثال دیگر ، همانطور که می دانید وردپرس “ویرایشگر مقاله” جدیدی را منتشر کرد . سوالی که پیش می آید آن است که چرا گوتنبرگ منتشر شد . به نظر می رسد که توسعه دهندگان WordPress می خواستند  مشابه Medium.com را منتشر کنند. همچنین ، آنها می خواستند از ویژگی های ابزارهایی مانند VisualComposer استفاده کنند. هر دو  “ویرایشگر مقاله” را با سازنده وب سایت ساده ترکیب کردند. به نظر می رسد که همه باید دوباره خوشحال شوند. اما ، برعکس ،کاربران این نوآوری وردپرس را دوست نداشتند. لطفاً تصویر زیر را مشاهده کنید.

چرا این اتفاق افتاد؟ به نظر می رسد ویرایشگر گوتنبرگ به عنوان یک ویرایشگر “مقاله ” پیچیده است. در عین حال ، دارای ویژگی های ضعیفی برای سازنده وب سایت است. علاوه بر این ، طراحی وب تولید شده توسط گوتنبرگ حتی در طراحی وب 2.0 نیز نیست و بیشتر شبیه به طراحی وب 1.5 از 2010 می باشد.

آنها می توانند یک API مناسب ارائه دهند تا سایت سازها خود را در وردپرس آسانتر سازند. درعوض ،  رقیب دیگری را برای سایت سازها موجود منتشر کردند. همچنین هیچ طرح اولیه ای ارائه ندادند.

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

 

WIX

Wix سعی کرد ابزاری برای طراحی وب 3.0 باشد. مشکل Wix این است که HTML آن با استانداردهای اتخاذ شده توسط توسعه دهندگان وب سایت مطابقت ندارد. موقعیت یابی عنصر مطلق است. در نتیجه ، HTML قابل ویرایش نیست و نگهداری دستگاه های موبایل دشوار است. Wix فقط از دسک تاپ و تلفن همراه پشتیبانی می کند. در عمل معمولاً از پنج نوع دستگاه پشتیبانی خواهد کرد. Wix موقعیت یابی مجدد را با JavaScript ،و نه HTML5 و CSS3 محاسبه می کند. همچنين  فاقد  پنلی مشابه پنل  ابزار موجود در نرم افزارهای گرافیکی می باشد . به نظر می رسد Wix بیشتر برای کاربران نهایی است ، نه برای طراحان و توسعه دهندگان. به عنوان مثال ، نظراتی که زیر ویدئویی در یوتیوب  با عنوان ” How to Make a Website – Web Design Tutorial” را از کانال ” Draw with Jazza” مشاهده کنید. بحث تحت این فیلم هنوز ادامه دارد.

Wix در جهت ساده سازی وب سایت تلاش نمود و Wix ADI را ایجاد کند. آنها توانایی ویرایش کامل طرح را از بین بردند. فقط می توانید متن و تصاویر را تغییر دهید. بنابراین این محصول ، با Web Design 3.0  خیلی فاصله دارد  .

پیشرفتی در سایت سازها وجود ندارد

چرا ایجاد ابزارهای جدیدی که صنعت طراحی وب به آن نیاز دارد ، کار سختی است؟

1. سختی فرایند : سایت سازها سیستمهای کاملاً پیچیده ای هستند که نیاز به سرمایه گذاری و زمان قابل توجهی برای توسعه دارند. همچنین به یک ایده عالی نیاز دارد که می تواند طراحی وب را تغییر دهد.
2. وجود انحصار:  ورود ابزارهای جدید برای ورود به بازار موجود سایت سازها دشوار است. ابزارهای فعلی یک پایگاه کاربر بزرگ دارند که طی سالها انباشته شده است. برای ابزارهای جدید ، اطلاع رسانی به تعداد زیادی از کاربران دشوار است. بنابراین ما برای گسترش اطلاعات به کمک و پشتیبانی شما نیاز داریم.
3. رفتار انفعالی : توسعه دهندگان و کاربران سایت سازها های موجود بسیار منفعل هستند. تغییرات همیشه مربوط به خطرات خاص و تلاشهای اضافی است. مردم ترجیح می دهند هیچ چیزی را تغییر ندهند ، زیرا فکر می کنند تا ابد چنین خواهد بود. لطفا منفعل نباشید!

پیشرفت  ادامه دار است

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

به عنوان مثال ، خودروهای برقی با وجود مقاومت عظیم انحصارهای نفتی و تولید کنندگان اتومبیلهای بنزینی سنتی همچنان به تسخیر بازار ادامه می دهند.

به همین ترتیب ، به نظر می رسد که طراحی وب  2.0 فعلی و سایت سازها تنها گزینه هستند. اما وظیفه ما این است که به نواوری جدید فرصتی بدهیم. با هم می توانیم کلمه ای درباره Web Design 3.0 و ابزارهای نسل جدید را گسترش دهیم!

شبکه CSS

CSS Grid به جدیدترین استاندارد برای ساختار لیوت ها  و لایه سازی  تبدیل شده است.

 

ابعاد جدید در طراحی وب

موقعیت عناصر  نیز تحول خود را دارند :

طراحی وب 1.0 “یک بعدی است”. عناصر طراحی بیشتر به صورت متوالی یکی پس از دیگری مرتب می شوند.·

طراحی وب 2.0 “دو بعدی است. شبکه هایی برای قرار دادن عناصر در سلول ها وجود دارد که باعث آزادی بیشتر می شود.·

طراحی وب 3.0 بعد جدید است. این موقعیت یابی رایگان عناصر ، همپوشانی و لایه هایی مانند ابزارهای Graphic Design را دارد. این چشم انداز جدید برای طراحی وب را باز می کند. و این آغاز دوره جدید طراحی وب است.

 

 

بعد جدید مانند آجرهای LEGO  به طرح گرافیکی حجم می دهد .

Web design generations

 

رفع محدودیت های جدول

همانطور که گفته شد ، طراحی وب 3.0 نیاز به موقعیت یابی رایگان و رفع محدودیت های جدول دارد. موقعیت یابی منحصر به فرد عناصر باعث می شود طراحی وب به خودی خود بی نظیر باشد. برخلاف طرح های دو ، سه و چهار ستونی که بسیار شبیه به یکدیگر هستند.

موقعیت یابی رایگان عناصر باعث می شود طراحی وب منحصر به فرد باشد

در تصویر زیر می توانید موقعیت یابی رایگان عناصر را در Web Design 3.0 مشاهده کنید. آزادی موقعیت یابی تفاوت بزرگی را برای طراحان ایجاد می کند.

 

 

 

در طراحی وب 3.0:

1. می توانید عناصر را آزادانه قرار دهید. در صورت لزوم می توانید فضای سفید را ترک کنید.
2. می توانید عناصر را آزادانه تغییر اندازه دهید.
3. می توانید عناصر و سلول های Grid را همپوشانی کنید.
4.  البته صفحات وب شما باید سازگار با موبایل باشند.

این ویژگی ها برای ابزارهای Graphic Design استاندارد هستند. در فصل 3 ، ما در مورد چگونگی به کارگیری این ویژگی ها در عمل برای ایجاد صفحات در طراحی وب 3.0 خواهیم گفت.

موقعیت یابی آزاد و همپوشانی عناصر در همه نوع طراحی محبوبیت زیادی کسب می کند.

مقایسه ی  جانمایی محدود شده  درمقابل  جانمایی آزاد

سایت سازها چه پیشنهادهایی دارند؟ در تصویر زیر نمونه شبکه دو سلولی را مشاهده می کنید. متن را در سلول چپ مشاهده می کنید. تصور کنید ، می خواهید طراحی خود را بهبود بخشید ، و می خواهید متن را  قرار دهید اما در کمال تعجب ، مکان قرارگیری متن مشخص نیست .دو راه وجود دارد. اولین مورد در سمت چپ در تصویر است. خطوط قرمز را می بینید. اینها متغیرهایی هستند که در سازندگان فعلی وب طراحی 2.0 پشتیبانی می شوند. معمولاً می توانید عناصر را بین عناصر دیگر در Grid یا سلولهای دیگر قرار دهید. این موقعیت یابی محدود است.آیا کسی معتقد است چنین محدودیت هایی سبب طراحی های منحصر به فرد و مدرن توسط سایت سازها بشود؟ پاسخ این است که “موقعیت یابی محدود”،  ساخت وب سایت ها  را ، در طراحی وب 3.0 تقریبا غیرممکن می کند!راه دوم ، سمت راست است. همانطور که می بینید تعداد نامحدودی موقعیت وجود دارد. می توانید متن را در هر جایی که می خواهید قرار دهید، هر جایی که امکان پذیر باشد. و این همان  موقعیت یابی رایگان. برای سایت سازها طراحی وب 3.0 است.سایت سازها ادعا می کنند که موقعیت یابی رایگان دارند یا به صورت رایگان هستند. با این حال ، عناصر آزاد دست آنها کاملاً موقعیت دارند. عناصر کاملاً مستقیمی که سازگار با موبایل نیستند و باید در هر نمای تلفن همراه به صورت دستی جابجا شوند. در طراحی وب 3.0 عناصر نسبتاً مناسب و سازگار با موبایل هستند.

 

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

 

مثال دیگر: این مقاله در مایکروسافت ورد ویرایش شده است. موقعیت محدودی مشابه طراحی وب 2.0 دارد. ویژگی های MS Word برای نوشتن مقاله کافی است. اما MS Word برای طراحی ارائه کافی نیست. ما برای این کار مایکروسافت پاورپوینت داریم. آیا تفاوت را احساس می کنید؟ در MS PowerPoint ، می توانید عناصر را آزادانه قرار دهید. این آزادی بسیار بیشتری را برای خلاقیت در طراحی به شما می دهد. تفاوت در تصویر زیر را مشاهده کنید.

 

ایجاد صفحات وب در Web Design 3.0 با استفاده از سازندگان فعلی وب سایت ، مشابه ایجاد ارائه در Microsoft Word است. در تمام این سالها طراحان مجبور شده اند از ابزارهای بسیار محدود برای طراحی صفحات وب استفاده کنند. کسی نبود که گزینه ها را به طراحان بگوید و به طراحان بدهد.

 

بازارهای جداگانه

بیایید نگاهی به بازار ابزارهای فعلی طراحی گرافیک بیندازیم. طراحان از این ابزارها برای ایجاد ایده در طراحی وب 3.0 استفاده می کنند. در همین زمان ، بازار دیگری برای سایت سازها وجود دارد. وب مستر از سازندگان برای ایجاد وب سایتهای کار استفاده می کند. بنابراین ، این دو بازار گسترده و جدا از هم هستند.

 

 

 

شما سیستم های محبوب Graphic Design را در سمت چپ مشاهده می کنید. طراحان همیشه از این ابزارها برای طراحی مدلهای طراحی وب استفاده می کنند 3.0. همه این ابزارها دارای موقعیت یابی رایگان ، همپوشانی عناصر و لایه ها هستند. اما شما نمی توانید از آنها برای ایجاد وب سایت های کاری استفاده کنید زیرا آنها فقط تصاویر را ذخیره می کنند.برخی از سازندگان فعلی وب سایت محبوب در سمت راست وجود دارند. طراحان برای ساخت وب سایت از این سیستم عامل ها استفاده می کنند. اما طراحی وب سایت های مدرن در طراحی وب 3.0 در این سایت سازها بسیار دشوار یا تقریبا غیرممکن است.هنگامی که ما یک صفحه وب جالب را در Web Design 3.0 پیدا کردیم ، نسبت به کدگذاری HTML آن بسیار کنجکاو بودیم. در بازرس مرورگر browser inspector ، دریافتیم که کل طراحی به عنوان یک تصویر بزرگ است.دکمه یا لینک وجود دارد؟ بله ، دکمه ها مناطق تصویر قابل کلیک در HTML هستند. می بینیم که این صفحه در ابزار Graphic Design طراحی شده است و به صورت تصویری در وب سایت بارگذاری شده است زیرا هیچ سازنده مناسب و کاربردی مناسب برای طراحی وب 3.0 وجود ندارد.

 

 

طراحان وب نیاز دارند:

• موقعیت یابی رایگان

• رفع محدودیت های جدول

• لایه ها

• پانل دارایی برای عناصر

• پشتیبانی از ویندوز و سیستم عامل مک

وب مسترها نیاز دارند:

• HTML و CSS را پاک کنید

• پشتیبانی از دستگاه تلفن همراه

• پشتیبانی از وردپرس و جوملا

• ساخت وب سایت های آنلاین

 

همانطور که می بینیم ، این الزامات متفاوت است. برای ایجاد وب سایتها در Web Design 3.0 ، ما به تغییرات انقلابی احتیاج داریم.خلاصه1. سایت سازها از دنیای سرعت در حال تغییر وب طراحی عقب مانده اند.2. تاریخچه ابزارهای طراحی وب چندین انتقال را درگیر کرده است. با این حال ، پیشرفت متوقف شده است. علائم متعددی وجود دارد مبنی بر اینکه انتقال جدید باید رخ دهد.3. برای طراحان وب -وب مسترها بازارهای جداگانه ای وجود دارد. سازندگان محبوب وب سایت از ویژگی های اصلی طراحی وب 3.0 پشتیبانی نمی کنند: موقعیت یابی رایگان ، شبکه های مدرن و لایه ها.