بهزاد مقتدر

بهزاد مقتدر

دوشنبه, 10 خرداد 1395 ساعت 10:00

تولید محتوا

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

 

تولید محتوا برای سایت

 

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

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

بحث درباره تغییر و تحولات روز دنیا در مطالب وب سایت

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

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

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

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

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

نوشتن مطالب از تجربیات شخصی و یا نظرات و تجربیات افراد معتبر در زمینه های مرتبط با موضوع وب سایت

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

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

شماره تماس : 02166515088

دوشنبه, 10 خرداد 1395 ساعت 09:45

اهمیت سئو سایت

اهمیت سئو سایت : احتمالا تاکنون در مقالات طراحی وب سایت  وب نوش با مفهوم سئو آشنا شده اید. در این مقاله قصد داریم کمی بیشتر در رابطه با اهمیت سئو در کسب و کار های امروزه بحث کنیم تا نسبت به سئو سایت دید بهتری پیدا کنید.

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

اهمیت ستو سایت برای بهتر شدن تجارت

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

سئو سایت | بهینه سازی سایت

فرآیند سئو کردن وب سایت

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

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

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

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

تاکید میکنیم، سئو سایت و رسیدن به نتایج دلخواه حاصل کار تیمی است.

 

تفاوت بین سئو سایت ، بهینه سازی سایت ، ارتقا سایت

بسیاری از واژه ها در زبان انگلیسی مترادف های زیادی در زبان فارسی دارند. SEO سر واژه های عبارت Search Engine Optimization می باشد. پس تفاوت خاصی بین بهینه سازی ، ارتقا ، توسعه و... نمی باشد و مفهوم همان سئو است. البته اگر یک انگلیسی زبان واژه ی سئو را بشنود مطمئنا معنای آن را نمی فهمد زیرا تلفظ صحیح این کلمه اس ای او می باشد.

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

سئو سایت

سئو، پیشنهادی حرفه ای برای تبلیغات پربازده

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

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

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

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

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

دوشنبه, 10 خرداد 1395 ساعت 09:33

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

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

 

چند نکته پیش از طراحی سایت

1.    مخاطبان

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

2.    هدف محتوا

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

3.    مشخص کردن مقدار هزینه برای سرمایه گذاری

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

4.    مشخص کردن نیاز های خود

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

5.    تعادل در محتوا

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

6.    اطمینان از امنیت وب سایت

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

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

دوشنبه, 10 خرداد 1395 ساعت 09:32

ویدئو مارکتینگ

ویدئو مارکتینگ : امروزه بازاریابی به وسیله ی ویدئو جزء تازه ترین روش ها برای جذب توجه بازدید کنندگان و برند سازی در دنیای مجازی می باشد. در این مقاله قصد داریم کمی بیشتر در مورد ویدئو مارکتینگ و مزیت های آن صحبت کنیم.

 

ویدئو مارکتینگ

با ما همراه باشید.

چرا ویدئو مارکتینگ ؟

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

مزیت های ویدئو مارکتینگ

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

طبق آمار ها از 600 سیستم بازاریابی های موفق در سال 2013 ، 93 درصد آن ها از ویدئو مارکتینگ بهره می بردند.

ارائه محتوای بیشتر در کم ترین زمان با ویدئو مارکتینگ

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

تثبت موقعیت برند با ویدئو مارکتینگ

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

فروش بهتر با ویدئو مارکتینگ

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

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

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

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

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

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

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

این قواعد شامل مورد زیر می باشند:

تولید یک کلمه ی کلیدی در ویدئو مارکتینگ

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

استفاده از متن به همراه ویدئو در ویدئو مارکتینگ

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

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

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

ارائه ی فید بک و ارسال نظر در ویدئو مارکتینگ

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

استفاده از تصویر Thumbnail مناسب در ویدئو مارکتینگ

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

استفاده از RSS در ویدئو مارکتینگ

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

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

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

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

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

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

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

ابتدا در فایل HTML یک پاراگراف ایجاد کرده و متن مورد نظر خود را در آن قرار می دهیم .

حال با استفاده از دو تگ span  تودرتو قسمت متن تولتیپ و توضیحات را با دو کلاس tooltip  و tooltip-text مشخص می کنیم. با استفاده از این خاصیت می توانیم به هر قسمت از متن ویژگی های خاصی را اعمال کنیم .

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

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

