برچسب: طراحی سایت

وایرفریم (Wireframes) چیست و چه تاثیری در طراحی UX دارد؟

در صورتی که کاربر در حال مرور یک وب سایت (فروشگاهی یا سرگمی) باشد که محتوای آن پراکنده (عدم نمایش تصویر و عدم نمایش گزینه های خرید و …)، لینک ها به صفحات اشتباه هدایت شوند و همچنین، شروع یا پایان روشنی برای صفحه وجود نداشته باشد و المان ها در مکان های مناسب قرار نگیرند. کاربر از تعامل با سایت مورد نظر خسته شده و از سایت خارج می شود. در نتیجه، این باعث کاهش کیفیت تجربه کاربری سایت می شود و این اصلاً خوب نیست. برای جلب رضایت کاربر و در نتیجه افزایش تجربه کاربری سایت می توان از وایرفریم ها استفاده کرد که در ادامه مقاله، به بیان این که وایرفریم چیست و چه کاربردی دارد و همچنین، نحوه ساخت آن می پردازیم. برای کسب اطلاعات بیشتر درباره “وایرفریم (Wireframes) چیست و این که چه تاثیری در طراحی UX دارد؟“ ادامه مطلب را تا آخر بخوانید.

وایرفریم چیست؟

Wireframe طرحی از رابط دیجیتال شما است. به عبارت دیگر، وایرفریم یک نقاشی است که جایگاه و رابطه محتوای قرار داده شده در بخش های مختلف سایت را نشان می دهد (این که چه صفحه ای و در کدام قسمت وب سایت یا برنامه شما باشد، مشخص می شود). در گذشته وایرفریم ها با استفاده از قلم و کاغذ ترسیم می شدند. اما، امروزه با استفاده از نرم افزار های طراحی مانند: Adobe XD ایجاد می شود. در طراحی وایرفریم رنگ ها اهمیتی چندانی ندارند. اما، جای گذاری عناصر و اندازه آن ها از اهمیت خاصی برخوردار است.

کاربرد وایرفریم چیست؟

همان طور که می دانید تجربه کاربری (UX) بسیار مهم است و خوشبختانه، در فرآیند طراحی وب سایت مرحله‌ای با نام وایرفریم (Wireframing) وجود دارد که در افزایش میزان تجربه کاربری به شما کمک می‌کند. برای درک بهتر، به مثال زیر توجه کنید: تصور کنید در یک وب سایت تجارت الکترونیکی، در حال خرید محصول هستید و با مسائلی مانند: عدم نمایش هزینه، عدم نمایش نام و تصویر محصول و … مواجه شوید. همچنین، ممکن است هنگام خرید به دلیل بهم ریختگی و جابه جایی دکمه ها، محصول اشتباهی را انتخاب کنید (این یعنی، عدم توجه به تجربه کاربری از سوی طراح). در نهایت، شما از پیمایش و تعامل با وب سایت هایی که این گونه طراحی شده اند (دشوار و گیج کننده به نظر می رسند)، خسته می شوید و از سایت خارج می شوید.

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

هدف طراحی وایرفریم چیست؟

می توانید طراحی وایرفریم ها را به عنوان یک ابزار ارتباطی در نظر بگیرید:

Wireframes فرصتی برای نمایش ایده ها به صورت بصری است (شما می توانید خروجی ایده های طراح را به صورت بصری ببینید).
از آنجایی که وایرفریم ها محصول نهایی نمی باشد، طراحی آن اطلاعات مفیدی را از سمت کاربر برای بهبود محصول نهایی ارائه می دهد (عیب یابی محصول) و در نهایت، به شما کمک می کند تا در مورد عملکرد ایده آل کاربر فکر کنید.
Wireframes به شما اجازه می دهد تا به یکی از تاثیرگذارترین اصول طراحی (سلسله مراتب بصری هر صفحه) فکر کنید. سلسله مراتب بصری با استفاده از اصول طراحی مانند: کنتراست، تعادل و مقیاس برای برجسته کردن عناصر خاص، نظم و اولویت بصری را در بین عناصر مختلف طراحی در صفحه یا صفحه ایجاد می کند. این طرح‌بندی صفحه را ساده‌ تر می‌کند. بنابراین، کاربر با اطلاعات بصری غرق نمی‌شود.
این امر به ویژه برای طراحی های ریسپانسیو بسیار مهم است و امکان انتقال اطلاعات را به صورت یکپارچه بین دسکتاپ و تلفن همراه کاربر فراهم می‌کند. برنامه ریزی برای آن بخش بزرگی از فرآیند وایرفریمینگ است.
در نهایت، به دلیل این که وایرفریم‌ ها به نوعی پیش‌نمایشی از راه‌ حل نهایی را ارائه می‌دهند و در گذر زمان صرفه‌جویی می‌کنند به نوعی کاهش ریسک محسوب می شوند (به جای این که منتظر بمانید پس از تولید محصول نهایی خطا ها توسط کاربران کشف شود، با طراحی وایرفریم می توانید در طول مرحله ایده پردازی و آزمایش، خطا ها را کشف و سپس، آن را رفع کنید).

نحوه طراحی وایرفریم چگونه است؟

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

ابتدا با مشتری و تیم طراحی UX، جلسه ای برگزار می شود.
سپس، مشتری درباره ساختار و نیاز های کاربران سایت خود (به عنوان مثال: این که سایت دارای چند صفحه و هر صفحه چه المان هایی داشته باشد) صحبت می کند.
تیم طراحی تمام داده های مربوطه را جمع آوری کرده و طبق داده های به دست آمده از مشتری، به طراحی وایرفریم می پردازد. در مرحله ایجاد چارچوب های طرح دو راه برای انجام این کار وجود دارد که عبارت اند از:
- اولین مورد طراحی با دست (ترسیم با استفاده از قلم و کاغذ) است – مزیت ترسیم طرح با کاغذ و قلم: استفاده از این روش، سریع است. این به شما امکان می‌دهد هنگام ایجاد تغییرات انعطاف‌پذیر باشید و این بسیار مهم است. زیرا، هدف وایرفریم‌ ها ایجاد چارچوب است و قرار نیست آن ها طرح‌ های نهایی باشند. همچنین، ترسیم آن ها با قلم و کاغذ به کاربر اطلاع می دهد که این کار هنوز در حال انجام است (این به آن‌ ها اجازه می‌دهد هنگام ارائه بازخورد در مورد تجربیات خود صادق و صریح باشند).
- گزینه دیگر استفاده از نرم افزار هایی مانند: Adobe XD است. هدف در اینجا ایجاد چارچوب طراحی است (طرح های شما باید ساده و با جزئیات بسیار کم باشد. بنابراین، لازم است که عناصر را در کادر ها، خطوط، دایره‌ ها، متن نمونه نا تمام و تصاویر سیاه و سفید یا خاکستری نگه دارید).
سپس تیم طراحی، وایرفریم را به مشتری ارائه می دهد. اگر چه در طراحی وایرفریم، شما ساختار و ویژگی های صفحه را تعیین می کنید. اما، ممکن است هر طرحی که می زنید، چندین مرتبه مورد ویرایش قرار گیرد.
این مرحله ما را به تست کاربر می رساند. بنابراین، در این بخش ممکن است مشتری با مشاهده پیش نمایشی از طرح، مشتاق به پیاده سازی ایده های جدیدی باشد (مثلاً: تصمیم به جا به جایی عناصر، رفع ایرادات). این یکی از مزیت های وایرفریمینگ است. زیرا، قبل از گذراندن زمان و صرف هزینه های زیاد، ایرادات محصول شناسایی و برطرف می شود).
در مرحله نهایی طراحی وایرفریم، تیم طراحی UX به اصلاح و پیاده سازی ایده های مشتری می پردازد و پس از جلب رضایت مشتری، به کمک تیم طراحی UI، آن را به یک ماکت تبدیل می کنند (ماکت یک شبیه سازی بصری از وب سایت نهایی است).

تیم طراحی UI، از محتوا، رنگ و تصاویر واقعی محصول مورد نظر استفاده می کند (خصوصیاتی که برای محصول نهایی در نظر گرفته شده است) و در نهایت فایل‌ های به دست آمده را برای تحویل به تیم برنامه نویسی آماده می‌کنند.

نکاتی که باید در هنگام طراحی وایرفریم به آن توجه کنید، چیست؟

در گام اول بهتر است به خواسته های مشتری توجه کنید و نیاز های او را شناسایی کنید (درک خواسته مشتری بسیار حیاتی است. بدون داشتن اطلاعات صحیح، ممکن است تیم در نهایت وایرفریم هایی ایجاد کند که نیاز مشتری را برطرف نکند).
طرح را ساده و به جای استفاده از ابزار های دیجیتال از کاغذ و قلم استفاده کنید.
پس از طراحی وایرفریم، آن را به مشتری ارائه دهید تا در صورت نیاز تغییرات لازم در نظر گرفته شود.
تا حد ممکن طرح باید برای عموم ساده و قابل درک و به شکلی واضح بکشید.
از رنگ ها خیلی کم (حداکثر 3 یا 4 رنگ) استفاده کنید.
پس از اصلاحات انجام شده بر روی طرح کاغذ و قلم، آن را با ابزارهای دیجیتال به صفحات دیجیتال یا “تصاویر jpg” در آورید.
طرح نهایی خیلی شلوغ و پیچیده نباشد تا همه افراد از فرآیند طراحی آگاه باشند و متوجه خروجی پروژه باشند.

در هنگام طراحی وایرفریم به چند نکته توجه کنید. — در هنگام طراحی وایرفریم به نکات گفته شده در این بخش توجه کنید.

سخن آخر

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

منبع:
xd.adobe.com

1400/09/20برچسب‌ها:تجربه کاربری, طراحی سایت, کاربرد وایرفریم, نرم افزار های طراحی, وایرفریم, وایرفریم چیست؟

