تبدیل شدن به یک طراح وب - Become a Web Designer

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

درک اساسی از اصول طراحی خوب (مانند کنتراست، وحدت و تعادل) پایه و اساس ایجاد وب سایت های زیبا است. در این دوره، سو جنکینز زیبایی شناسی طراحی را به زبان ساده توضیح می دهد و نشان می دهد که چگونه می توان اصول و عناصر طراحی را به روش های خاصی که وب سایت شما را بهبود می بخشد ترکیب کرد. نحوه تنظیم رنگهای مجاور برای افزودن کنتراست، ایجاد عمق با بافت، ترکیب حرکت، و استفاده از اشکال، الگوها و حاشیه های تکراری برای یکپارچه سازی طرح خود را بیاموزید. سپس دریابید که چگونه این اصول در روندهای صنعت اجرا می شود - و چگونه فناوری هایی مانند رسانه های اجتماعی و ویدئوهای وب بر طراحی تأثیر می گذارد. Sue همچنین نقش طراح را در فرایند و مفاهیم کلیدی مورد استفاده در هر گردش کاری، از جمله طراحی پاسخگو، دسترسی و اصالت، بررسی می کند. در طول راه، Sue چالش هایی را برای آزمایش دانش شما و تفکر عمیق تر در مورد زیبایی طراحی وب ارائه می دهد. اهداف یادگیری درک زیبایی شناسی انتخاب رنگ های هماهنگ ساختار چیدمان شما از فضا برای سازماندهی طراحی خود استفاده کنید ارتباط با فونت مناسب تراز کردن اشیا برای دستیابی به تعادل افزودن حرکت با پیمایش و انیمیشن دستیابی به تناسب با مقیاس بندی اشیاء و متن ایجاد CSS برای دستگاه های مختلف

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

هنگامی که روندها و اصطلاحات را حذف کردید، طراحی وب تنها یک چیز است و تنها یک چیز است: رساندن پیام خود به مخاطبان آنلاین. این دوره یک نمای 10000 فوتی از فرایند طراحی وب ارائه می دهد تا به شما اطمینان دهد که هرگز از دید کاربران خود چشم پوشی نمی کنید. Morten Rand-Hendriksen شما را از مشورت و کشف اولیه از طریق استراتژی محتوا و ملاحظات UX، به توسعه، ایجاد محتوا، طراحی، آزمایش و راه اندازی می برد. در پایان، بازیکنان و مراحل مختلف و چگونگی تناسب آنها با یکدیگر در رویکرد طراحی وب متمرکز بر ارتباط معنادار و تجربه کاربری عالی را درک خواهید کرد. اهداف یادگیری درک آنچه کاربران شما به آن اهمیت می دهند ایجاد پرسونای کاربر ایجاد سلسله مراتب اولویت بندی محتوا آزمایش فریم های سیمی و الگوهای تعامل ایجاد فرایند ساخت سه مسیر شامل اصول دسترسی استفاده از بلوک های محتوا آزمایش و بازنگری در طراحی وب سایت شما بهینه سازی برای رسانه های اجتماعی و SEO راه اندازی طراحی وب سایت شما دریافت بازخورد از کاربران

Hypertext Markup Language (HTML) پایه و اساس توسعه وب سایت و برنامه های وب است. این به شما امکا، HTML ارائه می دهد ، بسازید. مربی Jen Simmons همه مفاهیم اساسی را که برای استفاده متفکرانه از HTML نیاز دارید برجسته می کند. او بر نشانه گذاری معنایی متمرکز است: محتوا را به عنوان آنچه که هست ، برچسب گذاری کند و نه فقط برای قالب بندی ، سازگاری یا راحتی. این برای کسانی که وب را به طور متفاوتی مصرف می کنند تأثیر گسترده ای دارد. این تضمین می کند که وقتی صفحه خوان یا سیستمی (مانند موتور جستجو) یک صفحه را مصرف می کند ، دقیقاً می داند که چه چیزی حاوی آن است و چگونه این اطلاعات را دسته بندی می کند. موضوعات مورد بحث عبارتند از: - نحو اصلی عناصر HTML - قالب بندی محتوا - نمایش تصاویر - ایجاد پیوندها - صفات HTML جهانی - ناوبری ساختمان - محتوای ساختار - فرم های ساختاری - ایجاد جدول

