برنامه نویسی و وردپرس, طراحی سایت

راهنمای توسعه دهنده برای طراحی وب برای غیر طراحان

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

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

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

یک طراحی عالی لزوماً طرحی نیست که بیشترین رای مثبت Dribbble را داشته باشد. این همان چیزی است که در وهله اول متوجه آن نمی شوید. این یک توازن کامل از “مادبزرگ شما می تواند این کار را انجام دهد” و “وای، این لعنتی خوب است” است. طراحی می تواند مزیت رقابتی شما یا میخ در تابوت باشد.

بحث استعداد نیست
وقتی جوانتر بودم، Minecraft زیادی بازی می کردم. من تمام این ساختمان های شگفت انگیز را دیدم که مردم ساخته اند. اما وقتی چیزی درست می کردم شبیه جعبه می شد. زشت و بدون سبک. چطور می‌توانید در Minecraft چیز خوبی بسازید، درست است؟

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

طراحی یک مهارت است و مانند هر مهارت دیگری می توان آن را آموخت.

انتخاب ابزار مناسب برای کار

در برنامه نویسی، می توانید از Notepad استفاده کنید و برنامه ای بنویسید که به خوبی در یک IDE کامل نوشته شده باشد … اگرچه ممکن است انجام آن زندگی شما بسیار بد باشد و احتمالاً به طور قابل توجهی بیشتر طول می کشد. در دنیای طراحی وب، MS Paint نقش Notepad را بر عهده می‌گیرد و مانند Notepad، افراد کمی واقعاً طراحی با آن را انتخاب می‌کنند… امیدوارم.

محبوب ترین ابزار طراحی برای وب عبارتند از:

Sketch، تنها ابزار MacOS است که شبیه به React، به نظر می رسد در هر فهرست شغلی کدگذاری سختی دارد. 99 دلار در سال
Adobe XD، یک ابزار رایگان برای استفاده و چند پلتفرمی که نقش Vue را بر عهده می‌گیرد. انجمن کوچکتری دارد، اما شروع آن بسیار آسان است.
Adobe Photoshop، چاقوی سوئیسی برای هر کار طراحی شناخته شده توسط همه. این در جایگاه… حدس زدید، jQuery. 9.99 دلار در ماه
تقریباً هیچ تفاوتی وجود ندارد که از کد Sublime یا VS برای نوشتن برنامه ها استفاده کنید. یا اینکه آیا از React یا Vue برای قسمت جلویی استفاده می کنید. این فقط یک موضوع ترجیحی است. همین امر در مورد ابزارهای طراحی نیز صدق می کند، زیرا هر کدام مزایا و معایب خود را دارند.

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

طراحی سایت , طراحی پورتال در فریلنس پروژه

سفارش پروژه

تنظیم ذهنیت شما

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

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

یادگیری ابزار

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

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

ابزار مستطیل

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

ابزار متن (برچسب)

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

حالت اول یک محفظه متن تک خطی است که اندازه آن را بر اساس اندازه متن تنظیم می کند. شبیه به است با این استثنا که unle نمی پیچد

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

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

ابزار متن (بند)

حالت دوم یک محفظه متنی با اندازه خاص است که مانند

با عرض خاص یا

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

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

ابزار خط

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

نکات و تکنیک های طراحی
چیدمان

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

به عنوان مثال، زمانی که من اطلاعات پروژه را برای Sidemail طراحی می‌کردم، عناصر را در داخل کارت به طور مساوی توزیع کردم که باعث می‌شود کامل‌تر به نظر برسد و تمیزتر به نظر برسد.

مرتبط:آینده طراحی وب سایت در تاریخ معماری پنهان است

رنگ ها

برای کمک به شما برای یافتن رنگ مناسب برای پروژه بعدی خود، روانشناسی رنگ ها را در نظر داشته باشید (colorpsychology.org). یک ابزار مفید برای یافتن ترکیب رنگی عالی بر اساس رنگ اصلی، پالتون است.

برای ایجاد یک سلسله مراتب بصری از سایه های رنگ های اصلی و رنگ های متن استفاده کنید. هنگام استفاده از پس‌زمینه رنگی، از سایه‌های تیره‌تر یا روشن‌تر برای متن خود استفاده کنید.

تایپوگرافی

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

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

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

بعد از اینکه چیزی را که می خواهم بگویم مشخص می کنم، معمولاً به دنبال الهام گرفتن هستم. یک منبع عالی برای آن land-book.com است، فهرست وسیعی از صفحات فرود با ظاهری عالی که مردم می توانند به آن رأی دهند. یکی دیگر از صفحه‌های عالی با الهام از طراحی، interfaces.pro است که می‌توانید بر اساس دسته‌هایی مانند قیمت‌گذاری، 404 یا درباره ما فیلتر کنید. من فقط مرور می کنم تا زمانی که سایت های کافی را پیدا کنم که دوست دارم و با سبک مورد نظر من مطابقت دارد.

قسمت سخت این است که همه چیز را کنار هم بگذاریم. متأسفانه هیچ میانبری وجود ندارد. شما فقط باید زیاد تکرار کنید تا زمانی که به نتیجه ای که از آن راضی هستید برسید.

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

گرافیک

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

طراحی یک برنامه وب (یا داشبورد)

راهنمای توسعه دهنده برای طراحی وب

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

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

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

Fixed container

من Fixed container را ترجیح می دهم، زیرا بسیار راحت تر است

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

به عنوان مثال: توییتر، بافر، DigitalOcean، Netlify، GitHub

container fluid : یه کلاسی هستش که یک محتوا رو با عرض کامل براتون فراهم میکنه //full width//

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

مثال‌ها: Slack، Intercom، Hotjar، Google Sheets، Trello، Spotify

راهنمای توسعه دهنده برای طراحی وب

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

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

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

همچنین، شما اولین کسی خواهید بود که در مورد پست بعدی من مطلع می شوید که در آن من 69 روز پیشرفتی را که در Sidemail انجام داده ام به اشتراک می گذارم – یک پروژه SaaS که من روی آن کار می کنم. این شامل مواردی مانند تعداد مشترکین، بازدید از سایت، هزینه‌ها و پیش‌نویس‌های طراحی می‌شود. ناگفته نماند، اما من مطلقاً هیچ هرزنامه ای را تضمین نمی کنم. من حتی برای این مزخرفات وقت ندارم.