طراحی سایت ui

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

از ui تا طراح محصول : سیر تکاملی ار تقاء یافتن از طراح 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 به طراح محصول ، نیازمند سپری کردن یک سری گام های منطقی در دنیای تکنولوژی های مدرن است . امروزه فراگرفتن دانش تکنولوژی از یادگیری استفاده از ابزار آن بسیار مهم تر و همچنین راحت تر است . تنها باید با هوشیاری و استفاده از دانش روز دنیای تکنولوژی ، سطح کیفیت کارهای خود را بالا برده و رضایت کاربران محصولات خود را جلب کرد .

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

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

طراحی سایت ux : نکاتی از تجربه کاربری (UX : User Experience) در طراحی سایت برای بهینه سازی مؤثر میزان کانورژن

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

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

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

بنابراین ، سوال اصلی همچنان باقیست : چگونه می توان یک تجربه کاربری ایده آل برای کاربران فراهم نمود ؟

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

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

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

 

طراحی سایت ux

 

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

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

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

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

این اتفاقات اصطلاحا ” اثر در معرض قرار گرفتن محض ” (mere-exposure effect) نامیده می شود . اساسا ما به چیزهایی تمایل داریم که برایمان آشنا هستند . از آنجایی که کمتر کسی وقتش را صرف یادگرفتن یک الگوی جدید واسط کاربری (UI) می کند ، بهتر است از الگویی برای طراحی front-end استفاده کنید که رایج تر است .

قاعده TL;DR

به این سوال پاسخ دهید : ” چند درصد از افراد به طور کامل و دقیق شرایط نصب و قوانین حریم خصوصی یک نرم افزار را پیش از نصب آن مطالعه می کنند ؟ ”

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

نکته آخر درباره تجربه کاربری و تأثیر آن بر بهینه سازی میزان کانورژن

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

ترفندهای طراحی سایت

چند مهارت غیر فنی که برای انجام کار طراحی وب ضروری است

چند مهارت غیر فنی که برای انجام کار طراحی وب ضروری است :یک طراح وب حرفه ای شدن مستلزم تسلط بر چندین مهارت فنی از جمله HTML , CSS ، طراحی سایت ریسپانسیو (Responsive Web Design) ، سئو سایت (SearchEngineOptimization) ، … می باشد ؛ اما علاوه بر این مهارت های فنی ، برای کسب موفقیت در کار طراحی سایت ، نیاز به فراگرفتن چند مهارت غیر فنی نیز هستیم . در حالی که انبوهی از کتب و مقالات و دوره های آموزش طراحی وب که بر آموزش مهارت های فنی مورد نیاز کار طراحی سایت تمرکز دارند در دسترس علاقه مندان به این تخصص موجود است ، تنها منابع آموزشی اندکی هستند که ابعاد غیر فنی این کار را مطرح کرده و به آن دسته از مهارت های غیر فنی ضروری طراحی وب اشاره کرده اند . برای کسب اطلاعات بیشتر و آگاهی از مهارت های غیر فنی اما ضروری طراحی سایت ، تا پایان این مقاله همراه من باشید و سعی کنید برای تبدیل شدن به یک وب کار حرفه ای ، فراگرفتن و آموختن این مهارت ها را نیز به مجموعه دانش وب خود اضافه کنید .

 

ترفندهای طراحی سایت

 

ارائه خدمات با کیفیت و مناسب به مشتری و کارفرمای پروژه طراحی سایت

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

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

مدیریت زمان برای انجام و تحویل به موقع پروژه طراحی سایت

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

مهارت نویسندگی و به اشتراک گذاری دانش و تبادل نظر در جامعه طراحی وب سایت

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

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

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

کلام آخر …

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

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

چگونه برای طراحی سایت ریسپانسیو کارفرما را متقاعد کنیم ؟

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

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

 

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

 

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

تعداد کاربران وب با دستگاه های تلفن همراه روز به روز در حال افزایش است . در حقیقت آمارها نشان می دهند که امروزه بیش از ۵۰% ترافیک فضای وب متشکل از کاربران دستگاه های موبایل است . اگر وب سایتی برای دستگاه های موبایل بهینه سازی نشده باشد (یعنی علاوه بر اینکه سایت به شکل Mobile Friendly طراحی شده است ، بهینه سازی سایت نیز برای آن باید صورت گرفته باشد تا از نظر عملکرد بر روی نمایشگرهای کوچک دچار ضعف و کندی نباشد) ، قطعا ریسک از دست دادن ترافیک بازدید کنندگان برای آن وب سایت وجود دارد .

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

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

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

