نحوه یادگیری طراحی وب را بیاموزید و اصول اولیه UI ، UX ، HTML ، CSS و طراحی بصری را بیاموزید.
تبدیل شدن به یک طراحی سایت نباید سخت باشد. اگر می خواهید اصول اولیه را بدانید ، ما این راهنما را گردآوری کرده ایم که همه چیزهایی را که برای شروع باید بدانید را پوشش می دهد.
بخشی از هنر و بخشی علم ، طراحی وب در جنبه های خلاقانه و تحلیلی ذهن افراد تأثیر می گذارد.
طراحان وب آنچه مفهومی است را در نظر می گیرند و آن را به صورت تصویری ترجمه می کنند. تصاویر ، تایپوگرافی ، رنگها ، متن ، فضای منفی و ساختار در کنار هم قرار می گیرند و نه تنها یک تجربه کاربر بلکه مجرایی برای انتقال ایده ها را ارائه می دهند.
یک طراح وب خوب اهمیت هر قطعه از یک طرح را درک می کند. آنها در سطح دانه ای انتخاب می کنند و هر عنصر را طراحی می کنند ، در حالی که هرگز از چگونگی ترکیب عناصر و عملکرد آنها در تحقق اهداف بزرگتر چشم پوشی نمی کنند.
صرف نظر از تصاویر بصری طراحی وب ، بدون سازماندهی بی معنی است. منطق باید نظم و ترتیب ایده ها و تصاویری را در هر صفحه هدایت کند و همچنین نحوه سفر کاربران به آن را مشخص کند. یک طراح وب ماهر طرح هایی را ایجاد می کند که در حداقل تعداد کلیک ارائه می شود.
طراحی وب سایت را می توان به چندین زیرشاخه تقسیم کرد. برخی از طراحان حرفه خود را در زمینه هایی مانند UI ، UX ، SEO و سایر زمینه های تخصصی تخصص می دهند. با شروع سفر خود به عنوان یک طراح ، باید کمی در مورد همه این جنبه های مختلف طراحی وب بدانید.
شرکت طراحی سایت از قسمت پشتی پشتیبانی می شود
شما در حین یادگیری با اصطلاحات back end و front مواجه می شوید. اکثر مبتدیان این موارد را با هم مخلوط می کنند ، بنابراین مهم است که تفاوت آنها را بدانید.
قسمت پشتی همه چیزهایی است که در پشت صحنه نمایش یک وب سایت وجود دارد. وب سایت ها روی سرورها قرار دارند. هنگامی که یک کاربر درخواست می کند مانند پیمایش به بخش خاصی از وب سایت ، سرور این اطلاعات ورودی را می گیرد و به نوبه خود تمام HTML و سایر کد ها را خارج می کند تا در مرورگر کاربر به درستی نمایش داده شود. سرورها داده هایی را که یک وب سایت برای عملکرد لازم دارد ، میزبانی می کنند.
توسعه دهندگان وب که در توسعه پشتیبان تخصص دارند اغلب برنامه نویسان هستند که به زبان هایی مانند PHP کار می کنند ، ممکن است از چارچوب پایتون مانند Django استفاده کنند ، کد جاوا بنویسند ، پایگاه های داده SQL را مدیریت کنند یا از زبان ها یا چارچوب های دیگر برای اطمینان از سرورها ، برنامه ها ، و پایگاه های داده همه با هم کار می کنند.
برای تبدیل شدن به یک طراح وب ، نیازی نیست که در مورد آنچه در پشت سر اتفاق می افتد عمیق شوید ، اما حداقل باید هدف آن را درک کنید.
بدانید قسمت جلویی چیست
قسمت پشتی سمت سرور در نظر گرفته می شود در حالی که قسمت جلویی سمت سرویس گیرنده است. قسمت جلویی جایی است که HTML ، CSS ، جاوا اسکریپت و سایر کدها برای نمایش یک وب سایت با هم کار می کنند. این بخشی از طراحی وب است که افراد با آن درگیر می شوند.
همانطور که در حرفه خود پیشرفت می کنید ، ممکن است وارد حوزه های تخصصی تری برای توسعه وب شوید. ممکن است در نهایت با چارچوب هایی مانند React یا Bootstrap کار کنید یا با JavaScript یا jQuery عمیق تر شوید. اینها مناطق پیشرفته تری هستند که در ابتدا نباید خیلی نگران آنها باشید.
اگرچه بهترین طراحی وب در اجرا بی دردسر به نظر می رسد ، اما همه آنها بر اساس اصول راهنمای طراحی بصری است. اگرچه طراحان وب کمیابی وجود دارند که به طراحی بصری ذاتی توجه دارند ، اما برای اکثر ما این موضوعی است که باید به تنهایی یاد بگیریم.
نحوه عملکرد طراحی بصری را درک کنید. قوانین ترکیب بندی را بشناسید و نحوه ترکیب عناصر مانند شکل ، فضا ، رنگ و هندسه را درک کنید.
نقطه شروع عالی پست ما در مورد اصول طراحی بصری برای طراحان وب است. مطالعه مفاهیمی مانند تقویت ، ظهور و تغییر به شما امکان می دهد این اصول را در کار خود وارد کنید. یادگیری نحوه طراحی طراح وب نیز به معنای درک تاریخچه طراحی است. ما این آرشیو طراحی گرافیکی عمیق را گردآوری کرده ایم تا همه پیشرفت های مهم در طراحی را به شما نشان دهیم که ما را به جایی که امروز هستیم رسانده است.
1. مفاهیم کلیدی طراحی بصری را درک کنید
خط
هر حرف ، حاشیه و تقسیم در طرح بندی از خطوطی تشکیل شده است که ساختار بزرگتر آنها را تشکیل می دهند. یادگیری طراحی وب به معنای درک کاربرد خطوط در ایجاد نظم و تعادل در چیدمان است.
شکل ها
سه شکل اساسی در طراحی بصری مربع ، دایره و مثلث است. مربع ها و مستطیل ها برای بلوک های محتوا ، دایره ها برای دکمه ها و مثلث ها اغلب برای نمادهایی استفاده می شوند که یک پیام مهم یا فراخوان به عمل را همراهی می کنند. اشکال همچنین دارای احساسات احساسی هستند ، مربع هایی با قدرت مرتبط هستند ، دایره هایی با هماهنگی و راحتی ، و مثلث هایی با اهمیت و عمل.
بافت
بافت چیزی را در دنیای واقعی تکرار می کند. از طریق بافت ، ما تصور می کنیم که آیا چیزی خشن یا صاف است. بافت ها را می توان در سراسر طراحی وب مشاهده کرد. از زمینه های کاغذی تا طعم های رنگارنگ محو گاوس ، از انواع مختلف بافت ها که می توانند طرح های شما را جالب تر کنند و می توانند به آنها حس فیزیکی بدهند ، آگاه باشید.
رنگ
برای ایجاد طرح هایی که چشم را خسته نمی کند ، باید خود را در زمینه تئوری رنگ آموزش دهید. درک چرخه رنگ ، رنگ های مکمل ، رنگ های متضاد و احساساتی که رنگ های مختلف به آن گره خورده اند ، شما را به یک طراح وب بهتر تبدیل می کند.
شبکه ها
ریشه ها در اولین روزهای طراحی گرافیک ریشه دارند. آنها در نظم بخشیدن به تصاویر ، متون و سایر عناصر در طراحی وب بسیار خوب عمل می کنند. بیاموزید که چگونه ساختار طرح بندی وب خود را با استفاده از شبکه ها ایجاد کنید.
2. اصول اولیه HTML را بشناسید
زبان نشانه گذاری ابرمتن (HTML) دستورالعمل هایی برای نحوه نمایش محتوا ، تصاویر ، ناوبری و سایر عناصر وب سایت در مرورگر وب افراد ارائه می دهد. اگرچه نیازی به متخصص در HTML ندارید ، اما هنوز هم می توانید با نحوه کار آن آشنا شوید ، حتی اگر از یک پلت فرم طراحی بصری مانند Webflow استفاده می کنید.
تگ های HTML دستورالعمل هایی هستند که مرورگر برای ایجاد وب سایت از آنها استفاده می کند. عنوانها ، پاراگرافها ، پیوندها و تصاویر همه توسط این برچسبها کنترل می شوند. شما به ویژه می خواهید بدانید که برچسب های عنوان مانند H1 ، H2 و H3 برای سلسله مراتب محتوا چگونه استفاده می شوند. برچسب های هدر علاوه بر تأثیر بر ساختار طرح بندی ، در نحوه طبقه بندی خزنده های وب در طراحی و تأثیر آنها بر نحوه نمایش آنها در رتبه بندی جستجوی ارگانیک مهم است.
CSS (یا ترکیب ورق های سبک) یک ظاهر طراحی شده و دستورالعمل های اضافی در مورد نحوه ظاهر شدن یک عنصر HTML را ارائه می دهد. انجام کارهایی مانند استفاده از فونت ، افزودن پد ، تنظیم تراز ، انتخاب رنگ و حتی ایجاد شبکه ها همه از طریق CSS امکان پذیر است.
دانستن نحوه عملکرد CSS به شما این مهارت را می دهد که وب سایت هایی منحصر به فرد ایجاد کنید و قالب های موجود را سفارشی کنید. بیایید چند مفهوم کلیدی CSS را مرور کنیم.
کلاسهای CSS
کلاس CSS لیستی از ویژگی هایی است که در ایجاد یک عنصر جداگانه گرد هم می آیند. چیزی شبیه به متن اصلی می تواند فونت ، اندازه و رنگ را همه بخشی از یک کلاس CSS واحد داشته باشد.
کلاسهای ترکیبی CSS
یک کلاس ترکیبی بر اساس یک کلاس پایه موجود ساخته می شود. این ویژگی همه ویژگی ها مانند اندازه ، رنگ و تراز را که ممکن است قبلاً وجود داشته باشد به ارث می برد. سپس می توان ویژگی ها را تغییر داد. کلاسهای ترکیبی در وقت شما صرفه جویی می کند و به شما امکان می دهد تغییرات کلاس را تنظیم کنید که می توانید هرجا که نیاز دارید در طراحی وب اعمال کنید.
آگاهی از نحوه عملکرد CSS هنگام یادگیری طراحی وب ضروری است. همانطور که در بخش مربوط به HTML ذکر شد ، توصیه می کنیم برای مشاهده نحوه کار CSS به دانشگاه Webflow مراجعه کنید.
4. پایه های UX را بیاموزید
UX جادویی است که یک وب سایت را زنده می کند و آن را از چیدمان ثابت عناصر به چیزی تبدیل می کند که با احساسات شخصی که در آن حرکت می کند درگیر می شود.
رنگ بندی ، محتوا ، تایپوگرافی ، چیدمان و جلوه های بصری همه با هم جمع شده اند تا به مخاطبان شما خدمت کنند. طراحی تجربه کاربر درباره دقیق و برانگیختن احساسات است. این کار نه تنها سفری روان را به کسی ارائه می دهد بلکه تجربه ای است که او را با موجودیت یا مارک پشت طراحی وب مرتبط می کند.
در اینجا چند اصل UX وجود دارد که باید بدانید.
پرسونای کاربر
طراحی وب به معنای درک کاربران نهایی است. شما باید نحوه انجام تحقیقات کاربر و نحوه ایجاد پرسنال کاربر را بیاموزید. علاوه بر این ، باید بدانید که چگونه از این اطلاعات در ایجاد طرحی که برای نیازهای آنها بهینه شده است استفاده کنید.
ساختار اطلاعات
بدون سازماندهی واضح ، مردم دچار سردرگمی و جهش می شوند. معماری اطلاعات و نگاشت محتوا نقشه ای را برای نحوه عملکرد وب سایت و هر بخش در ارائه یک سفر واضح از مشتری ارائه می دهد.
جریان های کاربر
ممکن است هنگامی که به پروژه های طراحی گسترده تری می پردازید ، ایجاد جریان کاربر ایجاد شود ، اما اگر در مورد اینها فکر کنید و آنها را برای طرح های اولیه خود بسازید ، در آینده وضعیت بهتری خواهید داشت. جریان های کاربر نحوه حرکت افراد در یک طرح را بیان می کند. آنها به شما کمک می کنند تا مهمترین بخشها را اولویت بندی کرده و از دسترسی افراد به آنها اطمینان حاصل کنید.
وایر فریم ها
Wireframes نشان می دهد که در کدام صفحه صفحات وب عنوان ها ، متن ، تصاویر ، فرم ها و سایر عناصر قرار داده می شود. حتی اگر در حال طراحی یک وب سایت ساده یک صفحه ای هستید ، ترسیم یک قاب سیم به شما راهنمای محکمی برای کار می دهد. همانطور که به وب سایت های پیچیده تر می روید ، فریم های سیمی در ایجاد یک تجربه سازگار ، ساختار بندی طرح ها و از دست ندادن هر چیزی که نیاز به گنجاندن دارد ، ضروری هستند.
نمونه سازی
نمونه های اولیه می توانند سطوح مختلفی از وفاداری داشته باشند اما به عنوان نمایشی از یک طرح عملکردی عمل می کنند. تصاویر ، تعاملات ، محتوا و سایر عناصر مهم همه سر جای خود هستند و طرح دنیای واقعی را تکرار می کنند. نمونه های اولیه برای دریافت بازخورد و تنظیم دقیق طرح در طول فرآیند استفاده می شوند.
5. با UI آشنا شوید
رابط کاربری مکانیزمی است که قطعه ای از فناوری را به کار می اندازد. دستگیره در رابط کاربر است. کنترل صدا روی رادیوی خودروی شما که دیگر شما با آن درگیر نمی شود ، رابط کاربری است. و صفحه کلیدی که پین خود را در دستگاه خودپرداز وارد می کنید ، رابط کاربری است. همانطور که دکمه ها و مکانیزم های دیگر در دنیای واقعی به فرد اجازه می دهد با ماشین ها تعامل داشته باشد ، عناصر رابط کاربر در یک وب سایت به فرد اجازه می دهد تا اقدامات را به حرکت درآورد.
بیایید دو اصل کلیدی رابط کاربری را مرور کنیم: طراحی بصری و سادگی.
نحوه ایجاد رابط های بصری
تعامل و تعامل با یک وب سایت باید سازگار باشد و از الگوهای قابل تکرار پیروی کند. افرادی که بر روی یک وب سایت فرود می آیند باید فوراً سیستم هایی را که در حال حرکت در آن هستند ، درک کنند.
UI را ساده کنید
UI برای بهینه سازی قابلیت استفاده وجود دارد. این بدان معنی است که استفاده از کنترل ها آسان و همچنین در عملکرد آنها واضح است. این که آیا تعداد گزینه های ناوبری را به حداقل می رسانید ، فرآیند تسویه حساب را سریع می کنید یا سایر عناصر تعاملی را که دسترسی را افزایش می دهند ، ادغام می کنید ، درک UI به شما کمک می کند تا تجربه شخصی را در تعامل با یک وب سایت ساده کنید. طراحی سایت املاک
البته ، رابط کاربری یک موضوع گسترده است که نمی توان آن را تنها در چند پاراگراف ضبط کرد. پیشنهاد می کنیم پست وبلاگ "10 نکته ضروری در طراحی UI (رابط کاربری)" را به عنوان آغازگر رابط کاربری بررسی کنید.
مطالب مرتبط: UX در مقابل UI: تفاوت های کلیدی که هر طراح باید بداند
6. آشنایی با اصول ایجاد طرح بندی
چشمان ما به طور خودکار به الگوهای طراحی خاصی می چسبد و مسیری آسان را از طریق طراحی وب ایجاد می کند. ما به طور شهودی می دانیم کجا باید نگاه کنیم زیرا این الگوها را بارها و بارها هنگام استفاده از رسانه ها در طول زندگی خود دیده ایم. دانستن الگوهای طراحی به شما کمک می کند وب سایت هایی ایجاد کنید که جریان صافی در محتوا و تصاویر داشته باشند. دو الگوی معمول طرح بندی وب که باید در مورد آنها بدانید الگوهای Z و الگوهای F هستند.
الگوی Z
الگوی Z برای طرح بندی با صرفه اقتصادی کلمات و تصاویر و مقدار زیادی فضای منفی ، راهی کارآمد برای گشت و گذار در وب سایت است. هنگامی که شروع به توجه به مکان طراحی چشم خود می کنید ، بلافاصله تشخیص می دهید که الگوی Z در محل قرار دارد.
الگوی F
طرح های متن دار ، مانند یک نشریه آنلاین یا یک وبلاگ ، اغلب از الگوی F متمایز پیروی می کنند. در سمت چپ صفحه ، لیستی از مقالات یا پست ها را مشاهده می کنید و در قسمت اصلی صفحه ، ردیف هایی از اطلاعات مرتبط را مشاهده می کنید. این الگو به گونه ای بهینه شده است که همه اطلاعات مورد نیاز را در اختیار افراد قرار دهد ، حتی اگر آنها به سرعت به آن توجه کنند.
مطالب مرتبط: طرح صفحات وب: آناتومی وب سایت که هر طراح باید یاد بگیرد