نوشته شده توسط : amin7756
اگر قصد دارید روش سریعی برای اعمال پوسته «حالت شب» در وب‌سایت خود طراحی کنید، می‌توانید از فیلترهای invert و hue-rotate استفاده کنید.

()filter: invert روی مقیاسی از 0 تا 1 عمل می‌کند که 1 سفید را به سیاه تبدیل می‌کند. ()filter: hue-rotate محتوای رنگی عناصر ما را به ترتیبی تغییر می‌دهد که کمابیش همان سطح از جداسازی از همدیگر را حفظ کنند. مقادیر آن از 0deg تا 360deg متغیر است...


کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام]]>

:: بازدید از این مطلب : 95
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
برای ایجاد «نقطه‌های گلوله‌ای» (Bullet points) سفارشی برای یک لیست نامرتب می‌توانید از مشخصه content به همراه شبه عنصر ::before استفاده کنید. در CSS زیر ما از دو کلاس complete. و incomplete. برای ایجاد تمایز بین دو نوع مختلف از نقاط گلوله‌ای استفاده کرده‌ایم...


کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام]]>

:: بازدید از این مطلب : 87
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
روش‌های مفید زیادی برای بهره‌مندی از مزیت مشخصه content وجود دارد. از آنجا که کاراکتر (/) و دیگر نمادها برای جداسازی مسیرهای ناوبری به صورت نمادین استفاده می‌شوند، تعریف کردن آن‌ها در CSS کمک زیادی به معنابخشی کد ما می‌کند. مانند اغلب مثال‌های دیگر این نوشته، در این جلوه نیز از شبه کلاس استفاده کرده‌ایم که امکان استفاده آن تنها در CSS3 وجود دارد...


کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام]]>

:: بازدید از این مطلب : 97
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
این جلوه چشم‌نواز محبوبیت فزاینده‌ای در وب یافته است و از آن می‌توان برای حیات بخشیدن به هر صفحه در زمان اسکرول شدن از سوی کاربر استفاده کرد. با این که تصاویر نرمال یک صفحه با اسکرول شدن از سوی کاربر حرکت می‌کنند؛ اما تصاویر Parallax به نظر ثابت می‌آیند و تنها پنجره‌ای که آن‌ها را از میان آن می‌بینیم، حرکت می‌کند...


کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام]]>

:: بازدید از این مطلب : 95
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
اگر تاکنون از فتوشاپ استفاده کرده باشید، احتمالاً می‌دانید که حالت‌های مختلف ترکیب (Blend) آن تا چه حد قدرتمند است و می‌توان جلوه‌های جالبی با آن خلق کرد. اما آیا می‌دانید که بسیاری از جلوه‌های ترکیب تصاویر فتوشاپ در CSS نیز ممکن هستند؟...


کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام]]>

:: بازدید از این مطلب : 83
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
تا پیش از CSS3 برش دادن تصاویر نیز همانند فوتر چسبنده کار دشواری بود. اینک دو مشخصه به نام‌های object-fit و object-position در اختیار داریم که موجب شده کار برش دادن آسان شود و هنگامی که با همدیگر استفاده شوند، امکان تغییر ابعاد یک تصویر بدون تأثیر روی نسبت ابعاد را فراهم می‌سازند...


کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام]]>

:: بازدید از این مطلب : 89
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
شبکه CSS و Flexbox امکان طراحی انواع مختلفی از طرح‌بندی‌های واکنش‌گرا را تسهیل کرده‌اند و به ما امکان می‌دهند که به سادگی عناصر را به صورت مرکزی روی صفحه قرار دهیم که تا قبل از آن کار دشواری محسوب می‌شد...


کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام]]>

:: بازدید از این مطلب : 87
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
در این آموزش قصد داریم نحوه ساخت یک تصویر سه بعدی زیبا را با ترکیب یک تصویر منظره و با یک گوشی هوشمند در فتوشاپ به شما دوستان و همراهان دوست داشتنی روکسو آموزش دهیم.


آنچه برای این آموزش لازم دارید:
 

لازم به ذکر است در صورتی که با قوانین selection در فتوشاپ آشنایی کافی دارید و تجربه کار با ابزار های انتخاب(سلکشن) در فتوشاپ را دارید نیاز به فایل های transparent نخواهید داشت. این فایل ها تنها برای افراد مبتدی جداسازی شده است.