موتورهای جست و جو به سایت های موبایل فرندلی (Mobile Friendly) رتبه و امتیاز بیشتری می دهند

واکنشگرا بودن وب سایت سئو سایت را تقویت می کند.

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

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

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

در نظر داشتن سرعت و عملکرد وب سایت در طراحی سایت ریسپانسیو

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

پیش بینی آینده فضای وب برای سرمایه گذاری بر طراحی وب سایت ریسپانسیو و موبایل فرندلی

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

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

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

خلق کردن تایپوگرافی وب زیبا در طراحی سایت : در دهه گذشته ، تایپوگرافی وب به سرعت تکامل یافته است . اینترنت اکسپلورر با استفاده از فرمت EOT از نسخه IE4 در سال ۱۹۹۷ به بعد (بله ، درست میبینید !) از انواع فونت های وب پشتیبانی می کند ؛ اما از همان گام های نخستین ، تایپوگرافی وب به سطحی از بلوغ رسیده که طراحان وب سایت را  در طراحی سایت قادر ساخته که بر ارتقاء زیبایی و کیفیت هر چه تمام تر آن تمرکز کنند و روز به روز این تایپوگرافی ها تکامل بیشتری یابند . در این مقاله قصد بررسی موضوع تایپوگرافی وب و انواع آن را داریم .

 

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

 

شرکت آدوب – Adobe – با ارائه محصول خود ، یعنی TypeKit Web Font Service در سپتامبر ۲۰۰۹ تحول چشمگیری در زمینه تایپوگرافی وب ایجاد کرد . سایر شرکت ها نیز در این راستا محصولاتی چون : Google Fonts شرکت گوگل در می ۲۰۱۰ ، Fontdeck شرکت Clearleft and OmniTI در ژوئن ۲۰۱۰ ، … ارائه نموده اند . در مدت زمان کوتاهی و با در دست داشتن این ابزار ارائه شده توسط شرکت های مختلف ، حالا طراحان سایت قادر هستند در طراحی سایت خود تایپوگرافی وب غنی و فوق العاده ای خلق کنند .

در ادامه ، یک دید کلی از اهمیت تایپوگرافی وب ماکرو و میکرو (macro- and microtypography) در اختیار شما قرار خواهم داد ؛ توجه ویژه به ترتیب کلی متون بر صفحات وب در زمانهای قبل ، تمرکز بر روی نمایش هر چه بهتر جزییات مانند لیگاچرها (ligatures) و فیگرها (figures) در حال حاضر . در راهنمای آنلاین تایپوگرافی وب (که می توانید آن را به طور کامل به همراه کدهای آن در سایت macromicrotypo.com مشاهده کنید) ، ما به واکاوی جزئی تر این موضوع و همچنین نگاهی بر زندگی کاری یکی از پیشگامان طراحی تایپوگرافی از بعد تایپوگرافیک ، جان بسکرویل (John Baskerville) ، خواهیم پرداخت .

تایپوگرافی وب در سطح ماکرو – MacroTypography

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

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

سبک تایپوگرافی صفحات وب با مخاطب حرف می زند

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

اینجاست که درک و فهم تاریخچه تایپوگرافیک به ما کمک می کند . مثلا فونت serif حالت سنتی دارد ؛ sans serif کمی امروزی تر است . اگر به تازگی با این موضوع آشنا شده اید ، گنجینه ای از کتب ارزشمندی برای افزایش اطلاعات در این زمینه وجود که برای شروع ما به شما این ها را توصیه می کنیم : Thinking with Type نوشته الن لوپتون ، The Elements of Typographic Style نوشته رابرت برینگهرست و Detail in Typography نوشته جاست هاچولی . همخوانی از بعد تایپوگرافیک طرح شما را در سطح ماکرو تشکیل می دهد .

بررسی مقیاس های تایپوگرافیک در تایپوگرافی طراحی سایت

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

برای ایجاد بهترین سبک نمایش محتوا برای مخاطب ، باید محتوا را به صورت مفهومی نشان گذاری کرد (توسط HTML) . معمولا محتوا دارای یک سلسله مراتب واضح با معنی است با تعدادی عنوان – <h1> , <h2> , <h3> , … – که نشانگر محتوای آن بخش از صفحه است . با توجه به مقیاسی که انتخاب کرده ایم ، می توانیم سلسله مراتب محتوا را ترتیب دهیم .

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

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