Cascading Style Sheets (CSS) یک زبان صفحه است که به شما امکان می دهد ظاهر صفحات وب خود را کنترل کنید. در این دوره عملی، کریستینا تروونگ مفاهیمی را که پایه و اساس CSS را تشکیل می دهد، نشان می دهد و آنچه را که باید برای تغییر CSS موجود و نوشتن خود بدانید باید بدانید، توضیح می دهد. کریستینا توضیح می دهد که چگونه می توان رنگ ها و سایر عناصر طراحی را اضافه کرد تا صفحات وب شما فراتر از متن سیاه در زمینه سفید باشد. او نحوه استفاده از انتخاب کننده ها، نحوه تعریف فاصله بین اندازه و اندازه عناصر صفحه و نحوه سبک بندی متن و مدیریت طرح بندی های اساسی با Flexbox و Grid را نشان می دهد. او همچنین کار با انتخاب کننده های پیشرفته، ایجاد طرح بندی سیال و تعیین زمان استفاده از ویژگی های شناور و موقعیت را پوشش می دهد. به علاوه، در پایان دوره، با یک پروژه واقعی - یک صفحه رزومه آنلاین - کنار می روید. اهداف یادگیری نوشتن انتخاب کننده های اصلی تنظیم خواص آبشار و وراثت تنظیم خانواده فونت، اندازه فونت، رنگ متن و موارد دیگر کار با مدل جعبه استفاده از شبکه و Flexbox با استفاده از خواص float و position کار با انتخاب کننده های پیشرفته ایجاد چیدمان های روان

Adobe Illustrator یک ابزار کلیدی برای ایجاد محتوا و دارایی های وب است. با استفاده از طرح بندی قوی و ابزارهای مدیریت رنگ در Illustrator به همراه قابلیت استفاده از دارایی های بردار، طراحان می توانند دارایی های وب پر جنب و جوش ایجاد کنند. در این دوره، امیلی کی ویژگی ها و گردش کار کلیدی را که طراحان وب باید بدانند را برای شروع سریع و کارکردن تجزیه می کند. امیلی موضوعاتی مانند طراحی واکنش گرا، استفاده از کتابخانه برای مدیریت دارایی و نحوه استفاده از سبک ها و نمادهای گرافیکی و تایپوگرافی به شما این امکان را می دهد تا عناصر را در سطح جهان ساده و کنترل کنید. او همچنین مراحل توسعه-از جمله نحوه ایجاد نقشه های سایت، وایر فریم، moodboard و comps-را بررسی می کند و نحوه ایجاد و صادرات گرافیک وب و فایل های SVG بهینه برای گرافیک های مقیاس پذیر و مستقل از وضوح در مرورگر را توضیح می دهد. اهداف یادگیری سفارشی سازی فضای کاری وب استفاده از صفحات هنری برای ایجاد فایل های چند اندازه به راحتی ارائه تجربیات وب پاسخگو با استفاده از Illustrator ایجاد و استفاده از سبک های کاراکتر و پاراگراف کار با نمادها رنگ آمیزی آثار هنری منتخب ایجاد نقشه سایت ایجاد تابلوهای moodboards ایجاد وایرفریم ایجاد کامپوننت های کامل صادر کردن نمادها برای صفحه نمایش استخراج سبک های CSS

کار در طراحی وب شامل ایجاد عناصر UI (رابط کاربری) است - آیکون‌ها، گرافیک‌ها، wireframes‌ها و mockupsها. ادوب فتوشاپ قابلیت‌های مورد نیاز برای انتقال راحت و آسان این عناصر طراحی را به سمت تولید فراهم می‌کند. در این دوره، یاد بگیرید که چگونه از فتوشاپ برای گردش کارهای طراحی وب مدرن استفاده کنید. به مربی Emily Kay بپیوندید زیرا او شما را از طریق یک پروژه طراحی وب واکنشگرا، از جمله راه اندازی، استفاده از الگوها، ساختن کامپوننت و خروجی برای وب راهنمایی می‌کند. او نحوه کار با artboards، کتابخانه‌ها و اشیا smart هوشمند را نشان می‌دهد. او روند ایجاد چندین محصول قابل تحویل را ارائه می‌دهد - wireframes‌ها، و mockupsها، صفحه‌های mood، راهنماهای سبک، عناصر ناوبری و موارد دیگر. اهداف یادگیری راه اندازی فضاهای کاری و تابلوهای هنری استفاده از کتابخانه ها نکات و ترفندهای طراحی پاسخگو تنظیم نقاط شکست ایجاد عناصر ناوبری ایجاد بافت و زمینه جاسازی یا پیوند دادن اشیاء هوشمند ساخت قالب های دلخواه ایجاد عناصر UI قابل استفاده مجدد ذخیره و خروجی برای وب استفاده از ژنراتور

