رفتن به محتوای اصلی
نکات و ایده هایی برای حرکت از دنیای طراحی گرافیک به دنیای طراحی وب

نکات و ایده هایی برای حرکت از دنیای طراحی گرافیک به دنیای طراحی وب

Post Series: Ultimate Blog Post Series
  • 1.نکات و ایده هایی برای حرکت از دنیای طراحی گرافیک به دنیای طراحی وب

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

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

 

ما با چه مشکلی روبرو هستیم؟

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

 

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

” طراحی صفحات با استفاده از زبان های HTML و CSS، تمرکز بر رنگ ها، رابط کاربری (ui) و روش استفاده از عناصر گرافیکی در صفحه با در نظر گرفتن سهولت استفاده از وب سایت توسط دسته بندی کردن بخشهای مختلف صفحه وب است.”

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

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

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

1- تجربه خوب در یکی از ابزارهای طراحی مانند فتوشاپ.
2- در مورد قابلیت استفاده و بهترین راه های دسترسی به رابط کاربری (ui) که مرور سایت را برای کاربر آسان می کند مطالعه کنید.
3- انتخاب راه حل درست برای طراحی مسائل بر اساس یک اصل، راه حل خاصی را انتخاب نکنید زیرا از نظر بصری زیباتر است. راه حلی را انتخاب کنید که از نظر بصری خوب و در سهولت استفاده عالی باشد.
4- اصول توسعه رابط های کاربری (HTML، CSS) برای تبدیل طرح های خود به صفحات تعاملی (در آینده) را بدانید.

مطمئن شوید که کمربندهای ایمنی خود را ببندید، اکنون در حال برداشتن قدم هستیم. 🙂

در طراحی هر سایتی چه نکاتی را باید در نظر گرفت؟

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

2- تجزیه و تحلیل: تمام اطلاعاتی که در اختیار دارید را تجزیه و تحلیل کنید و آن ها را به هم پیوند دهید تا تصور اولیه ای از سایت و عناصر آن به دست آورید.

3- طرح بندی سایت را روی کاغذ بکشید: طرح صفحه اصلی را روی کاغذ و قلم بکشید، تمام ایده هایی که به ذهنتان می رسد را حتی اگر غیرمنطقی یا تخیلی باشند بکشید، این به استخراج ایده هایی کمک می کند که به خلاقیت کمک می کند. راه حل، در این مرحله محدودیتی را پیش روی خود قرار ندهید.

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

4- Make Styileles: طرحی است که شامل یک مدل کامل منعطف برای سایت از نظر پالت رنگ، اندازه فونت و عناصر مورد استفاده در صفحه وب سایت است و هدف توسعه سیستم طراحی به جای کار بر روی چندین صفحه با ثابت است.

 

مراحل طراحی استایل ها:

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

موارد مثال: دکمه ها، پاراگراف محتوا، عنوان بزرگ، عنوان کوچک، رنگبندی.

Repetition: همین روند را تکرار کنید و بیش از یک گزینه برای Style ایجاد کنید، در انتها باید یک مورد خاص را انتخاب کنید و سایت را روی آن بسازید.

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

 

5- شروع به طراحی با استفاده از ابزارهایی مانند  Photoshop، Illustrator، Figma، Sketch:  یکی از رایج ترین سوالاتی که از کسانی که می خواهند سفر طراحی وب خود را شروع کنند، می پرسم این است که “عرض و ارتفاع فایل چقدر خواهد بود؟” یک سوال منطقی و مهم، ارتفاع چیزی ثابت نیست زیرا به محتوای صفحه بستگی دارد. مواردی که در طراحی هر صفحه باید به آنها توجه داشته باشید عبارتند از:

5-1- باید یک Grid وجود داشته باشد که سایت روی آن ساخته شده باشد.

نکات و ایده هایی برای حرکت از دنیای طراحی گرافیک به دنیای طراحی وب

در تصویر بالا، اگر متوجه شدید که 12 ستون وجود دارد، هر کارت کوچیک 4 ستون و هر کارت بزرگ دارای 6 ستون است و همه فاصله ها نیز مشخص میباشد. استفاده از Grid کار را برای توسعه دهنده آسان تر می کند و می داند که چگونه به هر کدام عرض بدهد و تناسبات هر بخش نیز رعایت میشود.

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

توجه: برخی از توسعه دهندگان ممکن است برای تبدیل طرح شما به کد html , css به شما بگویند “نه، پیاده سازی این طرح امکان پذیر نیست” این پاسخ به این دلیل که احساس تنبلی می کنند و نمی خواهند آن را اجرا کنند نیست، اما شما بهتر است طرح گرافیکی وب سایتی که طراحی کردید را به بیش از یک توسعه دهنده که به آن اعتماد دارید نشان دهید تا نظر خود را بگوید، درضمن افزونه‌ای به نام GuideGuide برای فتوشاپ وجود دارد که به شما کمک می‌کند تا یک شبکه گرید برای طراحی خود  ایجاد کنید و بر اساس آن طراحی را شروع کنید، همچنین در صورت تمایل میتوانید یک قالب با یک شبکه آماده همیشه داشته باشید.

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

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

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

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

خروجی عناصر گرافیکی برای برنامه نویس

توسعه دهنده ممکن است نیاز به استفاده از تصاویر یا عناصر گرافیکی خاصی از طرح داشته باشد، آنها را در صورت نیاز به او تحویل دهد (مثلاً یک تصویر ترنسپرنت با فرمت png یا عکسی با فرمت JPG).

برای آیکون‌ها، برای دستگاه‌هایی که از نمایشگرهای رتینا پشتیبانی می‌کنند باید با وضوح بالا استخراج شوند تا بر روی آن‌ها تار به نظر نرسند. یا می توانید از فونت آیکون استفاده کنید یا از نمادهای SVG (مخفف Scalable Vector Graphics) استفاده کنید که با کیفیت بالا، مهم نیست که چقدر بزرگ یا کوچک باشند زیرا مانند Vector در Illustrator ظاهر می شوند.

طراحی برای صفحه نمایش معمولی و رتینا

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

فایل ها را به توسعه دهنده وب تحویل دهید

هنگام تحویل دادن فایل‌ها به توسعه‌دهنده مطمئن شوید که لایه‌های هر صفحه بر اساس گروه مرتب شده‌اند و لایه‌ها یک نام منطقی دارند و نه فقط نام‌های تصادفی مانند Layer22,Layer2_copy.

استفاده از الگوهای طراحی رابط کاربری

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

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

Sneakpeekit قالب های کاغذی با اندازه های مختلف را ارائه می دهد که می توانید آنها را دانلود و به عنوان نوت بوک چاپ کنید و طرح وب سایت یا اپ را روی آن اجرا کنید (رایگان است).

Moqups : به شما امکان ایجاد وایرفریم (رایگان) را می دهد.

UXPin : یک سایت شبیه به moqups. (مجانی نیست).

می‌توانید با استفاده از نرم‌افزار طراحی مانند Illustrator، Moqups و UXPin را جایگزین کنید.

مشاهده طرح به صورت تعاملی:

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

یکی دیگر از ویژگی های خاص Invision این است که می توانید فایل PSD را آپلود کنید و سپس تنظیماتی را از فتوشاپ انجام دهید تا تمام صفحه های لینک شده به این فایل به روز شوند. مانند اصلاح هدر در طراحی ها، Invision نیز تمام صفحات را اصلاح می کند. این ایده شبیه به Master Page در InDesign است.

آیکنها:

Flaticon: سایتی که حاوی کتابخانه عظیمی از آیکون های رایگان است که می توانید آنها را انتخاب کرده و با فونت آیکون جمع آوری کنید تا در یک پروژه خاص استفاده شود.

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

Icomoon : نکته خوب در مورد این سایت این است که می توانید آیکون ها را با فرمت SVG آپلود کنید و سپس به شما این امکان را می دهید که آنها را در یک فونت گروه بندی کنید و به راحتی می توانید آیکون ها و فونت ها را نامگذاری کنید.

تسلط بر HTML و CSS (آینده)

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

HTML: مخفف Hyper Text Markup Language، زبانی برای ساختاربندی صفحات وب.

CSS: این یک زبان برای دادن استایل و زیبایی به کدهای html  میباشد که به ما این امکان را می دهد که به عناصر HTML سبک های خاصی بدهیم تا ظاهر آنها را تغییر دهیم.

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

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

 

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

«محتوا مقدم بر طراحی است. طراحی در غیاب محتوا طراحی نیست، فقط دکوراسیون است.

امیر فراهانی

طراح وب و گرافیست

دیدگاهتان را بنویسید

برگشت به بالا