نشانگر مأوس بر روی متن موردنظر باید دارای خاصیت pointer باشد .

کدهای CSS  در طراحی سایت زیر را برای کلاس  فرزند tooltip-text به صورت زیر می نویسیم :

سایز فونت تولتیپ را کمی کوچکتر از متن اصلی در نظر می گیریم . و شکل مأوس را به صورت پیش فرض قرار می دهیم همچنین موقعیت و سایز آن را متناسب با صفحه و چیدمان عناصر تنظیم می کنیم .
در این کلاس باید خاصیت display را برابر none  قرار دهیم . چرا که ما نمی خواهیم متن تولتیپ در حالت پیش فرض نمایش داده شود . و درون متن اصلی ما قرار داشته باشد .
و نهایتا به خاصیت hover کلاس والد کد زیر را اضافه می کنیم :
 
زمانی که مأوس روی متن ( tooltip)  می رود ، متن توضیحات (tooltip-text ) نمایش داده خواهد شد .

نتیجه در مرورگر به صورت زیر خواهد بود :


 

ایجاد تولتیپ با استفاده از css3
نکته :
بهتر است تولتیپ کمی بالاتر یا پایین تر از خط اصلی نمایش داده شود . بنابراین خاصیت position  کلاس والد را برابر relative و کلاس فرزند را برابر absolute   قرار می دهیم . در غیر اینصورت تولتیپ در همان خط ظاهر خواهد شد و محل مابقی عناصر را تغییر خواهد داد  و به صورت زیر نمایش داده خواهد شد .
 

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

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

دوشنبه, 10 خرداد 1395 ساعت 09:20

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

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

1-گسترش الگوهای رابط کاربری در روند طراحی سایت جدید

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

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

