زمانی که برای اولین بار ایده الگوهای طراحی متقارن در اینجا در Webdesigner Depot من قصد نداشتم مفهوم طراحی نامتقارن را بررسی کنم.
با این حال، هر چه بیشتر در مورد آن فکر می کردم، بیشتر احساس می کردم که مجبور به پوشش دادن این موضوع می شوم تا برخی از ایده های مربوط به الگوهای طراحی متقارن را در تضاد قرار دهم.
در طراحی نامتقارن، طرح هایی را می یابیم که حاوی عناصری هستند که تصویر آینه ای ایجاد نمی کنند. اغلب، این طرح های نامتقارن در واقع متعادل هستند، اما نه از طریق نیمه های کاملا مشابه.
دستیابی به این نوع طراحی در واقع بسیار ساده‌تر است، با توجه به اینکه اکثر محتواها خود را به تقارن کامل نمی‌رسانند.
بیایید سایت‌های مختلفی را در نظر بگیریم که این رویکرد طراحی را به کار می‌گیرند و شاید ایده‌هایی را کشف کنیم که می‌توانند بر کار طراحی شما تأثیر بگذارند.
سرگرمی قلدر
به عنوان مقدمه ای بر مفهوم طراحی نامتقارن، این طراحی دراماتیک نقطه شروع نسبتا خوبی را ارائه می دهد. در حالی که واقعاً هیچ دلیلی وجود ندارد که این طرح برای ایجاد یک تقارن کامل مجدداً پیکربندی شود، تقریباً به خوبی کار نخواهد کرد. طرح های بزرگ و با مصور فراوان، متن صفحه اصلی را به زیبایی منعکس می کند. اندازه آنها تضمین می کند که بسیار قابل مشاهده هستند و آنها نیروی محرکه بصری اصلی طراحی هستند. این تعادل طبیعی بین یک عنصر بزرگ و جایگزینی با متراکم تر، یک رویکرد بسیار رایج است.
خورخه ریگابرت
این طرح‌بندی یک طرح‌بندی وب نسبتاً استاندارد را ارائه می‌دهد. یک ستون کناری کوچک که حاوی پیمایش کلید است، که با یک ستون بسیار بزرگتر برای محتوای سایت ها جفت شده است. این شاید یکی از معدود طرح‌بندی‌های استانداردی باشد که روزانه توسط طراحان استفاده می‌شود. من معتقدم که بسیاری از فرآیند طراحی در این مورد به صورت نیمه خودکار اتفاق می افتد. در این مورد نوار کناری را در نظر بگیرید که به طور نامتقارن ستون محتوا را متعادل می کند. نوار کناری رنگ تیره‌تری دارد که به آن کمک می‌کند تا کانال محتوای روشن‌تر را جبران کند. بدون پس‌زمینه تیره‌تر، احتمالاً نوار کناری گم می‌شود و تقریباً برجسته نمی‌شود.
تصاویر برای متعادل کردن متن
یکی دیگر از رویکردهای نسبتا استاندارد برای طراحی وب که در نهایت یک عنصر طراحی نامتقارن است، جفت کردن متن با تصاویر است. همانطور که در نمونه های زیر مشاهده می کنید، هر کدام یک تصویر بزرگ دارند. این تصویر به نوعی با یک بلوک متن جفت شده است. این ترکیب بسیار رایج است.
ترفند کاملاً واضح است، فقط اطمینان حاصل کنید که این دو به نحوی یکدیگر را تکمیل می کنند. با توجه به اینکه این دو عنصر معمولا یک حلقه برای چشم ایجاد می کنند، مهم است که به نحوی با هم کار کنند. واضح ترین رویکرد این است که تصویر به معنای واقعی کلمه نشان دهد یا نشان دهد که متن در مورد چه چیزی صحبت می کند. تاکتیک رایج دیگر این است که تصویر ایده ارائه شده در متن را گسترش دهد.
در اینجا چند نمونه برای بررسی وجود دارد.
کیک شیرین کیک
این طرح مطمئناً متعادل است، اما از چندین عنصر نامتقارن برای رسیدن به این هدف استفاده می کند. به تصویر بزرگ کیک همراه با متن توجه کنید. تصویر نسبتا واضح است، اما اساسا مهم است. در این مورد، کیک نه تنها به ما اطلاع می‌دهد که اینجا یک کیک‌فروشی است، بلکه به ما اطلاع می‌دهد که چه سبک خاصی ممکن است ارائه دهند. این را با متن شفاف کننده مرتبط با آن ترکیب کنید و یک زمین فروش بسیار واضح خواهید داشت. همه اینها حتی از طراحی فوق العاده خوشمزه این سایت استفاده نمی کند.
نوشابه بیشتر
این مثال همچنین از عناصر طراحی نامتقارن بر اساس یک تصویر بزرگ ترکیب شده با یک بلوک متن استفاده می کند. در این مورد، ارتباط تقریباً واضح نیست. هیچ عنصر فروش آشکاری دخیل نیست. در عوض، تصویر تزئینی تر می شود و یک حس کلی از سبک برای سایت ایجاد می کند. به نظر من عملکرد آن کمی کمتر است، اما واقعاً سخت است که بدون دانستن اینکه سایت چقدر موثر است، بگوییم. به نظر می رسد که تصویری مانند این یک هدف منحصر به فرد دارد که شما را ترغیب کند تا کمی بیشتر به جستجو بپردازید تا ببینید همه چیز در مورد آنها چیست. یک نوع تیزر، اگر بخواهید.
طراحی وب تطبیقی
همانطور که احتمالاً قبلاً متوجه شده اید، این الگو تقریباً به اندازه رنگ آبی رایج است. من به جرات می‌توانم حدس بزنم که تقریباً هر سایتی یک ابزار بصری مانند این را در نقطه‌ای کار می‌کند. من فکر می‌کنم این طبیعت مکان رایج، آن را تبدیل به موضوعی می‌کند که ارزش بحث را دارد. اغلب اوقات بیشترین الهامات و ایده های تازه را از بازنگری در کارهایی که بارها و بارها بدون فکر انجام می دهم پیدا می کنم.
این سایت ساده یک کتاب را تبلیغ می کند. و البته عنصر اصلی وقتی روی آن فرود می آیید، تصویر بزرگی از کتاب است. این را با بلوک بزرگ متن ترکیب کنید و یک ناحیه به خوبی متعادل خواهید داشت که شامل تمام عناصر مهم است. مهمتر از همه، آن را با یک دعوت به عمل چشم نواز به پایان رسید. تداوم این منطقه ساده و به جا است. چشم ها به راحتی از آن عبور می کنند و اطلاعات مهم را مصرف می کنند. این گیج کننده، یا پیچیده، یا هوشمندانه یا حیله گر نیست. رویکرد ساده و واضح است.
عناصر پیش زمینه و پس زمینه
یک رویکرد جدید برای طراحی نامتقارن، استفاده از عناصر پس زمینه است که به طور نامتقارن عناصر پیش زمینه را متعادل می کند. این نوع رویکرد پویایی جالبی ایجاد می کند که در آن پس زمینه بیشتر نقش عملکردی را به عنوان بخشی از محتوا ایفا می کند، و در عین حال، هنوز بخشی از پس زمینه سایت است. اغلب این کار از طریق همپوشانی های ساده انجام می شود که توهم عمق را ایجاد می کند. در اینجا چند نمونه برای بررسی وجود دارد.
گالری پیتر مک لیوی
وب‌سایت‌های این گالری نمایش کاملی از این ایده است. در اینجا عنصر پس زمینه نقش های بسیاری را ایفا می کند. اول، تا نقطه این بخش، تعادل نامتقارن با دایره خاکستری بزرگ در پیش زمینه ایجاد می کند. این ترکیب بصری دو ناحیه را ایجاد می کند که باعث می شود چشم ها به جلو و عقب پرش کنند. این، به نظر من، چیز خوبی است.
عنصر سمت چپ حاوی نام تجاری اصلی و پیوندهایی به محتوای سایت است، در حالی که عنصر پس‌زمینه شما را از زمینه سایت مطلع می‌کند. شما به یک سایت گالری نگاه می کنید، و این در عرض چند ثانیه پس از فرود در سایت کاملاً آشکار می شود. من دوست دارم که چنین عنصر آموزنده ای مانند پس زمینه نیز می تواند نقش مهمی در طراحی و سبک کلی سایت داشته باشد. مخصوصاً زمانی که کاملاً با زمینه محصولی که سایت ارائه می‌کند منطبق باشد. چنین رویکرد ساده ای، اما بسیار مؤثر است.
الکساندر گرکینیچ
این صفحه ساده about.me نیز این ایده ساده را در بر می گیرد که در آن یک عنصر پس زمینه تعادل را ایجاد می کند. پیش زمینه یکی به صورت نامتقارن اگرچه در این مورد، پس زمینه کاملاً مشخص نیست. و این چیزی است که من واقعاً در مورد آن دوست دارم. توهم عمق کاملاً وجود دارد، و بدون هیچ گونه همپوشانی، در واقع سخت است که تصمیم بگیریم پس زمینه واقعاً چیست. فکر می کنم می توانیم استدلال کنیم که شخصی که می پرد اصلاً در پس زمینه نیست. صرف نظر از این، تعادل نامتقارن واضح است. و بدون ترکیب زیبای عناصر مختلف صفحه وجود نخواهد داشت. طراحی، از بسیاری جهات، صرفاً مبتنی بر مفهوم تعادل نامتقارن است. اغلب اوقات به نظر می رسد که طرح های بسیار ساده می توانند با تضادهای زیبایی مانند این فوق العاده به نظر برسند.
رابرت دابی
در این مورد، پس‌زمینه نقش جالبی در طراحی بازی می‌کند، اما عناصر نامتقارنی را که تاکنون دیده‌ایم ایجاد نمی‌کند. به نظر من، بصری بزرگ به وضوح یک عنصر پیش زمینه طراحی است. چیزی که من دوست دارم این است که چگونه این خط را با چیزی به سادگی سایه زیر تصویر محو می کند. این به طور موثر آن را با پس زمینه ادغام می کند و پویایی زیبایی ایجاد می کند. بدیهی است که تصویر بزرگ به طور نامتقارن با کپی کنار آن متعادل است. در صفحات سایت قدم بزنید و به خوبی متوجه خواهید شد که پس زمینه تغییر می کند و به روش های بسیار جالبی با تصاویر ادغام می شود. طراحی خیره کننده ای که احساس تازگی، تمیزی و فوق العاده صاف می کند. به نظر من ارائه خوبی برای یک سایت نمونه کارها است.
ده طرح دیگر
در زیر ده طرح اضافی ارائه کرده ام که از عناصر نامتقارن استفاده می کنند. همانطور که قبلاً اشاره کردم می توانم وب سایت های زیادی را در این دسته قرار دهم. بنابراین، برای اهداف این مقاله، طرح‌هایی را با دقت انتخاب کرده‌ام که احساس می‌کنم از این رویکرد به روش‌های کمی غیر معمول و خلاقانه استفاده می‌کنند. هر طرح را با توجه به این موضوع در نظر بگیرید و امیدوارم ایده های جدیدی برای الهام بخشیدن به طرح بعدی خود به دست آورید.
گرینلوو
اندرسون وایز
پیش‌بینی
13 همسر
موسسه Raffles
Svensson شهری
چرخ و فلک
Purlize
اتوبوس در کارخانه آبجوسازی
انسان
نتیجه گیری
تعادل بخشی اساسی از فرآیند طراحی است و استفاده از عناصر نامتقارن نیز به همان اندازه اساسی است. من همیشه عاشق کاوش در اصول اولیه طراحی هستم، زیرا متوجه می شوم که همیشه آن را به روشی جدید درک می کنم که بر کار من تأثیر می گذارد. راه‌های بی‌شماری برای نزدیک شدن به چیزها وجود دارد و شکستن الگوهای ما اغلب می‌تواند منجر به طرح‌های تازه و جدیدی شود که اشتیاق ما را به شغل‌مان جوان‌تر می‌کند.
طراحی های نامتقارن وب سایت مورد علاقه شما چیست؟ چه کسی با عدم تقارن کار متفاوتی انجام می دهد؟ در نظرات به ما اطلاع دهید!
بدون دیدگاه