بیایید طراحی وب سایت را دوباره طراحی کنیم

از زمان تولد وب بیش از 25 سال پیش، عمل طراحی وب بر روی نوشتن کد متمرکز شده است. تقریباً هر منبع صنعتی، وبلاگ و مجله بر بهبود گردش کار کد ما تمرکز دارد تا بتوانیم برای وب ایجاد کنیم. برای اکثر متخصصان و تأثیرگذاران، به نظر می رسد یک نتیجه قطعی است که کد همیشه بر کارهای جدی طراحی وب غالب خواهد بود.

اما من می خواهم آینده ای جایگزین را کشف کنم - آینده ای که درس های ارزشمندی را که از کاربر نرم افزار در سایر رشته های خلاقانه آموخته است به کار می گیرد.

راه آن است

تقریباً هر متخصص و رهبر فکری موافق است: "طراحان وب باید کدنویسی را یاد بگیرند." اغلب اوقات، مقاومت در برابر این توصیه با تمسخر روبرو می شود.

سفارش طراحی سایت در فریلنس پروژه

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

حتی کارشناسان صنعت وب که برای چندین دهه کد می‌نویسند، نمی‌دانند گاهی اوقات چه کار می‌کنند – پس چگونه می‌توانیم انتظار داشته باشیم کسی که تازه شروع به رسیدن به دنیای همیشه در حال تغییر توسعه وب کرده است؟

برت ویکتور در مقاله خود جوهر جادویی، مخمصه یک طراح را خلاصه می کند (تاکید از من است):

    ابزارهای نرم افزاری برای ترسیم گرافیک های ثابت یا ساخت انیمیشن های ایستا از دیرباز رایج بوده اند. اما طراح که می‌خواهد گرافیک پویا ایجاد کند - گرافیک‌هایی که ویژگی‌های آنها وابسته به داده است - در حال حاضر دو گزینه نامطلوب دارد:

    1) او می تواند نوعی زبان برنامه نویسی را یاد بگیرد. بسیاری از طراحان مرعوب مهندسی هستند و ممکن است فاقد استعداد یا تمایل به برنامه نویسی باشند. آنها کاملاً موجه هستند - طراحی یک فعالیت بصری است و کار با انتزاعات متنی کاملاً نامناسب است. نقاشان، تصویرگران، و مجسمه سازان به طور مستقیم این مصنوع را دستکاری می کنند - هیچ انتزاعی وجود ندارد و بازخورد بصری فوری است. اگر سازندگان مجبور بودند به جای ضربه‌های قلم موی قابل مشاهده، با "rectangle.width = 17" کار کنند، آیا ما هیچ یک از آثار هنری بزرگ خود را خواهیم داشت؟

    2) متناوباً، یک طراح می‌تواند مجموعه‌ای از موکاپ‌ها، عکس‌های فوری از چگونگی جستجوی مجموعه‌های داده‌های مختلف توسط گرافیک ترسیم کند و آن‌ها را همراه با توضیح شفاهی منظورشان به یک مهندس ارائه دهد. این منجر به حلقه‌های بازخورد بسیار بزرگ می‌شود - دیدن اثر یک تغییر ممکن است به جای یک ثانیه یک روز طول بکشد. این شامل هماهنگی و ارتباط بین حداقل دو نفر است و مستلزم آن است که طراح خود را توجیه کند - او باید مهندس و احتمالاً لایه‌های مدیریتی را متقاعد کند که هر تغییر ارزش وقت مهندس را دارد. اینجا محیطی برای اکتشاف خلاقانه نیست.

متأسفانه، بسیاری از طراحان خود را در این دره عجیب و غریب گرفتار می‌بینند، جایی که به طور کامل می‌دانند چه چیزی می‌خواهند به انجام برسانند، اما توانایی اجرای واقعی ایده‌های خود را ندارند.

راهی که باید باشد

طراحی لوگو با بهترین طراحان لوگو در فریلنس پروژه

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

    ابزارهای طراحی باید دارای همان ویژگی های رسانه ای باشند که برای آن طراحی می کنیم. - جاش پوکت

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

برای نشان دادن این مفهوم، بیایید یک وب‌سایت پویا در دنیای واقعی را انتخاب کنیم که می‌خواهیم آن را بازسازی کنیم تا پاسخگو و سازگار با موبایل باشد. سایت Sandwich Video کاندیدای عالی است، زیرا دارای محتوای سفارشی زیادی است - شرکت‌ها، پروژه‌ها، افراد، توصیه‌ها - که خارج از قلمرو هر راه‌حل CMS خارج از جعبه یا یک سازنده وب‌سایت که خودتان آن را انجام دهید، قرار می‌گیرد. .

رویکرد وضع موجود برای شروع چنین بازسازی، ایجاد یک پایگاه داده MySQL، راه اندازی یک طرح داده، دانلود و راه اندازی یک چارچوب CMS، و سپس رفتن به شهر در یک ویرایشگر متن برای ایجاد یک الگو خواهد بود. با انجام این کار، همچنان باید داده های خود را به HTML که سایت را ارائه می دهد متصل کنید. این فرآیند معمولاً به یک تیم کامل از افراد نیاز دارد، معمولاً ماه‌ها کار طول می‌کشد و برای شروع کار یک دست و یک پا برای مشتری هزینه خواهد داشت.

اما چه می‌شد اگر بتوانیم از این پیچیدگی چشم پوشی کنیم و ابزاری برای تمرکز بر محتوا و طرح‌هایمان ایجاد کنیم؟

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

این رویکرد در صورتی امکان‌پذیر می‌شود که ابتدا مسئله را به چندین مورد اولیه تقسیم کنیم. اولین مورد، انواع مختلف محتوای ما است که ما به آنها مجموعه می گوییم.

فریلنس پروژه سایت دورکاری و فریلنسری

    ابتدا روی طراحی سیستم اشیاء دنیای واقعی تمرکز کنید، سپس روی طراحی یک سیستم پیاده سازی برای زنده کردن همه چیز تمرکز کنید. - سوفیا وویچهوفسکی

حالا بیایید ببینیم وقتی آدام (بنیان‌گذار Sandwich Video) می‌خواهد برخی از توصیفات درخشان را به سایت اضافه کند چه اتفاقی می‌افتد.

به جای غواصی در کد، می‌توانیم یک مجموعه گواهی‌ها ایجاد کنیم