طراحی سایت

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

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

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

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

1- عدم استفاده از ریسپانسیو در طراحی سایت: عدم سازگاری با انواع دستگاه ها ( موبایل و تبلت و ... ) زیرا محتوی در سایر دستگاه ها به درستی نمایش داده نمی شود. وب سایت خود را حتما در موبایل و تبلت در اندازه های مختلف بررسی کنید و از سازگاری وب سایت خود با آنها مطمئن شوید.

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

3- استفاده از فونت های مختلف در طراحی سایت:وجود فونت هایی با سایزهای بسیار بزرگ و یا بسیار کوچک علاوه بر آسیبی که به ظاهر وب می زنند، باعث عدم نمایش صحیح متن در تلفن های همراه، تبلت و سایر وسایلی می شوند که صفحه نمایش های متفاوتی دارند. اگر می خواهید با استفاده از فونت های بزرگ توجه کاربران را به بخش هایی از مجتوی وب سایت خود که حائز اهمیت است جلب کنید بهتر است از تگ هایh1 و h2 استفاده کنید.

4- پخش موسیقی در بک گراند سایت : پخش مداوم موسیقی در پس زمینه وب سایت به آن صدمه می زند مگر آنکه سایت شما یک ایستگاه رادیویی یا سایت فروش موسیقی و لوازم جانبی آن باشد.

6- عدم برروز رسانی وب سایت : قدرت و اعتبار آن را از بین می برد. نداشتن یک سیستم مدیریت محتوی مناسب، بروز رسانی وب سایت را دشوار می کند. در حقیقت معماری و زیرساخت یک وب سایت به اندازه ظاهر آن در جذب و نگهداری بازدیدکنندگان از سایت موثر و کارآمد است و سایت های فاقد سیستم مدیریت محتوی به زودی فراموش می شوند.

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

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

در وبسایت وجود عکس های جذاب و البته کم حجم میتواند تاثیرات شگرفی برروی کاربران و درگیری آنها با وبسایت داشته باشند .

همه این‌ها به کدگذاری که هنگام ایجاد تصویر با یک فرمت خاص انجام شده، برمی‌گردد. JPEG به درد عکاسی می‌خورد (حرف P مخفف Photographic است) زیرا لبه‌های تیز را محو می‌کند و شیب‌های نرم را نگه می‌دارد. کدگذاری یک تصویر دارای بلوک‌های رنگی بزرگ و شارپ با استفاده از JPEG باعث از دست دادن وضوح و کدگذاری ناقص می‌شود.

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

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

به عنوان مثال، WebP در طراحی سایت

نسبت به گیف، PNG و JPEG در موارد مختلف نتیجه بسیار بهتری می‌دهد. برای آزمایش، تصویری که در بالا استفاده کردیم با کدگذاری WebP، 90.5 کیلوبایت حجم داشت که حدود 15 درصد کمتر از فرمت JPEG است. با این‌حال، شما فقط زمانی می‌توانید از این فرمت استفاده کنید که مرورگر موردنظرتان کروم، اپرا یا مرورگر اندورید باشد.

JPEG XR فرمت مخصوص مایکروسافت، JPEG eXtended Range، است که برپایه فرمت اصلی JPEG توسعه پیدا کرده و حتی مانند PNG و WebP قابلیت پشتیبانی از تصاویر ترنس‌پرنس (شفاف) را هم دارد.

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

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

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

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

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

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

۲) یک overlay مناسب روی ویدیو پیاده‌سازی کنید
ممکن است برای بالا بردن سرعت بارگذاری سایت خود از یک ویدیوی با کیفیت پایین استفاده کرده باشید. در اینصورت از یک overlay برای پنهان کردن کیفیت پایین آن استفاده نمایید.
برای اینکار باید یک div بعد از تعیین ویدیوی خود بیاورید یا اینکه از شبه کلاس ::after استفاده کنید. با استفاده از خاصیت pointer-events: none; اطمینان حاصل کنید که ویدیو با کلیک راست کاربر متوقف نمی‌شود. استفاده از یک Overlay مناسب باعث می‌شود تا کیفیت پایین ویدیو دیده نشود.

۳) طول ویدیو را محدود کنید
طول ویدیو را کم انتخاب کنید تا بدون توقف نمایش داده شود. البته طول ویدیو نباید به اندازه‌ای کم باشد که پشت سرهم نمایش داده شده و کاربر را اذیت کند.
بهتر است مدت زمان ویدیوی شما بین ۳۰ تا ۴۰ ثانیه باشد. سعی کنید سایز ویدیو نیز از ۲ مگابایت بیشتر نباشد. می‌توانید ویدیو های جالبی را از سایت html5backgroundvideo برای این منظور انتخاب کنید.

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

۵)متن با ویدیو هماهنگی داشته باشد
اگر قرار است روی ویدیوی پس زمینه متنی نمایش داده شود، باید قابل خواندن باشد. می‌توانید با استفاده از یک لایه‌ی overlay متن را متمایز کنید. یا اینکه رنگ متن را تغییر دهید تا قابل خواندن باشد. مطمئن شوید که متن و ویدیو خیلی با هم متضاد نباشد و چشم کاربر را اذیت نکند.


۶)ابعاد مناسبی را برای ویدیو انتخاب کنید
درCSS3 ویژگی به نام ظرفیت پس زمینه برای تصاویر مطرح می‌شود که برای ویدیو ها نیز صادق است. به این معنی که سایز یک تصویر یا ویدیوی پس‌زمینه باید به اندازه‌ای باشد که جایگاه خود را پر کند. خاصیت object-fit همین کار را برای شما انجام خواهد داد. با استفاده از این خاصیت می‌توانید مطمئن شوید که ابعاد ویدیو با ابعاد محلی که قرار است در آن قرار بگیرد، همخوانی دارد.

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

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

۹) یک دکمه مکث برای ویدیو در نظر بگیرید
ممکن است کاربر بخواهد ویدیوی در حال پخش را متوقف کند. برای پشتیبانی از این حالت می‌توانید با استفاده از جاوا اسکریپت یک دکمه‌ی مکث / نمایش را به ویدیوی خود اضافه کنید و محل این دکمه را بر اساس خواست خود تغییر دهید.

۱۰) ابتدای فیلم را آهسته انتخاب کنید
ویدیو باید به گونه‌ای باشد که حواس کاربر را پرت نکند. یک حرکت ناگهانی در ابتدای نمایش فیلم باعث می‌شود تا کاربر محتوای اصلی سایت را نبیند! برای جلوگیری از این مشکل می‌توانید ویدیویی انتخاب کنید که شروع آرامی داشته باشد یا اینکه از تکنیک محو شدن برای ابتدای فیلم استفاده کنید.

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

طراحی سایت، سئوو بهینه سازی سایت خود را با سارین وب تجربه کنید .

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

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

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

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

فضای کاری اشتراکی می‌تواند یک محل عالی برای تشکیل روابط جدید باشد.

تنظیم قرارداد
یکی از رایج ترین اشتباهاتی که برنامه نویسان فریلنسر انجام می‌دهند، در مورد هزینه‌ی انجام پروژه و زمان ارائه‌ی ان است. برای گذر از این مسائل باید موارد زیر را به خوبی رعایت کنید:
هزینه های خود را واقع بینانه تنظیم کنید.
هرگز کاری را بدون قرار داد قبول نکنید. از هزینه‌ای که قرار است برای انجام پروژه پرداخت شود، اطمینان حاصل کنید.
قبل از شروع کار بیعانه دریافت کنید. مبلغی مابین ۲۵٪ و ۵۰٪ هزینه‌ی نهایی برای این مرحله کافی است.