برای ارتقای برندتان با استفاده از انیمیشن، بهتر است مجموعه ای از اصول راهنما را تدوین کنید که در سرتاسر وب سایت خود به طور مداوم از آنها پیروی کنید. در ادامه، با انیمیشن آشنا خواهید شد، نحوه تقویت هویت برندتان با آن را خواهید آموخت و از طراحان خلاق برجسته، نکاتی برای ایجاد اصول طراحی انیمیشن دریافت خواهید کرد.
طراحی حرکت چیست؟
میشه بهش گفت چطور اجزای ثابت یه ویدیو رو متحرک می کنیم. مثلا اینکه لوگو چطور روی صفحه ظاهر میشه: محو میشه، با حرکت کشویی میاد، یا یه تیکه یه تیکه شکل می گیره؟ یا اون نوار کوچیکی که پایین ویدیو اسم گوینده رو نشون میده چطور به طور انیمیشنی ظاهر میشه و ناپدید میشه؟ فیلم های آموزشی که روی دکمه های خاصی زوم می کنن تا نشون بدن چطور از یه محصول استفاده میشه هم از این دسته اند. در واقع، این فقط یه نمونه کوچیک از کاربردهای گرافیک متحرک هست. امروزه تقریبا همه جا ازش استفاده میشه، از تصویر سازی وب سایت ها و پست های شبکه های اجتماعی گرفته تا اسلایدشو های کنفرانس و بیلبوردهای بزرگ شهری.
اهمیت طراحی موشن
اگر کمی تامل کنید، به سرعت متوجه می‌شوید که حرکت در رابط‌های دیجیتال تقریباً همه جا حضور دارد. اما طراحی دقیق آن است که می‌تواند به تجربیات کاربری روان و لذت‌بخش منجر شود و کاربران را به سمت اطلاعات مهم هدایت کند.
حرکت به ساختن برند هم کمک می‌کند. حرکت اطلاعاتی اضافه را منتقل می‌کند که یک تصویر ثابت نمی‌تواند و به گفته پاتریک سزات، طراح ارشد برند در وب‌فلوی، «به شخصیت بخشیدن و انسانی کردن پیام ما کمک می‌کند». مانند خود طراحی متحرک، مزایای آن در طعم‌های مختلفی ارائه می‌شود: «در وب‌فلوی، ما می‌خواهیم طراحی متحرک یک کمک غیرکلامی و حمایتی باشد وقتی مردم چیز جدیدی یاد می‌گیرند، یک نشانه بصری مفید هنگام انجام یک کار، یا فقط جزئیاتی شاد هنگام جشن گرفتن کارهای شگفت‌انگیزی که جامعه ما می‌سازد.»
هشت نکته برای توسعه اصول طراحی موشن شخصی خودتان
پس از گذراندن فرآیند جامع توسعه اصول طراحی حرکت برای برند وب‌فلو اخیراً، شُت و سوندوکوفسکی چند نکته را برای بازاریابان و طراحان خلاق که به دنیای طراحی موشن وارد می‌شوند، ارائه داده‌اند.
پیام اصلی خودتان را بشناسید و روی آن سرمایه‌گذاری کنید.
بخش اعظم کار طراحی موشن، تدوین پیامی واضح است. شات تخمین می‌زند که این پیام «۸۰٪ از تصمیمات ما را شکل می‌دهد و بعد از آن همه چیز فقط ریزه‌کاری است.» برای رسیدن به این هدف، از خودتان سوالاتی مانند این بپرسید: چه داستانی می‌خواهید موشن شما روایت کند؟ هدف از این موشن چیست؟ چه احساسی می‌خواهید برانگیخته کنید؟ چه چیزی از برند را می‌خواهید برجسته کنید؟
از تجارب و کارهای دیگران بیاموزید و الگو برداری کنید.
تیم وب‌فلَو در طول فرآیند طراحی به دنیای گسترده‌تر طراحی دیجیتال نگاه کرد: «شرکت‌های دیگر چه کار می‌کنند؟ افراد دیگری که در این حوزه تحسینشان می‌کنم چه کار می‌کنند؟» تابلوهای خلق و خو راهی عالی برای جمع‌آوری عناصر الهام‌بخش هستند. در نهایت، به اندازه کافی تکرار و بازی می‌کنید تا به چیزی جدید یا چیزی که به هویت برندتان وفادار باشد، برسید.
روی تیم خود حساب کنید
طراحی حرکت بخشی از کار خلاقانه بزرگتر در وب‌فلوی است. در نتیجه، این کار طراحی، حاصل تلاش گروهی بود که شامل بسیاری از اعضای تیم خلاق داخلی – و همچنین آژانس خلاق “پاندا دیجیتال” – بود و این مهم بود. Szot می‌گوید: “انیمیشن نیاز به یک روستا دارد. توانایی پرسیدن این سوال که “این چطور فرود می‌آید؟ آیا این احساس درسته؟” واقعا کمک کننده است.
طراحی کل سیستم را در نظر بگیرید، نه اینکه فقط یک پروژه را در یک زمان.
اگر برای هر پروژه به صورت جداگانه طراحی کنید، برند شما یکپارچه نخواهد بود. سان‌دوفسکی می‌گوید که کار طراحی حرکت وب‌فلو “فقط با یک عنصر شروع نشد”. این یک تلاش بود که تیم او را به چالش کشید تا برند را به طور کلی بررسی کند و مهم‌ترین نقاط تماس را پیدا کند و مشخص کند که چه چیزی بارها و بارها استفاده خواهد شد.
او توضیح می‌دهد: «ما باید از خودمان می‌پرسیدیم، “هر عنصر جداگانه چگونه وقتی با هم ترکیب می‌شوند و به اصول برند ما می‌رسند، معنا پیدا می‌کنند؟”» به همین دلیل است که یک بررسی کامل برای ماندگاری اصول حرکتی تیم بسیار مهم است.
حرکت را با توجه به شرایط تطبیق دهید.
راهنمای حرکت وب‌فلوی، مقیاس حرکت را با مقیاس دارایی مطابقت می‌دهد. به عنوان مثال، شوت گفت که یک رویداد بزرگ مانند رونمایی از ویژگی جدید، “ممکن است نیاز به یک نمایش لوگو با درام یا سینمایی‌تر داشته باشد”.
مطمئن شوید که حرکت شما قابل تولید انبوه است.
برای مثال، یک سبک حرکت هنری‌تر ممکن است زمان بیشتری برای پیاده‌سازی توسط طراح نیاز داشته باشد. آیا این تلاش اضافی ارزشش را دارد؟ از خودتان بپرسید “آیا این تلاش اضافی ارزشش را دارد؟” و نقشه راه کوتاه‌مدت و بلندمدت تیم و شرکتتان را ارزیابی کنید تا تصمیمات حرکتی را که می‌توانند در مقیاس بزرگ بدون به خطر انداختن کیفیت اجرا شوند، اتخاذ کنید.
زیاده‌روی نکن.
حرکت بیش از حد یا حرکت خودنمایی کننده، حواس پرت کننده است. برای اجتناب از این، به سوالات راهنمای خود برگردید: هدف اصلی چیست؟ چه داستانی می‌خواهید روایت کنید؟ حرکت، مانند هر هنر دیگری، نیازمند انضباط زیادی است. هدف، ایجاد چیزهایی با معنا است، نه به وجود آوردن آشفتگی دیجیتال. حرکت ظریف و کنترل شده، کلید اصلی است. علاوه بر این، دسترسی به طراحی – و به Webflow – امری حیاتی است و افراط یا عدم هدف‌مندی در حرکت، می‌تواند برای افراد دارای معلولیت زیان‌آور باشد.
راهنمایی‌های خود را مستند کنید
مستندات شفاف و به‌راحتی قابل دسترسی، آموزش اعضای جدید تیم که نیاز به پیاده‌سازی حرکت در کار خود دارند را آسان‌تر می‌کند. اطمینان از شفاف و صحیح بودن دستورالعمل‌ها نیز بسیار مهم است. بررسی کنید که تمام الگوها و فایل‌های کاری مرتبط – الگوها، فونت‌ها، دارایی‌های از پیش رندر شده و موارد دیگر – در دسترس باشند و به‌شکلی آسان برای هر کسی که ممکن است به آنها نیاز داشته باشد یا با آنها کار کند، بسته‌بندی شده باشند.
امروز با حرکت شروع به ساختن کنید
برای ارتقای برندتان با استفاده از انیمیشن، بهتر است مجموعه ای از دستورالعمل ها را تدوین کنید که می توانید آنها را در کل سایت به طور مداوم به کار ببرید.
توسعه و تکامل، پایه و اساس ساخت برند ماندگار است و طراحی در حال حرکت، فرآیندی تکرار شونده است که هیچ گاه به پایان نمی‌رسد. پس به یاد داشته باشید که در حین تدوین راهنمای حرکت و شروع به ساخت، به طور مداوم آن را تصحیح، تکرار و با توجه به شرایط و کاربردهای جدید، به طور پیوسته و منسجم آن را توسعه دهید.
اگر به دنبال اطلاعات بیشتر در زمینه طراحی برای وب در مقیاس بزرگ و بهترین روش‌هایی که متخصصان برای ارتقای سیستم‌های طراحی خود از آنها استفاده می‌کنند هستید، کتاب الکترونیکی جدید ما را مطالعه کنید. سیستم‌های طراحی در حال تحول و اگر به دنبال آخرین اخبار و اطلاعات مرتبط با طراحی و توسعه وب هستید، برای دریافت خبرنامه ما ثبت نام کنید.
درباره وب‌فلوی
وب‌فلِو، پلتفرم پیشرو در توسعه بصری وب است که به شما امکان می‌دهد وب‌سایت‌های قدرتمند را بدون نوشتن کد بسازید. با ترکیب فناوری‌های مدرن توسعه وب در یک پلتفرم، وب‌فلِو به شما امکان می‌دهد وب‌سایت‌ها را به صورت بصری بسازید، در زمان مهندسی صرفه‌جویی کنید و در عین حال کد تمیز به طور یکپارچه در پس زمینه تولید شود. از طراحان مستقل و آژانس‌های خلاق تا شرکت‌های Fortune 500، میلیون‌ها نفر در سراسر جهان از وب‌فلِو برای چابک‌تر، خلاق‌تر و همکاری بیشتر استفاده می‌کنند.
