چگونه به طراحی چیدمان مسلط شویم

راهنمای کاملی برای یادگیری اصول طراحی بصری.

سوال میلیون دلاری: راز طراحی خوب چیست؟

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

همچنین ببینید: قدرت دختر در رنگی پر جنب و جوش

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

لیندا گام، Behance

همه این ویژگی ها صفحه را می سازد. طراحی تمیز، ساختار یافته و آسان برای خواندن، و آنها با نکاتی که در ادامه در مورد آنها صحبت خواهیم کرد، هماهنگ هستند. اما ابتدا، بیایید در مورد خود طراحی صفحه‌آرایی بیشتر بدانیم.

طراحی چیدمان چیست؟

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

پس ما صحبت نمی کنیممکان استراحت، در حالی که سایر عناصر جهت را نشان می دهند.

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

اصل. #5. از کنتراست استفاده کنید

مطمئن شوید که کنتراست کافی در طراحی خود دارید.

کنتراست به سازماندهی طرح شما کمک می کند و سلسله مراتبی بسیار مورد نیاز را ایجاد می کند و بر آنچه مهم است تاکید می کند.

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

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

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

منبع: IAG Reconciliation Action Plan

Principle #6. تکرار، الگو، ریتم

وقتی به تکرار فکر می کنیم، فکر می کنیماز یک عنصر بارها و بارها.

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

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

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

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

منبع: Thepentool.co

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

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

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

برای شروع، Vectornator را دانلود کنید

طرح های خود را به سطح بعدی ببرید.

دانلود فایل در مورد طراحی لوگو اینجا اما طراحی مواد چاپی، مانند روزنامه‌ها، مجلات، پوسترها و نمونه‌های دیجیتالی آن‌ها، و همچنین طراحی وب، برنامه، یا UX/UI.

کلمه «طرح‌بندی» نکات زیادی را به ما می‌دهد. این به معنای چیدمان عناصر از پیش تعیین شده در یک صفحه است.

وقتی یک طرح بندی موثر است، خوب به نظر می رسد و بیننده را راهنمایی می کند تا پیامی را که طرح می خواهد منتقل کند، درک کند. بنابراین درک طرح‌بندی در ایجاد ترکیب‌های جذاب، مؤثر، کاربرپسند و دلنشین کلیدی است.

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

هدف طراحی چیدمان

انتقال سریع پیام

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

ایجاد تعادل

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

ایجاد انسجام

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

ایجاد زیبایی

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

Elements of Layout Design

Text

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

تصویر

متداول ترین انواع تصاویر، عکس ها، تصاویر یا اینفوگرافیک ها هستند.

اشکال

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

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

فضای سفید

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

اصول طلایی طراحی چیدمان

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

اصل شماره 1. از Grids استفاده کنید

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

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

منبع: hgmlegal.com

آناتومی شبکه ها

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

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

منبع: Radversity

انواع شبکه ها

شبکه های چیدمان برای اولین بار برای چیدمان استفاده شد دست خط روی کاغذ.

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

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

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

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

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

منبع: UXplanet

منبع: Radversity

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

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

منبع: UX Planet

منبع: Radversity

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

منبع: UXPlanet

منبع: Radversity

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

شبکه‌های خط پایه اینجا هستند تا به متن شما با ریتمی روان کمک کنند.

منبع: UX Planet

منبع: Fragaria

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

منبع: UX Plane

Principle #2. از فضای منفی استفاده کنید

ما اغلب فکر می کنیم که پوچی، سکوت، یا نداشتن رنگ چیز بدی است. اما ما در نظر نمی گیریم که چگونه آنها پایه محکم کنتراست هستند.

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

فضای منفی خوب در مقابل فضای منفی

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

همچنین ببینید: ایده های الهام بخش طراحی سیاه و سفید

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

اگر همه چیز توجه بیننده‌تان را فریاد بزند، چیزی شنیده نمی‌شود.

– آرون والتر، «طراحی برای emotion'

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

Designer by Brunswicker، منبع: Codesignmag.com

اصل شماره 3. یک نقطه کانونی واحد را انتخاب کنید

آیا تا به حال مشتری از شما خواسته است که لوگو را بزرگتر کنید؟ و سپس برای بزرگتر کردن تیتر؟

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

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

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

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

طراحی شده توسط برائولیو آمادو برای بلومبرگ بیزینس ویک، منبع: خوب است که

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

اصل شماره 4. به نزدیکی و جریان فکر کنید

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

نزدیکی نشان می دهد که دارایی های بصری به هم متصل شده اند و به یک واحد بصری تبدیل می شوند که به سازماندهی چیدمان شما کمک می کند.

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

منبع: Satori Graphics

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