نکات گرافیکی طراحی سایت

زمان مطالعه 10 دقیقه

نکات مهم گرافیکی طراحی سایت

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

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

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

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

به همین جهت است که یک طراح گرافیک باید دارای مهارتهای خاص باشد؛ مثلا بتواند به مشتریان در جهت نیازها و خواسته هایشان مشاوره دهد، برای یک طراحی استراتژیکی با توسعه دهندگان و طراحان کار کند، در انتخاب، ویرایش و کار با تصاویر مهارت داشته باشد، استعداد زیبایی گزینی داشته باشد، تست کردن سایت را بداند، در مواردی دانش کدنویسی داشته باشد و …

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

1- نوع سایت

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

2-امکان تغییرزبان

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

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

3- قالب بندی یا تم

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

4- سلسله مراتب بصری

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

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

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

– فونت مناسب

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

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

1) تنظیم سبک نوشتن را براساس ترجیح و سبک خواندن مخاطبان

2) حذف و کاهش نوشته های تبلیغاتی زیرا، گاهی مخاطب را فراری می دهند.

3) حذف عبارات متنی طولانی بدون تصاویر و کلمات کلیدی مشخص شده با حروف پررنگ یا مورب

4) نادیده گرفتن زبان اغراق آمیز

5) استفاده نکردن از عبارات کوتاه و مختصر تا بدون اتلاف وقت اصل مطلب به مخاطب برسد.

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

7) استفاده از زبان ساده و عینی

– رنگ ها

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

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

برای یک طراح گرافیک، یافتن پالت رنگی متناسب با برند مورد نظر یکی از مهمترین مراحل طراحی است. نکته مهم این است که باید رنگ های مورد نظر را به کمتر از 5 رنگ محدود کند.

– فولد

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

– سئو سازی محتوا

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

– هارمونی بین اجزا

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

– فشرده سازی و کم حجم کردن تصاویر

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

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

– استفاده از فضای خالی و سفید

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

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

– جنبش

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

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

– جدول بندی

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

– سازگاری با موبایل

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

– امکان جست و جو

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

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

– امکان عضویت

این گزینه، از خدمات ویژه برخی وب سایت ها می باشد. از جمله؛ فروشگاه های آنلاین، سایت های بانکی، آموزشی و پژوهشی و …

– آرشیو مطالب

قابلیت آرشیو مطالب گذشته روشی است که مخاطب با آن می تواند با یادآوری تاریخ یا موضوع مورد نظر به راحتی آن را در سایت پیدا کند. در حال حاضر 99 درصد سایتها از این قابلیت بهره می برند.

اصول اساسی دیگر در طراحی گرافیک

1) تعادل

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

متقارن؛ که در امتداد یک محور عمودی یا افقی باید برقرار شود.

نامتقارن؛ که از مقیاس ، کنتراست و رنگ استفاده می کند تا جریان طراحی وب سایت را یکنواخت کند.

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

2)  ترازبندی

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

3)  کنتراست

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

4) اتحاد

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

5) تکرار 

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

6) تاکید

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

تالیف: سقا

20اسفند1401