برای برنده شدن در Awwwards سایت ما چه شرایطی نیاز دارد؟

حدود چهار سال پیش، سایتی را که با تمام وجود رویش کار کرده بودم برای جایزه‌ای بین‌المللی ارسال کردم و با اعتماد کامل منتظر نتیجه ماندم. سه هفته بعد، پاسخ آمد: امتیاز ۵.۹. یک دهم امتیاز با آستانه قبولی فاصله داشتم. آن تجربه به من آموخت که Awwwards، برخلاف تصور رایج، درباره جذابیت بصری تنها نیست؛ درباره چهار معیار مشخص و قابل اندازه‌گیری است که هر کدام، سهم مشخصی در امتیاز نهایی دارند. امروز می‌خواهم به این پرسش پاسخ بدهم: برای برنده شدن در Awwwards سایت ما باید چه شرایطی داشته باشد؟ اگر با مفهوم پایه‌ای Awwwards به‌عنوان یک پلتفرم بین‌المللی طراحی وب آشنا نیستید، ابتدا تعریف رسمی را از ویکی‌پدیا ببینید تا چارچوب ذهنی روشن شود.

حقیقت تلخ درباره Awwwards

پیش از هر چک‌لیست، باید یک حقیقت را با خودمان رو‌به‌رو کنیم: Awwwards جایزه‌ای برای «بهترین سایت» نیست؛ جایزه‌ای برای «بهترین سایت از منظر چهار معیار مشخص» است. این چهار معیار عبارتند از Design، Usability، Creativity و Content و هر کدام سهم مشخصی در امتیاز نهایی دارند. داوری توسط هیئتی از طراحان و توسعه‌دهندگان بین‌المللی انجام می‌شود که هرکدام از زاویه دید خودشان سایت شما را ارزیابی می‌کنند. بنابراین، سایتی که در زمینه فنی بی‌نقص است اما در طراحی معمولی است، در این مسابقه برنده نمی‌شود؛ و سایتی که طراحی چشم‌نواز دارد اما در موبایل به‌هم می‌ریزد، همان سرنوشت را دارد.

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

تجربه‌ای که در پروژه‌های واقعی به آن رسیده‌ام این است: در بین ده‌ها سایتی که برای Awwwards بررسی کرده‌ام، اکثر آن‌ها در دو یا سه معیار قوی بودند اما در یکی ضعیف می‌ماندند و همین ضعف، آن‌ها را از آستانه قبولی دور می‌کرد. به‌عبارت دیگر، Awwwards بازی «مجموع چهار امتیاز» است نه «قهرمانی در یک معیار».

برنده شدن در Awwwards، مثل برنده شدن در یک مسابقه چهارگانه است نه یک مسابقه دوی سرعت. هیچ‌کدام از چهار معیار را نمی‌توان نادیده گرفت، چون امتیاز نهایی، میانگین‌شان است نه بیشینه‌شان.

نکته دومی که در فهم Awwwards اهمیت دارد، تفاوت بین «Site of the Day» و «Site of the Month» و «Site of the Year» است. Site of the Day روزانه و بر پایه امتیاز هیئت داوران انتخاب می‌شود. Site of the Month از بین برندگان Site of the Day در آن ماه و با رای کاربران انتخاب می‌شود. Site of the Year از بین برندگان Site of the Month و با داوری ترکیبی انتخاب می‌شود. اگر هدفتان برنده شدن در بالاترین سطح است، باید بدانید که هر سطح، معیارهای سختگیرانه‌تری دارد.

چارچوب تصمیم: پیش از ارسال، خودتان را بسنجید

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

