طراحی با ابرقدرت ها – مجله Smashing

Penpot با ارائه یک ابزار طراحی رایگان و منبع باز بر اساس استانداردهای وب باز به طراحان و توسعه دهندگان کمک می کند تا بهتر با یکدیگر همکاری کنند. امروز، بیایید آخرین ویژگی Penpot، CSS Grid Layout را بررسی کنیم. آخرین نسخه Penpot در مورد کارایی و موارد دیگر است. این به طراحان قدرت های فوق العاده و جایگاه بهتری در جدول می دهد. برانگیخته؟ بیایید با هم نگاهی به آن بیندازیم.

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

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

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

تاریخچه کوتاه طرح‌بندی وب

بنابراین طرح‌بندی‌های وب در عمل چگونه ساخته می‌شوند؟

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

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

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

ایجاد طرح بندی با Penpot

Penpot اولین ابزار طراحی است که از Flexbox و Grid در جعبه ابزار خود پشتیبانی می کند. و منظور من از پشتیبانی، ویژگی طرح‌بندی نیست که سعی کند آنچه را که Flexbox یا Grid ارائه می‌دهد کپی کند. ما در مورد اجرای واقعی Flexbox و Grid در داخل ابزار طراحی صحبت می کنیم.

اجرای Flexbox Penpot در اوایل سال جاری عمومی شد. اگر می خواهید امتحان کنید، سال گذشته، مقاله جداگانه ای در مورد آن نوشتم. اکنون، Penpot به طور کامل Flexbox و Grid را پیاده سازی می کند.

شاید تعجب کنید که چرا ما به هر دو نیاز داریم. آیا نمی توانید از Flexbox برای همه چیز استفاده کنید، همانطور که از همان ویژگی های طرح بندی ساده در یک ابزار طراحی استفاده می کنید؟ از نظر فنی، بله، شما می توانید. در واقع، اکثر مردم این کار را انجام می دهند. (در زمان نگارش مقاله، تنها یک چهارم وب سایت ها در سراسر جهان از CSS Grid استفاده می کنند، اما پذیرش آن به طور پیوسته در حال افزایش است؛ منبع)

بنابراین اگر می‌خواهید طرح‌بندی‌های ساده و عمدتاً خطی بسازید، Flexbox احتمالاً تمام چیزی است که همیشه به آن نیاز دارید. اما اگر می خواهید برخی از ابرقدرت های طراحی را به دست آورید؟ Grid را بیاموزید.

طرح بندی شبکه ای CSS Penpot اکنون منتشر شده است، بنابراین می توانید آن را امتحان کنید. این بخشی از نسخه 2.0 اصلی آنها است که مجموعه ای از ویژگی ها و پیشرفت های مورد انتظار را به ارمغان می آورد. من قویاً شما را تشویق می کنم که آن را امتحان کنید و ببینید که چگونه برای خودتان کار می کند. و اگر نیاز به الهام دارید، به خواندن ادامه دهید!

طرح بندی شبکه CSS در عمل

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

ایجاد یک طرح

اولین قدم ما ایجاد یک شبکه دو بعدی ساده خواهد بود. در این مورد استفاده از Grid Layout منطقی‌تر از Flex Layout است، زیرا می‌خواهیم کنترل دقیق‌تری بر نحوه چیدمان عناصر بر روی چندین محور داشته باشیم.

می توانید متوجه شوید که هر سطر و ستون طرح دارای مقدار “1FR” است. FR مخفف fraction است، به این معنی که فضای موجود به طور مساوی در بین سطرها و ستون ها توزیع می شود.

FR ها بسیار مفید هستند. به عنوان مثال، همانند واحدهای دیگر، FR ها می توانند مقادیر متفاوتی بگیرند. بنابراین می توانید 3 ستون ایجاد کنید، یکی 2FR و دو ستون هر کدام 1FR را می شمارند. در نتیجه، ستون اول نیمی از عرض طرح را اشغال می کند و دو ستون دیگر هر کدام یک چهارم فضای موجود را اشغال می کنند.

اضافه کردن عناصر به طرح

برای افزودن عناصر به CSS Grid Layout، به سادگی می توانید آنها را بکشید و روی بوم رها کنید.

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

فاصله و تراز

CSS Grid Layout به شما کنترل کامل بر نحوه تراز شدن عناصر و نحوه تنظیم آنها با فضای موجود می دهد. مجموعه‌ای از گزینه‌های بسیار دانه‌دار به شما امکان می‌دهد طرح‌بندی‌های بسیار دقیق و پاسخگو ایجاد کنید که به‌طور یکپارچه با عناصری از هر شکل یا فرمی کار می‌کنند.

شما می توانید سلول ها و ردیف ها را با اندازه عناصر تنظیم کنید، اما همچنین می توانید عناصر را با شبکه تنظیم کنید. در این حالت، ما یک نوار کناری در سمت چپ طرح اضافه می کنیم و آن را در ستونی با عرض ثابت 320 پیکسل قرار می دهیم.

نوار کناری خود طرح بندی خاص خود را دارد. اما در این مورد، برای تراز عمودی ساده، Flex Layout تمام چیزی است که ما نیاز داریم.

ایجاد مناطق شبکه

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

همانطور که بعداً چیدمان را تنظیم می کنید، می بینید که نوار کناری همیشه همان عرض و ارتفاع کامل طرح را حفظ می کند در حالی که سلول های دیگر با فضای موجود تنظیم می شوند.

ساخت شبکه های پیچیده تر

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

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

مراحل بعدی

امیدوارم این نسخه ی نمایشی Penpot's Grid Layout را دوست داشته باشید. اگر می‌خواهید با مثال‌های استفاده شده در این مقاله بازی کنید، این فایل Penpot را کپی کنید. این یک الگوی عالی است که تمام نکات و نکات استفاده از Grid را در طراحی های شما توضیح می دهد!

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

خلاصه

Flexbox و Grid در Penpot فرصت‌هایی را برای ایجاد طرح‌بندی‌ها مانند قبل باز می‌کنند. امروزه، هر کسی می‌تواند قدرت Flex Layout و Grid Layout را ترکیب کند تا ساختارهای پیچیده و پیچیده‌ای ایجاد کند که انعطاف‌پذیر، پاسخ‌گو و آماده استقرار خارج از جعبه هستند—همگی بدون نوشتن یک خط کد.

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

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

طرح بندی شبکه CSS را امتحان کنید و افکار خود را به اشتراک بگذارید!

اگر تصمیم دارید CSS Grid Layout را امتحان کنید، در به اشتراک گذاشتن تجربه خود دریغ نکنید! تیم پشت پنپات مایلند بازخورد شما را بشنوند. بودن به طور کامل ابزار رایگان و متن باز، توسعه Penpot به لطف جامعه و افرادی مانند شما پیشرفت می کند.

(il)