موضوع مقاله :

تکنیک های طراحی سایت

چکیده :

تکنیک های طراحی سایت


شرح : الگو های عمودی و اسکرول کردن

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

رابط کاربری مدل کارتی (Card-Style Interfaces)

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

استفاده از Hero Video Header

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

استفاده از انیمیشن

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

روی تعامل ها تمرکز کنید

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

چینش زیبای عناصر (Beautiful Typography)

رابط های کاربری ساده (Streamlined Interfaces)  راه رو برای چینش زیباتر عناصر هموار کردند.
البته قطعا اضافه شدن ابزارهایی مثل Google Fonts و Adobe Typekit هم به ایجاد تیپوگرافی- های زیبای کنونی خیلی کمک کرده.
این روزها بیشتر طراحان فونت های ساده را برای نوشتن مطالب در سایتشان انتخاب می کنند.
اینطوری هم جای بیشتری برای بقیه ی عناصر سایت باقی می ماند و هم اینکه خواندن مطالب روی صفحه نمایش آسان تر می شود.
در نهایت طراحان باید سعی کنند که یه تعادلی بین سادگی و خوانایی تیپوگرافی و جذابیت و خلاقانه بودنش به وجود بیاورند.

استفاده از طرح ها و تصاویر

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

استفاده از رنگ های سرزنده و روشن

با روی کار آمدن طراحی مسطح (Flat Design) استفاده کردن از رنگ های سرزنده و تند هم رایج شد.
پیش بینی می شود که امسال هم رنگ بندی سایت ها به همین روند ادامه داشته باشد.
با این تفاوت که در سال 1394 بیشتر رنگ های تند و هم تناژ (هم پلیت) استفاده می شد ولی الان در سال 1395 رنگ های تند با سبک و روحیه ی دهه ی 80 میلادی در طراحی سایت ها خودنمایی می کنند.  

آیکون گرافی

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

مرز بین وهم و واقعیت

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

وب سایت های شامل اسلاید

قبلا وب سایت ها برای نمایش اسلایدها از اسلایدر استفاده می کردند و عکس ها در فریم اسلایدر حرکت می کردند و به نمایش گذاشته می شدند.
نسل بعدی و تکامل یافته ی اسلایدر ها اسلاید های تمام صفحه (Full-Screen Slides) هستند.
در این نوع طراحی با عوض شدن هر اسلاید کل صفحه ریفرش (Refresh)  می شود و اطلاعات جدید بارگذاری می شود.
اسلایدهای تمام صفحه می توانند با کلیک کردن یا اسکرول کردن و یا به طور زمان بندی شده به اسلاید بعدی بروند.
در چندماه آینده این تکنیک طراحی را در بسیاری از سایت ها خواهید دید.