7 نکته مهم هنگام انتخاب فونت مناسب در طراحی سایت

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

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

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

1. حفظ طرح و نام تجاری (برند)

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

ماهیت برند شما چیست؟ (مثلاً رسمی است یا فانتزی)
اگر وب سایت شما حول یک پروژه می چرخد، چه نوع پروژه ای است. کوتاه مدت است یا بلند مدت؟ زیرا، این احتمال وجود دارد که یک پروژه بلندمدت (مثلاً یک مجله یا یک خبرنامه) نیاز های بیشتری نسبت به پروژه کوتاه مدت داشته باشد و ممکن است با گذشت زمان نیاز به تغییر تایپ فیس داشته باشد. بنابراین، بهتر است یک خانواده فونت بزرگ با انواع و وزن‌ های مختلف انتخاب کنید تا گزینه‌ های متفاوتی در اختیار داشته باشید. اما، اگر روی یک پروژه کوتاه‌ مدت کار می‌کنید (مانند راه‌اندازی محصول یا یک کمپین بازاریابی)، پس پایبندی به نسخه‌های فونت ساده بدون وزن اضافی ممکن است کافی باشد.

2. توجه به کیفیت و خوانایی

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

همچنین، بسیار مهم است که حروفی را انتخاب کنید که در اندازه‌ ها و وزن‌ های مختلف به خوبی کار کند تا خوانایی در هر اندازه حفظ شود (بررسی کنید که حروفی که انتخاب می‌کنید در صفحه‌ های کوچک‌ تر خوانا باشد!).

سعی کنید از به کار بردن فونت هایی که از خط شکسته استفاده می کنند. مانند: Vivaldi (در مثال زیر) اجتناب کنید. هرچند، زیبا هستند. اما خواندن آن ها دشوار است.

گرچه مکان‌های زیادی وجود دارد که می‌توانید فونت‌ های با کیفیت را پیدا کنید. اما، به حروفی که انتخاب می کنید توجه داشته باشید تا خوانا، تمیز و در سمت راست باشد، بدون این که توجه کاربر را از بقیه طرح‌ها منحرف کنید. هنگام تراز کردن متن خود، باید به طول خط (فاصله بین سمت چپ و راست بلوک متن) نیز توجه کنید. موثرترین روش برای اندازه گیری طول خط با میانگین کاراکترها در هر خط است. طول خط بهینه از 45 تا 80 کاراکتر با احتساب فاصله است.

3. انتخاب فونت Serif در مقابل Sans

معمولاً یکی از اولین تصمیماتی که هنگام انتخاب یک تایپ برای متن انجام می شود، انتخاب فونت Serif یا Sans است؟ در حالی که نوع انتخاب شما تا حد زیادی به مخاطب هدف شما و حالتی که می خواهید با طراحی فونت خود ایجاد کنید، بستگی دارد. مهم ترین نکات در انتخاب نوع آن بستگی به موارد زیر دارد که عبارت اند از:

یکی از مهم ترین نکات طول نسخه شما است و انتخاب فونت Serif برای کپی طولانی راحت تر از san ها خوانده می شوند. بنابراین، فونت های Serif به حرکت چشم در یک خط کمک می کنند، به خصوص اگر خطوط طولانی باشند. در اینجا چند تایپ Serif امن وجود دارد که عبارت اند از:
- Georgia
- Lucida
- Times New Roman
همچنین در این بخش، در نظر گرفتن مخاطب هدف نیز مهم است. انتخاب Sans برای کودکان خردسال یا افرادی که تازه خواندن را یاد می گیرند، ترجیح داده می شود. همچنین، برای خوانندگانی که دارای اختلالات بینایی خاصی هستند، استفاده از آن مفید است.
در نهایت، فونت Times New Roman به طور ویژه در دسته فونت های کلاسیک ایمن وب قرار می گیرد. به طور کلی، در انتخاب انواع فونت پیش‌فرض مانند این اشتباه نمی‌کنید. زیرا، معمولاً خواندن آن‌ها آسان است و برای مدت طولانی در دسترس بوده‌اند. بنابراین، بسیاری از کاربران اینترنت به آن ها عادت کرده‌اند.

با این حال، اگر ترجیح می دهید رویکرد جسورانه تری را امتحان کنید، توصیه می کنیم فونت هایی مانند: Noe Display، Freight Text یا مجموعه Portrait را بررسی کنید. البته، همیشه در گوگل فونت هایی مانند: Playfair Display، Cormorant Garamond یا Crimson Text وجود دارد که می‌توانید به صورت رایگان از آن ها استفاده کنید.

هرچند، به کار بردن “فونت های امن وب” (فونت هایی که به طور پیش فرض توسط همه مرورگر های وب اصلی پشتیبانی می شوند) یک شرط مطمئن است. اما، در اینجا چند تایپ بدون ایمنی وجود دارد که می توانید با آن ها نیز شروع کنید:

Arial
Tahoma
Verdana

4. در نظر گرفتن هدف طراحی وب و مخاطبان

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

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

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

5. ایجاد تنوع بصری (از به کار بردن فونت مشابه خودداری کنید)

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

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

هنگام انتخاب فونت سایت، از به کار بردن فونت مشابه خودداری کنید. — Open Sans و Source Sans Pro فونت های بسیار مشابهی هستند.

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

در اینجا چند نکته برای جفت کردن فونت وجود دارد:

برای ایجاد تنوع شما می توانید از به کار بردن فونت های خیلی مشابه خودداری کرده و به ترکیب فونت ها فکر کنید. از آنجا که هر فونتی ویژگی متمایز خود را دارد. بنابراین، هنگام جفت کردن فونت های مختلف باید چندین نکته را در نظر گرفت که عبارت اند از:

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

هنگام انتخاب دو فونت، از کنتراست قاطع استفاده کنید — یکی از فونت ها باید برجسته تر از دیگری باشد.

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

6. نحوه جلوگیری از کاهش سرعت سایت، هنگام انتخاب فونت

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

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

7. استفاده از سایر ابزارها برای الهام گرفتن در انتخاب فونت

در صورتی که در طول جستجوی فونت خود به کمک بیشتری نیاز داشته باشید، مکان‌های زیادی در وب وجود دارد که می‌توانند از فونت الهام بگیرند. به عنوان مثال:

“Typewolf” سایتی است که در آن می توانید تعداد زیادی توصیه و لیست فونت را پیدا کنید که می تواند خلاقیت شما را برانگیزد یا حداقل مسیری را به شما نشان دهد که می توانید طراحی فونت خود را در آن طی کنید. یکی دیگر از سایت های عالی برای شروع، “Fonts In Use” است. در اینجا می‌توانید فونت‌ هایی را که بسیاری از طراحان در دنیای واقعی و همچنین در وب استفاده می‌کنند، مرور کنید.
همچنین، مجموعه کاملی از منابع تایپوگرافی از جمله: کتاب ها و ابزار هایی که می توانند به شما در شناسایی فونت تا وبلاگ های تایپوگرافی مفید کمک کنند، در دسترس شما می باشد.
همچنین، اگر به صورت آنلاین به طرحی برخورد کرده اید که فونت بسیار جالبی دارد. اما، نام آن را نمی دانید و می خواهید این فونت را در صفحه وب خود استفاده کنید، می توانید برای شناسایی از ابزار های آنلاین مانند: ابزار “WhatTheFont” استفاده کنید. این یکی از این شناسه‌ های فونت است که توسط یکی از بزرگترین مجموعه‌های فونت در وب ارائه می‌شود. تنها کاری که باید انجام دهید این است که یک عکس با فونت مورد نظر خود آپلود کرده و آن را برش دهید و نتایج نام فونت مورد نظر را به شما نشان می دهد.
- یکی دیگر از برنامه های قابل استفاده بر روی مرورگر ها، برنامه “Fontface Ninja” است که به صورت رایگان به شما امکان می دهد هر فونتی را که به آن علاقه دارید بررسی و امتحان کنید و یا بخرید (وقتی ماوس را روی فونت می گذارید، نه تنها می توانید نام آـن را بررسی کنید، بلکه می توانید در مورد اندازه، هسته، ارتفاع خط و رنگ آن اطلاعات کسب کنید).

سخن آخر

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

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

منبع:
qodeinteractive.com

1400/09/14برچسب‌ها:اصول طراحی سایت, افزایش تجربه کاربری, تایپوگرافی, طراحی سایت, نحوه انتخاب فونت سایت

فاوآیکون چیست؟ مزایا و نحوه افزودن آن در وردپرس

فاوآیکون یک نشانگر بصری فوری است که ایجاد آن علاوه بر این که به سایت شما مشروعیت می بخشد، موجب تقویت برند و در نتیجه تقویت اعتماد مصرف کنندگان بالقوه می شود. به طور کلی، هنگام راه اندازی وب سایت تجاری، ایجاد فاوآیکون یک قدم کوچک، اما مهم است. هرچند استفاده از فاویکون ها مستقیماً به بهینه سازی موتور جستجو (SEO) کمک نمی کند. اما، از آنجا که امکان شناسایی، دسترسی آسان و سریع وب سایت شما را برای کابران فراهم می کند. بنابراین، به طور غیر مستقیم مانند طراحی حرفه ای لوگو در معرفی برند و افزایش تجربه کاربری تاثیر گذار است.

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

فاوآیکون چیست؟

فاوآیکون یک نماد کوچک 16×16 پیکسلی است که برای وب سایت شما به عنوان برند عمل می کند (به دلیل اندازه و وضوح، فاویکون ها به عنوان تصاویر ساده یا یک تا سه کاراکتر متن بهترین عملکرد را دارند) و هدف اصلی استفاده از آن این است که به بازدیدکنندگان کمک کند تا زمانی که چندین برگه باز دارند، صفحه وب سایت شما را راحت تر پیدا کنند.

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

نحوه افزودن فاوآیکون به وردپرس

