بهزاد مقتدر

بهزاد مقتدر

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

پارالاکس اسکرولینگ در مدهای طراحی سایت در سال 2017

مدهای طراحی سایت در سال 2017

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

مشکلات مد پارالاکس اسکرولینگ در طراحی سایت :

•   پارالاکس اسکرولینگ برای سئو سایت بد است :

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

•   استفاده از پارالاکس اسکرولینگ در طراحی سایت  ممکن است عملکرد سایت را تضعیف کند :

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

 

طراحی صفحات بارگذاری پیچیده

مدهای طراحی سایت در سال 2017

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

استفاده بیش از حد از جاوااسکریپت

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

تعدادی از دلائلی که استفاده بیش از حد از جاوااسکریپت می تواند به سایت شما آسیب بزند :

مدهای طراحی سایت در سال 2017

•    طولانی شدن زمان بارگذاری
•    کاربران موبایل وب بیشتر با مشکل کندی سرعت مواجه می شوند
•    با یک باگ کوچک می تواند یک مشکل بزرگ در عملکرد سایت ایجاد کند
•    اگر به درستی پیاده سازی نشده باشد ، می تواند به امنیت سایت ضربه جدی وارد کند
•    چون توسط کراولر موتورهای جست و جو و مورد بررسی قرار نمی گیرد ، برای سئو سایت (بهینه سازی سایت) مناسب نیست

تایپوگرافی پیچیده

مدهای طراحی سایت در سال 2017

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

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

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

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

مراقب این روش های طراحی سایت در سال 2016 باشید ! (بخش اول) آیا همبرگر منو ، پارالاکس اسکرولینگ و کامپلکس تایپوگرافی در طراحی سایت به ما کمک می کنند یا مانع کار هستند ؟
روش های طراحی وب سایت ، مانند برخی از همین روش های جدید ، دائما در حال تغییر و تحول هستند و وقتی روش جدیدی روی کار می آید ، روش های قبلی کم کم از میان کار می روند . گاهی برخی مدها نیز به دلیل کاربرد فراوانی که دارند تا سال های سال مورد استفاده طراحان و توسعه دهندگان وب قرار می گیرند ، مانند طراحی سایت ریسپانسیو . بعضی دیگر از روش های طراحی سایت در سال 2017 به دلیل تغییر مدل کاری صنعت طراحی وب از سبکی به سبک دیگری تغییر می یابند ؛ مانند تغییر روش کار طراحی سایت از اسکیومورفیسم (Skeuomorphism) به طراحی سایت فلت (Flat Design) .
تصمیم گرفتن برای اینکه از کدام یک از روش های طراحی سایت در سال 2017 برای ساخت سایت استفاده کنید ، بستگی به نیازهای کاربران سایتتان و کسب و کار شما دارد . نباید تنها بنا به این که چند سایت مشهور با یک مد و تکنولوژی خاصی ساخته شده اند و موفق هستند ، شما هم با همان روش و تکنولوژی سایت خود را طراحی کرده و بسازید . روش ها محو می شوند ؛ یعنی وب سایتی که تنها بر اساس روش های روز دنیای وب ساخته شود ، به سرعت تاریخ مصرفش به اتمام می رسد .
با در نظر داشتن مطلب فوق ، حال در ادامه این مقاله قصد داریم برخی از روش های طراحی سایت در سال 2017 را به شما معرفی کنیم که ممکن است برای وب سایت شما هم کارآمد باشند .

روش های طراحی سایت در سال 2017 : پنهان کردن همه چیز سایت در زیر یک همبرگر منو

روش های طراحی سایت در سال 2017

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

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

روش های طراحی سایت در سال 2017

 

 

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

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

 

روش های طراحی سایت در سال 2017

افزایش بسیار زیاد جست و جوی کاربران در صفحه فرود یا لندینگ پیج سایت (landing page) برای یافتن محتوای مورد نظر :

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

آیا کاربران بر روی دکمه همبرگر منو کلیک می کنند؟

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

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

استفاده از گردانه (Carousel) در صفحه اول سایت

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

گردانه ها برای سئو سایت بد هستند :

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

کاروسل ها بر عملکرد سایت تاثیر منفی می گذارند :

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

