دفتر نو، احوال تازه

جایی نزدیک‌تر به دوستان دیرین

پانته‌آ کماسی

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

قهرمان #کاپارات شو!

جام‌جهانی ۲۰۱۸ روسیه و مسابقه آپارات ورزشی

پانته‌آ کماسی

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

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

#کاپارات یک مسابقه‌ست که می‌توانید در آن، اطلاعات فوتبالی‌‌تان را محک بزنید و جایزه‌های باحال بگیرید، جایزه‌هایی مثل:

  • ۵ پیراهن اورجینال تیم‌ملی با اسم و شماره دل‌خواه
  • ۵ نیم سکه
  • ۵ سکه تمام
  • ۵ پلی استیشن ۴ باندل فیفا
  • جایزه ویژه: سفر به جام ملت‌های آسیا
  • و ۱۵۰ اشتراک یک‌ماهه‌ی فیلیمو

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

معرفی استودیوهای خلاق طراحی وب و موبایل [1]

قسمت اول - Tubik Studio

لادن شاپورزاده

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

۱. Tubik Studio

لوگو استودیو tubik

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

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


tubik-01.jpg (94 KB)
tubik-05.jpg (104 KB)
business_card_app_animation_tubik.gif (1.93 MB)
home_budget_app_interaction_animation_tubik.gif (639 KB)
navigation_in_ui_animation_tubik.gif (7.50 MB)
tubik-03.jpg (77 KB)
web_ui_design_tubik.jpg (270 KB)

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

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


tubik-06.jpg (60 KB)
tubik-07.jpg (82 KB)
tubik-08.jpg (74 KB)
tubik-10.jpg (97 KB)

جالب است بدانید که برای طراحی لوگوی استودیو از سگ کوچکی که بیشتر اوقات در آن‌جا مشغول شیطنت و بازی کردن است الهام گرفته‌اند!

راستی Tubik یک وبلاگ عالی هم دارد که کلی مطلب تخصصی و مفید در رابطه با خدماتش می‌نویسد و من به شدت توصیه می‌کنم که حتما دنبالش کنید. 

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

سلام بهار

دانلود آیکون‌های نوروز و سفره هفت سین

ساره موسوی

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

ما که بعد از سه ماه کار سخت و فشرده، یک عالمه ذوق داریم برای رسیدن نوروز و یک استراحت درست و حسابی. استودیوی ما هم دیگر رنگ و بوی بهاری گرفته، مخصوصا از وقتی که لادن عزیز شروع کرد به طراحی آیکون‌های زیبای سفره‌ی هفت‌سین.
icon-Norouz-97-Garousian.ir.png (135 KB)
اگر دوست داشته باشید، می‌توانید این آیکون‌ها را به صورت رایگان و وکتور دانلود کنید. امیدواریم دوستشان داشته باشید. 
راستی نوروز پیشاپیش مبارک!

فیلمبازی؛ از تولد تا جرقۀ ایده‌های تازه‌تر

حسام مطهری

یک غذای دوست‌داشتنی را تصور کنید. غذایی که مواد اولیۀ دقیق، ادویۀ کافی، مدت‌زمانِ پختِ اصولی و یک تزئینِ اشتهاآور دارد. حالا یکی‌یکی جزئیات را دستکاری کنید: ادویه و مواد اولیه را کم و زیاد یا حذف کنید، تصور کنید غذا زیاد بپزد یا زود از شعله برداشته شود و کمی هم نمکِ اضافه بهش بزنید. افتضاح می‌شود، نه؟

کمپین‌های تبلیغاتی بی‌شباهت به غذاها نیستند. دل‌پذیری هر کمپین یا بازی وابسته به جزئیاتی‌ست که ما نمی‌بینیم اما همان جزئیات‌اند که غذا را عمل آورده‌اند. اگر آشپز دل به کار ندهد یا ناشی‌بازی در بیاورد غذا از دهن می‌افتد. اگر هم جزئیات به‌خوبی رعایت شوند، یک میز غذای محشر خواهیم داشت. 

