قدم اجرایی اول تو #طراحی هر سایتی، طراحی رابط کاربری یا Ui (User Interface) برند مورد نظر هست، البته که با توجه به کاربرد سایت انواع مختلفی داره اما در ابتدایی ترین قدم و قبل از هر کاری و عمل و اجرایی باید به فکر موارد زیر بود :
۱.طراحی یا بازآرایی #لوگو
۲. انتخاب تونالیته رنگ برندینگ
۳.ادغام عناصر طراحی شده
۴.انتخاب scale برای #programming
۵.یک طرح کلی *
۱.طراحی یا بازآرایی لوگو
اگر لوگوی ساده یا ابتدایی دارید، میتونید اون و با موافقت کارفرما به روز کنید، بهتره به سمت وکتور و تهیه فایل #svg برید که سازگاری و انعطاف بیشتری تو HTML CSS دارن، همون تصاویر برداری ک در زوم و هر رزولوشنی پایدار هستند و حجم بسیار کمی برای لود دارن. با گرفتن خروجی های مختلف و اکسپورت در scale های متفاوت، مجموعه کاملی از یک لوگو رو تهیه کنید.
برای اینکار میتونید از نرم افزارای معروفی مثل #adobeillustrator استفاده کنید. هرچند فایل های JPG و PNG منسوخ نشدن ولی در بحث لوگو به دلیل حجم بالا، اینگونه فایل ها طرفدار خودش رو داره از دست میده.
۲.انتخاب تونالیته رنگ برندینگ
شاید بحث ساده ای باشه اما به شدت تاثیر گذار، البته که بحث #سلیقه هم هست و ازون مهمتر ممکنه خوده برند از قبل رنگی رو در نظر گرفته و باید اون رو در تمام عناصر رنگ آمیزی بخصوص در #css و #استایل دهی هامون مد نظر بگیریم.
۳.ادغام عناصر طراحی
حالا وقته اینه که لوگو، رنگ آرایی رو تو تمام تصاویر، جداول، و مستنداتی که از #پروژه داریم پیاده و در واقع شخصی سازی کنیم برای برند.
۴.انتخاب scale برای Programming
مهمترین بخش اینه که طرح ها و گرافیک های تولید شده رو با توجه به زبان های #فرانت مد نظر در قالب کد بیاریم و نمایش بدیم. #زبان های مختلفی که از مهترین اون ها میشه به #html #css #javascript #php اشاره کرد.
درواقع CORE و هسته ی اتصال محتویات با #برنامه_نویس ی شکل میگیره و هرچی اختصاصی تر و متفاوت تر از نگاه #الگوریتم ها هم قابل ارزش تر دیده میشه.
۵.یک طرح کلی
در نهایت یک طرح کلی قابل ارائه دارید. درواقع پروژه ای که فقط عکس نیست، #عملکرد کلیدها، اتصال #لینک های داخلی خارجی، فراخوانی ها، ترجمه #کد ها در کنار #گرافیک تولید شده معنی یک UI واقعی رو خواهد داد.
**درواقع Ui عکس درست کردن نیست، چنتا عکس و چنتا باکس و نوشته با یه بکراند، Ui تولید یک #رابط هست، جدا نشدنی با کدینگ و عملکرد قابل تاچ و #لندینگ واقعی.
*** اگر در رابطه با هر بخشش سوالی داشتید یا کمکی خواستید تو سایت یا پروژه های خودتون، میتونید رو کمک من حساب کنید.
هچنین میتونید از https://ehsanyousefian.com دیدن کنید و به نمونه طرح ها نگاهی بندازید.
#رابط_کاربری #احسان_یوسفیان #طراحی_لوگو #طراحی_سایت #سایت #وردپرس #همکاری #تیم
#ui #ux #frontend #frontenddeveloper #Ehsanyousefian #developer #wordpress