1. سایت شما در موبایل به همان اندازه دسکتاپ درخشان است؟ اگر پاسخ منفی است، پس از هر بهینه‌سازی دیگر، اول این را حل کنید.
2. سایت شما روایت دارد؟ یعنی وقتی کاربر وارد می‌شود، در سه ثانیه اول می‌فهمد این سایت درباره چیست و چرا مهم است.
3. سایت شما انیمیشن‌های هدفمند دارد یا صرفاً افکت بصری؟ داوران Awwwards به افکت‌های بی‌هدف امتیاز نمی‌دهند.
4. سایت شما در ۳۰ ثانیه اول با کاربر ارتباط برقرار می‌کند؟ اگر تیتر اصلی سایت، با ارزش پیشنهادی شما هم‌راستا نباشد، امتیاز Content از دست می‌رود.
5. سایت شما سرعت زیر ۲.۵ ثانیه LCP در موبایل دارد؟ اگر نه، باید اول به سرعت برسید.
6. سایت شما از یک هویت بصری مشخص پیروی می‌کند یا صرفاً ترکیبی از افکت‌های مختلف است؟
7. سایت شما در Case Study ارسالی، خودش را به‌درستی روایت می‌کند؟ اکثر سایت‌ها در این لایه ضعیف هستند.
8. آیا شما آماده‌اید که ماه‌ها روی جزئیات کار کنید؟ سایت‌های برنده Awwwards معمولاً بین سه تا شش ماه کار اختصاصی می‌برند.

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

معیارهای چهارگانه داوری Awwwards

قلب داوری Awwwards از چهار معیار تشکیل شده است که هرکدام سهم مشخصی در امتیاز نهایی دارند. این چهار معیار، نه یک انتخاب سلیقه‌ای بلکه یک چارچوب بین‌المللی است که توسط تیم Awwwards تثبیت شده و در تمام دوره‌ها ثابت مانده است.

آستانه امتیاز برای Site of the Day حدود ۶.۵ است. برای Honorary Mention، آستانه حدود ۶.۰ است. برای Site of the Month و بالاتر، امتیاز بالاتر و رقابت سخت‌تر است. این اعداد پایه، بر پایه تجربه طولانی در این پلتفرم شکل گرفته و در دوره‌های مختلف تغییرات جزئی دارند.

تجربه‌ای که در پروژه‌های واقعی داشته‌ام این است: در سایت‌هایی که فقط روی Design تمرکز کرده‌ام و Usability را نادیده گرفته‌ام، امتیاز نهایی به‌طور محسوس پایین‌تر از انتظار بوده. برعکس، در سایت‌هایی که Usability را جدی گرفته‌ام و طراحی بصری را در سطح بالایی نگه داشته‌ام، امتیاز نهایی از ۷ عبور کرده است. تعادل بین این چهار معیار، رمز موفقیت در Awwwards است.

معیار اول: Design (طراحی بصری)

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

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

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

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

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

Design در Awwwards، تصمیمِ «چه شکلی باشد» نیست؛ تصمیمِ «چگونه با هم باشد» است. سایت برنده، مجموعه‌ای از زیبایی‌های جزئی نیست؛ کلیتِ هماهنگی است.

معیار دوم: Usability (کاربردپذیری)

معیار Usability، دومین معیار مهم در داوری Awwwards است و در بسیاری از موارد، همان معیاری است که بین برندگان و بازندگان تفاوت ایجاد می‌کند. Usability در Awwwards به معنای «نبود مانع در مسیر کاربر» است؛ یعنی کاربر بدون سردرگمی بتواند به هدفش برسد. سایت‌هایی که در Design امتیاز بالایی می‌گیرند اما در Usability ضعیف هستند، معمولاً در آستانه برنده شدن متوقف می‌شوند.

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

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

در سرعت بارگذاری، سه شاخص Core Web Vitals سهم مستقیم دارند. LCP (زمان بارگذاری بزرگ‌ترین عنصر) باید زیر ۲.۵ ثانیه باشد. INP (زمان پاسخ‌دهی به تعامل) باید زیر ۲۰۰ میلی‌ثانیه باشد. CLS (بی‌ثباتی چیدمان) باید زیر ۰.۱ باشد. سایت‌های برنده Awwwards معمولاً در هر سه شاخص امتیاز سبز می‌گیرند و این امتیاز سبز، در نمره Usability آن‌ها تأثیر مستقیم دارد.

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

