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

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

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

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

طراحی لوگو با بهترین طراحان لوگو

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

چرا؟

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

بیا شروع کنیم!

(توجه: بیشتر نمونه های ارائه شده توسط من در طراحی با سرعت بالا در حین نوشتن ساخته شده اند. آنها را برای مفاهیم درجه یک استفاده نکنید. من حدود یک ساعت و نیم برای همه طرح ها وقت گذاشته ام ... بنابراین حدود 5 دقیقه هر یک!)

فصل اول: طرح‌بندی ماکرو

15) نیم صفحه

سفارش طراحی سایت در فریلنس پروژه

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

صفحه قهرمان

صفحه قهرمان با دختر

14) نمای قاب شده

این تکنیک اغلب برای ارائه CTA های حیاتی به روش های فانتزی و به طور کلی وب سایت های رسمی با پیشینه فنی یا تکنولوژیکی استفاده می شود.

شما اساساً منطقه اسکرول را در یک قاب از نمای کامل محدود می‌کنید و هر دو فضای بالا و چپ/راست را حفظ می‌کنید.

قهرمان طراحی مینیمال

13) پیمایش افقی

می تواند بسیار جالب اما ترسناک باشد، و اگر بد ساخته شود، کل تجربه را کاملا خراب می کند.

این را فقط در صورتی انتخاب کنید که واقعاً مطمئن هستید که قرار است چه کاری انجام دهید ... و توسعه دهندگان خوبی دارید.

هرگز از آن در تلفن همراه استفاده نکنید.

طرح اسکرول افقی

12) طرح اریب

فریلنس پروژه سایت دورکاری و فریلنسری

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

وب سایت لامبورگینی

وب سایت لامبورگینی

11) شی 3 بعدی پویا

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

بسیار قدرتمند است، اما نیاز به کدنویسی جدی دارد.

مفهوم وب سایت سه بعدی

فصل دوم: عناصر گرافیکی منفرد

10) خط

همانطور که در طرح قاب دیده می شود، می توانید از خطوط برای استحکام بخشیدن به طرح خود استفاده کنید. من تقریباً مطمئن هستم که اغلب اتفاق می افتد که طرح های وب شما ... سازماندهی نشده یا بیش از حد "شناور" به نظر می رسند.

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

طراحی پروژه لیست وب سایت

9) پیوند پیکان

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

می توانید تصویر قبلی آن را ببینید.

8) خیمه شب بازی

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

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

طراحی خیمه شب بازی

وب سایت شیفت

7) قهرمان پر هرج و مرج محور

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

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

طراحی صفحه فرود قهرمان

نمونه ساخته شده توسط من

طراحی صفحه فرود قهرمان

مثال توسط GSoft

6) تصویر سنگ قبر

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

وب سایت مفهومی طراحی قهرمان معاصر

مفهومی توسط Halo UI/UX

5) کارت نامناسب

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

وب سایت طراحی کارت

وب سایت طراحی کارت

نمونه از وب سایت ChercheSusan

4) منوی همبرگر

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

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

طراحی منوی همبرگر

3) شکل باهاوس

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

این شکل

میمون‌ها معمولاً با مستطیل‌هایی با حداکثر شعاع حاشیه در رئوس خاص ساخته می‌شوند و اکنون در طراحی وب بسیار رایج هستند. بیایید چند نمونه را ببینیم.

مفهوم طراحی وب باهاوس

مفهوم طراحی وب باهاوس

وب سایت نمونه توسط Sinx

2) متن چرخانده شده

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

وب سایت طراحی مینیمال بروتالیستی

1) مکان نما متحرک

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

این نوع مکان‌نما همچنین می‌تواند حاوی متنی باشد که هنگام شناور کردن ظاهر می‌شود.

وب سایت طراحی مینیمال

نتیجه گیری

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

بدیهی است که همه آنها با هر نوع سبک و پیامی کار نمی کنند، بنابراین باید به دقت درک کنید که آیا استفاده از آنها درست است یا خیر.

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