آشپزها معمولاً نیم‌نگاهی به میز غذا دارند تا واکنش مهمان‌ها را ببینند. نتیجۀ خوب، خستگی آشپز را در می‌کند. 

ما #فیلبازی را پختیم و منتظر واکنش مهمان‌ها نشستیم. فقط در هفته‌ اول لانچ‌ کمپین بیش از ۲۳۰ هزار نفر از کمپین #فیلمبازی باخبر شدند و دکمۀ «شروع بازی» را لمس کردند. ۴۰ هزار نفرشان دستِ پر از بازی بیرون رفتند. لحظه‌ای بود که می‌توانستیم بگوییم: «هوووومممم، خوبه». از اینکه مردم لذت بردند حسابی ذوق کردیم.

filmbazi-story-blog-illustration-2 1.png (137 KB)بخشی از تصویرسازی‌های کمپین #فیلمبازی

غذا چطور طبخ شد؟

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

تایپوگرافی هشتگ فیلمبازی

برای هشتگ کمپین فیلمبازی یک تایپ اختصاصی طراحی کردیم

 

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

فرقی نداشت برنده باشید یا بازنده. بین هر مرحله نیاز به انیمیشن‌های ساده و سبکی داشتیم که مثلِ قند شیرین باشند و کفرتان را بالانیاورند. ضمناً نباید حس می‌کردید با یک پاپ‌آپِ اعصاب‌خردکن طرفید که شما را از سینما بیرون می‌اندازد.

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

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

filmbazi-story-blog-illustration-4.jpg (86 KB)

نمونه طراحی چند صفحه از بازی در ابعاد موبایل

حالا وقتِ سرو غذاست

تا قبل از انتشارِ کمپین و اطلاع‌رسانی، حالِ ما شبیه به آشپزی بود که هنوز غذا را سرو نکرده و بازخوردی از مهمانانش نگرفته است. سعی کرده بودیم جزئیات را رعایت کنیم تا نتیجه خوب از کار در بیاید. حالا باید قضاوت می‌شدیم.
سینما که بدون تصویر نمی‌شود. با کمک بچه‌های فیلیمو ویدیویی آماده کردیم که بخشی از پشت‌صحنۀ کمپین را روایت می‌کرد: یک تیزر تبلیغاتی با حضورِ دست‌اندارکارانِ کمپین!
ویدیو را با تکیه بر توان آپارات منتشر کردیم. حالا این ویدیو بیش از ۴۵ هزار بار فقط در آپارات تماشا شده و البته یک نسخۀ کوتاه‌تر هم برای اینستاگرام تدوین کردیم.

 

تیزر کمپین تبلیغات آنلاین #فیلمبازی

چیزی کم است؟

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

به استقبالِ ایده‌های نو

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

یک همفکری ساده برای لذت بردن از فیلمبازی

هشتگ فیلمبازی چطور متولد شد؟

حسام مطهری

آخرین‌بار کی بازی کرده‌اید؟
گوگل را باز کنید و بی‌سلام و علیک به او بگویید: «بازی». میلیون‌ها صفحه مربوط به بازی‌های آنلاین و آفلاین پیشِ روی شماست: به دنیای شگفت‌انگیزِ بازی‌ها خوش‌آمدید! کدام را انتخاب می‌کنید؟

آدم بزرگ‌ها هم گاهی وسوسه می‌شوند هیجان را تجربه کنند یا مهارت و دانش و شانس‌شان را امتحان کنند. حالا اگر بازی را با چیزهای جذابِ دیگری تلفیق کنیم، چه بهتر. مثلاً EA Sports روی جذابیتِ فوتبال حساب باز کرده و حالا خودش یک جذابیتِ جدید حساب می‌شود.

الهام‌گرفتن از فیلم برای ساختِ اسباب‌بازی، طراحی لباس، بازی‌های کنسولی و آدمک‌ها (Action Figure) رسمِ معمولی در تجارتِ امروزِ سینماست.