معیار سوم: Creativity (خلاقیت)

معیار Creativity، سومین معیار مهم در داوری Awwwards است و در بسیاری از موارد، همان معیاری است که به سایت شما اجازه می‌دهد از سایر سایت‌های خوب متمایز شود. Creativity در Awwwards به معنای «ارائه چیزی جدید» است؛ یعنی داوران باید در سایت شما عنصری ببینند که در سایت‌های دیگر ندیده‌اند.

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

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

تجربه‌ای که در پروژه‌های واقعی داشته‌ام این است: در سایت‌هایی که خلاقیت ذاتی داشته‌اند، امتیاز Creativity بالاتر از ۷.۵ بوده؛ در سایت‌هایی که خلاقیت نداشته‌اند اما همه چیز دیگر را درست انجام داده‌اند، امتیاز Creativity بین ۵ تا ۶ نوسان داشته. این تفاوت، به‌تنهایی می‌تواند بین Site of the Day و Honorary Mention تعیین‌کننده باشد.

نکته مهم درباره Creativity، تفاوت آن با «افکت بصری» است. یک انیمیشن زیبا، خلاقیت نیست. یک تعامل نو و متفاوت، خلاقیت است. یک رنگ متفاوت، خلاقیت نیست. یک رویکرد بصری نو، خلاقیت است. سایت‌هایی که تصور می‌کنند با افکت‌های جدید می‌توانند در Creativity امتیاز بگیرند، معمولاً شکست می‌خورند.

معیار چهارم: Content (محتوا)

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

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

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

تجربه‌ای که در پروژه‌های واقعی داشته‌ام این است: در سایت‌هایی که Content ضعیف داشته‌اند اما سه معیار دیگر قوی بوده، امتیاز نهایی معمولاً بین ۶ تا ۶.۵ نوسان داشته و به‌ندرت به Site of the Day رسیده. در سایت‌هایی که Content را در سطح برندگان نگه داشته‌ام، امتیاز نهایی از ۷ عبور کرده است. این معیار، به‌دلیل سهم پایینش (حدود ده درصد) در نگاه اول کم‌اهمیت به نظر می‌رسد اما در واقع، همان ده درصدی است که در نزدیکی آستانه، تفاوت‌ساز می‌شود.

لایه فنی: انیمیشن، تعامل و کد

لایه فنی، پشت صحنه‌ای است که تجربه بصری و تعاملی سایت شما را ممکن می‌کند. این لایه، به‌طور مستقیم در معیار Usability و به‌طور غیرمستقیم در معیار Design و Creativity وزن دارد. سایت‌هایی که در لایه فنی ضعیف هستند، معمولاً در دو یا سه معیار امتیاز از دست می‌دهند.

در سطح فنی، این لایه از پنج جزء اصلی تشکیل شده است. جزء اول، انیمیشن‌های هدفمند است که در آن هر انیمیشن، هدف مشخصی دارد و صرفاً جنبه تزئینی ندارد. جزء دوم، تعامل روان است که در آن پاسخ سایت به کاربر، سریع و بدون تکان است. جزء سوم، کد تمیز است که در آن HTML، CSS و JavaScript از استانداردهای بین‌المللی پیروی می‌کنند. جزء چهارم، عملکرد پایدار است که در آن سایت در مرورگرها و دستگاه‌های مختلف به‌طور پایدار کار می‌کند. جزء پنجم، دسترس‌پذیری است که در آن سایت برای کاربران با نیازهای خاص قابل استفاده است.

در انتخاب انیمیشن‌ها، سه اصل مهم وجود دارد. اصل اول، هدف مشخص است؛ انیمیشن باید به کاربر کمک کند تا محتوا را درک کند یا در سایت حرکت کند. اصل دوم، مدت زمان معقول است؛ انیمیشن‌های بین ۲۰۰ تا ۶۰۰ میلی‌ثانیه معمولاً حس طبیعی‌ترین را می‌دهند. اصل سوم، قابلیت خاموش‌شدن است؛ کاربران با تنظیمات مختلف باید بتوانند انیمیشن‌ها را غیرفعال کنند.

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