شما می توانید به شیوه زیر فاوآیکون را به سایت وردپرسی خود بیافزایید.

زمان مورد نیاز: 4 روز.

مراحل “نحوه افزودن فاوآیکون به وردپرس” را به صورت گام به گام دنبال کنید.

گام اول
برای این که بتوانید فاویکون را به سایت وردپرس خود اضافه کنید، ابتدا به قسمت “Appearance” بروید و سپس گزینه “Customize” انتخاب کنید.
گام دوم
سپس، به منوی واقع در نوار کناری سمت چپ بروید. شناسه سایت را پیدا کرده و روی آن کلیک کنید.
گام سوم
فاویکون مورد نظر خود را برای نمایش اضافه کنید. گزینه “Site Icon” جایی است که می توانید تصویر مورد نظر خود را برای فاوآیکون انتخاب کنید.
گام چهارم
اگر موضوع شما به شما اجازه نمی دهد که فاویکون خود را در تنظیمات سفارشی سازی تم آپلود کنید، می توانید از یک تولید کننده فاویکون واقعی استفاده کنید و در افزونه “Insert Header & Footer” آپلود کنید.
گام پنجم
در اینجا، شما باید بر روی گزینه “Select your Favicon” کلیک کنید.
گام ششم
فاویکون خود را در رسانه وردپرس آپلود کنید تا بتوانید یک URL برای فاویکون خود ایجاد کنید.
سپس، در این قسمت گزینه دوم را انتخاب کرده و URL خود را در کادر قرار دهید.
روی “Generate your Favicons and HTML code” کلیک کنید.
گام هفتم
فاوآ یکون واقعی یک کد HTML ایجاد می کند و می توانید کل کد را کپی کنید.
گام هشتم
به افزونه “Insert Headers and Footers” بروید و در قسمت “Settings” در کادر “scripts Header” کد HTML خود را قرار دهید. سپس، بر روی گزینه “Save” کلیک کنید.

فاوآیکون ها در کجا دیده می شوند؟

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

1. منوی کشویی نشانک ها

2. برگه های مرورگر

3. برنامه‌های نوار ابزار

4. منوی کشویی تاریخچه

5. تاریخچه مرورگر

6. نوار جستجو

7. پیشنهادات نوار جست وجو

استفاده از فاوآیکون ها چه اهمیتی دارد؟

آیا فاوآیکون ها برای سئو مهم هستند؟ همانطور که بخش قبل به آن اشاره کردیم، فاوآیکون ها مستقیماً بر بهینه سازی موتورهای جستجوی شما تاثیر گذار نیستند. اما، به طور غیرمستقیم ابزار مهمی برای بهبود رتبه شما در موتورهای جستجو هستند. در این بخش به توضیح مختصری درباره این که چگونه می تواند به سئوی شما کمک کند، آورده شده است. از جمله:

1. کاربر پسند شدن وب سایت

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

2. نشانک ها

بوکمارک شدن (نشانک) توسط کاربران برای بازدید مجدد، وب سایت را در موقعیت بهتری قرار می دهد. زیرا، بوکمارک شدن با وجود فاوآیکون موجب متمایز شدن سایت شما در لیست نشانک ها می شود. بنابراین، به طور غیر مستقیم باعث افزایش بازدید و بهبود سئوی وب سایت شما می شود.

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

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

3. برندسازی و دیده شدن

فاویکون یک نمایش بصری از وب سایت و کسب و کار شما است. بنابراین، کاربران بر اساس فاویکون مورد استفاده شما با برند شما شناسایی می شوند. سئو همه چیز در مورد برندسازی و بازاریابی است و هر چه وب سایت شما بیشتر دیده شود، کاربران بیشتری روی وب سایت شما کلیک می کنند و به یاد می آورند که شما چه کسی هستید.

نحوه ایجاد فاوآیکون خوب

هنگام ایجاد و طراحی فاوآیکون برای وب سایت خود باید موارد زیادی را در نظر گرفت. اگرچه کوچک و ساده است، اما می تواند (و باید) تأثیر زیادی داشته باشد. مهم است که مطمئن شوید بهترین فاویکون ممکن را تولید می کنید. زیرا، این همان چیزی است که کاربران برند شما را با آن شناسایی می کنند. در اینجا مواردی وجود دارد که باید هنگام ایجاد فاویکون خود در نظر داشته باشید. از جمله:

1. از فضا عاقلانه استفاده کنید

گاهی اوقات نمی توان برای ایجاد فاوآیکون از نسخه کوچکتر لوگوی شرکت استفاده کرد. باید به اندازه کلی فاویکون خود توجه کنید. شما باید به 16px پایبند باشید. زیرا این مورد برای همه مرورگرها قابل قبول است (اما می توانید نمونه های دیگری را در زیر بیابید).

2. سادگی

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

3. هویت نام تجاری

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

4. مخفف کردن

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

5. هماهنگی رنگ

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

فرمت مناسب فاوآیکون

در گذشته فاوآیکون باید در قالب ویندوز ICO قرار می گرفت. اما، هم اکنون چند گزینه قالب بندی مختلف وجود دارد که در ادامه به مختصری درباره آن می پردازیم. انواع فرمت ها شامل:

1. ویندوز ICO

ICO تا حد زیادی گسترده ترین فایل پشتیبانی شده است. مزایای ICO این است که می تواند دارای رزولوشن های متعدد و عمق بیت باشد که بسیار خوب کار می کند و به ویژه برای ویندوز مفید است. ICO همچنین یک نماد 32 پیکسلی را ارائه می دهد که برای نوار وظیفه اینترنت اکسپلورر ویندوز 7 مفید است. همچنین این تنها قالبی است که از عنصر استفاده نمی کند.

2. PNG

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

3. SVG

فرمت svg قابل استفاده است و توسط مرورگرهای اپرا پشتیبانی می شود.

4. GIF

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

5. JPG

اگرچه می توان برای ایجاد فاوآیکون از فرمت JPG استفاده کرد. اما، رایج نیست و کیفیت وضوح آن به خوبی PNG نمی باشد. علاوه بر این، به دلیل اندازه کوچک فاوآیکون، JPEG تمام مزایای خود را از دست می دهد.

6. APNG

این یک نسخه متحرک از PNG است و در حالی که ممکن است توسط فایرفاکس و اپرا پشتیبانی شود، مشکلاتی مشابه با GIF متحرک دارد و حواس کاربران را در حین نگاه کردن به رابط آن ها پرت می کند.

چه اندازه هایی برای فاویکون در هر مرورگر مورد نیاز است؟

همانطور که در بالا گفته شد، به طور معمول سایز 16px توصیه می شود. زیرا می تواند در همه مرورگرها استفاده شود. اما، اگر می خواهید برای هر استفاده ممکن یک فاوآیکون ایجاد کنید، موارد زیر را دنبال کنید:

16 پیکسل: برای استفاده عمومی در همه مرورگرها، می تواند در نمای نوار آدرس، برگه ها یا نشانک ها نمایش داده شود.
24 پیکسل: سایت پین شده در اینترنت اکسپلورر 9
32 پیکسل: صفحه برگه جدید در اینترنت اکسپلورر، دکمه نوار وظیفه در ویندوز 7+ و نوار کناری «بعداً بخوانید» سافاری
57 پیکسل: صفحه اصلی استاندارد iOS (iPod Touch، نسل اول آیفون تا 3G)
72 پیکسل: نماد صفحه اصلی iPad
96 پیکسل: فاوآیکون مورد استفاده پلتفرم Google TV
114 پیکسل: نماد صفحه اصلی iPhone 4+ (دو برابر اندازه استاندارد برای صفحه نمایش شبکیه چشم)
128 پیکسل: فروشگاه وب کروم
195 پیکسل: شماره گیری سریع اپرا

منبع:
www.seoptimer.com

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

1400/09/04برچسب‌ها:افزایش تجربه کاربری, طراحی سایت, فاوآیکون, فرمت مناسب فاوآیکون, نحوه افزودن فاوآیکون به وردپرس

طراحی نوار ناوبری شیشه ای (Glassmorphism) با کلاس های Tailwind CSS

طراحی سایت شیشه ای (Glassmorphism)، یک گرایش طراحی است که در اواخر سال 2020 محبوبیت زیادی پیدا کرد. در این روش یک پس زمینه تار روی یک عنصر اعمال می شود و به آن حس شفافیت و حالت شیشه ای می دهد. این ترند طراحی تقریباً جدید بوده و اخیراً مورد توجه زیادی قرار گرفته است. من کاملاً مشتاق امتحان چیز های جدید هستم و یکی از کار هایی به تازگی انجام دادم، دادن حالت شیشه ای مات به نوار ناوبری وب سایت با استفاده از کلاس های کاربردی پس زمینه در فریم ورک Tailwind CSS بود. این کار خیلی خوب بود، پس فکر کردم به شما هم نشان دهم چگونه این را خودتان طراحی کنید.

Tailwind CSS و کلاس های جدید پس زمینه

همه فیلتر های زبان CSS در گذشته توسط Tailwind پشتیبانی نمی شدند، اما با انتشار نسخه 2.1 آن و مجموعه ای از کلاس های کاربردی مفید، از جمله کلاس های فیلتر پس زمینه جدید هم اکنون برای استفاده در دسترس ما است. دستیابی به افکت شیشه ای روی نوار ناوبری خیلی ساده است، فقط باید از کلاس های کاربردی، فیلتر پس زمینه و پس زمینه تار در Tailwind CSS استفاده کنیم و کمی شفافیت را تنظیم کنیم.

نکته: قبل از حرکت ب سمت ادامه مطلب، مطمئن شوید که نسخه Tailwind v2.1 را نصب کرده اید!

ساختار اصلی نوار ناوبری شیشه ای قبل از اعمال Tailwind

بیایید با استفاده از عنصر معنایی «nav» و پر کردن آن با چند آیتم شروع کنیم.