همانطور که یک فیلم محصولِ کاری گروهی‌ست، محصول‌های الهام‌گرفته از سینما هم ثمرۀ همفکری یک گروه است. کمپینِ فیلمبازی هم با تکیه بر جذابیتِ سینما، می‌خواست جذابیتِ جدیدی بسازد.

پشتِ پردۀ کمپین فیلمبازی فازهای مختلفی بود: طراحی گرافیک لندینگ‌پیج، طراحی بنرهای تبلیغاتی، طراحی سؤال‌ها، برش فیلم‌ها، طراحی صفحه‌ها و تجربه‌کاربری بازی و بالأخره اسلوگان و هشتگ و متن‌ها.

ما وظیفه داشتیم نتیجۀ کارِ یک گروهِ خوب را به‌خوبی معرفی کنیم تا بازی‌کنندگانِ بیشتری سراغِ فیلمبازی بروند.

باید اسلوگان را کشف می‌کردیم. می‌توانم بگویم «خلق» یا «طراحی» می‌کردیم ولی اینجا واژۀ «کشف» شورانگیزتر است. به این سؤالات فکر کردیم:

  • مخاطب کیست؟
  • فیلیمو چه چیزی ارائه می‌کند؟
  • بازی چه جذابیتی دارد و بر چه اساسی پیش می‌رود؟
  • بازی بر چه چیزی استوار است و چطور جلو می‌رود؟ 

صرفِ نظر از سؤالات، چند فرضِ اساسی در طراحی اسلوگان وجود دارد:

  • ساده باش
  • خوش‌آوا باش
  • تداعی‌کنندۀ یک چیز ملموس باش
  • بی‌ربط نه، کاملاً مربوط باش 

با بچه‌های فیلیمو درباره‌شان گپ زدیم تا پاسخ‌‌های دقیق‌تری داشته باشیم. جواب‌ها از این قرار بودند:

  • تماشای آنلاین فیلم
  • هرکس به فیلم و تماشای فیلم علاقه‌مند است
  • اطلاعات و حافظۀ سینمایی مخاطب را محک می‌زند
  • بریده‌ای از فیلم نمایش داده می‌شود و بر اساسش یک سؤال پرسیده می‌شود

از این به بعد کارمان واردِ مرحلۀ تازه‌ای شد. فکر کردیم:

  • موضوعِ اصلی بازی فیلم است
  • مخاطبِ اصلی چطور شناخته می‌شود؟ بهشان می‌گویند فیلمباز
  • حفظِ واژۀ فیلم کمک‌مان می‌کند به فیلیمو و کارکردش وفادار بمانیم
  • بازی با فیلم می‌تواند انواع داشته باشد، پس باید حسِ تعلیق را هم حفظ کنیم 

گاهی اوقات برای خلق هشتگ، اسلوگان یا تگ‌لاین اسیر واژه‌های اضافه می‌شویم. اما فقط لازم بود ساده باشیم؛ ساده مثلِ #فیلمبازی. ما دیدِ کلی‌ای دربارۀ هشتگ داریم. با تکیه بر همان دید به #فیلمبازی رسیدیم.

اما کار تمام نشده بود. «جایزه‌ات رو لابه‌لای فیلم‌ها پیدا کن!» اسلوگانی بود که بر اساسِ همان سؤال و جواب‌ها بهشان رسیدیم؛ چیزی که گمان می‌کنیم به‌خوبی نشان می‌دهد فیلمبازی چیست و با چه چیزی روبه‌رو می‌شویم.

فکرش را بکنید چه چیزی فرایندِ انجامِ کار را لذت‌بخش‌تر می‌کند؟ اینکه نتیجۀ کار را دوست داشته باشی. ما فیلمبازی را دوست داشتیم و خودمان هم بارها شانس‌مان را امتحان کردیم. گرچه هیچکدام از جایزه‌های ویژه نصیب‌مان نشد ولی جایزۀ باحال‌تری گیر آوردیم: حسِ رضایت.

شما فیلمبازی کردید؟ امتحانش کنید.

هر برند، یک داستان

این قسمت: آدیداس

