طراحی وب ، توسعه وب ، UI و UX

طراحی وب ، توسعه وب ، UI و UX: چه تفاوتی وجود دارد و به کدام یک نیاز دارید؟

تفاوت بین طراحی وب و توسعه چیست؟ UI و UX چطور؟ این تقسیم بندی ها به چه معناست؟ چرا این همه کلمات اختصاری وجود دارد ؟؟ چقدر برای افراد فنی حائز اهمیت است !؟

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

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

طراحی وب – یک دسته چتر گسترده برای همه مواردی که به طراحی تصاویر و کاربرد یک وب سایت مربوط است تشریح داده می شود. هر دو طراحی UI و UX ، همراه با بسیاری از زمینه های دیگر ، در طراحی وب گنجانده شده اند.

توسعه وب – قسمت فنی ساخت وب سایت ، با تمرکز بر کد هست. توسعه وب بیشتر به “front-end” و “back-end” تقسیم می شود ، که در زیر توضیح داده شده است.

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

تجربه کاربر (UX) – یکی دیگر از تخصص های طراحی وب می باشد که این مورد مربوط به رفتار و احساس کاربر هنگام استفاده از سایت یا برنامه است. طراحی UX بسیاری از زمینه های دیگر را در بر می گیرد ، اما آنها را از دید کاربر بررسی میکند.

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

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

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

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

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

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

در بهترین حالت, شما برای هر کدام از این موارد نیاز به یک متخصص یا تیم تخصصی دارید که از همه جهات وبسایت شما را بررسی کنند. با این حال محدودیت های مالی ممکن است شما را مجبور کند که پروژه خود را به صورت برون سپاری(freelance) انجام دهید که در این موضوع هم مواردی را به شما خواهیم گفت.

گاهی اوقات شخصی را پیدا می کنید که ادعا می کند همه کارهای مورد نیاز شما در پروژه را انجام می دهد.

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

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

UI و UX هر دو تخصصی جداگانه هستند ولی اغلب این دو عنوان کنار یکدیگر استفاده می شود.

UX اغلب در حرفه های دیگر, حتی خارج از طراحی وب, مانند مدیریت محصول, به عنوان تخصصی جداگانه معرفی می شوند.

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

طراحی وب (WEB DESIGN):

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

زیر مجموعه های طراحی وب شامل UI و UX می باشد, اما اختصارات دیگری مانند IA (معماری اطلاعات, کار با نقشه برداری و ناوبری سایت) و CRO (بهینه سازی نرخ تبدیل, تنظیم دقیق طراحی سایت برای افزایش فروش, ثبت نام یا سایر موارد خاص) را شامل می شود. ده ها مورد از این زیرمجموعه ها وجود دارد که هر روز تلاش می شود که دسته های جدیدی توسط برنامه نویسان ایجاد گردد تا بازارهای رقابتی جدیدی جهت ایجاد مشاغل بهتر ایجاد شود.

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

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

همچنین درجه ای از دانش فنی در زمینه ی طراحی وب وجود دارد:

طراحان سایت باید تاکتیک های فروش دیجیتال, مانند نحوه قرار دادن دکمه “تماس برای اقدام (CALL TO ACTION) را برای گزارش گیری فروش و ثبت نام از طریق ایمیل, درک کنند. چیدمان سایت به شدت بر رفتار  کاربر تاثیر می گذارد, اما از آنجا که خود یک توانایی مهم محسوب می شود, نوع پیاده سازی آن در سایت های مختلف, متفاوت می باشد.

یک طراح وب توانمند می تواند به خوبی موارد مربوط به گرافیک, مانند رنگ و تایپوگرافی را همراه با نگرانی های دیجیتالی مانند انتخاب بهترین طراحی برای نمایشگرهای مختلف مانند موبایل و تبلت را برطرف کند.

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

توسعه وب (WEB DEVELOPMENT):

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

فرانت اند – FRONT END (طراحی توسط کاربر): روش نمایش کدها به کاربران در وبسایت یا اپلیکیشن در صفحات نمایشگر کار اصلی فرانت اند می باشد. طراحی فرانت به کدهای سایت شما قدرت نمایش می بخشد که توسط زبان های مختلف کدنویسی مانند HTML, CSS, JAVASCRIPT اجرایی می شوند. طبیعتا هر آنچه طراح گرافیست برنامه ریزی کرده است و یا در ذهن خود برنامه ریزی کرده است قابل پیاده سازی نیست, بنابراین طراح فرانت اند همیشه با طراح گرافیکی در ارتباط دائم است.

بک اند – BACK END (طرف سرور): توسعه دهنده ی بک اند با مدیریت منابع پشت صحنه, کدگذاری داده ها در پایگاه داده و نحوه تحویل داده ها را بهینه می کند. آنها از زبان هایی مانند Ruby, PHP, Java, Python, .NET استفاده می کنند.گاهی اوقات آنها یک یک گزینه هوشمند برای استارتاپ هایی هستند که توانایی پرداخت بیش از یک استخدام را ندارند, اما در حالت ایده آل, شما یک تیم کامل از توسعه دهندگان یا تخصص های مختلف دارید.

روند صحیح انجام پروژه:

در تمامی پروژه هایی که تخصص های نامبرده در آن ها استفاده شده است مانند وبسایت, اپلیکیشن, … در ابتدای پروژه می بایست مراحل زیر اجرا شوند تا افراد مجری پروژه بتوانند به خوبی تخصص خود را اجرا کنند:

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

2.تهیه طرح گرافیکی در قالب فایل های لایه باز مانند PSD یا Illustrator که بعد از بررسی فرانت اند و کارفرما قابل اجراست.

3.آماده سازی نسخه اولیه که می توان تمامی تست های کاربری و پنل مدیریت و … را از این نسخه گرفت.

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

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اطلاعات تماس

۰۹۳۵۹۷۳۱۴۶۷

۰۹۹۲۹۹۹۵۷۴۷

info@khalaty.ir

ehsankhalaty@gmail.com

لینک های مفید

بلاگ

خدمات

سفارش پروژه

نمونه کارها

Design by Ehsan Khalati