یادگیری طراحی سایت

یادگیری طراحی سایت (در 9 مرحله)

نحوه یادگیری طراحی سایت را بیاموزید و اصول اولیه UI ، UX ، HTML ، CSS و طراحی بصری را بیاموزید.

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

طراحی وب سایت چیست؟

 

بخشی از هنر و بخشی علم ، طراحی وب در جنبه های خلاقانه و تحلیلی ذهن افراد تأثیر می گذارد.

طراحان وب آنچه مفهومی است را در نظر می گیرند و آن را به صورت تصویری ترجمه می کنند. تصاویر ، تایپوگرافی ، رنگها ، متن ،

فضای منفی و ساختار در کنار هم قرار می گیرند و نه تنها یک تجربه کاربر بلکه مجرایی برای انتقال ایده ها را ارائه می دهند.

یک طراح وب خوب اهمیت هر قطعه از یک طرح را درک می کند. آنها در سطح دانه ای انتخاب می کنند و هر عنصر را طراحی می کنند

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

صرف نظر از جلوه های بصری طراحی وب ، بدون سازماندهی بی معنی است. منطق باید نظم و ترتیب ایده ها و تصاویر را در هر صفحه

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

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

طراحی وب سایت از قسمت back end پشتیبانی می شود

در حین یادگیری شما با اصطلاحات back end و front مواجه خواهید شد. اکثر مبتدیان این موارد را با هم مخلوط می کنند ، بنابراین مهم است که تفاوت آنها را بدانید.

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

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

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

بدانید قسمت front چیست

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

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

طراحی بصری خوب را تشخیص دهید

 

اگرچه بهترین طراحی وب در اجرا بی دردسر به نظر می رسد ، اما همه آنها بر اساس اصول راهنمای طراحی بصری است. اگرچه طراحان وب کمیابی وجود دارند که به طراحی بصری ذاتی توجه دارند ، اما برای اکثر ما این موضوعی است که باید به تنهایی یاد بگیریم.

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

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

 یادگیری طراحی سایت (در 9 مرحله)

1. مفاهیم کلیدی طراحی بصری را بشناسید

Line

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

Shapes

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

Texture

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

Color

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

Grids

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

2. اصول اولیه HTML را بشناسید

زبان نشانه گذاری ابرمتن (HTML) دستورالعمل هایی برای نحوه نمایش محتوا ، تصاویر ، ناوبری و سایر عناصر وب سایت در مرورگر وب افراد ارائه می دهد. اگرچه نیازی به متخصص در HTML ندارید ، اما هنوز هم می توانید با نحوه کار آن آشنا شوید ، حتی اگر از یک پلت فرم طراحی بصری مانند Webflow استفاده می کنید.

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

 

 

3. CSS را بشناسید

 

CSS (یا ترکیب ورق های سبک) یک ظاهر طراحی شده و دستورالعمل های اضافی در مورد نحوه ظاهر شدن یک عنصر HTML را

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

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

و قالب های موجود را سفارشی کنید. بیایید چند مفهوم کلیدی CSS را مرور کنیم. کلاسهای CSS کلاس CSS لیستی

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

بخشی از یک کلاس CSS واحد داشته باشد. کلاسهای ترکیبی CSS یک کلاس ترکیبی بر اساس یک کلاس پایه موجود ساخته می شود.

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

4. پایه های UX را بیاموزید

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

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

در اینجا چند اصل UX وجود دارد که باید بدانید.

User personas

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

Information architecture

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

User flows

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

Wireframes

نشان می دهد که در کدام قسمت صفحات وب قرار است سرفصل ها ، متن ، تصاویر ،

فرم ها و سایر عناصر قرار داده شود.

حتی اگر در حال طراحی یک وب سایت ساده یک صفحه ای هستید ، ترسیم یک قاب سیم به شما راهنمای محکمی

برای کار می دهد.

همانطور که به وب سایت های پیچیده تری می روید ، فریم های سیمی در ایجاد یک تجربه ثابت ، ساختار بندی طرح ها

و از دست ندادن مواردی که باید در آن گنجانده شود ، ضروری هستند.

Prototyping

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

5. با UI آشنا شوید

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

بیایید دو اصل کلیدی رابط کاربری را مرور کنیم: طراحی بصری و سادگی.

نحوه ایجاد رابط های بصری

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

UI را ساده کنید

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

البته ، رابط کاربری یک موضوع گسترده است که نمی توان آن را تنها در چند پاراگراف توضیح داد.

6. آشنایی با اصول ایجاد طرح بندی

 

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

الگوی Z

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

الگوی F

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

7. با تایپوگرافی آشنا شوید

فونت ها می توانند لحن ها یا احساسات متفاوتی را منتقل کرده و همچنین بر خوانایی تأثیر بگذارند. اگر در مورد طراحی وب یاد می گیرید ، دانستن نحوه استفاده از تایپوگرافی ضروری است.

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

در اینجا سه ​​مفهوم تایپوگرافی اساسی وجود دارد که باید بدانید.

Serif

انواع حروف Serif دارای خطوط کوچک هستند که به عنوان Serif ها شناخته می شوند و به هر حرف لطف می کنند. این سبک تایپی را می توان در چاپ جستجو کرد.

Sans serif

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

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

8. دانش خود را عملی کنید و چیزی بسازید

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

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

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

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

9. راهنما بگیرید

مربیان ارزشمند هستند زیرا آنها در همان ابتدا بوده اند و تمایل دارند به شما در درسهایی که به سختی آموخته اند کمک کنند.

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

می دهید و آنچه نیاز به بهبود دارد ، هستند.

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

هیچ کدی ورود آسان به طراحی وب را ارائه نمی دهد

زمانی بود ، نه چندان دور ، زمانی که برای نوشتن دستی کد پشت یک طراحی وب ، باید درک عمیقی از HTML و CSS داشتید.

امروزه ، بدون ابزارهای کدی  ، می توان یک وب سایت را جمع آوری و در مدت زمان کوتاهی راه اندازی کرد.

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

البته ، ایجاد یک طراحی وب خوب بسیار مفید است. یادگیری اصول طراحی بصری ، اصول اولیه UI و UX و دانستن اینکه عملکرد

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

یادگیری طراحی سایت یادگیری طراحی سایت یادگیری طراحی سایتی ادگیری طراحی سایت

یادگیری طراحی سایت