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

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

مشکی خالص

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نتیجه:

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

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

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

منبع:

webdesign.org

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

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

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

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

7 روش طراحی وبلاگ

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

1. پلتفرم وبلاگ نویسی را انتخاب کنید

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

• Blogger (بلاگر)
• WordPress
• وبلاگ Tumblr
• Squarespace (فضای مربع)
• Ghost (شبح)

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

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

2. انتخاب یک نام دامنه مناسب

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

بیشتر بخوانید: روش های طراحی وب سایت

3. محتوای وبلاگ

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

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

4. وبلاگ خود را ساده طراحی کنید

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

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

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

5. انتخاب رنگ های مناسب

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

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

اگر می خواهید ترکیب رنگ ها و پالت های رنگی را ببینید می توانید از سایت coolors.co دیدن کنید. این سایت ها به شما کمک می کنند تا بتوانید برای وبلاگ یا وب سایت خود، رنگی مناسب پیدا کنید. یک نکته خوب این است که 3 یا چند رنگ اصلی را می توانید انتخاب کنید.

از فضای سفید استفاده کنید

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

6. هدف طراحی خود را حفظ کنید

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

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

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

7. طراحی وب سایت ریسپانسیو

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

سخن پایانی

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

امیدوارم این مقاله برایتان مفید باشد. موفق و پیروز باشید.

منابع: creativebloq – 99designs

نوشته نکاتی که باید در رابطه با طراحی یک وبلاگ جذاب بدانید! اولین بار در ممتاز دیزاین. پدیدار شد.

از زمان ایجاد وب تا کنون این حوزه دستخوش تغییرات زیادی شده است. طراحی های اولیه وب با دردسر های فراوان در دهه 1990 و اوایل 2000 آغاز شد و در نهایت راه برای وب سایت های ساده تر، تمیز تر و قابل پیش بینی تر باز شد. سپس، تلفن های هوشمند وارد معرکه شدند و حوزه وب به تغییرات عظیمی نیازمند شد. این تغییرات ابتدا زلزله عظیمی در دنیای طراحی ایجاد کردند، ولی سرانجام وب سایت ها به لطف سیستم طراحی Google Material Design، تحت تأثیر قرار گرفتند. 

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

Material Design چیست؟

Material Design یک سیستم طراحی وب است که توسط گوگل در سال 2014 توسعه یافته است. کل سیستم طراحی، زبان طراحی و کلیه مستندات در حال حاضر در material.io قرار دارند، که شامل موارد زیر است:

1_توضیحات مربوط به سیستم متریال دیزاین: 

2_دستورالعمل های استفاده از زبان متریال دیزاین و چگونگی طراحی با آن:

3_داشتن اجزایی با قابلیت استفاده مجدد که طراحان را قادر می سازد به راحتی UI های متریال ایجاد کنند:

متریال دیزاین بسیار جامع تر از اکثر سیستم های طراحی است. Material Design فقط برای یک نام تجاری یا یک پروژه خاص ساخته نشده است. متریال دیزاین با نام کد “Quantum Paper” به عنوان یک زبان طراحی منتشر شد تا طراحان اندروید بتوانند از آن برای طراحی برنامه های خود استفاده کنند. در کنار آن هم گوگل از Material Design برای بازنگری در طراحی برنامه های خود استفاده کرد.

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

چرا متریال دیزاین ایجاد شد؟

برای درک چگونگی شکل گیری و فواید Material Design، باید به طراحی های قبل از ظهور متریال دیزاین نگاهی بیاندازیم. 

skeuomorphism:

حدود سال 2010 بود که skeuomorphism تبدیل به یک طراحی برجسته و محبوب شد. این مدل یک سبک طراحی بود که باعث می شد عناصر UI شبیه اشیاء واقعی به نظر برسد. معمولاً وقتی صحبت از طراحی پس زمینه و نماد های یک وب سایت می شود، این سبک را بسیار خواهید دید. مثلاً این تصویر از صفحه اصلی Apple در سال 2012 است را مشاهده کنید:

