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

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

تکنیک طراحی با Microinteractions

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

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

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

 

 

 

 

انیمیشن های microinteractions لازم نیست که یک افکت تکنیکال را به اجرا بگذارند. به تصویر زیر نگاه کنید. این طراحی توسط Liz Shinn در سایت dribbble.com معرفی شده است. در این انیمیشن با هاور کردن روی عبارت Email این عبارت به بالا حرکت کرده و چشمکزن تایپ در کادر ورود ایمیل فعال میشود (کادر فکوس را دریافت می کند).

 

 

 

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

CSS3 و جاوا اسکریپت میتوانند کنترل microinteractions را به عهده بگیرند.  بنابراین تنها کاری که باید انجام داد. یافتن کتابخانه مناسب برای اجرای افکت مد نظر است.

یکی از کتابخانه های پر طرفدار در این زمینه کتابخانه Anime.js میباشد. این کتابخانه قابلیت توسعه انواع microinteraction را دارد.

 

 

 

تکنیک  “Featured In” Badges

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

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

 

 

 

یکی دیگر از تکنیک های پرکاربرد در همین زمینه “used by” badges است. که در این مورد هم یک سری لوگو از شرکت های معتبری که از خدمات سایت استفاده کرده اند را به نمایش می گذاریم. تا بتوانیم به کاربران خود ثابت کنیم که خدمات ارائه شده در وب سایت ارزشمند اند. در اینجا بجای استفاده از نظر های منتشر شده در باره کیفیت سایت، شرکت های برتری را که از خدمات ما بهره برده اند را معرفی میکنیم.

 

 

 

 

 

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

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

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

 

 

یک تکنیک دیگر در وب استفاده از چند ظلعی ها و اشکال زاویه دار در طراحی است.

 

 

 

 

طراحی تایپوگرافی متحرک

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

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

 

 

 

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

 

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

 

 

 

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

پشتیبانی بیشتر از صفحه نمایش های عریض

هر سال که تکنولوژی ها و روش های پرکاربرد طراحی سایت را بررسی می کنیم. طراحی ریسپانسیو نیز یکی از تکنولوژی های پرکاربرد در زمینه طراحی سایت بوده است. طراحی ریسپانسیو در سال ۲۰۱۸ همچنان اهمیت خود را حفظ کرده است.

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

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

 

 

 

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

 

 

 

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

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

افکت های دکمه های  سه بعدی(۳D)

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

اما نوع دیگری از دکمه هم است که اخیراً در سایت های زیادی به کار گرفته میشود و آن دکمه سه بعدی یا ۳D است.

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

 

 

 

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

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

 

 

 

در سایت General Assembly که تصویر آن در بالا به نمایش گذاشته شده است. افکت سه بعدی دکمه ها بسیار نامشخص و محو است. با این حال همچنان میتوان سه بعدی بودن تمام دکمه های سایت را تشخیص داد.

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

دسترسی پذیری واقعی

کار کردن با WAI-ARIA specs    یک چالش محسوب میشود. اما نتیجه نهایی آن ایجاد سایتی است که بصورت کاملا داینامیک برای تمام کاربران در دسترس است.

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

  • منوهای بازشو
  • عکس های اسلاید شو
  • پنجره های ماژولار
  • فرم های طراحی شده با Ajax

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

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

طراحی با کمک Flexbox و CSS Grid

بعد از معرفی ویژگی های CSS3 زمان زیادی طول نکشید که طراحی های حرفه ای بر اساس آن ایجاد شود. در سال ۲۰۱۸ دو روش طراحی  flexbox و CSS grid توسعه بیشتری یافته اند.

 

 

 

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

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

به همین ترتیب در  CSS grid نیز طراحی و شبکه بندی سایت برای عناصر داینامیک بسیار ساده تر شده است.

 

 

 

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

تکنیک های جدید طراحی را همچنان دنبال کنید

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

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

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

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

 

× هر سوالی دارید ازمون بپرسید