گردانه ها مشکل دسترسی دارند :

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

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

نقش صدا در طراحی سایت و اپلیکیشن و نحوه استفاده و بکار گیری هوشمندانه آن در طراحی واسط کاربری (UI) و تجربه کاربری (UX)

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

 

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

صدا در طراحی سایت

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

اصول طراحی صدا در طراحی وب سایت و ساخت اپلکیشن

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

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

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

وب نوش ارائه دهنده ی ایده های نو در صنعت طراحی سایت و وب برندینگ: با وب نوش وب را نوش جان کنید.

مهم ترین کارهایی که برای طراحی UX (تجربه کاربری) در طراحی سایت فروشگاهی باید انجام دهیم

 – کارهای توصیه شده برای افزایش میزان کانورژن فروشگاه آنلاین شما

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

طراحی سایت فروشگاهی


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

نکات مهم برای طراحی UX در طراحی سایت فروشگاهی:

اولین تأثیر از اولین ورود بازدید کننده به فروشگاه اینترنتی شما

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

دسته بندی و فیلترکردن محصولات و استفاده از ابزار راحتی در انتخاب برای کاربران

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

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

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

چند ترفند برای انجام این کار در سایت های فروشگاهی :

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

نشان دادن اعتبار بالای طراحی سایت فروشگاهی و جلب رضایت مشتری

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

دسترسی راحت مشتری به بخش خدمات فروش

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

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

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

جهت مشاوره رایگان برای طراحی سایت فروشگاهی، و همچنین پشتیبانی سایت های فروشگاهی میتوانید با تیم فنی وب نوش در تماس باشید...

چند مورد از برترین روندهای تجربه کاربری (UX : User Experience) در طراحی سایت که طراحان وب باید درباره آن ها بداند :

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

آیا آن ها با میل و رغبت از وب سایت شما استفاده می کنند یا اینکه چون مجبور هستند تنها برای لحظاتی وارد سایتی که طراحی کرده اید می شوند و از وب اپلیکیشن شما استفاده می کنند ؟

برای پاسخ به این سوالات و کسب اطلاعات بیشتر در زمبنه تجربه کاربری ux  در طراحی سایت با سئو سایت و پشتیبانی سایت وب نوش همراه باشید


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

طراحی وب سرویس ، یکی از مهمترین روندهای تجربه کاربری UX در طراحی سایت

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

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

طراحی سایت UX محور یا طراحی سایت UI محور؟

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

تجربه کاربری UX در طراحی سایت

تجربه کاربری UX در طراحی سایت

تنوع بیشتر در قالب سایت ها :

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

الگوهای قابل اتکاء در طراحی سایت UI :

هدف الگوهای طراحی UI (User Interface) این است که کاربری سایت برای کاربران ساده تر شود . افزایش تعداد این الگوهای طراحی واسط کاربری به این معناست که طراحان وب باید در استفاده از آن ها بسیار به تجربه کاربری کاربران از استفاده و بازدید سایتشان دقت کنند .

افزایش کاربری موبایل وب :

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

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

تجربه کاربری UX در طراحی سایت

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

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

تجربه کاربری UX در طراحی سایت

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

طراحی سایت برای تمام دستگاه ها - طراحی سایت ریسپانسیو

تجربه کاربری UX در طراحی سایت

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

تاثیر مستقیم طراحی سایت بر اساس ux تجربه کاربری بر روی سئو سایت

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

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

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

با وب نوش وب را بنوشید

دوشنبه, 11 مرداد 1395 ساعت 19:47

فریم ورک (Framework) چیست ؟

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

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

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

 

فریم وردک در طراحی سیات

 

در دنیای طراحی سایت ، برای اینکه یک تعریف قابل فهم تر ارائه کنم ، فریم ورک یک فایل است که محتوای آن مجموعه ای از کدها و اسکریپت ها در زبان های مختلف توسعه وب سایت از جمله HTML , CSS , JS , PHP , … می باشد که می توان از این کدهای آماده برای حل کردن برخی مشکلات و دشواری های توسعه وب سایت استفاده کرد و یا حتی یک وب سایت را به طور کامل با استفاده از آن ها ایجاد و راه اندازی کرد .

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

