Meet Studio: قالب زیبای سایت آژانس جدید ما

ما به تازگی Studio را منتشر کرده‌ایم، یک قالب وب سایت آژانس جدید و زیبا که در چند ماه گذشته برای رابط کاربری Tailwind روی آن کار کرده‌ایم.

ما آن را با Next.js، MDX و البته Tailwind CSS ساختیم، و این اولین قالبی است که با استفاده از روتر برنامه Next.js جدید منتشر کرده‌ایم.

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

بنابراین ما سعی کردیم به این یکی با دو هدف در ذهن نزدیک شویم تا واقعا برای مردم مفید باشد:

1. به مردم آموزش دهید که چگونه کارهای جالبی را که در سایت های آژانس فلش می بینید انجام دهند — من همیشه بر این باور بوده‌ام که الگوهای ما به‌اندازه یک منبع آموزشی (اگر نه بیشتر) از قالب‌ها ارزشمند هستند، بنابراین می‌خواستیم از این الگو به عنوان فرصتی برای نشان دادن نحوه ساخت بسیاری از جزئیات تعاملی و متحرک جالبی که در این نوع سایت‌ها می‌بینید استفاده کنیم.
2. آن را برای آژانس هایی که طراحی نمی فروشند طراحی کنید – آژانس‌های زیادی وجود دارند که فقط بر کارهای مهندسی تمرکز می‌کنند، و اغلب اوقات این شرکت‌ها در تلاش هستند تا از نظر طراحی برجسته شوند. ما سعی کرده‌ایم این الگو را به گونه‌ای طراحی کنیم که به تعداد زیادی اسکرین شات از کارهای طراحی و مواردی از این قبیل خوب به نظر برسد، به طوری که یک آژانس متمرکز بر کد بتواند از آن به عنوان نقطه شروع برای سایت خود استفاده کند.

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

پیش نمایش زنده را مانند همیشه برای تجربه کامل بررسی کنید – جزئیات بسیار خوبی در این مورد وجود دارد که باید در مرورگر مشاهده کنید تا واقعاً از آن لذت ببرید.

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

به عنوان مثال، ما یک API مبتنی بر مؤلفه‌های اعلامی سبک وزن در اطراف برخی از عملکردهای Framer Motion ایجاد کرده‌ایم تا ساخت انیمیشن‌های ورودی با اسکرول را آسان کنیم:

تجربه ایجاد این نوع انیمیشن ها واقعاً خوب بود – فقط چیزهایی را که می خواهید محو کنید با آنها بپیچید. FadeIn یا FadeInStagger جزء و شما در تجارت هستید:

function Clients() {  return (    div className="mt-24 rounded-4xl bg-neutral-950 py-20 sm:mt-32 sm:py-32 lg:mt-56">      Container>        FadeIn className="flex items-center gap-x-8">          h2 className="font-display text-center text-sm font-semibold tracking-wider text-white sm:text-left">            We’ve worked with hundreds of amazing people          h2>          div className="h-px flex-auto bg-neutral-800" />        FadeIn>        FadeInStagger faster>          ul role="list" className="mt-10 grid grid-cols-2 gap-x-8 gap-y-10 lg:grid-cols-4">            {clients.map(([client, logo]) => (              li key={client}>                FadeIn>                  Image src={logo} alt={client} unoptimized />                FadeIn>              li>            ))}          ul>        FadeInStagger>      Container>    div>  );}

ما همچنین این انیمیشن کوچک زیبا را به لوگو اضافه کرده ایم که در آن علامت با یک رنگ ثابت در شناور پر می شود:

این جزئیات کوچک به نظر کوچک می رسد، اما نکته جالب این است که بدون ناوبری سمت مشتری نمی توانید این کار را انجام دهید، زیرا با کلیک بر روی لوگو برای بازگشت به صفحه اصلی، انیمیشن دوباره شروع می شود. با استفاده از چارچوبی مانند Next.js، می‌توانیم لوگو را در حالت شناور نگه داریم، حتی با تغییرات URL، که بسیار زیباتر به نظر می‌رسد.

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

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

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

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

ما همچنین دقت کرده‌ایم که سعی کنیم همه این انیمیشن‌ها را به گونه‌ای پیاده‌سازی کنیم که برای افراد مبتلا به اختلالات حرکتی دهلیزی که به این نوع انیمیشن‌های بزرگ حساس هستند، پاسخگو باشد. استفاده از Framer Motion useReducedMotion قلاب و motion-safe در Tailwind، کارهایی مانند غیرفعال کردن مشروط انیمیشن منوی پیمایش و محدود کردن انیمیشن‌های ورودی اسکرول را به میزان شفافیت محدود می‌کنیم تا چیزها روی صفحه حرکت نکنند.

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

در اینجا نمونه‌ای از این است که یک مطالعه موردی اولیه چگونه به نظر می‌رسد – که عمدتاً به صورت علامت‌گذاری شده با برخی فراداده‌های عمومی و پشتیبانی از مؤلفه‌های سفارشی ترکیب شده با محتوا ایجاد شده است:

import logo from "@/images/clients/phobia/logomark-dark.svg";import imageHero from "./hero.jpg";import imageJennyWilson from "./jenny-wilson.jpeg";export const caseStudy = {  client: "Phobia",  title: "Overcome your fears, find your match",  description:    "Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.",  summary: [    "Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.",    "We worked with Phobia to develop a new onboarding flow. A user is shown pictures of common phobias and we use the microphone to detect which ones make them scream, feeding the results into the matching algorithm.",  ],  logo,  image: { src: imageHero },  date: "2022-06",  service: "App development",  testimonial: {    author: { name: "Jenny Wilson", role: "CPO of Phobia" },    content:      "The team at Studio went above and beyond with our onboarding, even finding a way to access the user’s microphone without triggering one of those annoying permission dialogs.",  },};export const metadata = {  title: `${caseStudy.client} Case Study`,  description: caseStudy.description,};## OverviewNoticing incredibly high churn, the team at Phobia came to the conclusion that, instead of having afundamentally flawed business idea, they needed to improve their onboarding process.Previously users selected their phobias manually but this led to some users selecting things theyweren’t actually afraid of to increase their matches.To combat this, we developed a system that displays a slideshow of common phobias duringonboarding. We then use malware to surreptitiously access their microphone and detect when theyhave audible reactions. We measure the pitch, volume and duration of their screams and feed thatinformation to the matching algorithm.The next phase is a VR version of the onboarding flow where users are subjected to a series ofscenarios that will determine their fears. We are currently developing the first scenario, workingtitle: “Jumping out of a plane full of spiders”.## What we didTagList>  TagListItem>AndroidTagListItem>  TagListItem>iOSTagListItem>  TagListItem>MalwareTagListItem>  TagListItem>VRTagListItem>TagList>Blockquote author={{ name: "Jenny Wilson", role: "CPO of Phobia" }} image={{ src: imageJennyWilson }}>  The team at Studio went above and beyond with our onboarding, even finding a way to access the user’s microphone  without triggering one of those annoying permission dialogs.Blockquote>StatList>  StatListItem value="20%" label="Churn rate" />  StatListItem value="5x" label="Uninstalls" />  StatListItem value="2.3" label="App store rating" />  StatListItem value="8" label="Pending lawsuits" />StatList>

همه سبک‌های تایپوگرافی برای این الگو کاملا سفارشی هستند و این بار ما رویکردی کمی متفاوت از گذشته در پیش گرفتیم – به جای نوشتن مجموعه‌ای از CSS پیچیده برای جلوگیری از برخورد سبک‌های تایپوگرافی ما با اجزای سفارشی در MDX، یک پلاگین حاشیه‌نویسی کوچک به نام ایجاد کردیم. remark-rehype-wrap که بسته بندی قسمت هایی از محتوای Markdown را با یک عنصر wrapper ممکن می کند.

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

هر دو روش کاملاً کار می کنند، اما همیشه امتحان کردن ایده های جدید و دیدن آنچه یاد می گیرید سرگرم کننده است. من کنجکاو هستم که ببینم در آینده چگونه خواهد بود و راه حلی مبتنی بر ویژگی درخواست سبک جدید که به CSS می آید!

پس این استودیو است! آن را پایین بکشید، پاره کنید و ببینید آیا می توانید چند ترفند جدید یاد بگیرید.

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