ساره موسوی

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

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

 

آدیداس

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

 

نوجوانی آدولف در دوران رکود اقتصادی پس از جنگ جهانی اول سپری شد. در همان دوران به خانواده‌اش کمک می‌کرد که با استفاده از باقی‌مانده‌ی کیف‌های ارتشی برای خود سرپایی درست کنند. ولی علاقه و اشتیاق اصلی او همیشه ورزش و به خصوص فوتبال بود. در سال ۱۹۲۰ ساخت کفش‌های ورزشی را آغاز کرد. در سال ۱۹۲۴ همراه با برادرش «رودولف» شرکتی با نام «کارخانه‌ی کفش برادران داسلر» راه‌اندازی کرد. اما در سال ۱۹۴۸ به دلیل بروز مشکلی بین دو برادر، رودولف از آدولف جدا شد و شرکت پوما را تأسیس کرد. آدولف هم نام کارخانه را به آدیداس تغییر داد. 

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

 

آدولف داسلر نوآوری‌های زیادی داشت؛ مثلا جالب است بدانید که طراحی کفش‌های میخ‌دار فوتبال کار او بود. او متوجه شده بود که کفش‌های معمولی فوتبال، اگر زمین مرطوب باشد، کارآیی کافی ندارند، بنابراین تصمیم گرفت که به کفش‌ها میخ‌های مخصوصی اضافه کند که به فوتبالیست‌ها کنترل و دقت عمل بیشتری بدهد. همین کفش‌های جدید بود که تیم آلمان را در جام جهانی ۱۹۵۴ به مقام قهرمانی رساند. 

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

اختراع کفش‌های ورزشی نایلونی هم کار او بود. 

 

در سال ۱۹۴۲ به فکر دوختن سه نوار در کناره‌ی کفش‌ها افتاد؛ به طوری که هر کسی تنها با نگاه کردن به کفش بتواند تشخیص دهد که آن‌ها آدیداس هستند. با این حال تا سال ۱۹۹۶ طول کشید تا این سه خط به عنوان لوگوی شرکت آدیداس شناخته شوند. 

 

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

تکنولوژی AMP

امیرحسین دوزنده

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

 

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

 

اگه بخواهیم دقیق‌تر بدانیم که این صفحات چه هستند و اصلا چه تفاوتی با نسخه‌ی معمولی وب‌سایت دارند، باید بگویم که این صفحات به صورت اختصاصی برای موبایل طراحی می‌شوند، داخل این صفحات تقریبا همه‌ی المان‌های اضافی که ممکن است روی کامپیوترهای شخصی مشاهده کنید، مثل تلبلیغات، نوارهای کناری و کلا هر بخشی که یک جورهایی اضافه باشد از صفحه حذف می‌شود. علاوه بر همه‌ی این‌ها صفحاتی که دارای نسخه‌ی AMP هستند، در نتایج گوگل به صورت مجزا با علامت (⚡️) مشخص می‌شوند تا کاربرها راحت‌تر بتوانند این صفحات را پیدا کنند. اگر بخواهید به صورت عملی هم این کار را انجام دهید، کافی است که با موبایل، کلمه‌ی "Iran" را در گوگل جستجو کنید تا بهتر متوجه شوید.

 

حالا اگر بخواهیم بدانیم که این صفحات از نظر فنی چه تفاوتی با نسخه‌ی معمولی اسناد HTML دارند، باید بگویم که برنامه‌نویس در نسخه‌ی AMP مجاز به استفاده از یک سری تگ‌های HTML نیست. همچنین تمام Styleهای مربوط به صفحه باید داخل همان سند و داخل یک تگ مشخص به اسم < style amp-custom > نوشته بشوند. برای کدهای جاوااسکریپت هم باید یک فکر دیگر بکنید، چون گوگل توصیه کرده است برای این صفحات از اسکریپت‌های سنگین استفاده نکنید. حالا حتما دارید به این فکر می‌کنید که خب این‌طوری خیلی محدودیت برای برنامه‌نویس درست می‌شود، ولی باید این را اضافه کنم که برای AMP ماژول‌هایی نوشته شده است که شما به کمک آن‌ها می‌توانید صفحات بهینه‌تری را تهیه کنید.

 

 

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

 

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

 

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

 

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

 

 