چند نوع فریم ورک به طور کلی وجود دارد ؟

به طور کلی می توان فریم ورک ها را به دو دسته تقسیم کرد : فریم ورک های توسعه Back-end و فریم ورک های توسعه Front-end وب سایت .
این مسئله خیلی مهم است که ما بدانیم فریم ورک های یک ایده مفهومی هستند : یک کیت (ابزار) استاندارد از پیش آماده شده برای استفاده و پیش برد کار . مفهوم یک فریم ورک می تواند برای پروسه های متفاوت در بستر وب مورد استفاده قرار گیرد : مثلا در لایه برنامه نویسی که با استفاده از زبان PHP وب سایت را به دیتابیس متصل می کنیم و محتوا و داده های موجود را در صفحات سایت به نمایش در می آوریم ؛ یا در لایه طراحی که با باید با استفاده از اسکریپت HTML به همراه استایل هایی که با CSS برای آن تعریف کردیم ، محتوای سایت را به زیبایی در انواع بروزرها برای کاربران به نمایش بگذاریم .

فریم ورک های مربوط به توسعه Front-end (فریم ورک های CSS)

فریم ورک های front-end معمولا متشکل از بسته های شامل فایل های ساختاری و فولدرهای حاوی کدهای استاندارد شده (HTML , CSS , JS , …) هستند .

اجزاء این فریم ورک ها به طور معمول 

  • منبع کد CSS برای ایجاد یک گرید (grid) : این تکه کد به توسعه دهنده اجازه می دهد تا عناصر مختلف صفحه وب سایت را به راحتی و آنگونه که می خواهد به صورت جدول مانند چیدمان کند .
  • تعریف استایل های تایپوگرافی برای عناصر HTML
  • ارائه راه حل هایی برای مواردی از اسکریپت ها که در بروزرها پشتیبانی نمی شوند تا استایل سایت آنگونه که مد نظر طراح است در هر بروزری دیده شود .
  • ایجاد کلاس های استاندارد CSS که می توان از آن ها برای استایل دادن به اجزاء واسط کاربری (UI) به طور پیشرفته استفاده کرد .

 

فریم وردک در طراحی سیات

 

درباره فریم ورک های ریسپانسیو : اخیرا تکنیک های طراحی سایت ریسپانسیو - روشی که در آن توسعه دهنده وب سایت با تعریف ابعاد مختلف نمایشگرها توسط مدیا کوئری ها (media query) در CSS سایت ، سایت را اصطلاحا واکنش گرا یا mobile-friendly می سازد - به قدری افزایش داشته که توسعه دهندگان برای راحتی کار یک سری فریم ورک ریسپانسیو ایجاد کرده اند . به این طریق طراحی سایت ریسپانسیو نیز با استفاده از راه حل های ارائه شده توسط این فریم ورک ها ، بسیار ساده تر قبل شده است .

انتخاب فریم ورک (به تناسب نیاز پروژه) در طراحی سایت

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

فریم ورک های ساده CSS

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

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

1140 CSS Grid , Golden Grid System , Mueller Grid System , Responsive Grid System Graham Miller , Titan , Responsive Grid System Denis LeBlanc , Less Framework 4 , Gridiculo , Columnal , Toast , Ingrid , 960 Grid System , Base , Susy , …

فریم ورک های کامل در بحث طراحی سایت

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

چند نمونه از این فریم ورک های کامل عبارت اند از :

BootStrap , Foundation 3 , Skeleton , YAML 4 , Tuktuk , Gumby , Kube , Groundwork , ResponsiveAeon , …

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

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

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

اگر این موارد را در نظر بگیرید ، احتمالا راحت تر می توانید در مورد انتخاب فریم ورک تصمیم بگیرید :

  • سرعت بارگذاری و راحتی در استفاده
  • راحتی در فهم عملکرد آن
  • گزینه هایی که به شما ارائه می کند
  • سازگاری با سیستمی که از آن استفاده می کند
  • ارائه پشتیبانی بلند مدت (long-term support) بهتر

آیا استفاده از فریم ورک در طراحی سایت توصیه می شود ؟

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

منبع : سئو سایت وب نوش