بسیاری از آیکون های برنامه ای که در iPad مشاهده می کنید تصویر هستند. به عنوان مثال، به مواردی که با رنگ زرد مشخص شده اند نگاه کنید: 

• آیکون برنامه Camera که شبیه لنز دوربین است. 
• آیکون برنامه ساعت که شبیه یک ساعت دیواری آنالوگ قدیمی است. 
• آیکون برنامه تقویم که شبیه یک کارت تقویم با قابلیت تغییر است.

UI های Skeuomorph به دلیل ویژگی های واقع گرایانه این آیکون ها را مانند تصویر واقعی شان در دنیای واقعی نشان می دهند.

طراحی تخت (flat):

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

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

گروه نیلسن نورمن توضیح می دهند: “[طراحی مسطح] اغلب منجر به گیج شدن کاربر هنگام کلیک و کاهش کارایی کاربر می شود. وقتی طراحان، رابط کاربری را مسطح می کنند، بسیاری از دال هایی که معمولاً به کاربران نشان می دهد کجا باید کلیک کند، حذف می شود. “

طراحی در Material Design:

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

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

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

 به عنوان مثال به نمونه طراحی شده زیر دقت کنید:

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

این به کاربران برنامه یا وب سایت امکان می دهد تا به طور طبیعی به UI ها پاسخ دهند، زیرا در متریال دیزاین آن ها نحوه لمس و جابجایی اشیاء را دقیقاً مانند محیط فیزیکی درک می کنند. Matias Duarte، معاون بخش طراحی Google، توضیح می دهد که چرا Material Design یک تغییر مهم در طراحی وب است: 

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

اصول اصلی Material Design چیست؟

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

اصل شماره 1: مواد یک استعاره است

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

به عنوان مثال، به Material Design’s Interaction نگاه کنید:

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

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

اصل شماره 2: جسورانه، گرافیکی، طبیعی

به این مثال از بخش Material Foundation نگاه کنید:

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

این سیستم به وضوح عناصر UI حیاتی را تجزیه کرده و برای هر یک قسمتی را نظر گرفته است، این قسمت ها عبارت اند از:

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

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

برای اینکه بتوانید تصور کنید که چگونه به نظر می رسید، این ابزاری است به نام material design palette:

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

اصل شماره 3: متحرک سازی های معنا دار

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

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

حتی عناصر کوچک به اندازه آیکون ها می توانند متحرک شوند:

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

مزایا و معایب Material Design

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

مزایای Material Design:

1. طراحان وب در تمام مراحل می توانند از ویژگی های Material Design بهره مند شوند، خواه پایه اصلی باشد که تمام کار خود را در آن پایه گذاری کرده اند و یا منبعی باشد که گاهاً از آن استفاده می کنند.
2. یک منبع جامع از هر یک از اجزای کلیدی و رفتار های UI است، که ارزش زیادی در طراحی دارند.
3. برای شروع طراحی برنامه های Android، متریال دیزاین می تواند رویکردی سازگار با تلفن همراه بوده و مسئول پیش برد بیشتر وب سایت ها در زمینه موبایل باشد.
4. متریال دیزاین اولین رویکرد طراحی کاربر پسند است و بسیاری از اشکالات مدل های قبلی خود را برطرف کرده است که در آن ها مشکلاتی در نحوه استفاده، خوانایی و دسترسی وجود داشت.
5. Material Design طراحان را مجبور می کند که فراتر از زیبایی شناسی نگاه کنند و همه چیز را واقعی تر طراحی کنند. در نتیجه، به وسیله این مدل طراحی رابط ها بصری تر می شوند و تجربه کاربری بهبود می یابد.
6. متریال دیزاین را گوگل ارائه می دهد و مستندات و پشتیبانی گسترده آن برای توسعه دهندگان و طراحان جذاب تر و کاربردی تر است.
7. این روز ها سیستم طراحی بسیار انعطاف پذیر تر و قدرتمند تر است به طوری که طراحان می توانند تنها آنچه که مناسب خودشان است از متریال دیزاین بگیرند.

معایب Material Design:

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

چرا از متریال دیزاین استفاده می شود؟

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