در اولین قدم باید تصویر گوشی هوشمندی را که در دست یک مرد قرار دارد، در فتوشاپ باز کنید. سپس روی آن دو بار کلیک کنید تا قفل آن باز شود. به جای این کار می توانید یک لایه کپی با فشردن کلید های ترکیبی ctrl + j ایجاد کنید و به اصطلاح به صورت non destructive editing کار کنید. در این حالت اولین لایه در طول ادیت دست نخورده باقی می ماند. اما ما برای سادگی کمتر و ایجاد لایه های کمتر ترجیح می دهیم به جای کپی گرفتن، با دو بار کلیک قفل آنرا باز کنیم!

باز کردن تصویر در فتوشاپ

سپس ابزار magic wand را از منوی سمت چپ فتوشاپ انتخاب کرده و در حالی که میزان تولرانس روی عدد 80 تنظیم است، روی صفحه نمایش گوشی هوشمند کلیک کنید تا محدوده صفحه نمایش به حالت selection دربیاید. در تصویر زیر همه چیز به وضوح مشخص است (البته دقت کنید دایره شماره دو به اشتباه روی یک لایه متفرقه وجود دارد که شما کاری با آن نخواهید داشت. منظور اصلی از این دایره دقت روی مقدار tolerance است که روی عدد 80 قرار دارد!)

سلکشن تصویر در فتوششاپ با ابزار magic wand tool

سپس ابزار براش را انتخاب کرده و مد آنرا روی clear قرار داده و به روی صفحه نمایش گوشی که در حالت selection نیز قرار دارد بکشید

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

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

تنظیم سایز تصویر منظره روی تصویر گوشی

حال باید این لایه را به زیر لایه تصویر گوشی بیاورید.

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

با هم تاکید می کنیم که در صورت تغییر شفافیت در مرحله قبل، در این مرحله باید شفافیت را روی عدد 100 برگردانید.

جا به جایی لایه ها در فتوشاپ

حال از لایه تصویر منظره یک کپی ایجاد کنید. برای اینکار لایه را انتخاب کنید (روی آن یک بار کلیک کنید!) و سپس از کلیدهای ترکیبی ctrl + j استفاده کنید.

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

ایجاد لایه کپی از تصویر منظره

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

حذف قسمت های اضافی از تصویر منظره

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

غیر فعال کردن موقتی لایه های زیرین برای مشاهده نتیجه کار

خب! تا به اینجا توانستیم یک تصویر شبه سه بعدی ایجاد کنیم که گویی در آن آبشار منظره از صفحه نمایش گوشی خارج شده است!

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

تصویر پرندگان طوطی

تصویر مرغ ماهیخوار

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

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

قرار دادن تصویر طوطی ها در عکس

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

افزدون تصویر مرغ ماهیخوار

در پایان در صورت تمایل می توانید یک افکت زیبا نیز همانند نور خورشید به تصویر اضافه کنید تا کار جذابتر به نظر برسد.

بدین منظور همانند تصوی زیر به منوی filter > render > lens flare رفته و تنظیمات دلخواه خود را همانند تصاویر زیر اعمال کنید.

سعی کنید موقعیت نور را به دقت در جایی تنظیم کنید تا تصویر طبیعی تر جلوه کند.

رفتن به منوی lens flare در فتوشاپ

افزودن فکت نور به تصویر

در آخر، عکس نهایی به شکل زیر خواهد بود:

تصویر نهایی ترکیب منظره با صفحه نمایش گوشی

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

در پایان امیدوارم این آموزش برای شما دوستان عزیز مفید واقع شده باشد. موفق باشید…

 

منبع: روکسو

 

 

طراحی وب- برنامه نویسی]]>

:: بازدید از این مطلب : 93
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
در این آموزش، قصد داریم نحوه نوشتن متن روی یک شیشه بارانی با پس زمینه دلخواه را به شما همراهان همیشگی و دوست داشتنی روکسو آموزش دهیم. این بار بدون مقدمه میرویم سراغ اصل مطلب!


آنچه برای این آموزش لازم دارید
 

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


خب، نوبت به شروع کار می رسد!

تصویر شیشه باران گرفته را در فتوشاپ باز کنید.

سپس روی لایه تصویر با فشردن کلیدهای میانبر ctrl + j یک کپی از لایه ایجاد کنید. همچنین برای این کار می توانید روی لایه تصویر راست کلیک کنید و گزینه Duplicate Layer را انتخاب کنید.

باز کردن تصویر شیشه بارانی در فتوشاپ

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

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

