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

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

ساختار آن باشد و چند گواهی واقعی برای شروع طراحی ما ایجاد کنید.

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

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

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

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

سپس می‌توانیم عناصری را به لیست اضافه کنیم و آنها را به یک فیلد در مجموعه (یا یک مجموعه ارجاع‌شده) متصل کنیم و مشاهده کنیم که طراحی ما با محتوای واقعی که ایجاد کرده‌ایم پر می‌شود.

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

    طراحان تحریریه می‌دانند که راز ابتدا محتوا یا آخرین محتوا نیست، بلکه محتوا و طراحی است. -تراویس گرتز

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

کار با محتوای واقعی همچنین به شما این امکان را می دهد که فوراً ببینید که چگونه تغییرات روی طرح شما تأثیر می گذارد.

    وقتی با داده های واقعی کار نمی کنیم، خود را فریب می دهیم. - جاش پوکت

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

بلافاصله می‌توانیم ببینیم که متن طولانی‌تر، طرح‌بندی را می‌شکند و بر اساس آن تنظیم می‌شود – کاری که شما نمی‌توانید در Photoshop یا Sketch انجام دهید.

محتوای پویا همچنین به ما قدرت می‌دهد تا در طراحی‌های خود واقعاً خلاق باشیم. به عنوان مثال، بیایید به مجموعه شرکت‌های خود یک فیلد جدید به نام Brand Color بدهیم و از آن رنگ برای ایجاد یک مرز سفارشی در شبکه توصیفات خود استفاده کنیم. در عرض چند ثانیه، ما یک گزینه طراحی جدید داریم که می توانیم به روش های مختلف اعمال کنیم.

انجام پروژه متلب در فریلنس پروژه

ما می‌توانیم با اضافه کردن یک گام بدوی دیگر یک قدم جلوتر برویم: یک صفحه الگوی مجموعه. با این کار می‌توانیم طرحی ایجاد کنیم که نمای دقیق هر آیتم را در یک مجموعه نشان دهد.

برای مثال، بیایید یک صفحه برای یکی از اعضای تیم طراحی کنیم - موردی در مجموعه افراد ما. با انجام این کار، ابزار ما به طور خودکار صفحه را برای هر فرد تکرار می کند، بنابراین می توانیم بلافاصله مطمئن شویم که طراحی برای هر عضو تیم کار می کند.

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

این همچنین یک جدایی واضح بین محتوا و طراحی ایجاد می‌کند، بنابراین می‌توانیم به یک ذینفع یا همکار اجازه دهیم مستقیماً تغییرات محتوا را انجام دهد و بدانیم که هر تغییری بلافاصله در تمام بخش‌های طراحی منعکس می‌شود.

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

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

به هر حال، تمام عکس‌برداری‌های صفحه بالا از Webflow هستند. (افشای کامل: من در Webflow کار می کنم. اما این تنها ابزار طراحی وب در حال حاضر موجود است که این اصول را اجرا می کند، بنابراین یک راه راحت برای نشان دادن نکات من ارائه می دهد.)

راه پیش رو

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

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

ما باید این را برای طراحی وب به واقعیت تبدیل کنیم تا بتوانیم طراحان را آزاد کنیم تا مستقیماً روی بوم غنی وب کار کنند. مطمئناً، کار بر روی وب دارای محدودیت‌های ملموسی است - مانند درک مدل جعبه CSS - اما ایجاد ابزار در اطراف این محدودیت‌ها و حتی استفاده از آنها به نفع خود کاملاً ممکن است.

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

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

اگر می‌خواهید درباره نحوه عملکرد Webflow با محتوا بیشتر بدانید، این ویدیوی کلی را تماشا کنید یا خودتان آن را در webflow.com امتحان کنید.