اکنون که ما وقت داریم تا با آن آشنا شویم، طراحان وب می توانند از آن برای این اهداف خود استفاده کنند: 

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

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

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

منبع:

elementor.com

نوشته آشنایی با Material Design و شناخت انواع ابزار های آن اولین بار در ممتاز دیزاین. پدیدار شد.

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

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

برای انجام طراحی به سبک شیشه ای با ما همراه شوید.

انتخاب پس زمینه

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

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

برای طراحی این قسمت باید به تگ <body> در فایل HTML ویژگی های زیر را اضافه کنیم:

body {
    background: #edc0bf;
    background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
    padding: 4.5rem;
    margin: 0;
}
    

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

بیایید از استایل فونت بهتری مانند Inter که از فونت های Google نیز هست استفاده کنیم. با افزودن کد زیر در تگ <head>، می توانید فونت را تعریف کنید:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

سپس با اعمال font family بر روی تگ body در فایل CSS تان روند طراحی را ادامه دهید:

body {
    /* other styles */
    font-family: 'Inter', sans-serif;
}

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

بیایید با تنظیم نشانه گذار HTML یک کارت ایجاد کنیم که در واقع حالت شیشه ای دارد. می توانیم با افزودن عنوان، توضیحات و لینک ها این کار را به سادگی انجام دهیم:

   
<div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p> A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
    <a href="https://ui.glass">Read more</a>
</div>

بیایید یک ظاهر اولیه به طراحی کارت و عناصر اضافه کنیم:

.card {
    width: 400px;
    height: auto;
    padding: 2rem;
    border-radius: 1rem;
}

.card-title {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.2rem;
}

p, a {
    font-size: 1rem;
}

a {
    color: #4d4ae8;
    text-decoration: none;
}
    

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

افزودن افکت ها به Glassmorphism

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