حال، بر روی لایه تصویر راست کلیک کنید و همانند تصویر زیر آنرا به smart object تبدیل کنید.

تبدیل تصویر پس زمینه به smart object

پس از تبدیل عکس به یک شی هوشمند، همانند تصویر زیر به منوی Filter > blur > Gaussian blur بروید.

اعمال فیلتر Gaussian blur

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

اعمال فیلتر Gaussian blur به روی عکس

مشاهده می کنید که عکس کاملا مات شد.

در مرحله بعد همانند تصویر زیر روی لایه تصویر دو بار کلیک کنید و در پنجره باز شده حالت ترکیب (blend mode) را روی گزینه overlay تنظیم کنید.

اعمال overlay blend mode روی تصویر

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

تصویر حاصل از اعمال overlay blend mode

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

نوشتن متن روی تصویر در فتوشاپ

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

اعمال overlay blend mode روی متن

سپس همانند تصویر زیر از منو فیلتر گزینه liquify را انتخاب کنید.

انختاب منو liquify در فتوشاپ

پس از انتخاب این گزینه پنجره ای شبیه به پنجره زیر برای شما باز می شود.

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

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

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

اما با توجه به تصویری که به عنوان شیشه بارانی استفاده کردیم، ممکن است بالای متن ما، کمی کمرنگ و ناخوانا به نظر برسد. برای حل این مشکل، یک کپی از لایه ایجاد می کنیم (کلید ترکیبی ctrl + j). مشاهده می کنیم که غلظت متن دو برابر شد.

پس از آن همانند تصویر زیر یک layer mask به لایه کپی اضافه می کنیم.

اعمال LAYER MASK روی تصویر با فتوشاپ

پس از آن، همانند تصویر زیر کلیدهای ترکیبی ctrl + i را فشار می دهیم تا layer mask ایجاد شده، درست همانند تصویر زیر سیاه شود و غلظت متن به حال اولیه برگردد.

سیاه کردن layer mask ایجاد شده روی کپی متن

اگر به درستی این کار را انجام دهید، همانند تصویر بالا گویا از همان اول از لایه متن کپی (duplicate) ایجاد نکردید.

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

انتخاب ابزار brush در فتوشاپ

پس از تنظیم ابزار brush، آنرا روی قسمت های بالایی متن می کشیم. هر کجا از متن که قلم را می کشید، آن قسمت از متن تیره تر خواهد شد و در عین حال مشاهده می کنید که مستطیل کنار لایه (layer mask) نیز در همان قسمت ها سفید می شود. برای تسلط بیشتر پیشنهاد می کنیم آموزش زیر را که توسط همکار خوبم در روکسو نوشته شده است را مطالعه کنید.

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

متن روی شیشه بارانی

منبع: روکسو


طراحی وب- برنامه نویسی]]>

:: بازدید از این مطلب : 92
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)
نوشته شده توسط : amin7756
 

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

5- با مد روز آشنا باشید

 

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

 

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

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

6- کمتر همان بیشتر است!

 

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

 

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

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

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

7- برنامه ریزی و آزمایش کنید

 

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

 

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

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

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

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

8- قابلیت ها را ارزیابی کنید

 

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

 

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

ارزیابی اکتشافی: از ابزار های مختلف و متخصصان UI و UX برای پی بردن به مشکلات رابط کاربری کمک بگیرید. همچنین قابلیت گزارش دادن مشکلات فنی به تیم مدیریت را برای کاربران سایت ممکن سازید.

تست A/B: اگر مطمئنید نیستید که یک ویژگی خاص در کدام حالت کاربرپسندانه تر است از این تست استفاده کنید. برای مثال هنگامی که برای انتخاب رنگ، میان دو رنگ مختلف مردد هستید این تست می تواند کمک زیادی برای انتخاب نهایی برای شما محسوب شود. توضیحات کامل درباره این تست را در مطلب زیر مطالعه کنید.

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

9- بازخورد های منظم دریافت کنید

 

نمونه یک فرم نظرسنجی در یک وب سایتاز فرم های نظرسنجی برای دریافت بازخورد بازدیدکنندگان استفاده کنید.

 

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

جمع بندی: از قدرت UX غافل نشوید

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

منبع: روکسو

 

 

طراحی وب- برنامه نویسی]]>

:: بازدید از این مطلب : 86
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : سه‌شنبه 15 مرداد 1398 | نظرات (0)

💬 نظرات کاربران
💬ثبت نام کاربران
💬ورود کاربران