تجربه‌ای که در پروژه‌های واقعی داشته‌ام این است: در سایت‌هایی که از WebGL استفاده کرده‌ام، امتیاز Creativity و Design بالا رفته اما در برخی موارد امتیاز Usability به‌دلیل سنگینی انیمیشن کاهش یافته. راه‌حل، استفاده از WebGL به‌صورت انتخابی و با fallback برای دستگاه‌های ضعیف‌تر است. اگر می‌خواهید درک عمیق‌تری از این لایه داشته باشید، مقاله‌ای که در بهینه سازی جاوااسکریپت نوشته‌ام این موضوع را باز می‌کند.

در لایه فنی، انیمیشن ابزار است نه هدف. اگر انیمیشن شما بدون دلیل وجود دارد، همان انیمیشن، امتیاز Design شما را کاهش می‌دهد نه افزایش.

طراحی موبایل: قاتل خاموش امتیاز

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

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

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

تجربه‌ای که در پروژه‌های واقعی داشته‌ام این است: در سایتی که در دسکتاپ امتیاز ۸.۵ گرفته بود اما در موبایل کاربر تجربه ضعیفی داشت، امتیاز نهایی به ۶.۷ کاهش یافت و از آستانه Site of the Day عبور نکرد. پس از بهینه‌سازی موبایل، همان سایت در ارسال مجدد امتیاز ۷.۲ گرفت. تفاوت موبایل و دسکتاپ، در Awwwards یکی از بزرگ‌ترین عوامل تعیین‌کننده است. اگر می‌خواهید درک عمیق‌تری از این لایه داشته باشید، مقاله‌ای که در اصول طراحی ریسپانسیو نوشته‌ام این موضوع را کامل باز می‌کند.

تایپوگرافی، رنگ و هویت بصری

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

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

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

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

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

Case Study و روایت سایت

Case Study و روایت سایت، لایه‌ای است که بسیاری از سایت‌های ایرانی در آن ضعیف عمل می‌کنند و همین ضعف، امتیاز Content آن‌ها را به‌طور محسوس کاهش می‌دهد. در Awwwards، هر سایتی که ارسال می‌شود باید همراه با یک Case Study ارائه شود که روایت طراحی و توسعه سایت را باز می‌کند.

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

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

تجربه‌ای که در پروژه‌های واقعی داشته‌ام این است: در سایت‌هایی که Case Study قوی داشتند، امتیاز Content و Creativity به‌طور محسوس بالاتر بوده. سایت‌هایی که بدون Case Study ارسال شده‌اند، در امتیاز Content ضعیف مانده‌اند. Case Study، پل بین سایت شما و داوران است و اگر این پل ضعیف باشد، سایت شما از دید داوران، یک مجموعه بصری بی‌روایت به نظر می‌رسد.

انواع جوایز Awwwards

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

هر کدام از این جوایز، معیار و آستانه متفاوتی دارند. برای شروع، معمولاً هدف‌گذاری روی Honorary Mention واقع‌بینانه‌تر است چون آستانه پایین‌تری دارد. پس از رسیدن به این سطح، می‌توانید برای Site of the Day تلاش کنید.

فرآیند ارسال و داوری

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

مراحل ارسال به‌شرح زیر است:

1. ساخت حساب کاربری در سایت Awwwards و انتخاب نوع پلن (رایگان یا پولی).
2. آماده‌سازی Case Study که باید شامل عنوان، توضیحات، تصاویر و لینک سایت باشد.
3. انتخاب دسته‌بندی مناسب برای سایت (مثلاً Business، Portfolio، Art، E-commerce).
4. پرداخت هزینه ارسال که در پلن‌های مختلف متفاوت است.
5. انتظار برای داوری که معمولاً بین یک تا دو هفته زمان می‌برد.
6. دریافت نتیجه که شامل امتیاز و نظرات داوران است.
7. در صورت قبولی، دریافت جایزه و نمایش در سایت Awwwards.