هفت راز نوسیندگی حرفه ای مقاله بر مبنای اصول و تکنیک های سئو :  نویسندگی مقالات و مطالب بر اساس اصول و ترفندهای سئو سایت یکی از بخش های بسیار مهم و قابل توجه بلاگ یک وب سایت است . برای جذب ترافیک و بازدید کننده به وب سایت ، سایت باید در موتورهای جست و جو از رتبه و امتیازی خوبی برخوردار باشد . برای کسب این امتیاز ، هر وب سایتی جدا از بحث طراحی سایت و توسعه سایت ، باید دارای یک تیم قدرتمند تولید محتوا باشد . قطعا در مبحث سئو سایت ، با جمله معروف “ Content is King “ مواجه شده اید ، این جمله به تنهایی نشان دهنده ارزش و اهمیت محتوای صفحات یک وب سایت و می توان از معنای آن فهمید که عمر یک سایت بستگی به محتوای آن دارد . حال تولید این محتوای مهم و ارزشمند چگونه است ؟ طبیعتا هر کاری دارای اصولی است ، تولید محتوا هم همینطور . در کنار تمام قواعد این کار ، با مفهومی به نام سئو سایت یعنی بهینه سازی سایت برای موتورهای جست و جو (SEO : Search Engine Optimization) رو به رو می شویم که یکی از پایه ها و قواعد اصلی در تولید محتوای یک وب سایت است . البته اینکه ما بخواهیم مطالب سایت را بر مبنای قواعد سئو بنویسیم دلیل نمی شود تا مفهوم و زیبایی و خوانایی مطلبمان را فدای آن کنیم ، چون در اینصورت نتیجه معکوس خواهیم گرفت و نه تنها بازدید کنندگان جذب سایت نمی شوند ، بلکه مخاطبان فعلی وب سایت را نیز از دست خواهیم داد .

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

مهمترین و اولین اصل از اصول نویسندگی بر مبنای سئو : انتخاب صحیح کلمه کلیدی (KeyWord)

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

 دومین اصل از اصول نویسندگی بر مبنای سئو سایت: میزان و جایگاه به کار بردن کلمه کلیدی

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

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

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

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

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

سئو سایت

اهمیت ویراستاری مطلب برای سئو سایت بهتر

تفاوتی که یک نویسنده حرفه ای و آشنا به سئو را از یک نویسنده عادی متمایز می کند ، همین ویراستاری و تدوین مقاله پس از نوشتن آن است . ابزار زیادی برای تدوین مطلب ، از جمله بر طرف کردن غلط های املایی و آراسته سازی آن ، وجود دارد که می توان به این موارد اشاره کرد : Microsoft Office , OpenOffice , Google Docs , … . چند نکته که می توان در ادامه این بخش به آن ها اشاره کرد مواردی هستند چون پرهیز از نوشتن جملات و پاراگراف های طولانی ، قالب بندی مناسب متن ، برطرف سازی غلط های املایی ، و ... .

جمع بندی نکات نویسندگی مقاله بر مبنای سئو سایت

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

موارد استفاده های کاربردی از فریم ورک جاوااسکریپت :  – AngularJS – به ویژه در ساخت وب اپلیکیشن تک صفحه ای (SPA : Single Page Application) و طراحی سایت داینامیک در مدت زمان بسیار کوتاه

 

طراحی سایت با جاوا اسکریپت