•    منو برگر : هرچند برخی انتقادها در استفاده از این الگو وجود دارد ، هیچ شکی وجود ندارد که استفاده گسترده از آن باعث تشخیص  راحت تر عملکرد برای کاربران شده است .
•    ثبت نام : این الگو برای ثبت نام در سایت بکار می ورد . ممکن است یک فرم را پر کنید  یا یک دکمه را برای اجازه استفاده از یک حساب اجتماعی برای sign up کلیلک کنید .
ویزاردهای فرم چند مرحله ای فیلدهای موردنظر را چک می کنند ، اصظکاک را کاهش می دهند و کاربران را برای ادامه فرایند ثبت نام تشویق می کنند .
•    Long scroll : در حال حاضر قرار دادن همه عناصر مهم در بالا یک روش متدوال است . علاوه بر این تقریبا همه به لطف دستگاههای تلفن همراه به long scroll عادت کرده اند . این تکنینک بخصوص برای سایت هایی که می خواهند از طریق داستان سرایی به فریب کاربران اقدام کنند مناسب است . شما هنوز هم می توانید سایت های چند صفحه ای با شکستن اسکرول در بخش های مشخص ، طراحی کنید .
•    Card layout : طرح بندی کارت  . پیشگام بوسیله pinterest .
(ما در حال حاضر شاهد یک معماری جدید وب جدا از صفحه و مقصد و متمرکز روی تجربیات کاملا شخصی هستیم . محتوا به اجزا منحصر به فرد  شکسته می شود  و نهایتا این اجزا با هم تجمیع می شوند . که این موضوع نتیجه ظهور فن آوری های تلفن همراه ، میلیاردها صفحه نمایش در اندازه و شکل های مختلف و دسترسی بی سابقه به داده ها و منابع از طریق API و SDK ها است .
این امر موجب حرکت حرکت وب از صفحات پر از محتوا و لینک شده به هم ، به سمت قطعات مجزا که با هم در داخل یک تجربه تجمیع شده اند ، شده است .

این تجمیع بر مبنای موارد زیر انجام می گیرد :

  1. مصرف شخصی محتوا و علایق و ترجیحات و رفتار اشخاص
  2. محل و محیط اطراف کاربر
  3. علایق و ترجیحات و رفتارهای دوستانشان
  4. با هدف تبلیغات اکو سیستم

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

•    Hero image

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


2- استفاده از انیمیشن های قوی در روند طراحی سایت

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

انیمیشن می تواند در دو گروه گنجانده شود :

•    Large scale animation : این گروه به عنوان ابزار تعاملی اولیه استفاده می شود . و اثر بیشتری بر روی کاربر دارد و شامل اثراتی از جمله اسکرول parallax  (کلمه پارالکس (Parallax) به معنی اختلاف منظر یا دید هست و براساس تعریف به جابجایی آشکار بین دو نقطه یا جابجایی یک شیء بین دو نقطه غیر واقع بر یک خط راست گفته می‌شود. در طراحی وب به معنای تکنیک‌های پیمایش در صفحه برای عمق بخشی به سایت تلقی می‌شود. در ترندها و سبک های طراحی وب درواقع به سبکی که در آن با اسکرول کردن یا حرکت دادن نشانگر موس اتفاقات خاصی مثل تکان خوردن اشیاء ، تغییر زاویه دید ، حرکت اشیاء یا پس زمینه در خلاف یا موافق اسکرول با سرعت های مختلف یا افکت های این چنینی رخ میدهد، گفته می شود  )و اطلاعیه های pop-up است .

•    small scale animation : این بخش شامل spinners ، ابزار hover و loading bar ها هستند که نیازی به ورودی توسط کاربر ندارند .

هفت مورد از معروفترین تکنیک های انیمیشن :

•    loading animation : برای سرگرم کردن کاربران در مواقعی که مدت طولانی باید منتظر بمانند کاربرد دارد و عدم استفاده از آن ، انتظار را برای کاربر خسته کننده می کند .
loading animation  ها برای طراحی فلت  ، minimalism (ساده گرایی ) ، portfolios (نمونه کار ) و سایت های تک صفحه ای استفاده می شود . آنها را ساده نگه دارید و از اضافه کردن صدا به آنها اجتناب کنید . آنها در هر صورت باید با شخصی سازی سایت شما و پالت رنگ سایتتان تطابق داشته باشد .

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

•    Hover animation : اثرات Hover احساس بصری بیشتری به یک سایت در زمانی که کاربران موس را روی محتوا می برند ، ایجاد می کند .
•    گالری و اسلایدشو ها : گالری و اسلاید شو ها یکی از راههای تأثیرگذار برای نمایش چندین عکس بدون سربار اضافی برای کاربران است . این ابزارها برای سایت  های عکاسی ، نمایش محصولات  و portfolios ها عالی هستند .

•    انیمیشن های حرکتی : چشم های ما بطور طبیعی به سمت حرکت کشیده می شوند . از اینرو این ابزار برای جلب توجه کاربر بسیار مناسب است . motion همچنین می تواند با سلسه مراتب بصری و همچنین اضافه کردن جذابیت به فرم ها ، CTA  ها و منوها  کمک کند .

•    Scrolling : پیمایش صاف مبتنی بر انیمیشن است و کنترل بیشتری به کاربر برای چگونگی سرعت نمایش آنها می دهد .

•    Background animation/video  : یک پس زمینه متحرک ساده می تواند قابلیت دیده شدن را به سایت اضافه کند visibility . اما آنها باید در حد اعتدال استفاده شوند در غیر این صورت برای کاربر مزاحمت ایجاد می کند .

3- فعل و انفعالات کوچک در روند طراحی سایت

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

•    ارتباط با یک وضعیت خاص و یا گرفتن فیدبک
•    دیدن نتیجه یک اقدام خاص
•    کمک کردن به کاربر برای کنترل موضوعی خاص

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

4- Material Design  : یک جایگزین قوی تر برای طراحی فلت

ماه ژوئن سال ۲۰۱۴ گوگل یک استایل جدید برای طراحی سایت با نام Material Dedign را ارائه کرد که با استفاده از سایه ها، مبانی حرکت اجسام، عمق رنگ ها و… سبب می شد تا طراحی بیش از پیش در نظر کاربر واقعی به نظر برسد.
پیش از این اکثر پروژه های Material design محدود به طراحی اپلیکیشن ها بود . تا اینکه گوگل در جولای نسخه ای از آن را که بیشتر برای  وب سایت مناسب بود را ارائه کرد .
Material Design Lite برای تولید  UI و UX عالی در همه دستگاهها در نظر گرفته شده بود .
Material Design تحت هیچ فریم ورک خاصی کار نمی کند بنابراین طراح می تواند از ابزار گستره و متفاوت برای ایجاد وب سایت استفاده کند . در ضمن این روش از نظر کدنویسی هم سبک است .

5- طراحی واکنش گرا

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

 

طراحی سایت ریسپانسو

 

•    در زمان استفاده از  جاوا اسکریپت و css برای لود عکس ها ، از تگ display:none استفاده نکنید . چرا که در این حالت عکس همچنان روی دستگاه دانلود می شود و بار غیر ضروری را به صفحه تحمیل می کند .
•    از عکس های واکنش گرا که با استفاده از درصد تعریف شده اند استفاده کنید .
•    از بارگذاری های شرطی برای جاوا اسکریپت استفاده کنید زیرا بسیاری از کامپوننت های جاوا اسکریپت دستگاههای دسک تاپ  در دستگاههای کوچکتر استفاده نمی شوند . به اسکریپت های شخص ثالث  دقت کنید  چرا که آنها برای اشتراک گذاری اجتماعی استفاده می شوند و اغلب روی کارایی اثر منفی می گذارند .
•    استفاده از  RESS     ( Responsive and server side )
•    درخواست تست عملکرد به منظور اندازه گیری بهینگی هر سایت .

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

6- وجود طراحی سایت مسطح تا چندسال آینده

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

چند نکته در طراحی سایت مسطح :

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

توصیه های دیگر در روند طراحی سایت :

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

 

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

دوشنبه, 10 خرداد 1395 ساعت 09:10

پیش بینی روند طراحی وب در سال 2017

پیش بینی روند طراحی وب  در سال 2017 :  روند طراحی سایت به سرعت در حال تغییر است . وب سایت های امروزی به دنبال روش های متفاوتی حتی نسبت به یک سال پیش هستند .
به عنوان یک طراح وب ، دانستن روش های امروزی و روش های در پیش رو مفید خواهد بود . چرا که می تواند به شما در باقی ماندن در رقابت و تأمین نیازهای مشتریان کمک کند . بخاطر داشته باشید که " روند"  لزوما معنای "جدید" نمی دهد .
بسیاری از روندهای طراحی جدید از سلیقه و ترجیحات کاربران و طراحان در طراحی و کارایی می آیند . چه چیزی این تغییرات در تکنولوژی را ممکن می سازد؟
تکنولوژی یک نیروی محرک عظیم است و همیشه به حرکت رو به جلوی طراحی کمک می کند .

 

 

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

 


برای کمک به درک جایگاهی که امروز داریم ، اجازه دهید نگاهی به جایی که بوده ایم بیندازیم .

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

روند طراحی وب سایت در سال 2015 با اعمال بسیاری از اصلاحات ، روی روش های موجود در سال 2014 ایجاد شد  .

در سال های اخیر روش هایی وجود داشته از جمله:

  1. طراحی Minimal
  2. طراحی فلت
  3. اسلایدر ویدئو
  4. پس زمینه های ویدئویی
  5. انیمیشن CSS اسکرول طولانی
  6. تصاویر بسیار قوی
  7. منو های همبرگری
  8. واکنش گرایی
  9. نسخه های تلفن همراه
  10. پاپ آپ های عضویت در خبرنامه
  11. چارچوب Front-end

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

طراحی وب سایت در سال 2016

روش های طراحی وب 2016 احتمالا می تواند در دو حرف خلاصه شود : U و X . و شاید یک کلمه دیگر : mobile . این روند بهترین روش ها را برای UX و پلت فرم موبایل دنبال می کند .  UX و موبایل  در چند سال گذشته بیشتر در دید بودند . ولی امروزه آنها در تمرکز اصلی طراحان وب سایت با یک رابط کاربر منظم هستند .
امسال ما پالایش و استاندارسازی بیشتری بر روی روش های موجود خواهیم دید. خواهیم دید که مفاهیم از فقط ایده آل به سمت استاندارها پیش می روند . از یک قاعده جدید به یک روش معمول .

Material Design

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

در مقایسه با طراحی فلت 

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

تایپوگرافی در طراحی سایت

افزایش کیفیت و طراحی واکنش گرا (طراحی سایت ریسپانسیو) باعث بهبود تایپوگرافی شده است . به همین دلیل تایپوگرافی یکی از روش های طراحی وب شده است که ما باید آن را مدنظر قرار دهیم .
تایپوگرافی می تواند دارای رنگ و برجسته باشد . می تواند یک بیانیه یا اعلامیه را ایجاد کند . دو روشی که من با تایپوگرافی دیده ام استفاده از serifs و  hand-writing بوده است . که هرکدام کاربرد خاص خود را دارند .
Serifs به بهبود خوانایی کمک می کند . آنها قبلا به دلیل صفحه نمایش با وضوح پایین تر و اندازه صفحه کوچکتر حذف شده بودند .
وضوح صفحه نمایش و سایز صفحه نمایش بزرگتر شده است . همچنین طراحی layout  خلوت تر است و فضای بیشتری برای فونت های زیبا وجود دارد . انتظار می رود طراحان در آینده  بیشتر از serifs در محتوای خود استفاده کنند .
Hand-writing شخصی تر است . اگر به درستی استفاده شود زیباست و حس تاثیرگذاری بیشتری به سایت می دهد . درست مثل serifs مشکل نگه داشتن سبک خوانا  و قابل خواندن بر روی صفحه نمایش های کوچک است . Hand-writing بیشتر در لوگوها عنوان پست ها ، هدر ، منوها ، کارت های ویزیت  و غیره استفاده می شود .
چیزی که باید مدنظر قرار بگیرد این است که کاربران بیشتری مصرف کنندگان محتوا روی دستگاههای موبایل هستند . متاسفانه دستگاههای موبایل پایینی مانند Fire HD 10  وضوح تصویر پایینی دارند .
این موضوع روی صفحه نمایش های بزرگتر به دلیل داشتن تراکم پیکسل کمتر با همان وضوح بیشتر قابل توجه است . یک راه حل نمایش تایپوگرافی بر مبنای وضوح صفحه نمایش است . به این معنی که روی دستگاههای موبایل از صفحه نمایش با وضوح بالا تا صفحه نمایش با وضوح پایین تر فونتی را که برای آن وضوح مناسب تر است را نمایش دهند .  البته سرعت سرور و زمان بارگذاری باید در نظر گرفته شود .  

Mbile UX  :

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

Mobile layout

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

تصاویر بیشتر ، متن کمتر :

مصرف کنندگان تمایل بیشتری به دیدن عکس و ویدئو دارند و کمتر تمایل به دیدن متن دارند  . این امر یک تعادل بین SEO  و UX ایجاد کرده است . موتورهای جستجو متن را ترجیح می دهند . این می تواند باعث انتقال محتوای متنی غنی به زیر صفحات و محتوای عکسی غنی به صفحه اصلی شود . اگر در صفحه اصلی نیاز به متن دارید سعی کنید آن را تحت یک تصویر قرار دهید . هدف در درجه اول کاربران و در درجه دوم موتورهای جستجو هستند .
مرورگر ها در ارائه تصاویر سریع تر می شوند . این بدان معناست که عکس ها می توانند بزرگتر با وضوح بالاتری نسبت به قبل باشند . انتظار می رود در آینده تاکید بیشتری روی عکس  با کیفیت بالاتر و آثار هنری ایجاد شود .

کارت ها  جایگزین کاشی :

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

داستان گویی پویا در طراحی سایت:

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

تمرکز بیشتر روی کامنت های اجتماعی

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

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

ابزار طراحی سایت :

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

نمونه هایی از این ابزارها که انتظار می رود در ساال 2017 متدوال شوند عبارتند از :

•    Adobe Project Comet

برنامه  Adobe Project Comet امسال عرضه می شود . این نرم افزار یک اپلیکیشن طراحی پلت فرم UX از آغاز تا پایان است . این برنامه ابزارهایی برای wireframing ، طراحی بصری ، طراحی تعاملی ، نمونه سازی و ... دارد . شما می توانید آن را روی هر دستگاهی پیش نمایش کنید . این برنامه با فتوشاپ و IIIustrator کار میکند و می تواند از طریق پلاگین های جامع ساخته شده ، توسعه داده شود .

•    Sketch

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

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

سه شنبه, 07 ارديبهشت 1395 ساعت 16:12

طراحی سایت (نیوسک)

طراحی سایت