3 گرایش اساسی طراحی، ژوئن 2024

دیروز

تابستان شروعی سرگرم کننده است و برخی از گرایش های طراحی وب سایت بسیار چشمگیر در پروژه ها ظاهر می شوند. بیایید شیرجه بزنیم!

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

در اینجا مواردی که در طراحی این ماه ترند شده است:

1. چهره های بزرگ

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

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

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

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

کارلوس مونوز یک نسخه کارتونی از آنچه ما حدس می زنیم چهره او است ساخته است. فاکتور wow در اینجا این است که صورت تغییر حالت می دهد و حتی حرکت چشم را در جهت ماوس شما تغییر می دهد.

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

2. سرفصل های مبهم

اگر عنوانی پشت یک عنصر بصری دیگر پنهان شده باشد، آیا اصلاً یک تیتر است؟ البته که هست!

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

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

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

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

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

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

3. انیمیشن های UX بسیار خوب

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

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

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

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

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

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

نتیجه

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