با توجه به پیشرفت های فراوان اخیر در دنیای وب و توسعه و ساخت ابزارهای بسیار پیشرفته و در دسترس برای طراحی وب سایت ، کار طراحی سایت بسیار ساده تر از گذشته شده است . یکی از این ابزارهای پیشرفته که اخیرا نیز بسیار مورد توجه و استفاده طراحان و توسعه دهندگان وب سایت ها قرار گرفته است ، فریم ورک (Framework) ها هستند . این فریم ورک ها برای تمام تکنولوژی های استاندارد وب (HTML , CSS , JavaScript , PHP , …) موجود هستند و در این مقاله قصد پرداختن به فریم ورک معروف زبان جاوااسکریپت ، یعنی AngularJS و بررسی کاربردهای آن را دارم .
AngularJS یک فریم ورک ساختاری برای وب اپلیکیشن های داینامیک است . با استفاده از این فریم ورک ، توسعه دهنده وب سایت قادر خواهد بود تا از اسکریپت HTML به عنوان زبان ساخت قالب سایت استفاده کند و همچنین این فریم ورک با ارائه دادن افزونه نوشتار HTML ، به توسعه دهنده کمک می کند تا با حداقل زحمت تمام اجزای اپلیکیشن را پیاده سازی کند . Angular بسیاری از کدهای مورد نیاز یک وب اپلیکیشن را در خود آماده دارد و اینگونه دیگر نیازی به صرف مدت زمان طولانی برای کدنویسی نیست .
علی رغم اینکه فریم ورک Angular.js با هدف ایجاد وب اپلیکیشن ها و طراحی سایت های تک صفحه ای توسعه یافته است ، اما توسعه دهندگان می توانند با استفاده از آن هر گونه اپلیکیشن و وب سایتی که مد نظر دارند طراحی و پیاده سازی کنند . از جمله ویژگی ها و امکانات این فریم ورک می توان به موارد زیر اشاره کرد :
بایندینگ دو طرفه (two-way binding) ، ساخت قالب (template) ،RESTful API handling ، modularization ، AJAX handling ، dependency injection ، ...

طریقه آغاز به کار با فریم ورک AngularJS

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

عبارات و دستورات عملیاتی فریم ورک AngularJS

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

ng-show , ng-hide : این دستورات برای نمایش دادن یا پنهان کردن یک عنصر به کار می رود که در فایل استایل های سایت می توانید آن را تنظیم کنید .

ng-class : این دستور باعث می شود تا ویژگی های داده شده به کلاس مد نظر به صورت داینامیک  پویا بارگذاری شوند .
ng-animate : این عبارت دستوری نیز برای ایجاد انیمیشن استفاده می شود که شامل پشتیبانی از انیمیشن های JavaScript و ترنزیشن های CSS3 و انیمیشن های Keyframe آن .
منابع فراوانی برای یادگیری دقیق و گام به گام این عبارات دستوری Angular را به راحتی می توانید در فضای وب بیابید .

مثال های کاربردی از طرز استفاده فریم ورک AngularJS

1. ساختن منوهای داینامیک

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

2. ساختن SPA (وب اپلیکیشن تک صفحه ای)

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

3. سایر مثال های پرکاربرد

می توانید از طریق لینک های زیر ، مثال هایی دیگر از کاربردهای رایج فریم ورک AngularJS را مشاهده کنید :

  • Todomcv – Tutorials
  • چگونه از NgAnimate در AngularJS استفاده کنیم
  • معرفی و آشنایی با Angular.js با 50 مثال

پیش بینی صنعت طراحی وب با وجود ابزارها و فریم ورک های پیشرفته

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

منبع : طراحی سایت وب نوش

سیر تکاملی ار تقاء یافتن از طراح UI به طراح محصول در طراحی وب سایت

– روند ارتقاء یافتن طراحان UI به طراحان محصول ، یک گام منطقی در عصر تکنولوژی مدرن

سوسیس ، پنیر و اپلیکیشن ایمیل

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

– طراحان UI و طراحان UX . آن ها که هستند و دقیقا چه کاری انجام می دهند ؟

طراح UX (User Experience)  و طراحی سایت

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

 

طراحی سایت ui

 

طراح UI (User Interface) در طراحی سایت

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

 

طراحی سایت ui

 

" طراحان UI باید مهارت های طراحان UX را نیز بلد باشند . "

برای توسعه یک واسط کاربری عالی به چه چیزهایی نیاز داریم ؟

چند مورد از مسائلی که بر توسعه واسط کاربری موثر است :

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

قطعا پاسخ تمام این پرسش ها " نه " است .

طراحی محصول (اپلیکیشن ها و سرویس ها)

ساخت هرگونه محصول مدرن دیجیتال یک پروسه طولانی و دشوار است

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

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

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

باز طراحی سرویس های قدیمی و یا معیوب

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

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

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

منبع طراحی سایت و سئو سایت وب نوش