تایپوگرافی وب در سطح میکرو – MicroTypography

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

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

لیگاچرها – ligatures

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

فیگرها – figures

در تایپوگرافی ، ما دائما با فیگرها مواجه هستیم : شماره تلفن ها ، تاریخ تولد ها ، اطلاعات مالی ، آمارها ، عملیات ریاضی و جبری ، … . یک تایپوگرافی خوب طراحی شده ، هم شامل فیگرهای ” سبک قدیمی ” و هم فیگرهای ” خط کشی ” می باشد . فیگرهای خط کشی در اصل جهت استفاده برای پیوستگی با حروف بزرگ طراحی شده اند ؛ در حالی که فیگرهای سبک قدیمی (یا ” حروف کوچک “) برای ترکیب بهتر با تنظیمات متن که به اسندرها (ascenders) – ۶ ، ۸ – و دیسندرهای (descenders) – ۳ ، ۴ ، ۵ ، ۷ ، ۹ – آنها داده شده است ، طراحی شده است .

 

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

ایجاد tooltip با استفاده از CSS

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

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

 

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

۱٫    مخاطبان

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

۲٫    هدف محتوا

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

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

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

۴٫    مشخص کردن نیاز های خود

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

۵٫    تعادل در محتوا

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

۶٫    اطمینان از امنیت وب سایت

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

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

طراحی سایت واکنشگرا

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

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

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

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

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

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

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

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

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

•    Hero image

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

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

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

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

•    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 . اما آنها باید در حد اعتدال استفاده شوند در غیر این صورت برای کاربر مزاحمت ایجاد می کند .

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

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

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

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

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

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

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

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

 

طراحی سایت واکنشگرا

 

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

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

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

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

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

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

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

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

 

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

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

پیش بینی روند طراحی وب در سال ۲۰۱۷

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

 

 

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

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

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

روند طراحی وب سایت در سال ۲۰۱۵ با اعمال بسیاری از اصلاحات ، روی روش های موجود در سال ۲۰۱۴ ایجاد شد  .

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

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

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

طراحی وب سایت در سال ۲۰۱۶

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

Material Design

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

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

Material Design از طراحی فلت متمایز است . طراحی فلت ، طراحی بر اساس نمایش رابط کاربر و عناصر گرافیکی است . طراحی فلت همه چیزهای زرق و برق دار که باعث انحراف از موضوع  شده راحذف می کند و میزان اطلاعاتی است که خواننده مجبور است با آن مواجه شود را کاهش می دهد. این طراحی رنگ های solid لبه های تیز و خطوط نازک دارد .
طراحی تخت برای خواندن روی دستگاههای موبایل مناسب و آسان است و به خوبی کار می کند .  به سرعت بارگذاری می شود . مشکل  این است که این ظاهر ثانویه است که میزان رنگ ها یی که شما می توانید استفاده کنید را محدود می کند و گاهی بسیار عمومی و معمولی به نظر می آید .
طراحی تخت جایی نمی رود . این روش در واقع با Material Design سازگار شده و خاصیت واکنش گرایی و حداقل سازی را خواهد داشت . تمرکز روی خاموش کردن آنچه که نیاز نیست ، می باشد بطوری که آنها می تواند روی چیزهایی که نیاز است متمرکز شوند . این روش توازن کامل بین این دو را پیدا خواهد کرد .
Material Design بر مبنای ۳d است . این انتخاب بهتری برای کسانی است که برخی از طراحی های بصری شیک را می خواهند . 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 ایجاد کرده است . موتورهای جستجو متن را ترجیح می دهند . این می تواند باعث انتقال محتوای متنی غنی به زیر صفحات و محتوای عکسی غنی به صفحه اصلی شود . اگر در صفحه اصلی نیاز به متن دارید سعی کنید آن را تحت یک تصویر قرار دهید . هدف در درجه اول کاربران و در درجه دوم موتورهای جستجو هستند .
مرورگر ها در ارائه تصاویر سریع تر می شوند . این بدان معناست که عکس ها می توانند بزرگتر با وضوح بالاتری نسبت به قبل باشند . انتظار می رود در آینده تاکید بیشتری روی عکس  با کیفیت بالاتر و آثار هنری ایجاد شود .

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

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

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

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

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

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

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

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

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

نمونه هایی از این ابزارها که انتظار می رود در ساال ۲۰۱۷ متدوال شوند عبارتند از :

•    Adobe Project Comet

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

•    Sketch

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

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