مسیر طراحی رابط کاربری از صفرِ صفر

پس میخوای طراحی رابط کاربری رو اصولی یاد بگیری؟ جای کاملا درستی اومدی! توی این صفحه، مسیر پر پیچ و خم این حوزه رو برات هموار کردیم و بدون دغدغه کافیه که دنبالش کنی تا انشاءالله با تلاش و پشتکار، در انتهای مسیر به حدی برسی که بتونی یک Front-end Developer خوب بشی

طراحی رابط کاربری

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

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

  • 2
    سایت ها چطور متولد می شوند؟
    طراحی رابط کاربری

    سایت ها چطور متولد می شوند؟

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

  • 3
    آموزش تهیه هاست و ثبت دامنه و ورود به دنیای اینترنت از پایه
    طراحی رابط کاربری

    آموزش تهیه هاست و ثبت دامنه و ورود به دنیای اینترنت از پایه

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

  • 4
    آموزش کار با FTP
    طراحی رابط کاربری

    آموزش کار با FTP

    در این دوره اورژانسی، با مفهوم FTP آشنا می شیم و با استفاده از نرم افزار File Zilla اقدام به آپلود و دانلود فایل های وب سایت مون می کنیم و بدین ترتیب دیگه نیازی به کار با کنترل پنل هاست نخواهیم داشت و سرعت کار بالا خواهد رفت…

  • 5
    آموزش جامع HTML و CSS از صفرِ صفر و روان!
    طراحی رابط کاربری

    آموزش جامع HTML و CSS از صفرِ صفر و روان!

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

  • 6
    آموزش جامع HTML5 بسیار روان و کاربردی
    طراحی رابط کاربری

    آموزش جامع HTML5 بسیار روان و کاربردی

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

  • 7
    آموزش جامع CSS3
    طراحی رابط کاربری

    آموزش جامع CSS3

    در این دوره آموزشی 12 قسمتی ما وارد دنیای CSS3 خواهیم شد و در 12 قسمت مباحث CSS3 را بررسی میکنیم. مهم ترین ویژگی این دوره آموزشی کاربردی بودن آنن است ، بدین صورت که در پایان هر بخش یک پروژه کاربردی در مورد همان بحث خواهیم داشت. همچنین در بخش 10 یک اسلایدر 3D را با توجه به اندوخته هایی که طی 9 قسمت کسب کردیم ایجاد میکنیم. پس از پایان 12 قسمت نیز پروژه نهایی را پیاده سازی و طراحی میکنیم.

  • 8
    آموزش روش های فشرده سازی تصاویر
    طراحی رابط کاربری

    آموزش روش های فشرده سازی تصاویر

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

  • 9
    آموزش جامع طراحی سایت ریسپانسیو LandingPage
    طراحی رابط کاربری

    آموزش جامع طراحی سایت ریسپانسیو LandingPage

    در این دوره آموزشی یاد میگیریم که چطور یک وب سایت تک صفحه ای ریسپانسیو (Landing Page Responsive) طراحی کنیم. در این دوره آموزشی ما یک طرح تک صفجه ای شامل بخش خدمات – گالری – تماس با ما – مشتریان و … را طراحی میکنیم و همچنین از کتابخانه هایی همچون Colorbox , Carousel Slider , ResponsiveSlides , MsScrollbar , Font-Awesome , Wow Animate و … برای طراحی وب سایت Landing Page نیز استفاده خواهیم کرد.

  • 10
    کدنویسی سریع با Emmet
    طراحی رابط کاربری

    کدنویسی سریع با Emmet

    در زمینه برنامه نویسی و کار با کدها، ابزارهایی فراهم شده اند که می توانند به کار برنامه نویس سرعت و بخشیده و کار او را درباره کدهای معمول و عمومی کمتر کنند. Emmet یکی از ابزارهای پرکاربرد در زمینه طراحی وب سایت ها بشمار می رود که با فراهم نمودن یک زبان میانبر و در عین حال رعایت استانداردها برای نوشتن کدهای HTML, XML و CSS مورد استفاده قرار می گیرد.

  • 11
    آموزش جامع بوت استرپ 4 Bootstrap از صفر تا صد
    طراحی رابط کاربری

    آموزش جامع بوت استرپ 4 Bootstrap از صفر تا صد

    در این دوره آموزشی به مباحث فریم ورک بوت استرپ (‌Bootstrap) به طور کامل خواهیم پرداخت و بعد از بررسی تمام مباحث فریم ورک از جمله اسکریپت ها - المان ها (شامل جداول - فرم ها - تایپوگرافی - تولتیپ - لایت باکس - تب ها و ...) به طراحی دو تم Landing Page و ‌Magazine میپردازیم.

  • 12
    آموزش جامع فریم ورک UIKit از صفر
    طراحی رابط کاربری

    آموزش جامع فریم ورک UIKit از صفر

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

  • 13
    طراحی جدول ریسپانسیو
    طراحی رابط کاربری

    طراحی جدول ریسپانسیو

    یکی از بزرگترین مشکل هایی که پیرامون ریسپانسیو ساختن وب سایت وجود دارد , ساخت جدول ذر این نوع وب سایت ها میباشد . جداولی که دارای تعداد ستون های زیادی هستند , در موبایل به دلیل پهنای کم , بسیار جمع شده و به صورت ناخوانایی در می آیند . در این درس اورژانسی به طراحی یه جدول ریسپانسیو میپردازیم…;):)

  • 14
    فیلترگذاری صفحات Portfolio
    طراحی رابط کاربری

    فیلترگذاری صفحات Portfolio

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

  • 15
    آشنایی با EM در طراحی سایت | خداحافظی با Pixel سلام بر EM
    طراحی رابط کاربری

    آشنایی با EM در طراحی سایت | خداحافظی با Pixel سلام بر EM

    استفاده از مقیاس اندازه گیری پیکسل ۳ مشکل دارد که باعث شد طراحان وب به سراغ واحد های جدید تر یعنی EM و REM بروند. مشکل اول : تایپوگرافی مشکل دوم : اشکال در طراحی اجزای رابط کاربری مشکل سوم : زمان طراحی رسپانسیو را بالا می برد

  • 16
    آموزش طراحی انواع فرم های حرفه ای با HTML و CSS3
    طراحی رابط کاربری

    آموزش طراحی انواع فرم های حرفه ای با HTML و CSS3

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

  • 17
    آموزش شخصی سازی رابط کاربری
    طراحی رابط کاربری

    آموزش شخصی سازی رابط کاربری

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

  • 18
    آموزش طراحی صفحه 404 با CSS Animations
    طراحی رابط کاربری

    آموزش طراحی صفحه 404 با CSS Animations

    به دوره آموزشی ساخت صفحه 404 خوش آمدید ، به بهانه ساخت صفحه 404 می خوایم با ترفندهای CSS یا CSS Tricks آشنا بشیم. ما صفحه ای فانتزی با HTML،CSS و کمی jQuery پیاده خواهیم کرد. دمو زیر رو ببینید

  • 19
    آموزش حرفه ای Sass از مبتدی تا پیشرفته
    طراحی رابط کاربری

    آموزش حرفه ای Sass از مبتدی تا پیشرفته

    Sass مخفف Syntactically Awesome Style Sheets هست و پیش پردازنده CSS یا CSS Preprocessor Language به حساب میاد. Sass صرفا مربوط به زمان کدنویسی هست و وقتی کارمون تموم شد بهمون خروجی CSS میده لذا قرار نیست روی سرور آپلودش کنیم. روش کار به این صورت هست که Sass رو نصب می کنید و بعد به زبان اون کدنویسی می کنید و نهایتا کدهای CSS شسته رفته تحویل میگیرید! به همین راحتی!!! اولش ممکنه عجیب غریب باشه اما وقتی باهاش کار کنین، یکی از گم شده هاتون در حوزه تخصصی تون رو پیدا خواهید کرد و کلی باهاش دوست خواهید شد!

  • 20
    آموزش Developer Tools کروم
    طراحی رابط کاربری

    آموزش Developer Tools کروم

    این دوره بنا به درخواست یکی از دانشجویان عزیز وی لرن تهیه شده است و شامل موارد بسیار کاربردی و مهم از ابزارهای Devoloper tools مرورگر کروم می باشد . البته باید توجه داشته باشید ، مواردی که شما در این دوره می آموزید صرفا منحصر به کروم نمی باشد و بسیاری از این مباحث با بخش Inspect element مرورگر فایرفاکس نیز مشترک می باشد .

  • 21
    دوره آموزشی GRUNT
    طراحی رابط کاربری

    دوره آموزشی GRUNT

    برنامه نویسان وب علاقه دارند که تنها به کدنویسی بپردازند و کارهای جانبی اون مثل کامپایل ، Unit Test ، Linting و . . . را به عهده دیگری بسپارند . یکی از فریم ورک های بسیار جذاب JavaScript فریم ورک GRUNT میباشد که بسیاری از کارهای طراحی وب و برنامه نویسی را به صورت اتوماتیک انجام میدهد.

  • 22
    !CSSies!
    طراحی رابط کاربری

    !CSSies!

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