چند اشتباه رایج در نوشتن اسکریپت CSS قالب سایت وردپرسی : یکی از سیستم های مدیریت محتوا (CMS : Content Management System) که امروزه بسیار مورد استقبال برای ساخت و طراحی سایت قرار گرفته است ، هسته وردپرس (WP : WordPress) می باشد . با وجود ازدیاد قالب های آماده و موجود برای سایت های وردپرسی ، یافتن یک قالب برای سایت خود دیگر کار دشوار و چالش برانگیزی نیست . تنها کافیست تا از طریق وب سایت های دانلود قالب وردپرسی ، یک پوسته (Theme) قالب مناسب برای سایت خود انتخاب کنید و با استفاده از صفحه مدیریت (dashboard) وردپرس ، به سلیقه دلخواه و طرح مورد نیاز سایتتان آن قالب را سفارشی سازی (customize) کنید که این امر یکی از مزایای سیستم وردپرس است . اما این همه کار نیست ، بلکه شما می بایست دارای دانش استفاده از تکنولوژی اسکریپت CSS نیز باشید . در این مقاله ، به چند مورد از استباهات رایجی که توسط توسعه دهندگان سایت های وردپرسی رخ می دهد ، به ویژه در نوشتن استایل های CSS سایت ، خواهیم پرداخت . مطمئنا با برطرف سازی این نواقص کار با CSS می توانید تجربه طراحی سایت موفق با هسته وردپرس را تجربه کنید .

css و طراحی سایت

 

تعریف و مفهوم سفارشی سازی قالب سایت وردپرسی

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

حال به سراغ بررسی آن اشتباهات رایج در اصلاح ، سفارشی سازی و یا نوشتن از اول فایل استایل های CSS قالب سایت وردپرسی خواهیم رفت :

1.    کم توجهی به قواعد زمینه ای در مورد انتخابگرها (Selectors)

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

{property: value; property:value;}

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

p {
                text-align: right;
    color: blue;
}

آنچه که بسیار حائز اهمیت است ، توجه به نوع نوشتار (Syntax) استایل ها از جمله توجه به سمی کالن (semi-colon) ، دونقطه (colon) و جایگاه باز و بسته شدن براکت ها می باشد .

2.    دقت نکردن به مسئله پشتیبانی بروزر (Browser Support) و باگ های آن

از آنجایی که کاربران با بروزرهای مختلف از سایت های موجود در فضای وب بازدید می کنند ، بنابراین قطعا ملزم می شویم تا در نوشتن استایل های CSS قالب سایت وردپرسی ، تمام استانداردهای این تکنولوژی را در نظر بگیریم و رعایت کنیم . در اینجا لیستی از مشکلات اجرایی فایل CSS بر روی بروزرها ، در صورتی که به مسئله سازگاری اسکریپت های شما با انواع بروزر (Browser-Support یا Browser-Compatibility) توجه کافی نداشته باشید ، را برای شما آماده کرده ام :

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

3.    نوشتن اشتباه اصطلاحات مهم اسکریپت CSS

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

4.    انتخاب نادرست ماژولی که قصد ویرایش آن را دارید

هنگام سفارشی سازی قالب سایت وردپرسی ، باید بسیار دقت داشته باشید که ماژولی که انتخاب کرده اید در حال ویرایش آن هستید ، همان ماژولی است که مد نظر داشتید . مثلا می خواهید استایل بخش comments.php را ویرایش کنید ، اما به اشتباه فایل comments-popup.php را انتخاب کرده اید . حتما پیش از ویرایش هر فایل ، یک فایل پشتیبان از آن را ذخیره کنید که اگر فایل را به اشتباه ویرایش کردید ، به راحتی بتوانید آن را بازیابی کنید .

5.    نداشتن اطلاعات صحیح درباره محل بارگذاری فایل ها

به عنوان یک توسعه دهنده وب ، باید بدانید که استایل ها و سایر فایل های قالب سایت ، به ویژه در وردپرس ، در کدام قسمت از سرور باید بارگذاری بشوند . مثلا فایل استایل های قالب سایت وردپرسی در فولدری به نام style.css باید قرار بگیرند .

نتیجه گیری نهایی درباره اشتباهات رایج توسعه دهندگان در نوشتن اسکریپت CSS قالب سایت وردپرسی

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

منبع : سئو سایت وب نوش