نکته مهم درباره فرآیند ارسال، انتخاب زمان مناسب است. سایت‌های ارسال‌شده در روزهای عادی هفته، شانس بالاتری برای Site of the Day دارند چون رقابت در روزهای تعطیل و پایان هفته بالاتر است. همچنین، سایت‌هایی که در ماه‌های خلوت سال ارسال می‌شوند، شانس بالاتری برای Honorary Mention دارند.

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

مطالعه موردی: چه چیزی برندگان را متمایز می‌کند؟

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

ویژگی اول: انیمیشن‌های هدفمند در شروع سایت

سایت‌های برنده Awwwards معمولاً در ثانیه‌های اول ورود، یک تجربه بصری قوی ارائه می‌دهند که با انیمیشن‌های هدفمند طراحی شده. این انیمیشن‌ها نه تزئینی بلکه روایت‌محور هستند؛ یعنی با ورود به سایت، کاربر می‌فهمد سایت درباره چیست.

ویژگی دوم: تعامل غیرمعمول با اسکرول

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

ویژگی سوم: تایپوگرافی به‌عنوان عنصر اصلی

در سایت‌های برنده Awwwards، تایپوگرافی معمولاً به‌عنوان یک عنصر بصری اصلی دیده می‌شود؛ نه فقط برای خواندن متن، بلکه برای ساختن هویت بصری سایت. این رویکرد در Design امتیاز بالایی می‌گیرد.

ویژگی چهارم: تعادل بین خلاقیت و کاربردپذیری

سایت‌های برنده Awwwards معمولاً تعادل دقیقی بین خلاقیت و کاربردپذیری دارند؛ یعنی هم چشم‌نواز و متفاوت هستند و هم کاربر می‌تواند بدون سردرگمی از آن‌ها استفاده کند. این تعادل، هم در Creativity و هم در Usability امتیاز بالایی می‌گیرد.

ویژگی پنجم: Case Study روایت‌محور

سایت‌های برنده Awwwards معمولاً Case Study قوی دارند که خود سایت را به‌درستی روایت می‌کند. این Case Study، نه یک فهرست فنی خشک بلکه یک داستان کوتاه از ایده تا اجرا است.

ویژگی ششم: طراحی موبایل در سطح دسکتاپ

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

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

اشتباهات رایجی که امتیاز را می‌کُشد

اشتباهات رایجی که امتیاز را می‌کُشد، یکی از مسائلی است که در پروژه‌های واقعی بارها دیده‌ام و بسیاری از آن‌ها به از دست دادن Site of the Day منجر می‌شود. در ادامه، به هشت اشتباه رایج اشاره می‌کنم.

• تمرکز روی دسکتاپ و نادیده‌گرفتن موبایل: سایت‌هایی که در دسکتاپ بی‌نقص هستند اما در موبایل به‌هم می‌ریزند، در امتیاز Usability به‌طور محسوس افت می‌کنند.
• انیمیشن‌های تزئینی بدون هدف: انیمیشن‌هایی که فقط برای «زیبایی» اضافه شده‌اند، امتیاز Design را کاهش می‌دهند نه افزایش.
• سرعت پایین در موبایل: سایت‌هایی که LCP بالای سه ثانیه دارند، در امتیاز Usability به‌طور محسوس عقب می‌مانند.
• کپی از سایت‌های برنده دیگر: داوران Awwwards تجربه کافی برای تشخیص کپی دارند و همین، امتیاز Creativity را به‌شدت کاهش می‌دهد.
• نبود Case Study یا Case Study ضعیف: سایت‌هایی که بدون Case Study قوی ارسال می‌شوند، در امتیاز Content ضعیف می‌مانند.
• ناوبری سردرگم: سایت‌هایی که کاربر در آن‌ها گم می‌شود، امتیاز Usability را از دست می‌دهند.
• تایپوگرافی ضعیف: سایت‌هایی که از فونت‌های عمومی و ترکیب‌بندی تایپوگرافی معمولی استفاده می‌کنند، در امتیاز Design عقب می‌مانند.
• ارسال در زمان نامناسب: سایت‌هایی که در روزهای پرترافیک ارسال می‌شوند، شانس کمتری برای Site of the Day دارند.

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

