9 وب سایتی که از انیمیشن الهام گرفته اند

بازدید: 1,373 بازدید
طراحی سایت با انیمیشن

بهروز حسینی_ مدیر گروه تجارت الکترونیک لندوکس

وب سایت های دارای انیمیشن یک عنصر اصلی برای داستان پردازی بصری هستند.

9 وب سایتی که از انیمیشن الهام گرفته اند را در این مقاله به شما معرفی خواهیم کرد.

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

ما در لندوکس این 9 نمونه از وب سایتهایی را که واقعاً در هنر انیمیشن تسلط داشته اند ، رابررسی می کنیم.

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

 

Handwrytten: ظرافت زیبا

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

 

Crisp: جزئیات طراحی مؤثر

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

 

Corebook: آغاز با تاریکی

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

 

:Best Day Ever Education هنر طراحی حیوانات

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

 

Wonderful Weekends: طراحی برای بازی

چه کسی گودال توپ کلاسیک را دوست ندارد؟ Google با استفاده از رنگهای کلاسیک مارک خود در پس زمینه سفید، دوباره طلا را مورد اصابت قرار می دهد.
با یک اثر ردیابی ماوس ، Google موفق می شود یک تجربه کاربری را از بین ببرد که باعث می شود بازدید کننده وب سایت احساس کند که واقعاً درون گودال توپ قرار دارد!
هنگامی که به پایین صفحه می روید ، تمام آنچه اتفاق می افتد این است که توپ ها بزرگتر می شوند.
هیچ مطلبی در زیر توپ ها وجود ندارد، این دقیقاً همان چیزی است که در واقع وجود دارد.
Google موفق به درک فوری و احساسی در مورد آنچه این محصول برای شماست می کند.
آنها این کار را با توضیحات عنوان متن قهرمان ساده و دکمه CTA انجام می دهند.
ما می دانیم که Google قصد دارد به ما در برنامه ریزی ماجراجویی بعدی خود که ما را ناامید نخواهد کرد کمک کند. آیا هنگامی که روی دکمه می روید، جلوه های تغییر رنگ را مشاهده می کنید؟
این اولین باری است که دکمه ای را مشاهده کرده ایم که اثر شناور آن به جای تغییر از یک رنگ به رنگ دیگر به چهار رنگ جداگانه تغییر می کند.

 

In Pieces: کنار هم قرار دادن یک داستان تصویری

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

 

MA True Cannabis: پیمایش به صورت سه بعدی

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

 

RappiPay: سادگی مهم است

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

 

Let’s Get Moving: بیایید حرکت کنیم

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

دسته‌بندی بلاگ
اشتراک گذاری
نوشته های مرتبط

یک پاسخ به “9 وب سایتی که از انیمیشن الهام گرفته اند”

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت