طراحی های خلاقانه رابط کاربری وب سایت (HTML, CSS, jQuery)

در این ویدئو، پروژه های انجام شده در دوره معرفی می شوند.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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