چک‌لیست نهایی سی‌موردی

پس از بررسی تمام لایه‌های برنده شدن در Awwwards، بیایید در یک چک‌لیست سی‌موردی، تمام نکات را جمع‌بندی کنیم:

1. سایت شما هویت بصری منسجمی دارد.
2. پالت رنگ شما محدود و منسجم است.
3. تایپوگرافی شما سلسله‌مراتب مشخصی دارد.
4. ترکیب‌بندی هر صفحه، بر پایه اصول طراحی است.
5. در هر صفحه، یک نقطه تمرکز بصری وجود دارد.
6. سایت شما در موبایل به همان اندازه دسکتاپ درخشان است.
7. منوی موبایل به‌طور کامل کار می‌کند.
8. تپ‌تارگت‌ها در موبایل حداقل ۴۴ پیکسل عرض دارند.
9. سرعت LCP سایت در موبایل زیر ۲.۵ ثانیه است.
10. INP سایت زیر ۲۰۰ میلی‌ثانیه است.
11. CLS سایت زیر ۰.۱ است.
12. انیمیشن‌های سایت هدف مشخصی دارند.
13. انیمیشن‌ها قابلیت خاموش‌شدن دارند.
14. سایت در مرورگرهای اصلی به‌طور پایدار کار می‌کند.
15. سایت دسترس‌پذیری اولیه (a11y) را رعایت می‌کند.
16. متن‌های سایت روان، دقیق و بدون غلط هستند.
17. هر صفحه به‌اندازه کافی محتوا دارد اما پرحرفی ندارد.
18. سایت یک روایت مشخص را دنبال می‌کند.
19. Case Study سایت به‌طور کامل نوشته شده است.
20. Case Study شامل مسئله، راه‌حل، فرآیند و نتیجه است.
21. سایت یک نقطه شروع مشخص دارد (در سه ثانیه اول).
22. سایت یک نقطه پایان مشخص دارد (CTA واضح).
23. سایت در Creativity عنصر متفاوتی از رقبا دارد.
24. سایت از کپی از سایت‌های برنده دیگر پرهیز کرده است.
25. سایت در صفحه شروع، تجربه بصری قوی ارائه می‌دهد.
26. سایت از اسکرول به‌عنوان ابزار تعاملی استفاده می‌کند.
27. سایت در تعادل بین Creativity و Usability است.
28. دسته‌بندی مناسب برای سایت انتخاب شده است.
29. سایت در زمان مناسب ارسال می‌شود.
30. برنامه به‌روزرسانی سایت پس از ارسال تنظیم شده است.

این چک‌لیست، بر پایه تحلیل مستندات Awwwards و تجربه پروژه‌های واقعی تنظیم شده است. اگر سایت شما این سی مورد را پاس کند، شانس بالایی برای رسیدن به Honorary Mention و در مواردی Site of the Day دارد.

پرسش‌های پرتکرار درباره Awwwards

این بخش را به سؤالاتی اختصاص داده‌ام که بیشتر در جلسه‌های مشاوره تکرار می‌شوند و پاسخ‌شان در تصمیم نهایی وزن زیادی دارد.

آیا برنده شدن در Awwwards روی سئو اثر دارد؟

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

هزینه ارسال به Awwwards چقدر است؟

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

چند بار می‌توانم یک سایت را ارسال کنم؟

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

آیا سایت‌های ایرانی می‌توانند در Awwwards برنده شوند؟

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

چه مدت طول می‌کشد تا نتیجه داوری Awwwards بیاید؟

