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

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

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

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

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

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

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

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

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

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

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

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

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

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

اصل ظهور

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

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

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

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

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

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

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

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

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

اصل شیء سازی

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

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

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

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

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

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

اصل چندثباتی

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

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

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

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

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

اصل عدم تغییر

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

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

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

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

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

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

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