search
حلقه سفید

4 اصل طراحی سایت بصری برای طراحان وب سایت

اشتراک گذاری در :
انتشار : 1402/10/12
4 اصل طراحی سایت بصری برای طراحان وب سایت

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

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

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

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

اصول طراحی سایت چیست؟

شما احتمالاً اصول طراحی سایت را در کلاس هنر کلاس ابتدایی یاد گرفته اید.

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

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

سلسله مراتب: اهمیت برخی از عناصر نسبت به برخی دیگر.

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

مقیاس/نسبت: رابطه بین اندازه عناصر.

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

گشتالت یعنی چه؟

فرهنگ لغت کمبریج گشتالت را اینگونه تعریف می کند:

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

اگر فکر می‌کنید، ( وب‌ سایت خوب طراحی شده «گشتالت» خواهد بود)، حق با شماست.

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

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

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

اصل ظهور

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

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

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

ظهور برای طراحی سایت به چه معناست؟

احتمالاً این عبارت تلخ اما واقعی را شنیده اید: "ساده نگه دار، احمقانه!" در بسیاری از زمینه ها؛ متأسفانه، این مورد برای طراحی سایت بصری شماست. هنگام طراحی سایت، اصل ظهور نشان می دهد که باید به الگوهای آشنا و به راحتی قابل تشخیص پایبند باشید.

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

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

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

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

اصل شیء سازی

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

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

reification برای طراحی سایت به چه معناست؟

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

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

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

اصل چند ثباتی

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

صورت ها یا گلدان؟ چندثباتی به این معنی است که شما واقعاً می توانید هر بار فقط یکی را ببینید.

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

چند پایداری برای طراحی سایت به چه معناست؟

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

اما، همانطور که ده‌ها لوگوی به یاد ماندنی در طول سال‌ها ثابت کرده‌اند، می‌توانید از چندپایداری برای ایجاد طرح‌های خیره‌کننده و غافلگیرکننده مانند لوگوی FedEx استفاده کنید. هنگامی که آن فلش (بین E وX ( و سایر فلش هایی که reification نشان می دهد را می بینید، ندیدن آن بسیار سخت است.

 

اصل عدم تغییر

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

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

عدم تغییر برای طراحی سایت به چه معناست؟

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

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

این جدول قیمت‌گذاری از تم طراحی سایت بصری مدرن Bootstrap 4 Envato به وضوح با متمایز کردن گزینه قیمت‌گذاری «شرکتی» در مقابل سایر گزینه‌ها، تغییر ناپذیری را اجرا می‌کند.

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

تفاوت این 4 اصل طراحی سایت بصری با نکات طراحی UI

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

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