نتیجه داوری Awwwards معمولاً بین یک تا دو هفته پس از ارسال اعلام می‌شود. در دوره‌های پرترافیک، این زمان می‌تواند به سه هفته هم برسد. توصیه می‌کنم در این دوره صبور باشید و سایت را تغییر ندهید چون داوران باید به همان نسخه‌ای که ارسال کرده‌اید دسترسی داشته باشند.

آستانه امتیاز برای Site of the Day چقدر است؟

آستانه امتیاز برای Site of the Day حدود ۶.۵ است. برای Honorary Mention آستانه حدود ۶.۰ است. این اعداد پایه، بر پایه تجربه طولانی در این پلتفرم شکل گرفته و در دوره‌های مختلف تغییرات جزئی دارند. اگر امتیاز سایت شما بالای ۷ باشد، شانس بالایی برای Site of the Day دارید.

آیا سایت‌های تجاری هم می‌توانند در Awwwards برنده شوند؟

بله، سایت‌های تجاری هم می‌توانند در Awwwards برنده شوند. در واقع، برخی از سایت‌های برنده Awwwards سایت‌های تجاری یا فروشگاهی هستند. نکته مهم این است که سایت تجاری شما باید در چهار معیار مشخص (Design، Usability، Creativity، Content) امتیاز بالایی بگیرد؛ یعنی صرفاً تجاری بودن، مانع برنده شدن نیست اما هیچ مزیتی هم نیست.

آیا برای ارسال به Awwwards باید از فناوری خاصی استفاده کنم؟

خیر، Awwwards فناوری خاصی را الزامی نمی‌کند. سایت‌های برنده از فناوری‌های مختلفی مثل WordPress، Webflow، Shopify، Next.js، GSAP و Three.js استفاده کرده‌اند. نکته مهم این است که فناوری انتخابی، بتواند تجربه بصری و تعاملی مدنظر شما را در سطح بین‌المللی ارائه دهد. سایت‌های وردپرسی هم اگر با قالب‌ها و افزونه‌های مناسب طراحی شوند، می‌توانند در Awwwards برنده شوند.

آیا باید سایت را حتماً با انیمیشن‌های پیچیده طراحی کنم؟

خیر، انیمیشن‌های پیچیده الزام نیستند. برخی از سایت‌های برنده Awwwards از انیمیشن‌های بسیار ساده اما هدفمند استفاده کرده‌اند. نکته مهم این است که انیمیشن‌ها باید هدف مشخصی داشته باشند و به تجربه کاربر کمک کنند، نه اینکه صرفاً برای «افکت» اضافه شده باشند.

آیا سایت باید انگلیسی باشد یا می‌تواند فارسی باشد؟

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

آیا می‌توانم سایت‌های قبلی‌ام را برای Awwwards ارسال کنم؟

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

آیا برای برنده شدن در Awwwards باید تیم بزرگی داشته باشم؟

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

چند وقت یک بار باید سایت را برای ارسال مجدد آماده کنم؟

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

پایان راه یا شروع راه؟

اگر این راهنما را با یک جمله خلاصه کنم، برنده شدن در Awwwards یک فرآیند چهارلایه‌ای است که در آن هر لایه، سهم مشخصی در امتیاز نهایی دارد. Design (۴۰٪)، Usability (۳۰٪)، Creativity (۲۰٪) و Content (۱۰٪) چهار معیار اصلی هستند و هیچ‌کدام را نمی‌توان نادیده گرفت. در این راهنما، این چهار معیار را به‌همراه لایه فنی، طراحی موبایل، تایپوگرافی، Case Study، فرآیند ارسال و چک‌لیست سی‌موردی نهایی بررسی کردیم.

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

اگر تجربه‌ای از ارسال به Awwwards دارید — چه موفق، چه ناموفق — برایم جالب است که در دیدگاه‌ها بنویسید کدام معیار بیشترین چالش را برای شما ایجاد کرده و کدام معیار بیشترین امتیاز را برای شما به همراه داشته است. تجربه‌های واقعی شما، این راهنما را برای خواننده بعدی دقیق‌تر و کاربردی‌تر خواهد کرد. 🏆