با وجود همه نرم افزارهای طراحی وب، چرا باید در مرورگر طراحی کنید؟ ما در یک دنیای شجاعانه جدید با طراحی واکنش گرا زندگی می کنیم. وب سایت ها را می توان بر روی دستگاه های تلفن همراه، رایانه های لوحی، رایانه های رومیزی و حتی ساعت های هوشمند مچ دست خواند. اکثر ابزارهای طراحی وب ایستا چنین چیزی را در نظر نمی گیرند. مرورگر یک بوم بی پایان و انعطاف پذیر است. این یک مکان طبیعی برای کدگذاری است، و سطح طراحی پویا و بازخورد فوری به شما امکان می دهد طراحی وب را پاسخگو تر کنید. در این دوره، مورتن رند-هندریکسن رویکرد خود را در زمینه طراحی در مرورگر توضیح می دهد، که قبل از شروع برنامه نویسی بسیار خوب شروع می شود. او نحوه تعریف طرح بندی روی کاغذ و ایجاد "زبان" برای سایت را نشان می دهد، و سپس یک سند پایه با HTML5 ایجاد می کند. سپس از CSS برای راهنمایی ظاهر سایت و طرح بندی استفاده می کند، از پرس و جوهای رسانه ای و Flexbox برای افزودن رفتارهای پاسخگو استفاده می کند. در فصل 3، مورتن با استفاده از انتقال و تبدیل CSS، تعامل سایت را بهبود می بخشد. در نهایت، او نحوه استفاده از این تکنیک ها را برای ایجاد تم های وردپرس در مرورگر نشان می دهد. هر مرحله شامل استراتژی های طراحی، بهترین شیوه ها و نمونه های واقعی کد است که مرورگر وب را به ابزار طراحی جدید مورد علاقه شما تبدیل می کند. اهداف یادگیری از مرورگر به عنوان بوم طراحی استفاده کنید طرح بندی طرح با قلم و کاغذ مدولاریزه کردن طرح یک سند پایه با HTML5 ایجاد کنید با Flexbox طرح بندی پاسخگو ایجاد کنید استفاده از انتقال و تبدیل CSS ایجاد تم های وردپرس در مرورگر

تصاویر واکنش گرا تکامل بعدی در طراحی وب هستند. نحوه پیاده سازی آنها را امروز با این بهترین سناریوهای عملی برای پیاده سازی تصاویر پاسخگو در سایت های تولیدی بیاموزید. Morten Rand-Hendriksen توضیح می دهد که تصاویر واکنش گرا چیست و چگونه کار می کنند و چگونه می توان از polyfill Picturefill JavaScript برای کارکردن تصاویر پاسخگو در مرورگرهایی که هنوز آنها را پشتیبانی نمی کنند، استفاده کرد. سپس دو نوع اصلی از تصاویر پاسخگو (با استفاده از برچسب <img> با srcset و w و برچسب <picture> جدید) را کاوش کنید، و با نمونه های کد آماده تولید در پنجره تمرین کار کنید تا تجربه پیاده سازی عملی را بدست آورید. اهداف یادگیری نحوه پاسخگویی به تصاویر افزودن Picturefill به سایت شما واکنشگرا کردن تصاویر معمولی استفاده از & lt؛ picture & gt؛ عنصر شناسایی نقاط شکست و تغییرات طرح استفاده از & lt؛ picture & gt؛ عناصر مورد نیاز برای نوع پشتیبان تصویر

با نحوه ایجاد تایپوگرافی زیبا، کاربردی و مقیاس پذیری آسان در تبلت ها، تلفن ها و رایانه ها در همه نوع و اندازه آشنا شوید. طراح Val Head به شما نشان می دهد که چگونه فونت های وب با کیفیت را انتخاب کنید، مقیاس تایپوگرافی و ریتم را در طول طراحی خود بسازید و دسته فونت ضد گلوله بسازید. به علاوه، نحوه استفاده از پرس و جوهای رسانه ای و قوانین CSS را برای حفظ ظاهر عالی نوع خود در هر اندازه یاد بگیرید. این دوره مجموعه ای از بهترین شیوه ها و تکنیک ها است که به زودی بخشی ضروری از جعبه ابزار انواع حروفچین وب خواهد بود. اهداف یادگیری تصمیم گیری بین فونت های وب میزبانی شده و میزبانی شده اندازه نوع خود را با پیکسل، ems و rems تنظیم کنید اعمال و انتخاب مقیاس تایپوگرافی ایجاد پشته فونت حفظ طول خطوط استفاده از پرس و جوهای رسانه ای برای تعیین نقاط طبیعی تایپوگرافی ابزارهای کنترل نوع به صورت پویا با JavaScript و jQuery