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

15 مرحله برای واگذاری طراحی وب خود به یک برنامه نویس مانند یک حرفه ای

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

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

سفارش طراحی سایت خود را به  فریلنس پروژه بسپارید

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

نمای کلی پروژه تایپوگرافی – مقیاس بندی از دسکتاپ به موبایل با تمام ویژگی هایی مانند اندازه قلم، وزن فونت و فاصله حروف.

1 – تایپوگرافی را تعریف کنید

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

(به عنوان مثال) برای اینکه به راحتی بفهمیم که عنوان 1 در دسکتاپ 70 پیکسل و در تلفن همراه 32 پیکسل است.

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

2 – پوشه با فونت وحجم مناسب

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

طراحی لوگو با بهترین طراحان لوگو

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

در یک دنیای ایده آل، همه رنگ های پروژه نام خود را در سیستم طراحی و همچنین در نمونه های CSS یا Webflow دارند. جلسات بازخورد را بسیار ساده تر می کند – مانند: رنگ دکمه اصلی خود را از خاکستری 4 به Blurple 3 تغییر دهید.

3 – رنگ ها را تعریف کنید

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

4 – عرض وب سایت و سیستم شبکه خود را تعریف کنید

یک صفحه آسان با مثالی از شبکه خود تنظیم کنید، به طور ایده آل با یادداشت هایی در مورد پهنای محتوای اصلی بسته بندی کنید. 1100 پیکسل است یا 1280 پیکسل؟ و آیا یک لفاف یا زیرصفحه اصلی وجود دارد که یکی دیگر داشته باشد؟

5 – پاسخگو

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

5.2 – فاصله

شبکه خود را به خوبی تنظیم کنید و حاشیه های خود را در جای خود نگه دارید. به عبارت دیگر، با یک شبکه 4 پیکسلی یا فقط اضافه کردن 10 پیکسل به عنوان مثال – 80 پیکسل حاشیه بین بخش ها یا فاصله 16 پیکسلی بین موارد شبکه کار کنید!

دلیل: هیچ کس نمی خواهد مقادیر مختلف CSS را برای هر عنصر اضافه کند.

6 –موارد لازم را آماده کنید

فریلنس پروژه سایت فریلنسری کار آنلاین دورکاری

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

.

7 – حالت های شناور

تمام عناصر خود را که با ماوس کاربر تعامل دارند را روی یک تابلوی هنری جداگانه قرار دهید و همه حالت‌ها مانند شناور، کلیک، فشار دادن را آماده کنید. اگر کمی CSS می‌دانید، می‌توانید زمان انتقال را نیز مشخص کنید، مثلاً دکمه – رنگ bg را در 400 میلی‌ثانیه تغییر دهید.

8 – حالت های ورودی

آماده کنید که در هنگام تعامل با ورودی/تکستاریا چگونه باید باشد. 4 حالتی که باید در نظر داشته باشید – Hovered، Placeholder، Pressed و Focused.

9 — حالت های فرم (پیام های خطا/موفقیت)

حالت های فرم های خود را تعریف کنید. در Webflow شما 3 حالت را تعریف می کنید – حالت های پیش فرض، با موفقیت ارسال شده و حالت های خطا در ورودی ها. مایل بیشتر بروید و همچنین یک کپی ارائه کنید که روی آن پیام ها باشد؟

10 – پیمایش را باز کنید

حالت های ناوبری خود را طراحی کنید. به خصوص در نمای تلفن همراه، نشان دهید که چگونه می خواهید

و دکمه ثبت نام شما در نمای 414px – 320px نمایش داده شود. تعریف کنید که موارد باز شده کشویی چگونه به نظر می رسند و منوی باز شده در تلفن همراه چگونه به نظر می رسد.

11  حالت های تب/لغزنده 

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

12 – اشتراک گذاری تصاویر و عنوان و توضیحات برای هر صفحه فرعی

یک فاویکون (نماد در تب مرورگر) آماده کنید و پس از به اشتراک گذاری وب سایت خود در شبکه های اجتماعی، یک گرافیک زیبا برای وب سایت خود طراحی کنید. بنابراین پست اشتراک گذاری مانند سایت شما عالی به نظر می رسد! (اندازه 1200×627 پیکسل)

اگر در موقعیت مشتری هستید عنوان و توضیحات هر صفحه فرعی را در یک سند جداگانه ارائه دهید تا هر صفحه از نظر موتور جستجو منحصر به فرد باشد.

13 – 404 صفحه

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

14 – تگ های Alt برای تصاویر/پیوندها

با آگاهی از دسترسی، فوق العاده است اگر مشتری یک سند/صفحه گسترده از تگ alt یا توضیحات تصاویر -> ارائه دهد، به عنوان مثال، تصویر قهرمان: داشبورد مشتری که تجزیه و تحلیل آخرین هفته شما یا هر چیزی نزدیک به آن را نشان می دهد!

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

15 – منطق CMS را تعریف کنید

فقط جریان وب – اگر به عنوان مشتری از پلتفرمی که با آن کار می کنید آگاه هستید – منطق CMS و نوع آیتم را در هر یک از مجموعه های خود تعریف کنید. از همان ابتدا مرزهای خود را برای محتوا تعیین کنید (به هر حال برنامه نویسان شما در مقطعی این درخواست را خواهند داشت)

پایان

با این گفته – شما مجبور نیستید همه این کارها را انجام دهید، اما اگر می‌خواهید بهترین نتیجه انتقال به کد را تضمین کنید، باید بیشتر به نفع شما باشد. اگر قبلاً 10 امتیاز از این موارد را انجام می دهید – بسیار متشکرم! کار کردن با شما احتمالا لذت بخش است.

من تقریباً این را به عنوان راهنمایی برای همکاری‌های آینده‌ام نوشتم تا از همان ابتدا مقدمات ایجاد کنم. خوشحال می شوم که افراد بیشتری درباره این موضوع صحبت کنند!