.card {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

عالی شد! اکنون خواهید دید که پس زمینه سفید و نیمه شفاف است، البته ممکن است بپرسید که حالت شیشه ای این طراحی کجاست؟

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

برای این کار به تگ HTML کد زیر را اضافه کنید:

    
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">

سپس استایل های زیر را به CSS اضافه کنید:

.shape {
    position: absolute;
    width: 150px;
    top: .5rem;
    left: .5rem;
}
    

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

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

در اینجا یک مثال کوچک از طراحی سایت به صورت شیشه ای وجود دارد که می توانید کد کامل آن را ببینید:

<!DOCTYPE html>
<html lang="en">
<head >
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism effect by ui.glass</title>

<style>
body {
  padding: 4.5rem;
  margin: 0;
  background: #edc0bf;
  background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
  font-family: 'Inter', sans-serif;
}

.shape {
  position: absolute;
  width: 150px;
  top: .5rem;
  left: .5rem;
}

.card {
  width: 400px;
  height: auto;
  padding: 2rem;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

p, a {
  font-size: 1rem;
}

a {
  color: #4d4ae8;
  text-decoration: none;
}
</style>
</head>
<body>
  <img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
  <div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>

  </div>
</body>
</html>

در انتها نیز کد بالا تصویر پایین را برای ما طراحی می کند:

پشتیبانی از طراحی شیشه ای در مرورگر

ما به عنوان یک تیم طراحی وب موفق وظیفه داریم مطمئن شویم که کدی که می نویسیم برای اکثر مرورگر های موجود در بازار قابل پشتیبانی است. اکثر ویژگی های CSS که ما در این آموزش استفاده کرده ایم توسط همه مرورگر ها پشتیبانی می شود، به جز یکی: که آن هم ویژگی backdrop-filter است.

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

با این حال، یک مشکل دیگر نیز در این جا وجود دارد، فایرفاکس بنا به دلایلی، ویژگی backdrop-filter را به طور پیش فرض فعال نمی کند، حتی اگر مرورگر از این نوع استایل پشتیبانی کند. البته ما امیدواریم در آینده نزدیک این ویژگی به طور پیش فرض فعال شود.

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

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

نتیجه

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

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

منبع:

themesberg.com

نوشته جدید ترین ترند طراحی سایت؛ Glassmorphism یا طراحی سایت شیشه ای اولین بار در ممتاز دیزاین. پدیدار شد.

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

به چه مهارت هایی نیاز دارید؟

یک تیم طراحی وب موفق به نقش های زیر نیاز دارد:

• مدیر پروژه: بدون یکی از این نقش ها، بسیار آسان است که یک پروژه از کنترل خارج شود. یک مدیر پروژه برای تسهیل ارتباط، مدیریت پروژه و اطمینان از اینکه همه چیز در مسیر خود قرار دارد، وجود دارد.
• معمار پروژه/استراتژیست: معمار یا استراتژیست به تدوین استراتژیک وب سایت کمک می کند. آن ها در مورد وب سایت فعلی تحقیق و تجزیه و تحلیل می کنند، برای مخاطبان مورد نظر پرسونا ایجاد می کنند و برای سایت جدید وایر فریم ایجاد می کنند.
• طراح وب: طراح وب بخشی جدایی نا پذیر از تیم، مسئول طراحی و عملکرد وب سایت است. یک طراح با استعداد مفهومی را در نظر می گیرد و آن را زنده می کند.
• توسعه دهنده Back-end: توسعه دهنده back-end استراتژی و طراحی را در نظر گرفته و چارچوبی برای رابط سایت ایجاد می کند. آن ها کد را توسعه می دهند، تست های متعددی انجام می دهند و با هر گونه اشکال یا مشکلی که بوجود می آید برخورد می کنند.
• توسعه دهنده Front-end: توسعه دهنده front-end قسمتی از وب سایت را که کاربران با آن درگیر هستند توسعه داده و پیاده سازی می کند و باعث می شود وب سایت شما در طیف وسیعی از مرورگر ها و دستگاه ها ظاهر خوبی داشته باشد.
• تست کننده سایت: تست کننده وب سایت را در طیف وسیعی از دستگاه ها و مرورگر ها آزمایش می کند و سعی می کند سایت را بشکند تا متوجه شود آیا نقاط ضعفی دارد یا خیر.

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

نکات اضافی درباره افراد و نقش ها

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

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

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

پیدا کردن افراد مناسب برای تیم شما

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

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

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

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

پیوند دادن اعضای تیم

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

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

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

تیم خود را رشد دهید

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

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

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

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

منبع: getflywheel.com

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

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

CSS آماده یا تمپلت های CSS در واقع یک نوع طراحی وب سایت است که با استفاده از فناوری Cascading Style Sheets (CSS) ایجاد شده است. CSS های آماده به توسعه دهندگان وب این امکان را می دهد تا به راحتی همه صفحات یک وب سایت را همزمان فرمت و استایل کنند. CSS حتی بیشتر مورد استفاده قرار خواهد گرفت زیرا توسط همه (99.98٪) مرورگر ها به یک صورت مشاهده می شود.

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

Style Sheets ساده ترین راه برای ایجاد یک استایل پیش فرض برای HTML را ارائه می دهد. بنابراین، هنگام ویرایش فقط یک فایل CSS، می توانید کل متن را تغییر داده و به طور مثال رنگ ها را در همه صفحات لینک دهید! CSS همچنین کد گذاری شما را بسیار آسان می کند زیرا مجبور نیستید به طور مکرر تگ های قالب بندی را برچسب بزنید. این کد ساده باعث بارگیری سریع تر و کاهش پهنای باند می شود.

الگو های CSS سازگاری 100٪ با Macromedia Dreamweaver و Microsoft FrontPage و همچنین بسیاری از ویرایشگران وب دیگر دارند. استفاده از این فناوری آسان تر و سریع تر از کدگذاری HTML است.

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

از کجا می توان CSS آماده گرفت؟

فناوری CSS گامی بزرگ در جهت توسعه وب است. محتوای جداگانه و ارائه نیز انعطاف پذیری بیشتری به وب سایت شما می بخشد. شما با تغییرات بعدی وب سایت خود مشکلی نخواهید داشت. همه تمپلت ها بر اساس فناوری ها و استاندارد های وبسایت معروف www.w3c.org ساخته شده اند که وب سایت شما را حتی کاربر پسندتر می کند.

می توانید تمپلت ها و CSS های آماده را از طریق وبسایت های زیر دریافت کنید:

• www.w3.org/Style/Examples/011/firstcss
• www.w3schools.com/css/default.asp
• www.echoecho.com/css.htm
• www.htmlhelp.com/reference/css/quick-tutorial.html

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

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

• CSS آماده خود را در همان دایرکتوری صفحات HTML که می خواهید از آن الگو استفاده کنید، ذخیره کنید. به عنوان مثال، اگر می خواهید صفحه “index.html” از الگوی “style.css” استفاده کند، پس style.css را در همان پوشه ای که “index.html” را در آن ذخیره می کنید ذخیره کنید.
• فایل HTML را در یک ویرایشگر متن مانند VS Code باز کنید.
• تگ هایی که باید در تگ head قرار بگیرند را در جای خود قرار دهید. آدرس فایل CSS را بین این تگ ها وارد کنید تا فایل HTML به فایل تمپلت CSS لینک داده شود. فایل الگوی شما ممکن است نام دیگری داشته باشد، بنابراین از نام صحیح به جای “style.css” استفاده کنید. بخش هد HTML شما شبیه به این مثال است:

• فایل HTML را ذخیره کنید.
• فایل HTML را در یک مرورگر وب باز کنید. استایل CSS آماده که پیوست کردید در حال اجراست و باعث می شود وب سایت شما سازگارتر باشد.

مزایای استفاده از CSS آماده

به طور مداوم کارآمد است

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

زمان کمتری نیاز دارد

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

تعمیر و نگهداری کم

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

سخن آخر

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

نوشته مزایای استفاده از CSS های آماده استفاده چیست و از کجا می توان آن ها را گرفت؟ اولین بار در ممتاز دیزاین. پدیدار شد.

مفاهیم پایه UI و UX

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

• طراحی وب – یک دسته چتر گسترده برای همه مواردی که به طراحی عناصر و کاربرد یک وب سایت مربوط می شود. هر دو بحث طراحی UI و UX، همراه با بسیاری از زمینه های دیگر، در طراحی وب گنجانده شده اند.
• توسعه وب – قسمت فنی ساخت وب سایت، با تمرکز بر کد نویسی. توسعه وب بیشتر به “front-end” و “back-end” تقسیم می شود.
• رابط کاربر (UI) – یک تخصص طراحی وب است که با کنترل هایی که افراد برای تعامل با یک وب سایت یا برنامه از جمله نمایش دکمه ها و کنترل های اشاره استفاده می کنند، سر و کار دارد.
• تجربه کاربر (UX) – یکی دیگر از تخصص های طراحی وب، این یکی مربوط به رفتار و احساس کاربر هنگام استفاده از سایت یا برنامه است. طراحی UX بسیاری از زمینه های دیگر را در بر می گیرد، اما آن ها را از دید کاربر مشاهده می کند.

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

طراحی وب سایت

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

زیرمجموعه های طراحی وب شامل UI و UX است، اما همچنین اختصارات سرگرم کننده دیگری مانند IA (معماری اطلاعات، کار با نقشه برداری و نویگیشن سایت) و CRO (بهینه سازی نرخ تبدیل، تنظیم دقیق طراحی سایت برای افزایش فروش، ثبت نام یا سایر موارد خاص) نیز وجود دارند. ده ها مورد از این زیرمجموعه ها وجود دارد که هر روزه طراحان سعی می کنند با ایتفاده از این موارد شغل های بهتری را در یک بازار رقابتی پیدا کنند، این باعث می شود دسته های جدیدی ایجاد شوند.

توسعه وب

توسعه وب به دو دسته اصلی تقسیم می شود:

• Front-end (a.k.a. سمت کلاینت): کد نحوه نمایش وب سایت (یا برنامه) در صفحه است. توسعه دهنده فرانت وظیفه زنده سازی چشم انداز طراح وب را بر عهده دارد، معمولاً با استفاده از زبان های علامت گذاری مانند HTML ،CSS و JavaScript این موارد را انجام می دهند. به طور معمول، همه آنچه طراح برنامه ریزی کرده است واقعاً عملی نیست، بنابراین توسعه دهنده فرانت اغلب با طراح بک اند نیز کار می کند و تعامل دارد.
• Back-end (a.k.a. سمت سرور): “front-end” از سیستم دیجیتال منابع میزبانی شده در یک سرور خارج می شود. توسعه دهنده back-end با مدیریت منابع پشت صحنه، کد گذاری داده ها در پایگاه داده، نحوه تحویل داده ها را بهینه می کند. آن ها از زبان هایی مانند PHP ،Ruby ،​​Python ،Java یا .Net استفاده می کنند.

رابط کاربر (UI)

اکنون که طراحی و توسعه وب را توضیح دادیم، می توانیم زمینه های تخصصی تر مانند طراحی UI و UX و تفاوت های آن ها را بررسی کنیم. UI چیزی است که همه بدون تأمل زیاد از آن استفاده می کنند- نیازی نیست که از تاریخچه نماد همبرگر مطلع شوید تا بدانید که دکمه دارای سه خط منوی شماست.

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

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

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

تجربه خدمات (UX)

از بسیاری جهات، UX با UI تفاوت دارد و از منظر کاربر مانند زمینه طراحی وب است. طرح صفحه وب چگونه بر کاربر تأثیر می گذارد؟ UI چگونه بر کاربر تأثیر می گذارد؟ وقتی به مراحل پیشرفته می روید، UX بسیار استراتژیک تر می شود، مانند: “چگونه صفحه ای را طراحی کنیم که کاربر بخواهد به سیستم وارد شود؟”

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

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

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

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

به کدام یک بیشتر احتیاج دارید؟

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

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

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

UI

• ناوبری ضعیف
• عدم وجود گزینه های سفارشی سازی
• عدم وجود گزینه های اشتراک اجتماعی
• شکایت در مورد “چگونه این کار را انجام دهم” یا “کجا می توانم آن را پیدا کنم”

UX

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

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

نوشته مفهوم و تفاوت های UI و UX در طراحی وب سایت‎ چیست؟ اولین بار در ممتاز دیزاین. پدیدار شد.

طراحی دیجیتال چیست؟

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

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

تفاوت بین طراحی دیجیتال و طراحی گرافیکی

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

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

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

انواع طراحی دیجیتال

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

طراحی وب سایت

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

طراحی صفحه فرود

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

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

طراحی برنامه

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

طراحی آیکون برنامه

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

طراحی اینفوگرافیک

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

تبلیغات بنر

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

طراحی صفحه شبکه های اجتماعی

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

کتاب های الکترونیکی

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

طراحی قالب پاورپوینت

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

طراحی سه بعدی

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

انواع طراحان دیجیتال

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

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

• طراحان گرافیک
• طراحان گرافیک
• طراحان برنامه
• طراحان UX
• طراحان رابط کاربر
• طراحان رابط کاربر
• انیماتورها

سخن آخر

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

منبع: 99designs – adobe

نوشته طراحی دیجیتال چیست؟ انواع آن اولین بار در ممتاز دیزاین. پدیدار شد.

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

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

8 ترند طراحی جلد کتاب

1. تایپوگرافی بُلد یا پررنگ

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

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

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

2. طراحی مینیمالیستی یا ساده

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

ممکن است جلد کتاب هایی را ببینید که فقط نام کتاب و نویسنده را با حروف کوچک در جلد ذکر کرده اند. همچنین کتاب هایی وجود دارد که جلد آن ها فقط یک تصویر و یک رنگ دارد.

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

3. المان هایی که قدیمی شده همچنان می توانند بکار گرفته شوند

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

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

4. استفاده از کلاژ

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

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

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

5. استفاده از عکس های اصلی و واقعی

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

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

6. رنگ صورتی

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

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

7. طرح های شلوغ و نامرتب

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

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

8. متن روی عکس ها

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

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

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

سخن آخر

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

منبع: designhill

نوشته 8 ترند برتر و جذاب طراحی جلد کتاب برای سال 2021 اولین بار در ممتاز دیزاین. پدیدار شد.