Fa Ar En
طراح رابط کاربری وب و موبایل UI Designer

جایگاه های شغلی گرین وب

طراح رابط کاربری وب و موبایل UI Designer

شرایط احراز شغلی:

  1. شرایط عمومی
  2. تجربه کار با داشتن نمونه کار آنلاین
  3. تسلط بر Photoshop CC
  4. تسلط بر اصول طراحی گرافیک در وب (F & Z Pattern)
  5. داشتن دیدگاه طراحی دیداری (Frontend Development)
  6. آشنایی با مباحث تجربه کاربری
  7. آشنایی با مفهوم رنگ ها و استفاده بهینه از آنها
  8. آشنایی حداقلی با شبکه های اجتماعی طراحی در وب
  9. آشنایی با وایرفریمینگ و اسکچینگ و پروتوتایپ زدن
  10. داشتن ذهن خلاق و علاقه به طراحی

button

شرایط ارتقای شغلی:

  1. آشنایی با inVision
  2. فتوشاپ و ایلوستریتور تخصصی
  3. Mockups
  4. اصول طراحی رابط کاربری
  5. آشنایی با کاربردپذیری
  6. دوره تجربه کاربری

سابقه مورد نیاز:

حداقل ۱۰ طرح رابط کاربری

طراحی دیداری (Frontend Development) چیست؟

طراحی سایت حرفه ای، استفاده از آخرین تکنولوژی ها و متدهای طراحی و برنامه نویسی در پیاده سازی یک سایت است. طراحی سایت حرفه ای متشکل از دو بخش اصلی دیداری و مدیریتی است (backend & frontend).

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

Frontend Development

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

  • طراحی بر اساس اصول روانشناسی رنگ
  • طراحی برای کلیه دستگاه های نمایشی (طراحی واکنش گرا)
  • طراحی با استفاده از آخرین متدهای طراحی روز
  • استفاده صحیح از گرافیک و تصویرسازی
  • استفاده مناسب از اینفوگرافی

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

گرافیک وب چیست؟

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

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

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

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

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

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

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

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

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

تجربه کاربری:

امروزه به جای تاکید بر روی واژه UI بر مفهوم UX تکیه می شود. مفهومی که اگر ازعلاقمندان حوزه‌ی وب باشید، حتما درباره‌ی تجربه‌ی کاربری (User Experience) و مفاهیم مرتبط با آن نظیر کاربردپذیری (Usability) صحبت‌های زیادی را شنیده و مطالب مختلفی را مطالعه نموده‌اید. مفهوم User Experience یا همان تجربه کاربری به بررسی یک روش منطقی برای یک ارائه عالی و تعامل با مشتریان می پردازد.به عبارتی هدف در تجربه کاربری پاسخ دادن به این پرسش است که : «آیا کاربر در فرآیند بهره مندی از خدمت و یا محصول ارائه شده، تجربه تا حد ممکن لذت بخشی داشته است؟»

ux

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

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

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

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

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

تعریف نهایی به نقل از ویکی پدیا:

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

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

وایرفرمینگ (Wireframing) چیست؟

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

wireframing

ارزش وایرفریم ها

وایرفریم‌های چندین هدف رو دنبال می کنند بوسیله کمک کردن به:

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

اسکچ (Sketch) چیست؟

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

sketch

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

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

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

پروتوتایپینگ (Prototyping) چیست؟

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

prototype

مزایای پروتوتایپ

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

Photoshop CC:

photoshop-cc-2015

ادوب فوتوشاپ (به انگلیسی: Photoshop، به معنی کارگاه عکس) یک پردازشگر گرافیکی است که بدست شرکت ادوبی گسترش یافته و برای ایجاد، ترکیب، ویرایش، بازسازی و یا دگرگونی عکس‌ها و نگاره‌ها بکار می‌رود. آخرین نسخه رسمی این نرم‌افزار نسخه چهاردهم آن است که با اسم ادوب فتوشاپ سی‌سی شناخته می‌شود. (سی‌اس مخفف عبارت Creative Suite است و به معنای برنامه خلاق است.)

منابع:

ویکی پدیا

پی دی کام دات آی آر

دبلیو۳دولوپرز دات آی آر

یوایکس تهران داتکام

ام توحیدفر دات آی آر

وب نشان داتکام

چرا کار در گرین وب؟

Why work at Greenweb

محیط کاری گرین وب

Greenweb Working Space

نیازهای شغلی گرین وب

برای آگاهی از شرایط کاری در هر یک از جایگاههای زیر، لطفا روی عنوان کلیک کنید