<nav>
  <div>
    <div>
      <span>My Logo</span>
      <div>
        <a href="#"> Dashboard </a>
        <a href="#"> About </a>
        <a href="#"> Projects </a>
        <a href="#"> Contact </a>
      </div>
    </div>
  </div>
</nav>

قبل از اعمال افکت شیشه ای با Tailwind، بیایید نوار ناوبری را به طوری سبکی تنظیم کنیم تا در واقع شبیه یک نوار ناوبری مرتب باشد.

<nav className="sticky top-0 z-10 bg-white">
  <div className="max-w-5xl mx-auto px-4">
    <div className="flex items-center justify-between h-16">
      <span className="text-2xl text-gray-900 font-semibold">Logo</span>
      <div className="flex space-x-4 text-gray-900">
        <a href="#"> Dashboard </a>
        <a href="#"> About </a>
        <a href="#"> Projects </a>
        <a href="#"> Contact </a>
      </div>
    </div>
  </div>
</nav>

بسیاری از این سبک ها خود توضیحی هستند، اما اجازه دهید به چند نکته اشاره کنم:

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

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

استفاده از کلاس های فیلتر و تاری پس زمینه در Tailwind

اکنون که ساختار اصلی ناوبری وجود دارد، بیایید به آن یک حالت جادویی اضافه کنیم، برای این کار باید کلاس های ابزار فیلتر پس زمینه و پس زمینه تار را به عنصر nav اضافه کنید.

<nav className="... backdrop-filter backdrop-blur-lg">.....</nav>

اگر در این مرحله صفحه را به پایین اسکرول کنید، به نظر می رسد چیزی تغییر نکرده است. اگرچه کلاس های کاربردی Tailwind در حال کار هستند، ما باید کدورت پس زمینه نوار ناوبری را تنظیم کنیم تا حالت شیشه ای آن آشکار شوند.

هرچه کدورت پس زمینه کمتر باشد، محتوای بیشتری از طریق عنصر نشان داده می شود. با خیال راحت کمی با مقدار آن بازی کنید، تا مقدار دلخواهتان را پیدا کنید. مثلاً من کلاس bg-opacity-30 را به نوار ناوبری خود اضافه کرده ام.

<nav className="...bg-opacity-30">.....</nav>

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

تا اکنون ما موفق به شیشه ای کردن نوار ناوبری به کمک Tailwind شدیم، اما همانطور که در تصویر پایین می بینید تشخیص نوار ناوبری شیشه ای مات از پس زمینه وب سایت دشوار است.

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

<nav className="...border-b border-gray-200">.....</nav>

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

مشکلات نوار ناوبری شیشه ای در فایرفاکس

درست است. اگر تغییرات خود را در فایرفاکس پیش نمایش کنید، خواهید دید که تاری اصلاً نشان داده نمی شود. به نظر می رسد، فایر فاکس از CSS پس زمینه تاری پشتیبانی نمی کند. پس راه حل چیست؟

خوشبختانه، سام سلیکوف در مورد این موضوع یک توییت سفارشی را در توییتر نوشته و پست کرده است. این توییت کاربرانی را هدف قرار می دهد که از فایرفاکس استفاده می کنند. برای اینکه بتوانید شفافیت نوار ناوبری را در این مرورگر افزایش دهید، فایل tailwind.config.js را باز کنید و کد زیر را در قسمت plugins اضافه کنید. (برای ایجاد تغییرات در tailwind.config.js می توانید به مقاله مربوط به فریم ورک Tailwind که در ابتدای مقاله به آن پیوند داده بودیم مراجعه کنید.)

const plugin = require('tailwindcss/plugin');
module.exports {
    ...
    plugins: [
        ...
    plugin(function ({ addVariant, e, postcss }) {
      addVariant('firefox', ({ container, separator }) => {
        const isFirefoxRule = postcss.atRule({
          name: '-moz-document',
          params: 'url-prefix ()',
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    }),
  ],
}

حالا به قسمت مربوط به نوار ناوبر برگردید و کلاس زیر را وارد کنید:

<nav className="...firefox:bg-opacity-90">.....</nav>

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

نتیجه:

Tailwind CSS به بهبود خود ادامه می دهد و با انتشار نسخه 2.1، بسیاری از فیلتر های CSS اکنون با کلاس های کاربردی مرتبط پشتیبانی می شوند و شما به راحتی می توانید از آن برای طراحی های شیشه ای استفاده کنید درست مانند همین نوار ناوبری شیشه ای که ما طراحی کردیم.

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

منبع:
braydoncoyer.dev

1400/09/02برچسب‌ها:CSS آماده, زبان css, طراحی سایت, طراحی سایت موبایل

آشنایی با فریم ورک Tailwind و مقدمه ای بر آشنایی با Tailwind CSS

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

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

فهرست مطالب

Tailwind CSS چیست؟
روش های مختلف برای نصب و پیکربندی Tailwind CSS.
نحوه استفاده از کلاس های مبتنی بر ابزار نسبت به کلاس های از پیش نوشته شده معمولی.

نکته: برای دنبال کردن این آموزش، درک اولیه HTML و CSS ضروری بوده و هر گونه تجربه قبلی با چارچوب CSS یک مزیت اضافی است.

فریم ورک Tailwind CSS چیست؟

Tailwind یک فریم ورک CSS است که توسط آدام واتان ایجاد شد. برخلاف سایر فریم ورک‌ ها، Tailwind از کلاس هایی از پیش ساخته تشکیل نمی شود تا به تگ های HTML اضافه شود. در عوضTailwind، از یک رویکرد متفاوت استفاده می کند، Tailwind با استفاده از کلاس های مبتنی بر ابزار، سطح بسیار پایین تری از کنترل را به ارمغان می آورد.

نصب و راه اندازی Tailwind

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

روش اول: نصب با استفاده از CDN

استفاده از CDN رایج ترین روش استفاده از هر چارچوبی در CSS است و Tailwind نیز از این قاعده مستثنی نیست. برای این کار ما باید ابتدا فایل CSS مربوط به Tailwind را از CDN به شکل یک پیوند در قسمت head فایل HTML خود اضافه می کنیم.

برای این کار شما باید ابتدا یک فایل HTML ایجاد کنید و نامی برای آن بگذارید. ما نام فایل خود را .index.html خواهیم گذاشت، سپس در داخل آن، کد HTML boilerplate را بنویسید و CDN را مطابق شکل زیر اضافه کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Section Tailwind Demo</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body></body>
</html>

تا اینجا ما Tailwind CSS را در پروژه خود نصب کرده ایم. البته باید توجه داشته باشید که نصب فریم ورک Tailwind CSS با استفاده از CDN خود دارای چند شرط مهم است، که باید به آن ها توجه کنید، برخی این شرایط مانند:

شما نمی توانید هیچ پلاگین شخص ثالثی را به آن اضافه کنید.
از آنجایی که Tailwind CSS فایل ها را هنگام بارگیری فایل واکشی می کند، نمی توانید فایل های استفاده نشده را پاک کنید.
شما نمی توانید برخی از پیکربندی ها مانند طرح زمینه را سرهم بندی کنید.

روش دوم: نصب با استفاده از NPM

استفاده از روش NPM تجربه کاملی از کار با Tailwind CSS را به شما می دهد. این یک روش نصب رایج است زیرا اکثر فریم ورک های جاوا اسکریپت از رویکردی مشابه آن استفاده می کنند. البته بسته به معماری فریم ورک، تفاوت های کمی در فرآیند نصب آن ها وجود دارد.

برای این کار ابتدا، باید یک دایرکتوری ایجاد کنیم که در ادامه در آن کار خواهیم کرد. سپس در ترمینال خود، کد زیر را اجرا کنید:

mkdir section-tailwind-demo && cd section-tailwind-demo

npm init -y

اجرا در ترمینال:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

دستور بالا تمام asset های مورد نیاز ما را نصب می کند. بعد از آن، ما باید یک اسکریپت برای پیکربندی Tailwind CSS و PostCss ایجاد کنیم. برای تولید این اسکریپت ها، از “tailwind cli”، یکی از ابزار ارائه شده توسط فریم ورک Tailwind CSS استفاده می کنیم.

اجرا در ترمینال:

npx tailwind init -p

دو فایل tailwind.config.js و .postcss.config.js آن نیز به شکل زیر اند:

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

.postcss.config.js

فایل .postcss.config.js هم باید شبیه به کد زیر باشد:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

اکنون که با موفقیت محیط مورد نظر خود را راه اندازی کردیم، اجازه دهید Tailwind CSS را نیز در پروژه خود راه اندازی کنیم. برای این کار ابتدا دو فایل ایجاد کنید. یک فایل HTML به نام index.html و یک فایل stylesheet به نام style.css.

قسمت HTML می تواند دستور پایه boilerplate را در ابتدای article داشته باشد. در فایل CSS نیز باید به autoprefixer اطلاع دهیم که از Tailwind CSS استفاده خواهیم کرد. ما این کار را با وارد کردن فایل‌های Tailwind CSS، مطابق شکل زیر انجام می دهیم:

@tailwind base;
@tailwind components;
@tailwind utilities;

در نهایت، ما باید Tailwind CSS خود را بسازیم، بنابراین در ترمینال اجرا به چنین چیزی نیاز داریم:

npx tailwindcss-cli@latest build -o css/tailwind.css

این دستور، یک فایل tailwind.css در پوشه CSS ایجاد می کند. همچنین دستور -o در دستور ما، مخفف راه خروجی است و ما مشخص کردیم که فایل خروجی ما در مسیر css/tailwind.css قرار بگیرد.

توجه: برای کار با این دستور نیازی به داشتن یک فایل CSS نیست، زیرا ما فایل CSS Tailwind را تولید می کنیم. با این حال، ممکن است برای افزودن سبک های سفارشی، به فریم ورک Tailwind CSS در این فایل، یا مخلوط کردن Tailwind CSS با CSS سفارشی، به فایل style.css نیاز داشته باشیم.

یک روش متفاوت برای پردازش CSS این است که آن را در تولید با افزودن یک اسکریپت در package.json انجام دهید. ما از postcss cli برای اجرای عملیات در طول زمان ساخت استفاده می کنیم. برای انجام این کار، ابتدا باید PostCSS CLI را نصب کنیم.

برای این کار، این را در ترمینال اجرا کنید:

npm install postcss-cli

بعد، اسکریپت ساخت را در package.json به این صورت اضافه می کنیم:

 "scripts": {
 "build": "postcss style.css -o css/tailwind.css"
 }

اکنون، زمانی که npm run build را اجرا می کنید، باید فایل مربوط به فریم ورک CSS Tailwind را همانطور که می خواستیم در یک پوشه CSS کامپایل کنید. سپس باید فایل Tailwind CSS خود را مانند یک فایل CSS معمولی به HTML اضافه کنیم.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link  rel="stylesheet"  href="css/tailwind.css" /
>

  </head>
  <body></body>
</html>

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

کار با کلاس های کاربردی فریم ورک Tailwind

برای نشان دادن و توضیح نحوه عملکرد کلاس ها و ابزار های آن، اجازه دهید با استفاده از Tailwind CSS یک دکمه ایجاد کنیم. این کار نشان می دهد که چگونه فریم ورک Tailwind CSS بر عناصر HTML تأثیر می گذارد.

در تگ Body در صفحه HTML، اضافه کنید:

<button>Section</button>

بیایید چند کلاس به دکمه خود اضافه کنیم زیرا اینگونه ساده به نظر می رسد. در Tailwind CSS، مقدار رنگ بسته به شدت رنگ از 100 تا 900 متغیر است. کلاس کاربردی برای پس زمینه bg است. برای اینکه پس زمینه دکمه مان به رنگ سبز ملایم، رنگ شود، کلاس bg-green-100 را اضافه می کنیم.

در مرحله بعد، بیایید متن را در دکمه استایل کنیم. برای این کار از کلاس متنی utility استفاده می کنیم. برای اضافه کردن متن به رنگ، کلاس text-green-100 را اضافه می کنیم، اما ویژگی های مربوط به رنگ باقی می مانند.

تا کنون دکمه ما خوب به نظر می رسد، بنابراین اکنون بیایید padding را به آن اضافه کنیم. نحوه کار با padding بسیار ساده است، به این صورت است که اول ویژگی، اندازه و سپس مقدار آن می آید.

این برای همه ویژگی ها مانند اندازه، فاصله و حاشیه اعمال می شود. برای اضافه کردن مقادیر به padding، کد به صورت pb-8 خواهد بود. این مقادیر از 0 تا 64 متغیر است. برای اینکه ببینید دامنه ها چگونه کار می کنند، می توانید آن ها را تست کنید.

در مثال ما، padding ما دارای مقادیر py-2 برای بالا و پایین، و px-6 برای چپ و راست خواهد بود. بیایید مقداری حاشیه هم در بالا، با my-20 و مقداری در سمت چپ با mx-20 اضافه کنیم.

اکنون، بیایید دکمه را با ابزار rounded utility گرد تر کنیم. می توانید فهرست کاملی از ابزار های مرزی شعاع و همه کلاس های آن ها را در مستندات بیابید. ما از شعاع مرزی 0.5em استفاده خواهیم کرد که مربوط به lg گرد است.

در نهایت، اجازه دهید مقادیر شناور به آن اضافه کنیم تا دکمه زنده تر شود. برای انجام این کار، کلاس‌های hover:hover:bg-green-600 و hover:text-green-200 را اضافه می کنیم.

با آن، ما دکمه خود را بدون CSS استایل داده ایم. نکته مهمی که باید به آن دقت کنید این است که فریم ورک Tailwind CSS تا چه حد به شما کنترل بر استایل و عناصر می دهد. در نهایت کد نهایی ما به این صورت است:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Section-Tailwind-Demo</title>
    <link  rel="stylesheet"  href="css/tailwind.css" /
>

  </head>
  <body>
 <button

      type="button"
      class="hover:bg-green-600 hover:text-green-200 bg-green-100 text-green-700 mx-20 my-20 px-6 py-2 rounded-lg"
    >
      Section
    </button>
 </body>
</html>

شکل نهایی کد (دکمه ما) باید به شکل روبرو باشد:

نتیجه:

فریم ورک Tailwind CSS یک تغییر دهنده بازی در نحوه استفاده ما از CSS است. همانطور که در بالا نشان داده شد، استفاده و یادگیری کلاس های مربوط به ابزار های آن بسیار آسان است. در نتیجه، اکنون باید بتوانید با استفاده از Tailwind CSS یک طرح بندی ساده بسازید.

Tailwind CSS به شما کنترل بیشتری بر ظاهری که می خواهید می دهد، که این می تواند یک مزیت یا یک نقطه ضعف باشد. با سایر فریم ورک ها، ظاهر پایه معمولا به اندازه ای خوب است، که یک توسعه دهنده شروع به کار کند. اما این ظاهر پایه در مورد Tailwind CSS نیست زیرا شما باید همه کار ها را خودتان انجام دهید.

منبع:
www.section.io

1400/08/26برچسب‌ها:CSS آماده, طراحی رابط کاربری, طراحی رابط کاربری (UI), طراحی سایت

مقایسه دو نرم افزار طراحی سایت Figma و Sketch

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

ما هم اکنون مطلبی نوشته ایم که در آن در مورد انتخاب Sketch یا Figma هنگام کار به عنوان یک طراح UX صحبت می کنیم. شما به عنوان یک طراح عالی بهتر است که از هر دوی این ابزار ها هنگام طراحی استفاده کنید. اما گاهی ممکن است شرایطی وجود داشته باشد که مجبور شوید بین Figma و Sketch تنها یکی را انتخاب کنید. مثلاً ممکن است تازه شروع به کرده باشید در این صورت باید با یکی از این ابزار ها شروع کنید. بحث مقایسه Figma و Sketch همیشه برای شما بسیار مهم است. ما در اینجا دو منبع نمونه سازی اولیه عالی برای سایت را با هم مقایسه می کنیم تا به شما در تصمیم گیری کمک کنیم.

فهرست مطالب

مقایسه قیمت گذاری Figma و Sketch
بررسی کارایی های هر دو نرم افزار
امکانات Figma در مقابل Sketch
پاسخ به سوال Figma یا Sketch

در ادامه به مقایسه Figma و Sketch در همه ابعاد می پردازیم. با ما همراه باشید.

مقایسه قیمت گذاری Figma و Sketch

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

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

اگر به نسخه‌ های آزمایشی و ماهانه گذشته نگاه کنید، تا کنون Figma و Sketch قیمت‌ های مشابهی داشته اند. اما اگر هزینه آن ها به صورت‌ حساب سالانه مقایسه شود، Figma برای شما ۱۴۴ دلار و Sketch برای شما ۹۹ دلار هزینه خواهد داشت.

نکته ای که در اینجا باید به آن اشاره کرد این است که شما باید پس از خرید اولین نسخه باید به پرداخت هزینه برای Figma ادامه دهید. اما پس از خرید اولیه Sketch، حتی پس از یک سال نیز می توانید به استفاده از همان نرم افزار ادامه دهید. پس از آن، اساساً فقط برای پشتیبانی از به روز رسانی ها هزینه پرداخت می کنید.

مقایسه قیمت در پروژه های کوتاه مدت و بلند مدت

بیایید هزینه های یک طراح را که باید از Figma یا Sketch برای یک پروژه طراحی کوتاه 6 ماهه و یک پروژه بلند مدت 2 ساله استفاده کند محاسبه و مقایسه کنیم:

در مورد پروژه طراحی شش ماهه، اگر به سراغ گزینه پرداخت ماهانه بروید، می توانید Figma را ارزان تر دریافت کنید. این قیمت برای Figma به 75 دلار برای شش ماه کاهش می باید در حالی که به هرحال برای Sketch باید اشتراک یک ساله آن را به قیمت 99 دلار بخرید. همین امر در مورد یک پروژه طراحی بلند مدت، بر عکس است، زیرا Sketch در مدت دو سال برای شما 198 دلار هزینه دارد، اما قیمت دو ساله Figma تا 240 دلار می رسد.

بررسی کارایی های هر دو نرم افزار

در مرحله بعد، عملکرد و در دسترس بودن Figma و Sketch را داریم. مهم ترین تفاوت بین این دو ابزار این است که Sketch بیشتر برای طراحی وب سایت های موبایلی کاربرد داشته و فقط در macOS در دسترس است. این یک چیز بد به نظر می رسد، اما نکته مثبت این است که Sketch یک برنامه بومی برای macOS است و می تواند از همه چیز هایی که macOS ها ارائه می دهند به طور کامل استفاده کند.

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

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

امکانات Figma در مقابل Sketch

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

مثلاً Sketch نسبت به Figma برای مدت زمان طولانی تری در دسترس بوده است، بنابراین از نظر ویژگی های مختلف با تجربه تر عمل می کند. از سوی دیگر، Figma نرم افزار جدیدی است که می تواند به کمبود های Sketch نگاه کرده و آن ها را به لیست ویژگی های خود اضافه کند.

مقایسه قدرت همکاری

در مقایسه موضوع همکاری در پروژه ها می توان Figma را از Sketch متمایز کرد. شما می توانید در یک زمان با طراحان دیگر در Figma همکاری داشته باشید. اما در Sketch باید حتماً نسخه‌ فایل‌ های طراحی خود را با طراحان دیگر به اشتراک بگذارید، تا بتوانید با آن ها همکاری کنید.

تنوع در ایده های طراحی سایت

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

نکته ای که باید در نظر داشته باشید این است که هر رقیب تجاری تمایل دارد ایده های دیگری را بدزدد. همانطور که Sketch دارای ویژگی های افزونه عالی است، فیگما هم Figma از نظر همکاری عالی است. اما، Sketch اخیراً اعلام کرده است که همکاری real-time در حالت بتا بوده است تا بتواند با Figma رقابت کند. در حال حاضر، ما معتقدیم که Sketch نسبت به Figma دارای ویژگی های سنگین تری است، اما این می تواند در آینده تغییر کند.

پاسخ به سوال Figma یا Sketch

در انتهای این مطلب مقایسه ای زمان آن رسیده است که در نهایت به سوال Figma یا Sketch پاسخ دهیم. اول، ما می خواهیم تأکید کنیم که انتخاب بین این دو نرم افزار می تواند به دیگران بستگی داشته باشد. مثلاً اگر مجبورید از Sketch استفاده کنید، چون همکاران شما این کار را انجام می دهند، خب هیچ انتخاب دیگری نخواهد داشت.

اما برای مقایسه موارد دیگر، به این جدول مقایسه Figma و Sketch نگاهی بیندازید.

ابزار طراحی	Sketch	Figma
قیمت:	99 دلار در صورت خرید سالانه	144 دلار در صورت پرداخت سالانه
عملکرد:	بومی MacOS	مبتنی بر وب پشتیبانی می کند
در دسترس بودن:	فقط مک	هر دستگاه دارای مرورگر
ویژگی ها:	جامعه پلاگین قوی	همکاری همزمان (Real-time)

همانطور که می بینید، Sketch در بیشتر موارد ارزان تر است، مدت طولانی تری وجود داشته است و به دلیل پشتیبانی از MacOS بومی خود، عملکرد بهتری دارد. با این حال، ویژگی همکاری و تحت وب بودن Figma بسیار کاربردی است. اگر Sketch بتواند راه حل مشابهی را پیاده سازی کند، ما معتقدیم که Sketch برنده آشکار است. اما تا زمانی که این اتفاق نیفتد، نمی توان نظر دقیقی داشت.

نتیجه:

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

منبع:
thedesignerstoolbox.com

1400/08/10برچسب‌ها:تجربه کاربری, طراح تجربه کاربری (UX), طراحی رابط کاربری, طراحی رابط کاربری (UI), طراحی سایت, طراحی سایت موبایل

رنگ هایی که ممکن است بر طراحی سایت شما تأثیر منفی بگذارند

وب همیشه در حال بصری تر شدن است. محتوای وب هم بسیار ارزشمند است، اما بهتر است آن محتوا در یک بسته بسته بندی جذاب ارائه شود تا متمایز باشد. گاهی پیش می آید که ما برای جذاب تر کردن سایت خود تلاش زیادی می کنیم اما نا خواسته برخی از رنگ ها بر طراحی سایت ما تأثیر منفی می گذارند.

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

با این اوصاف از چه رنگ هایی باید در طراحی صفحات وب سایت خود اجتناب کنیم؟

مشکی خالص

بیایید با سیاه شروع کنیم، آن هم سیاه خالص چیزی که در HTML به عنوان #000000 کد گذاری شده است. این رنگ باعث غافلگیر شدن کاربر می شود. صفحات شما نباید به گونه ای باشند که گویی مشکی همه جا را فرا گرفته است. مثلاً نباید متن و اکثر صفحات وب به گونه ای باشد که گویی لباس سیاه بر تن دارد یا آسمان شب سایت را پوشانده است.

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

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

آن ها اصلاً اشتباه نمیکنند رنگ مشکی می تواند برای برانگیختن برخی تداعی های مثبت قدرتمند در ذهن افراد استفاده شود. اما نکته کلیدی این است که از رنگ مشکی استفاده کنید که مشکی خالص نباشد. از آن جایی که سیاه خالص یک رنگ طبیعی نیست، پردازش آن برای مغز دشوار تر است. رنگ مشکی خود را از #000000 به #111111 یا یک خاکستری بسیار تیره مشابه افزایش دهید و همچنان از مزایای چشم نواز رنگ مشکی بدون اینکه فشار زیادی بر مغز بازدیدکنندگان وارد کنید بهره مند شوید.

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

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

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

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

یک قانون کلی برای طراحی سایت پرهیز از رنگ‌ هایی است که در کدنویسی HTML دارای افراط در طیف رنگی هستند مانند صفر و Fs که می توانند اثر منفی بگذارند. شما باید پس‌ زمینه متن و خود متن آن ها را کمی از رنگ‌ های کاملاً خالص غیرطبیعی دور کنید، تا پردازش آن ها برای ذهن آسان‌ تر شوند و تأثیر مطلوب تری بر بازدیدکنندگان شما بگذارد.

ترکیبات رنگ با کنتراست بیش از حد بالا

علاوه بر پرهیز از رنگ‌ های بیش از حد خالص، باید مراقب ترکیب‌ های خاصی از رنگ‌ ها نیز باشید. مثلاً ترکیب قرمز و سبز جزء اصلی فصل کریسمس هستند، اما ترکیب رنگ های قرمز و سبز می تواند تأثیرات منفی بر طراحی سایت شما بگذارد. پرهیز از ترکیب این دو رنگ آن قدر مهم است که ضرب المثلی در بین طراحان وجود دارد که می گوید: “قرمز و سبز هرگز نباید باهم دیده شوند، مگر با وجود رنگی بین آن ها”.

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

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

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

ترکیب رنگ های قرمز و سبز مشکل دیگری نیز از نظر فرهنگی دارد، در دنیای غرب، مردم عادت دارند رنگ قرمز را با توقف یا “No”، و سبز را با برو یا “Yes” مرتبط کنند. این امر مجدداً، مغز را با مجموعه ای متناقض از ورودی ها روبرو می کند که باعث ناراحتی مغز می شود. زمانی که مغز ناراحت باشد، احساس ناراحتی را به فرد هم منتقل می کند و این اصلاً چیزی نیست که ما می خواهیم.

ترکیب رنگی دیگری نیز وجو دارد که به اندازه تضاد شدید میان رنگ سبز و قرمز نیست، اما همین اصل در مورد ترکیب قرمز و آبی نیز وجود دارد. در ترکیب قرمز و آبی نیز بین یک رنگ بسیار گرم و رنگ بسیار سرد تضاد ایجاد می شود.

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

ترکیبات رنگی با کنتراست بسیار کم

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

قرار دادن متن هایی با رنگ و سایه روشن بر روی پس‌زمینه های روشن مانند سفید، صورتی، زرد، آبی روشن و یاسی می‌تواند تشخیص متن را برای بازدیدکنندگان سخت کند. همین امر در مورد متن تیره روی پس زمینه تیره، مانند قرمز، آبی تیره و سرخابی روی مشکی نیز صدق می کند.

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

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

پس زمینه های چند رنگ

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

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

نتیجه:

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

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

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

منبع:
webdesign.org

1400/08/09برچسب‌ها:انتخاب رنگ سایت, ترکیب رنگ, رنگ های سرد, رنگ های گرم, روان شناسی رنگ, طراحی سایت, طراحی سایت موبایل, طراحی وب سایت, نکات طراحی سایت, وب سایت

آپدیت جدید و کاربردی تم های نرم افزار طراحی وب موبایلی Universe

Universe یک پلتفرم ایجاد وب‌ سایت های موبایلی است، که به تازگی آپدیت جدیدی منتشر کرده است. در این آپدیت، Universe کنترل‌ های خلاقانه و پیشرفته، تم های بهبود یافته، ویژگی‌های بلوک و موارد دیگری را به سایت ساز مبتنی بر گرید خود اضافه کرده است.

Universe به کاربران اجازه می دهد بدون نیاز به کد نویسی، یک سایت سفارشی ایجاد کنند یا یک فروشگاه الکترونیکی را مستقیماً از پشت تلفن همراه و از طریق یک سیستم گرید ساده باز کنند. آپدیت جدید GRID System II، با هدف ساده‌ سازی فرآیند های رمزگذاری پیچیده قبلی در Universe انجام شده، که به تسهیل جلوه های بصری در فرآیند ایجاد وب‌ سایت کمک می کنند.

چیزی که Universe را خاص می کند سیستم grid-base آن است و آنچه ما امروز آن را بررسی می کنیم ارتقاء عظیمی برای همین سیستم شبکه است. جوزف کوهن، مدیرعامل و بنیان گذار Universe می گوید: آپدیت جدید به مردم این امکان را می دهد تا بدون داشتن هر گونه مهارت فنی در مورد طراحی سایت و اصول آن کار های بیشتری انجام دهند.

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

تم های جدید Universe

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

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

تایپوگرافی در تم های جدید

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

لایه بندی ها در آپدیت جدید

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

تم های Universe برای مبتدی ها

اگرچه برخی ممکن است، Universe را رقیبی برای سایر ابزار های محبوب ساخت وب سایت مانند Shopify و Wix ببینند، اما کوهن می گوید که Universe کاملاً با آن ها متفاوت است. او در ادامه عنوان می کند:”ما یک رابط جدید به نام “grid” ابداع کرده ایم، که به افرادی که فنی نیستند و طراحی حرفه ای انجام نداده اند، اجازه می دهد یک وب سایت کاملاً شخصی را ایجاد کنند”. البته سیستم های دیگری مانند Squarespace ،Shopify ،Weebly و Wix وجود دارند، اما این ها مخصوص سازندگان حرفه ای وب سایت بوده و بر اساس دسکتاپ و قالب سایت قابل تغییر هستند.

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

اپلیکیشن Universe در زمان همه گیری کرونا

از نظر استفاده هم، کوهن خاطر نشان کرد که Universe در میان همه گیری COVID-19 افزایش شدید کاربران را تجربه کرده است. بسیاری از افراد در مدت قرنطینه مشاغل جدید یا فعالیت های جانبی را شروع کرده اند و به دنبال ایجاد وب سایت ها آمده اند. در اوایل بیماری کرونا، Universe قابلیت فروش و ارسال محصولات در سایت های خود را برای کاربران راه اندازی کرد. در نتیجه، کاربران دیگر ملزم به ثبت نام برای دریافت ابزار های تجارت الکترونیک شخص ثالث، در پلتفرم هایی مانند Shopify نبودند. کوهن در ادامه می گوید: ” تجارت ما در یک سال و نیم گذشته و از زمان شیوع کرونا واقعاً منفجر شده است و از لحاظ تعداد سایت های ایجاد شده فعال نیز حدود 10 برابر تجارت بیشتری داشته ایم. “

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

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

منبع:
insider-voice.com

1400/07/30برچسب‌ها:ابزار طراحی سایت, طراحی سایت, طراحی سایت موبایل, طراحی صفحات موبایلی, طراحی وب سایت, نرم افزار طراحی سایت, وب سایت

معرفی کامل انواع مدل های طراحی آیکون و ترند های Icon Design

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

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

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

آیکون های با عمق

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

این نماد ها تمایل بیشتری به پیچیدگی دارند و برای استفاده در مواردی که آیکون ها نسبتاً بزرگ هستند یا در ترکیب با عنصر دیگری مانند متن برای لوگو هستند، مناسب هستند.

آیکون های دارای حالت Hover

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

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

آیکون های مینیمال و ساده شده

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

آیکون های خطی با اشکال رنگی

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

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

انواع شکل های Abstract در طراحی آیکون

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

نکته کلیدی کار با اشکال انتزاعی این است که مطمئن شوید چیزی را به اشتباه تکرار نمی کنید و آیکون ها واقعاً انتزاعی هستند. (سعی نکنید آیکون هایی شبیه به لوگوی خود ایجاد کنید) همچنین برای رنگ آن توجه کنید رنگی را که واقعا با وب سایت شما مطابقت دارد انتخاب کنید. از پالت رنگ یکسانی برای آیکون ها و سایر المان های برند خود استفاده کنید.

انواع آیکون های طراحی شده با رنگ های اصلی

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

این نوع طراحی را با گرادیان (یا Gradient های مصنوعی مانند مثال بالا) نرم تر کنید تا پالت رنگ ها خیلی مبتدی به نظر نرسند. هنگام کار با رنگ های اصلی زیاده روی نکنید. آن ها می توانند یک لمس قریب به اتفاقی در طراحی شما باشند.

آیکون های طراحی شده با نمادهای پس زمینه

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

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

آیکون های دو رنگ

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

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

آیکون های دایره ای

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

بخشی از تأثیری که دایره در طراحی Icon دارد ممکن است به برخی از دستورالعمل های ارائه شده توسط Google در زمینه طراحی متصل شود. همه آن دکمه های مدور برای کلیک کردن روی تلفن های همراه مناسب هستند. همین فلسفه در مورد طراحی نماد ها نیز صدق می کند. بخشی که می تواند در مورد این ترند طراحی آیکون کمی نیاز به خلاقیت داشته باشد، حلقه های مشبک در همه مکان هایی است که از اشکال دیگر استفاده می شود. آیکون های برنامه معمولاً مربع هستند. پروفایل رسانه های اجتماعی به صورت دایره ای (و مربع) است.

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

آیکون های دارای گرادیان

ترند رنگ های گرادیان که به یکی از موضوعات غالب از سال 2019 تبدیل شده است، عاملی در طراحی آیکون ها نیز هست. از Gradients ساده در خطوط (مانند مثال بالا) تا رنگ آمیزی کامل نماد ها و آیکون های سفید در زمینه گرادیان، این طرح رنگ بسیار محبوب است. این فاکتور ممکن است در مورد استفاده از گرادیان در نماد ها (و به طور کلی طراحی) بسیار جذاب باشد، روش های مختلفی برای استفاده از این ترند وجود دارد.

همه چیز به سبک اپلیکیشن ها

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

به شکل مربع
لبه های گرد
زمینه رنگی (معمولاً یک رنگ)
شکل ساده داخل آیکون
تضاد زیادی بین آیکون و رنگ پس زمینه
بدون متن و حروف

آیکون های مسطح (Flat) همچنان محبوب هستند

در حالی که تمرکز زیادی که روی انواع طراحی مسطح یا فلت بوده، از بین رفته است، طراحی آیکون هنوز Flat (یا حداقل تقریباً مسطح) است. این به احتمال زیاد به دلیل ماهیت فوق العاده ساده طراحی تخت و این ایده است که این ظاهر می تواند به راحتی با تعدادی از استایل های دیگر ادغام شود.

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

آیکون های ایموجی

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

این سبک نماد می تواند برای صفحه تماس با ما یا نمایندگی افراد یا اشخاص در یک طراحی عالی عمل کند.

چگونه آیکون های بهتری طراحی کنیم؟

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

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

منبع: designshack.net

1400/07/21برچسب‌ها:آیکون های css, اصول طراحی, طراحی سایت

نحوه ساخت یک گرید با CSS در طراحی وب سایت رسپانسیو و مفاهیم آن

از زمان اختراع اینترنت، توسعه دهندگان وب به دنبال کارآمد ترین روش برای نمایش محتوا در مرورگر های وب بوده اند. غالباً آن ها به راه حل هایی بسنده کرده اند. طرح بندی های مبتنی بر float و Table بر اساس جدول دو نمونه از این دست هستند. هیچ یک از این رویکرد ها بی نقص نیستند زیرا Float هاو جداول مجهز به ابزار های چیدمان نیستند. در حقیقت، استفاده از عنصر جدول HTML5 برای اهداف طراحی منسوخ شده است، به این معنی که استفاده از این عنصر برای اهداف استایل برای ساختار وب سایت شما بد تلقی می شود و همچنین می تواند به سئوی شما آسیب برساند. بنابراین، یک تیم توسعه وب با تمرکز بر بازاریابی چه باید بکند؟ راه حل مطلوب ساخت یک گرید با CSS است.

گرید CSS چیست؟

گرید CSS توسط مایکروسافت به گروه کاری CSS پیشنهاد شد و پیش نویس گرید CSS برای اولین بار در آوریل 2011 منتشر شد. با گذشت زمان، این مشخصات به لطف بازخورد توسعه دهندگان و فروشندگان که با هم همکاری می کنند تا گرید CSS را به یک راه حل واقعاً مؤثر برای طرح بندی تبدیل کنند، بهبود یافته است.

گرید به عنوان افزونه ای برای CSS عمل می کند که به شما امکان می دهد اندازه و محل قرارگیری اقلام گرید را کنترل کنید. می توانید از مدیا کوئری ها برای انطباق خودکار گرید های خود با زمینه های مختلف استفاده کنید.

مزایای ساخت و استفاده از گرید CSS

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

برای مطالعه بیشتر:

تأثیر و مزایای طراحی وب ریسپانسیو (Responsive) بر سئو و مدیریت سایت

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

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

نحوه ساخت و استفاده از گرید CSS

W3Schools نشان می دهد که اگر می خواهید طرح گریدی را تنظیم کنید، باید یک عنصر div والد (ظرف گرید) و یک یا چند عنصر div (آیتم های گرید) ایجاد کنید. تنظیم ویژگی نمایش یک عنصر HTML، آن را به یک ظرف گرید تبدیل می کند.

آیتم های گرید، فرزندان مستقیم ظرف گرید هستند. آن ها به صورت عمودی به ستون و به صورت افقی به ردیف مرتب شده اند. فاصله بین یک سطر و یک ستون را شکاف می نامند. با استفاده از این ویژگی ها می توانید فاصله را تنظیم کنید:

grid-column-gap، که فاصله بین ستون ها را مشخص می کند.
grid-row-gap، که فاصله بین ردیف ها را مشخص می کند.
grid-gap، که یک ویژگی مختصر برای grid-column-gap و grid-row-gap است.

در بین ستون ها و سطر ها، خطوطی به ترتیب خطوط ستون و خطوط ردیف وجود دارد. ما می توانیم نمونه ای از آن را در زیر مشاهده کنیم.

هنگام قرار دادن یک مورد گرید در داخل یک ظرف، شما شماره خطوط را ارجاع می دهید.

چگونه می توان یک گرید را ساخت و در CSS متمرکز کرد؟

گرید دو بعدی است، بدین معنی که طرح با دو محور تکمیل می شود: محور y (محور بلوک) و محور x (محور درون خطی).

در CSS، از ویژگی align برای تعریف محور بلوک استفاده می شود در حالی که ویژگی justify محور درون خطی را تعریف می کند.

برای شروع متمرکز کردن موارد گرید، از ویژگی align-items استفاده کنید. برخی از مقادیری که می توانید به این ویژگی اختصاص دهید عبارتند از start ،end و stretch. هنگامی که مقدار ویژگی align-items شروع به کار می کند، این موارد را در ابتدای عمودی ناحیه گرید مربوطه قرار می دهد در حالی که آن را در انتها قرار می دهد. هنگامی که مقدار stretch می شود، آیتم ها در سراسر گرید گسترده می شوند.

ویژگی justify-items مشابه ویژگی align-items عمل می کند و مقادیر یکسانی را در محور درون خطی می پذیرد. برای هدف قرار دادن فقط یک مورد تا بتوانید آن را در مرکز قرار دهید، به ترتیب از ویژگی های align-self و justify-self در سطح مورد استفاده کنید. آخرین مرحله این است که گرید خود را نسبت به طرح موبایل ریسپانسیو کنید. اگر یک نمایش شگفت انگیز ایجاد کنید، می خواهید از طریق رابط تلفن همراه نیز قابل اشتراک گذاری باشد.

چگونه می توان هنگام ساخت یک گرید CSS را ریسپانسیو کرد؟

یکی از بهترین ویژگی های گرید این است که نسبتاً از ابتدا ریسپانسیو است. W3Schools این دستورالعمل های اضافی را برای تضمین ریسپانسیو بودن هنگام استفاده از گرید به اشتراک می گذارد. برای ساخت یک گرید CSS واکنش گرا، ابتدا ویژگی اندازه باکس همه عناصر HTML را در border-box قرار دهید. این شامل Padding و Margin به عرض و ارتفاع عناصر است.

این کد را به CSS خود اضافه کنید:

* { box-sizing: border-box; }

در مرحله بعد، یک صفحه وب ریسپانسیو ساده برای تمرین ایجاد می کنید:

برای یک صفحه وب تنها با دو ستون، مثال بالا کافی است. با این حال، اگر می خواهید کنترل بیشتری بر صفحه وب داشته باشید، می توانید از 12 ستون در گرید استفاده کنید. ابتدا باید محاسبه کنید که هر ستون چند درصد را اشغال می کند. به عنوان مثال، 100 درصد یا 12 = 8.33% در هر ستون. سپس، برای هر ستون، “-class=”col، یک کلاس ایجاد کنید، به شرح زیر:

ما در ابتدای این مقاله به طرح بندی های مبتنی بر Float اشاره کردیم. اگرچه یک طرح گرید CSS کاملاً بر اساس این سیستم نیست، اما از برخی ویژگی های مشابه استفاده می کند. در این مثال، ستون های خود را طوری تنظیم می کنید که با پدینگ 15 پیکسل به سمت چپ شناور شوند، که به هر عنصر امکان می دهد فاصله مناسب داشته باشد.

هر سطر در یک <div> پیچیده شده است و تعداد ستون های داخل یک سطر همیشه به 12 می افزاید:

در مرحله بعد، باید مطمئن شوید که float را پاک کرده اید، اطمینان حاصل کنید که همه ستون های داخل ردیف در جریان صفحه قرار دارند:

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

مثال هایی برای ساخت گرید CSS

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

طرح بندی قرارگیری مبتنی بر خط

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

در زیر، کد های CSS است که محل قرارگیری شش مورد گرید را مشخص می کند. توجه داشته باشید که شش مجموعه قانون وجود دارد که خصوصیات grid-column-start ،grid-column-end ،grid-row-start و grid-row-end را با شماره خط برای هر مورد گرید تعریف می کند.

در اینجا نتیجه را در front-end مشاهده می کنید:

استفاده از مختصر های Grid-Row و Grid-Column

ما می توانیم با استفاده از ویژگی های مختصر grid-column و grid-row، طرح بندی گرید را از بالا ایجاد کنیم. این ویژگی های مختصر نویسی می تواند در وقت شما صرفه جویی کرده و کد شما را تمیزتر نشان دهد. به جای نوشتن خصوصیات grid-column-start و grid-column-end در دو خط جداگانه، می توانید آن ها را در یک خط زیر مختصر ستون گرید ترکیب کنید. برای تعریف این ویژگی مختصر نگاری، شماره اول را خط ستون محل شروع آیتم grid قرار دهید و شماره دوم نشان دهنده خط ستون جایی است که مورد grid به پایان می رسد. مقادیر را با یک اسلش جدا کنید.

شما می توانید همین کار را برای ویژگی مختصر خط گرید انجام دهید. در اینجا همان CSS از مثال بالا با استفاده از ویژگی های مختصر grid-column و grid-row بازنویسی شده است:

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

استفاده از ویژگی مختصر Grid-Area Property

ما همچنین می توانیم با استفاده از ویژگی مختصر ناحیه گرید، ساخت گرید CSS را شروع کنیم. این ویژگی مختصر نویسی می تواند با نیاز به کد کمتر، زمان بیشتری را در شما ذخیره کند. فقط به خاطر سپردن ترتیب مقادیر ویژگی کمی سخت تر است.

برای هر یک از شش مجموعه قانون، تنها کاری که باید انجام دهید این است که ویژگی grid-area را با چهار مقدار تعریف کنید. ترتیب مقادیر به شرح زیر است:

خط سطر در جایی که مورد گرید شروع می شود / خط ستون در جایی که مورد گرید شروع می شود / خط سطر در جایی که مورد گرید به پایان می رسد / خط ستون جایی که مورد گرید به پایان می رسد.

در اینجا همان CSS از مثال بالا با استفاده از ویژگی مختصر grid-area بازنویسی شده است:

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

استفاده از نام سطر و ستون

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

ابتدا، در زیر selector.wrapper، ویژگی grid-template-columns و grid-template-rows را خواهید یافت. در مثال های قبلی، فقط ویژگی grid-template-columns با 100 پیکسل سه بار تعریف شد. به این معنی که اندازه هر ستون برابر 100px عرض بود. در اینجا نحوه نمایش آن در CSS آمده است:

برای این مثال، ما باید ویژگی های grid-template-column و grid-template-row را با نام خطوط و مقادیر تعریف کنیم. هر ستون به ترتیب “col1-start” “col2-start” و “col3-start” نامگذاری شده و روی 100px تنظیم می شود. هر سطر به ترتیب “row1-start” و “row2-start” نامگذاری شده و روی “auto” تنظیم می شود. در اینجا کد CSS آن آمده است:

.wrapper {

    display: grid;

    grid-gap: 10px;

    grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px;

    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];

    background-color: #fff;

    color: #444;

}

اکنون در اینجا همان بخش کد CSS از مثال بالا آمده است که با استفاده از ویژگی های مختصر نویسی و نام خطوط گرید بازنویسی شده است.


    .a {

        grid-column: col2-start;

        grid-row: row1-start;

    }

    .b {

        grid-column: col2-start;

        grid-row: row2-start;

    }

    .c {

        grid-column: col3-start;

        grid-row: row2-start ;

    }

    .d {

        grid-column: col1-start ;

        grid-row: row1-start ;

    }

    .e {

        grid-column: col1-start ;

        grid-row: row2-start ;

    }

    .f {

        grid-column: col3-start ;

        grid-row: row1-start ;

    }

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

لی اوت قرارگیری مبتنی بر خط که بیش از یک مسیر گریدی را شامل می شود

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

در اینجا HTML است که گرید را تعریف می کند.

طرح بندی قرارگیری مبتنی بر خط که بیش از یک مسیر گریدی را شامل می شود

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

برای مثال، برای داشتن آیتم گرید A در دو ستون، می توانید ویژگی خط مختصر ستون گرید را با تبدیل مقدار اول به “1” و مقدار دوم به “3” تعریف کنید. برای داشتن آیتم B در دو ردیف، می توانید ویژگی خط مختصر گرید را با ایجاد مقدار اول “1” و مقدار دوم “3” تعریف کنید.

در اینجا نتیجه را در قسمت جلویی مشاهده می کنید:

ساخت گرید CSS - نتیجه کد طرح بندی قرارگیری مبتنی بر خط که بیش از یک مسیر گریدی را شامل می شود

استفاده از کلمه کلیدی Span

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

در اینجا همان CSS از مثال بالا با استفاده از کلمه کلیدی span بازنویسی شده است. موارد A و B به ترتیب دو ستون و دو ردیف را شامل می شوند، بنابراین مقدار نهایی “2” است. توجه داشته باشید که بسیاری از ویژگی ها فقط با یک مقدار تعریف می شوند. در این حالت، پیش فرض گستردگی یک ستون یا سطر فرض می شود.

HTML ثابت می ماند و گرید در قسمت جلویی یکسان به نظر می رسد.

طرح گرید جام مقدس

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

در زیر نگاهی به کد و طرح بندی که “طرح مقدس جام مقدس” ایجاد شده است می اندازیم.

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

<div class="grid">
<header>
Header
</header>

<nav>
Navigation
</nav>

<article>
Article
</article>

<aside>
Right Sidebar
</aside>

<footer>
Footer
</footer>
</div>

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

.grid {
display: grid;
grid-template-columns: repeat (3, 1fr);
grid-template-rows: 30% 200px auto;
grid-gap: 1em;
}

.grid > * {
display: flex;
align-items: center;
justify-content: center;
}

اکنون وقت آن رسیده است که محتوا را سبک بندی کنیم. ابتدا رنگ پس زمینه و پدینگ عنصر سرصفحه، نام، متن، نوار کنار و پاورقی را تغییر می دهم. سپس من خصوصیات grid-column-start و -end را روی 1 و 4 قرار می دهم تا طول گرید را باز کنند. در نهایت، حداقل عرض را برای عنصر مقاله تعیین می کنم تا محتوای اصلی بیشتر صفحه را اشغال کند.


header,
nav,
article,
aside,
footer {
background: lightgray;
padding: 1em;
}

header, footer {
grid-column: 1 / 4;
}

article {
min-width: 15em;
}

در اینجا نتیجه را مشاهده می کنید:

وب سایت هایی که از گرید های CSS استفاده می کنند

ما در مورد گرید های CSS از لحاظ تئوری بسیار صحبت کرده ایم، اما در واقع آن ها چگونه به نظر می رسند؟ در مرحله بعد، بیایید چند نمونه عالی و واقعی از گرید در عمل را بررسی کنیم، که از وبلاگ Calendly شروع می شود.

وبلاگ Calendly

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

Ikea

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

نتیجه

با صرف زمان لازم برای درک گرید CSS، بر خلاف تگ منسوخ شده Table که قبلاً برای چیدمان وب سایت های مشابه استفاده می شد، یک پایه قوی برای تولید وب سایت های ریسپانسیو ایجاد می کنید که باعث مطابقت بیشتر با استاندارد های گوگل می شود. امیدواریم این مقاله به شما در درک و ساخت یک گرید با CSS کمک کرده باشد.

منبع: hubspot.com

1400/07/12برچسب‌ها:اصول طراحی سایت, زبان css, طراحی ریسپانسیو, طراحی سایت