AMP  و سئو :

 

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

 

آیا شما هم تا‌به‌حال از تکنولوژی AMP استفاده کرده‌اید؟ در استفاده از آن با چه چالش‌هایی روبه‌رو شده‌اید؟ خوشحال می‌شویم نظرات و تجربیات‌تان را درباره‌ی آن با ما به اشتراک بگذارید. 

از انواع آیکون‌ها بیشتر بدانیم

راهنمای ساده و کوتاهی بر دسته‌بندی آیکون‌ها

مسعود گروسیان

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

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


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

خب برگردیم به دسته‌بندی آیکون‌ها:

 

آیکون اوت لاین چیست؟

 آیکون‌های Outline

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

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

 

icon-filled.png (23 KB)

 آیکون‌های Filled

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

 icon-glyph.png (11 KB)

آیکون‌های Glyph

آیکون‌های Glyph را با Filled اشتباه نگیرید (خودم قبلا اشتباه می‌کردم :| ). اینجا خبری از outline، رنگ‌های متنوع و سایه‌های وکتوری نیست. یک شکل پیوسته و تک‌رنگ.

 

آیکون فلت چیست؟

آیکون‌های Flat

مشابه با آیکون‌های Filled که نسخه‌ی پیچیده‌تر آیکون‌های Outline بودند، آیکون‌های فلت را می‌توان نوع پیشرفته‌تر یا پیچیده‌تر آیکون‌های Glyph دانست. البته احتمالا خاطرتان هست پیدایش آیکون‌های فلت با هدف ساده‌ترکردن آیکون‌های Skeuomorphic شروع شد و ربطی به Glyph‌ها نداشت.

 

آیکون hand-drawn چیست؟

آیکون‌های Hand-Drawn

خسته‌تان نمی‌کنم. واضح‌است این آیکون‌ها انگار با دست کشیده‌شده‌اند و برای طراحی آن‌ها معمولا از Brush‌های فرم‌دار Illustrator استفاده می‌شود. 

 آیکون اسکیومورفیک چیست؟

 آیکون‌های واقعی‌طور Skeuomorphic

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

 

در این میان، آیکون‌های Outline، Filled، Glyph و Flat در زمان نوشتن این مطلب کاربرد بیشتری دارند. این روزها، از تب آیکون‌های Flat کمی کاسته‌شده است و در عوض، آیکون‌های Filled بیشتر طرفدار پیدا کرده‌اند.


برای‌تان وب‌سایت‌ها و اپلیکیشن‌هایی پر از آیکون‌های دوست‌داشتنی آرزو می‌کنم. خوشحالمان می‌کنید اگر نکات دیگری به نظرتان رسید در توییتر با ما درمیان بگذارید و دوستان‌تان را از انتشار این مطلب باخبر سازید.

بیلبوردهایی که دل ما را بردند

این قسمت: تلیسمان

ساره موسوی

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

 

فکر می‌کنم بیلبوردهای تلیسمان کاملا متفاوت هستند و یک جورهایی از کلیشه‌ها گذر کرده‌اند. داستان از این قرار است که رنو برای تبلیغ اتومبیل جدید خود، آن را در جاهایی از خود تهران، مثل میدان حسن‌آباد یا اتوبان صدر و … به نمایش گذاشته است و تصویرهای دوست‌داشتنی و بسیار زیبایی به وجود آورده است.

 

Talisman.jpg (416 KB)

 

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

 

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

 

1200-615-T-2_ig_w1200_h615.jpg (129 KB)

 

نظر شما درباره‌ی بیلبوردهای رنو تلیسمان چیست؟ خوشحال می‌شویم که بیلبوردهایی که تا به حال دوست داشته‌اید، چه ایرانی و چه غیر ایرانی به ما معرفی کنید و درباره‌شان برای‌مان بنویسید.