hossein
hossein
خواندن ۱۰ دقیقه·۲ سال پیش

4 اصلی طراحی گرافیکی وب سایت کدام اند؟ [ui/ux حرفه ای]

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

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

چهار اصل در طراحی وجود دارد:

  • تئوری رنگ
  • تصویرسازی
  • تایپوگرافی
  • ترکیب بندی

4 اصل طراحی گرافیک که باید بدانید

1. تئوری رنگ

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

قیمت طراحی سایت فروشگاه اینترنتی چقدر است؟

تئوری رنگ
تئوری رنگ

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

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

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

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

طراحی سایت برای کسب و کار + [10 نکته به درد بخور]

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

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

نارنجی، یکی دیگر از رنگ‌های گرم، سبک و سرگرم‌کننده در نظر گرفته می‌شود، بنابراین برای برندهای احساسی کمتر «شرکتی» مناسب است. سایه های تیره نارنجی با پاییز مرتبط است، که خود را به برندهای "خاکی" بیشتری می رساند.

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

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

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

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

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

سفارش طراحی سایت فروشگاهی با رعایت 10 نکته

2. تصویرسازی

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

تصویرسازی
تصویرسازی

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

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

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

طراحی سایت در تهران همراه با 6 نکته حیاتی

در اینجا راهنمای بهترین ابعاد تصویر برای اندازه های مختلف صفحه نمایش است:

  • تصویر بنر: 2000 پیکسل عرض و 800 پیکسل طول
  • لغزنده: 1920 پیکسل عرض و 890 پیکسل طول
  • نماد: عرض 300 پیکسل و طول 300 پیکسل
  • پست/رویداد: عرض ۴۲۵ پیکسل و طول ۲۲۰ پیکسل
  • نمونه کارها: 1920 پیکسل عرض و 768 پیکسل طول
یک بازاریاب دیجیتال در سطح جهانی شوید.

3. تایپوگرافی

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

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

تایپوگرافی
تایپوگرافی

شما همچنین با فونت های "Serif" و "Sans-serif" روبرو خواهید شد. "سریف" یک خط کوچک تزئینی است که به یک شخصیت اضافه می شود. رایج ترین فونت سریف Times Roman است. یک فونت رایج بدون سریف یا "sans serif" Helvetica است. فونت های Serif برای بهبود خوانایی متن در مواردی مانند وبلاگ ها، مقالات یا روزنامه ها استفاده می شود. سعی کنید برای هر خط بیش از 10 کلمه استفاده نکنید. برای سرفصل‌ها، از یک فونت سنگین وزن و sans-serif با اندازه بزرگ‌تر استفاده کنید. اطمینان حاصل کنید که تاکید مناسب - یا اندازه و "وزن" - بر اساس اولویت آن روی متن اعمال شده است.

طراحی سایت صنعتی [نکاتی فراتر از عکس و رنگ]

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

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

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

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

4. ترکیب

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

ترکیب
ترکیب

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

6 مرحله از مراحل طراحی سایت کدام اند؟

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

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

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

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

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

یک مثال عالی از "فضای فضای خالی" پلت فرم وبلاگ نویسی، Medium است. وب سایت مدیوم با بنرهای تبلیغاتی یا پاپ آپ های خسته کننده حواس کاربران خود را پرت نمی کند. در عوض، محتوای مناسب را در اولویت قرار می دهد و اطلاعاتی را نشان می دهد که خوانندگان واقعاً می خواهند ببینند. به جای نشان دادن تاریخ انتشار، در واقع مدت زمان خواندن را نشان می دهد - که بسیار هوشمندانه است!

منبع: digitalmarketinginstitute

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