معرفی Lottie:
ابزاری بینظیر برای خلاقانهترین ایدههای شما
برای ما دیزاینرها همیشه متحرک کردن عناصری که در دیزاین استفاده میکنیم، جذابیت زیادی داشته است. جدای از اینکه دیزاینهای متحرک اغلب برای کاربرها نیز هیجانانگیز میباشد، ساخت آنها و دیدن نتیجه کار برای خود دیزاینر نیز لذتی غیرقابل وصف دارد. ولی دیزاینهای متحرک اغلب به سختی قابل پیادهسازی هستند و به کمال رساندن آنها هنگام پیادهسازی، مستلزم اختصاص زمان بسیار زیادی از طرف تیم پیادهسازیست.
امروز میخواهیم درباره ابزاری صحبت کنیم که قدم بزرگی در جهت سادهسازی پیادهسازی دیزاینهای متحرک برداشته است. قبلتر هم درباره خبرهایی که Airbnb در مجامع دیزاین ایجاد کرده بود صحبت کردهایم. این شرکت چند ماه قبل مجددا خبرساز شد و ابزاری متنباز به اسم Lottie را معرفی کرد.
با استفاده از این ابزار شما میتوانید انیمیشنهایی بُرداری (vector) را با پسوند JSON با کمک نرمافزار Adobe AfterEffect تولید کرده و تیم توسعه هم با استفاده از کتابخانه ارائه شده و استفاده از آن در اپلیکیشن، به راحتی آن انیمیشن را اجرا کند.
تجربه ما بعد از استفاده چندباره از این ابزار برای اجرای انیمیشنها و تعاملهای متحرک، نشان میدهد که گاهی انیمیشنها احتیاج به بازسازی دارند و باید گاهی تغییراتی در آنها اعمال که بتوان آنها را به شکلی عالی در اپلیکیشن اجرا کرد ولی همچنان سرعت بسیار زیادی به روند پیادهسازی میدهد.
پیشنهاد میکنم در اولین فرصت این ابزار را امتحان کرده و از طراحی انیمیشنها لذت ببرید.
در ادامه توجه شما را به چند انیمیشن اجرا شده که استفاده جلب میکنم.
https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e
(زمان حدودی مطالعه، ۸ دقیقه)
#ابزار #اینتراکشن #تجربه_کاربری #Lottie
@Dexign دیزاین
___
ابزاری بینظیر برای خلاقانهترین ایدههای شما
برای ما دیزاینرها همیشه متحرک کردن عناصری که در دیزاین استفاده میکنیم، جذابیت زیادی داشته است. جدای از اینکه دیزاینهای متحرک اغلب برای کاربرها نیز هیجانانگیز میباشد، ساخت آنها و دیدن نتیجه کار برای خود دیزاینر نیز لذتی غیرقابل وصف دارد. ولی دیزاینهای متحرک اغلب به سختی قابل پیادهسازی هستند و به کمال رساندن آنها هنگام پیادهسازی، مستلزم اختصاص زمان بسیار زیادی از طرف تیم پیادهسازیست.
امروز میخواهیم درباره ابزاری صحبت کنیم که قدم بزرگی در جهت سادهسازی پیادهسازی دیزاینهای متحرک برداشته است. قبلتر هم درباره خبرهایی که Airbnb در مجامع دیزاین ایجاد کرده بود صحبت کردهایم. این شرکت چند ماه قبل مجددا خبرساز شد و ابزاری متنباز به اسم Lottie را معرفی کرد.
با استفاده از این ابزار شما میتوانید انیمیشنهایی بُرداری (vector) را با پسوند JSON با کمک نرمافزار Adobe AfterEffect تولید کرده و تیم توسعه هم با استفاده از کتابخانه ارائه شده و استفاده از آن در اپلیکیشن، به راحتی آن انیمیشن را اجرا کند.
تجربه ما بعد از استفاده چندباره از این ابزار برای اجرای انیمیشنها و تعاملهای متحرک، نشان میدهد که گاهی انیمیشنها احتیاج به بازسازی دارند و باید گاهی تغییراتی در آنها اعمال که بتوان آنها را به شکلی عالی در اپلیکیشن اجرا کرد ولی همچنان سرعت بسیار زیادی به روند پیادهسازی میدهد.
پیشنهاد میکنم در اولین فرصت این ابزار را امتحان کرده و از طراحی انیمیشنها لذت ببرید.
در ادامه توجه شما را به چند انیمیشن اجرا شده که استفاده جلب میکنم.
https://medium.com/airbnb-engineering/introducing-lottie-4ff4a0afac0e
(زمان حدودی مطالعه، ۸ دقیقه)
#ابزار #اینتراکشن #تجربه_کاربری #Lottie
@Dexign دیزاین
___
Medium
Introducing Lottie
Our new open-source tool makes adding animation to native apps a snap.
دیزاینها را باید شُست، جور دیگر باید چید
چشمها بخشهای عجیبی از انسان هستند. چشمهای کاربران گاهی آنچه را که دیزاین کردهاید، آنطوری که نقشهاش را کشیدهاید، نمیبینند. گاهی شما تمام دقت خود را صرف کردهاید تا عناصر صفحه را در فواصل مساوی از یکدیگر یا در اندازههای برابر با یکدیگر دیزاین شوند، ولی چشمها آنها را تراز شده و یا هماندازه نمیبینند. سوال اینکه چطور باید دیزاین کرد؟
دانستن این موضوع به طراحان رابط کاربری، طراحان فونت یا حتی کسانی که صفحهآرایی انجام میدهند کمک میکند که دیزاینهایی چشمنوازتر انجام دهند.
قبلتر هم در مقالهای دیگر درباره این موضوع صحبت کرده بودیم، ولی اینبار میخواهیم بسیار مفصلتر و با مثالهای بسیاری این موضوع را بررسی کنیم.
در مقاله امروز آقای Slava Shestopalov با استفاده از بیش از ۵۰ نمونه و با توضیح جزئیتر (بخصوص روی اشکالی با گوشههای گرد) به ما در درک بهتر این مفهوم کمک میکند.
پیشنهاد میکنم مقاله امروز را از دست ندهید.
https://medium.muz.li/optical-effects-9fca82b4cd9a
(زمان حدودی مطالعه، ۱۸ دقیقه)
#آموزش #بررسی #مفاهیم #نمونهها
@Dexign دیزاین
___
چشمها بخشهای عجیبی از انسان هستند. چشمهای کاربران گاهی آنچه را که دیزاین کردهاید، آنطوری که نقشهاش را کشیدهاید، نمیبینند. گاهی شما تمام دقت خود را صرف کردهاید تا عناصر صفحه را در فواصل مساوی از یکدیگر یا در اندازههای برابر با یکدیگر دیزاین شوند، ولی چشمها آنها را تراز شده و یا هماندازه نمیبینند. سوال اینکه چطور باید دیزاین کرد؟
دانستن این موضوع به طراحان رابط کاربری، طراحان فونت یا حتی کسانی که صفحهآرایی انجام میدهند کمک میکند که دیزاینهایی چشمنوازتر انجام دهند.
قبلتر هم در مقالهای دیگر درباره این موضوع صحبت کرده بودیم، ولی اینبار میخواهیم بسیار مفصلتر و با مثالهای بسیاری این موضوع را بررسی کنیم.
در مقاله امروز آقای Slava Shestopalov با استفاده از بیش از ۵۰ نمونه و با توضیح جزئیتر (بخصوص روی اشکالی با گوشههای گرد) به ما در درک بهتر این مفهوم کمک میکند.
پیشنهاد میکنم مقاله امروز را از دست ندهید.
https://medium.muz.li/optical-effects-9fca82b4cd9a
(زمان حدودی مطالعه، ۱۸ دقیقه)
#آموزش #بررسی #مفاهیم #نمونهها
@Dexign دیزاین
___
Medium
Optical effects in user interfaces
How to make optically balanced icons, correct shapes alignment, and perfect corner rounding
کتابخانهها به شما بال میدن:
بررسی نسخه ۴۷ نرمافزار Sketch
چند وقت قبل با یکی از دوستانم که حالا به عنوان Android Engineer در شرکت Spotify کار میکند گپ می زدیم. Spotify بعد از منتشر کردن ویدئویی از نحوه کار تیمهایش، توجه خیلیها از جمله من را به ساختار تیمی خود جلب کرد. برایم خیلی جالب بود بدانم در شرکتی با این تعداد تیم و این تعداد نیروی انسانی، دیزاینرها چطور دیزاینهای خود را بصورت یکپارچه نگه میدارند؟
دوستم برایم توضیح داد که تیمی متشکل از چند دیزاینر ارشد تمامی عناصری را که در اپلیکیشنهای Spotify قرار دارد، در یه فایل جامع قرار دادهاند و دیزاینرهای تمام تیمهای کوچکتر، از آن عناصر دیزاین شده برای کار روی صفحات خود استفاده میکنند.
در کنار هیجانانگیز بودن این مقدار هماهنگی، تمام فکر من درگیر دهها سوال دیگر بود که با چه نرمافزاری کار میکنند؟ فایلهای خود را چطور با یکدیگر به اشتراک میگذارند؟ اصلا چطور از بهروزرسانی احتمالی عناصر دیزاین شده مطلع میشوند؟ و…
گرچه فرصت کم هردوی ما اجازه نداد بیشتر با یکدیگر صحبت کنیم ولی با مقدمه بالا میخواهم به معرفی نسخه جدید اپلیکیشن دوستداشتنی Sketch و ویژگی جدید و هیجانانگیزش بپردازم.
در مقاله امروز از زبان تیم Sketch میخوانیم که این نسخه شامل ۲ ویژگی مشخص به نام Library و Smooth Corner و چند بهینهسازی و بهبود کوچکتر است.
ویژگی Library دقیقا همان چیزی است که میتواند روند کاری تیمهای دیزاین که بر روی یک محصول کار میکنند را کاملا تغییر داده و مشابه Spotify کند. اگر با Symbolها در Sketch کار کرده باشید، میدانید که با استفاده از آنها میتوان عناصری را ساخته و در جاهای مختلف دیزاین خود استفاده کنید؛ حال با تغییر یکی از نمونههای استفاده شده، تمامی آنها بهروز شده و تغییر اعمال شده را میپذیرند.
حالا در نسخه جدید Sketch، شما Symbolهایی دارید که میتوانید آنها در یک فایل جدا ذخیره کرده و از آنها در فایلهای مختلف استفاده کنید. با تغییر در یکی از نمونهها، تمامی فایلها تغییر عنصر مورد نظر را به شما اطلاع داده و بهروز میشوند.
خیلی جالب است نه؟
در ادامه ویدئویی از کارکرد این ویژگی خواهیم دید.
پیشنهاد میکنم پس از دیدن ویدئو، باقی توضیحات را از زبان خود مقاله بخوانید.
https://blog.sketchapp.com/introducing-libraries-and-smooth-corners-in-sketch-47-2abc5dfc1fb3
(زمان حدودی مطالعه، ۷ دقیقه)
#رابط_کاربر #ابزار #اسکچ
@Dexign دیزاین
_
بررسی نسخه ۴۷ نرمافزار Sketch
چند وقت قبل با یکی از دوستانم که حالا به عنوان Android Engineer در شرکت Spotify کار میکند گپ می زدیم. Spotify بعد از منتشر کردن ویدئویی از نحوه کار تیمهایش، توجه خیلیها از جمله من را به ساختار تیمی خود جلب کرد. برایم خیلی جالب بود بدانم در شرکتی با این تعداد تیم و این تعداد نیروی انسانی، دیزاینرها چطور دیزاینهای خود را بصورت یکپارچه نگه میدارند؟
دوستم برایم توضیح داد که تیمی متشکل از چند دیزاینر ارشد تمامی عناصری را که در اپلیکیشنهای Spotify قرار دارد، در یه فایل جامع قرار دادهاند و دیزاینرهای تمام تیمهای کوچکتر، از آن عناصر دیزاین شده برای کار روی صفحات خود استفاده میکنند.
در کنار هیجانانگیز بودن این مقدار هماهنگی، تمام فکر من درگیر دهها سوال دیگر بود که با چه نرمافزاری کار میکنند؟ فایلهای خود را چطور با یکدیگر به اشتراک میگذارند؟ اصلا چطور از بهروزرسانی احتمالی عناصر دیزاین شده مطلع میشوند؟ و…
گرچه فرصت کم هردوی ما اجازه نداد بیشتر با یکدیگر صحبت کنیم ولی با مقدمه بالا میخواهم به معرفی نسخه جدید اپلیکیشن دوستداشتنی Sketch و ویژگی جدید و هیجانانگیزش بپردازم.
در مقاله امروز از زبان تیم Sketch میخوانیم که این نسخه شامل ۲ ویژگی مشخص به نام Library و Smooth Corner و چند بهینهسازی و بهبود کوچکتر است.
ویژگی Library دقیقا همان چیزی است که میتواند روند کاری تیمهای دیزاین که بر روی یک محصول کار میکنند را کاملا تغییر داده و مشابه Spotify کند. اگر با Symbolها در Sketch کار کرده باشید، میدانید که با استفاده از آنها میتوان عناصری را ساخته و در جاهای مختلف دیزاین خود استفاده کنید؛ حال با تغییر یکی از نمونههای استفاده شده، تمامی آنها بهروز شده و تغییر اعمال شده را میپذیرند.
حالا در نسخه جدید Sketch، شما Symbolهایی دارید که میتوانید آنها در یک فایل جدا ذخیره کرده و از آنها در فایلهای مختلف استفاده کنید. با تغییر در یکی از نمونهها، تمامی فایلها تغییر عنصر مورد نظر را به شما اطلاع داده و بهروز میشوند.
خیلی جالب است نه؟
در ادامه ویدئویی از کارکرد این ویژگی خواهیم دید.
پیشنهاد میکنم پس از دیدن ویدئو، باقی توضیحات را از زبان خود مقاله بخوانید.
https://blog.sketchapp.com/introducing-libraries-and-smooth-corners-in-sketch-47-2abc5dfc1fb3
(زمان حدودی مطالعه، ۷ دقیقه)
#رابط_کاربر #ابزار #اسکچ
@Dexign دیزاین
_
Sketch
Introducing Libraries and Smooth Corners in Sketch 47
Sketch 47 is here and, alongside a number of smaller bug fixes and improvements, this latest release includes one of our biggest updates yet — Libraries.
سرویس Dropbox، خوشحالتر از همیشه
چند روز قبل سرویس Dropbox که پیشتر هم در مقالههای مختلف نام آن را بردهایم، هویت بصری خود را بطور کامل بازطراحی کرد.
بازخوردهای این اتفاق، جالب و بعضا بسیار خندهدار بودند. قضیه از آنجایی شروع شد که رنگهایی که این سرویس در هویت بصری جدید خود در نظر گرفته، رنگهایی عجیب و البته جدید هستند که آدم را بیشتر به یاد رنگ پلیورها و جورابها میاندازد تا یک سرویس تا این حد جدی. همچنین نوع و زبان تصویرسازی که Dropbox در این هویت بصری جدید استفاده میکند کمی نامتعارف است.
خلاصه کلی از منتقدین دیزاین با کنایهها و مقایسههای عجیب و بعضی دیزاینرها با اشتراکگذاری طراحیهای خندهدار از جنس تصویرسازی جدید Dropbox، نظرات خود را ابراز کردند.
در این بین یک سایت هم به راه افتاد که رنگهای Dropbox جدید را با رنگهای Happy Socks یا همان جورابهای خوشحالی که با طرحهای رنگی در بازار وجود دارد مقایسه کرده و نام خود را Dropsox گذاشته است.
بعید نیست که این حرکت آغازگر موجی از بازطراحی هویت بصری برای سرویسهای دیگر، با این زبان جدید باشد.
پیشنهاد میکنم شما هم از این قافله عقب نمانید و سری به وبسایت Dropbox و بازخوردها را بخوانید.
https://dropsox.style
که طراحی آن کنایهست به:
https://dropbox.design
#رابط_کاربر #بازطراحی
@Dexign دیزاین
_______
چند روز قبل سرویس Dropbox که پیشتر هم در مقالههای مختلف نام آن را بردهایم، هویت بصری خود را بطور کامل بازطراحی کرد.
بازخوردهای این اتفاق، جالب و بعضا بسیار خندهدار بودند. قضیه از آنجایی شروع شد که رنگهایی که این سرویس در هویت بصری جدید خود در نظر گرفته، رنگهایی عجیب و البته جدید هستند که آدم را بیشتر به یاد رنگ پلیورها و جورابها میاندازد تا یک سرویس تا این حد جدی. همچنین نوع و زبان تصویرسازی که Dropbox در این هویت بصری جدید استفاده میکند کمی نامتعارف است.
خلاصه کلی از منتقدین دیزاین با کنایهها و مقایسههای عجیب و بعضی دیزاینرها با اشتراکگذاری طراحیهای خندهدار از جنس تصویرسازی جدید Dropbox، نظرات خود را ابراز کردند.
در این بین یک سایت هم به راه افتاد که رنگهای Dropbox جدید را با رنگهای Happy Socks یا همان جورابهای خوشحالی که با طرحهای رنگی در بازار وجود دارد مقایسه کرده و نام خود را Dropsox گذاشته است.
بعید نیست که این حرکت آغازگر موجی از بازطراحی هویت بصری برای سرویسهای دیگر، با این زبان جدید باشد.
پیشنهاد میکنم شما هم از این قافله عقب نمانید و سری به وبسایت Dropbox و بازخوردها را بخوانید.
https://dropsox.style
که طراحی آن کنایهست به:
https://dropbox.design
#رابط_کاربر #بازطراحی
@Dexign دیزاین
_______
دیزاینهایی که کاربر را صدا میزنند
صداها هم مثل بوها و رنگها، موجودات عجیب هستند. شنیدنشان خاطرهها، حس و حال بسیاری را با خود به همراه دارد. برای لحظاتی چشمهایتان را ببندید و فکر کنید که صدای بالا آمدن ویندوز یا مک را به خاطر دارید؟ صدای شروع اخبار ساعت ۱۴ شبکه یک صدا و سیمای ایران را چطور؟ صدای زنگ پیشفرض گوشیهای نوکیا و آیفون را چی؟ یا حتی معروفترین آواهای خاطرات ایرانیان: تبلیغات صاایران، بوتان و مودم دایلآپ!
حدود سه سال قبل، همراه یک تیم خوب به طراحی یک بازی Endless به نام Bring Me Up مشغول بودیم. وقتی به مرحله صداگذاری رسیدیم، در ابتدا تصمیم به دریافت صداهای رایگان روی اینترنت گرفتیم. نتیجه باب میلمان نبود. بعد از کمی فکر شروع کردیم به گفتن آواهایی با دهان و هرکدام را با کامپیوتر کمی تغییر داده و روی بازی قرار دادیم. نتیجه بسیار رضایتبخشتر بود.
گرچه این بازی که در عرض دو هفته طراحی و پیادهسازی شده بود، طرفدار زیادی پیدا نکرد، ولی تجربه ساخت یک بازی و بخصوص صداگذاری آن، به قدری برای من جذاب بود که به یکی از موضوعات مورد علاقهام در دیزاین تبدیل شد.
با مقدمه بالا، احتمالا فهمیدهاید که مقاله امروز درباره دیزاین صداهاست. صداهایی که ما برای دمیدن روح و دادن جان به رابطهای کاربری و محصولاتمان از آنها استفاده میکنیم.
این مقاله از پایهایترین نکات آغاز کرده و با گنجاندن نمونههای مختلفی از صداهای Notificationها و شما را در مسیر یادگیری استفاده کاملا حرفهای از صداها در محصولاتتان یاری خواهد کرد.
پیش از شروع خواندن این مقاله عالی، توجه شما را به ویدئویی که در ادامه ارسال شدهست جلب میکنم که کار بسیار خوبی از مجله WIRED است، درباره رواشناسی صداها.
https://icons8.com/articles/ui-sounds/
(زمان حدودی مطالعه، ۱۲ دقیقه + تماشای ویدئوها)
#طراحی_صدا
@Dexign فلسفه دیزاین
ــــــــــــــــــــ
صداها هم مثل بوها و رنگها، موجودات عجیب هستند. شنیدنشان خاطرهها، حس و حال بسیاری را با خود به همراه دارد. برای لحظاتی چشمهایتان را ببندید و فکر کنید که صدای بالا آمدن ویندوز یا مک را به خاطر دارید؟ صدای شروع اخبار ساعت ۱۴ شبکه یک صدا و سیمای ایران را چطور؟ صدای زنگ پیشفرض گوشیهای نوکیا و آیفون را چی؟ یا حتی معروفترین آواهای خاطرات ایرانیان: تبلیغات صاایران، بوتان و مودم دایلآپ!
حدود سه سال قبل، همراه یک تیم خوب به طراحی یک بازی Endless به نام Bring Me Up مشغول بودیم. وقتی به مرحله صداگذاری رسیدیم، در ابتدا تصمیم به دریافت صداهای رایگان روی اینترنت گرفتیم. نتیجه باب میلمان نبود. بعد از کمی فکر شروع کردیم به گفتن آواهایی با دهان و هرکدام را با کامپیوتر کمی تغییر داده و روی بازی قرار دادیم. نتیجه بسیار رضایتبخشتر بود.
گرچه این بازی که در عرض دو هفته طراحی و پیادهسازی شده بود، طرفدار زیادی پیدا نکرد، ولی تجربه ساخت یک بازی و بخصوص صداگذاری آن، به قدری برای من جذاب بود که به یکی از موضوعات مورد علاقهام در دیزاین تبدیل شد.
با مقدمه بالا، احتمالا فهمیدهاید که مقاله امروز درباره دیزاین صداهاست. صداهایی که ما برای دمیدن روح و دادن جان به رابطهای کاربری و محصولاتمان از آنها استفاده میکنیم.
این مقاله از پایهایترین نکات آغاز کرده و با گنجاندن نمونههای مختلفی از صداهای Notificationها و شما را در مسیر یادگیری استفاده کاملا حرفهای از صداها در محصولاتتان یاری خواهد کرد.
پیش از شروع خواندن این مقاله عالی، توجه شما را به ویدئویی که در ادامه ارسال شدهست جلب میکنم که کار بسیار خوبی از مجله WIRED است، درباره رواشناسی صداها.
https://icons8.com/articles/ui-sounds/
(زمان حدودی مطالعه، ۱۲ دقیقه + تماشای ویدئوها)
#طراحی_صدا
@Dexign فلسفه دیزاین
ــــــــــــــــــــ
blog.icons8.com
UI Sounds: Everything About User Interface Sounds
A sound can significantly improve the users’ experience and be useful where GIU can not. All that it takes - to put good sounds in the right places.
حاشیههایی شیرینتر از داستان
چند وقتیست که از کنفرانس اپل میگذرد. همان کنفرانسی که در آن iPhone X و برخی محصولات دیگرش را معرفی کرد.
مثل همیشه گمانهزنیهایی پیش از کنفرانس شده بود و همه کسانی که پیگیر بودند، میدانستند که باید منتظر چه چیزی باشند. خود اپل هم که انگار از این شایعات و حدسهای مردم لذت میبرد، با منتشر کردن عکسی از لوگوی کنفرانس، شرلوک درون مردم را قلقلک داد.
خلاصه کنفرانس برگزار شد و تغییراتی بزرگ و کوچک روی محصولات پیشین و نمونه جدید آنها معرفی شد. یکی از پرسروصداترین محصولات امسال اپل، iPhone X است. منظور من از سروصدا لزوما صحبتهای خوب درباره این دستگاه جدید نیست. این آیفون جدید، به سنسور تشخیص چهرهای (ساختاری مشابه دستگاههای Kinect) مجهز است که باعث شده طراحان اپل نتوانند صفحه نمایش دستگاه را بصورت لبه تا لبه (edge-to-edge) طراحی کنند. مردم در شبکههای اجتماعی، نام این قسمت را The Notch (به معنی فرورفتگی) نامیدند و شروع به ارائه ایدههای جالب، خندهدار و بعضا تحلیلهای مختلفی کردند.
مقاله امروز به بررسی حواشی و اتفاقات و صحبتهایی که درباره آیفون جدید در شبکههای اجتماعی شکل گرفت میپردازد و منابع و ایدههای خوبی را در طول مقاله معرفی میکند.
پیشنهاد میکنم این مقاله را از دست ندهید.
https://blog.prototypr.io/notch-crazy-iphone-x-mad-475f43d6ee26
(زمان حدودی مطالعه، ۱۰ دقیقه)
#بررسی #محصول #حواشی
@Dexign فلسفه دیزاین
ــــــــــــــــــ
چند وقتیست که از کنفرانس اپل میگذرد. همان کنفرانسی که در آن iPhone X و برخی محصولات دیگرش را معرفی کرد.
مثل همیشه گمانهزنیهایی پیش از کنفرانس شده بود و همه کسانی که پیگیر بودند، میدانستند که باید منتظر چه چیزی باشند. خود اپل هم که انگار از این شایعات و حدسهای مردم لذت میبرد، با منتشر کردن عکسی از لوگوی کنفرانس، شرلوک درون مردم را قلقلک داد.
خلاصه کنفرانس برگزار شد و تغییراتی بزرگ و کوچک روی محصولات پیشین و نمونه جدید آنها معرفی شد. یکی از پرسروصداترین محصولات امسال اپل، iPhone X است. منظور من از سروصدا لزوما صحبتهای خوب درباره این دستگاه جدید نیست. این آیفون جدید، به سنسور تشخیص چهرهای (ساختاری مشابه دستگاههای Kinect) مجهز است که باعث شده طراحان اپل نتوانند صفحه نمایش دستگاه را بصورت لبه تا لبه (edge-to-edge) طراحی کنند. مردم در شبکههای اجتماعی، نام این قسمت را The Notch (به معنی فرورفتگی) نامیدند و شروع به ارائه ایدههای جالب، خندهدار و بعضا تحلیلهای مختلفی کردند.
مقاله امروز به بررسی حواشی و اتفاقات و صحبتهایی که درباره آیفون جدید در شبکههای اجتماعی شکل گرفت میپردازد و منابع و ایدههای خوبی را در طول مقاله معرفی میکند.
پیشنهاد میکنم این مقاله را از دست ندهید.
https://blog.prototypr.io/notch-crazy-iphone-x-mad-475f43d6ee26
(زمان حدودی مطالعه، ۱۰ دقیقه)
#بررسی #محصول #حواشی
@Dexign فلسفه دیزاین
ــــــــــــــــــ
Medium
‘Notch’ crazy, iPhone X mad 📱🤡
What designers think of iPhone X
معرفی مفهوم Interaction Flows
دیزاین شدن یک محصول، قدمهای اول برای شکلگیری و بدنیا آمدنش است. در مسیر شکلگیری آن افراد و تیمهای مختلفی همکاری میکنند که دیزاینر یا تیم دیزاین و همچنین توسعهدهنده یا تیم توسعه از جمله آنها هستند. نحوه تعامل تیمهای مختلف با یکدیگر و انتقال خروجیهای یک تیم به عنوان ورودی، به تیم دیگر همیشه محل بحث و البته ارائه پیشنهادهایی برای بهبود بوده است.
وقتی محصولی دیزاین میشود، تمامی بخشها و صفحات آن، تمامی روندها و حتی انیمیشنهای تعاملی آن در ذهن دیزاینر شکل میگیرد. گاهی این جزئیات -که اتفاقا ممکن است کار را از سطحی خوب به عالی ببرند- در روند انتقال دیزاینها به تیم توسعه، به خوبی تفهیم نشده و باعث اتلاف وقت زیادی برای هردو طرف میشوند.
ما پیشتر هم درباره این چالش صحبت کرده و ابزارهایی برای انتقال انیمیشنهای تعاملی معرفی کردهایم. امروز میخواهیم راهحل پیشنهادی خانم Havana Nguyen را درباره انتقال روندهای دیزاین بررسی کنیم.
ایشان پس از طرح مساله بالا، راهحلهای مختلف ارائه شده را بررسی کرده و با ترکیب مفاهیم Wireflow و بنیانهای ساخت Microinteractionها، یک Template جدید با نام IX Flows ارائه کردند.
این Template از دید من ترکیبیست از Storyboard و Functional Specification، و مفهومیست کارآمد برای مستندسازی یک دیزاین و انتقال تمام و کمال آن به تیم توسعه.
پیشنهاد میکنم همین حالا مقاله را بررسی کرده تا بتوانید آن را در محصولات خود به کار ببندید.
https://uxplanet.org/an-introduction-to-interaction-flows-a4f783402529
(زمان حدودی مطالعه، ۱۰ دقیقه)
#تجربه_کاربر #UX
@Dexign فلسفه دیزاین
ـــــــــ
دیزاین شدن یک محصول، قدمهای اول برای شکلگیری و بدنیا آمدنش است. در مسیر شکلگیری آن افراد و تیمهای مختلفی همکاری میکنند که دیزاینر یا تیم دیزاین و همچنین توسعهدهنده یا تیم توسعه از جمله آنها هستند. نحوه تعامل تیمهای مختلف با یکدیگر و انتقال خروجیهای یک تیم به عنوان ورودی، به تیم دیگر همیشه محل بحث و البته ارائه پیشنهادهایی برای بهبود بوده است.
وقتی محصولی دیزاین میشود، تمامی بخشها و صفحات آن، تمامی روندها و حتی انیمیشنهای تعاملی آن در ذهن دیزاینر شکل میگیرد. گاهی این جزئیات -که اتفاقا ممکن است کار را از سطحی خوب به عالی ببرند- در روند انتقال دیزاینها به تیم توسعه، به خوبی تفهیم نشده و باعث اتلاف وقت زیادی برای هردو طرف میشوند.
ما پیشتر هم درباره این چالش صحبت کرده و ابزارهایی برای انتقال انیمیشنهای تعاملی معرفی کردهایم. امروز میخواهیم راهحل پیشنهادی خانم Havana Nguyen را درباره انتقال روندهای دیزاین بررسی کنیم.
ایشان پس از طرح مساله بالا، راهحلهای مختلف ارائه شده را بررسی کرده و با ترکیب مفاهیم Wireflow و بنیانهای ساخت Microinteractionها، یک Template جدید با نام IX Flows ارائه کردند.
این Template از دید من ترکیبیست از Storyboard و Functional Specification، و مفهومیست کارآمد برای مستندسازی یک دیزاین و انتقال تمام و کمال آن به تیم توسعه.
پیشنهاد میکنم همین حالا مقاله را بررسی کرده تا بتوانید آن را در محصولات خود به کار ببندید.
https://uxplanet.org/an-introduction-to-interaction-flows-a4f783402529
(زمان حدودی مطالعه، ۱۰ دقیقه)
#تجربه_کاربر #UX
@Dexign فلسفه دیزاین
ـــــــــ
Medium
An Introduction to Interaction Flows
Could IX Flows be a key to smoother design/dev handoffs?
آیا محصول شما در جیب جا میشود؟
میدانستید تعریف Mark Zuckerberg از Facebook چیست؟
«چیزی که شما میتواند اسم کسی را در آن جستجو کرده و کلی اطلاعات درباره آن فرد بفهمید.»
یا تعریف Travis Kalanick، از Uber (سرویسی که اسنپ مشابه آن است)؟
«شما دکمهای را فشار میدهید و ۵ دقیقه بعد یک مرسدس میاد و شما رو به هرکجا بخواهید میبره.»
در تعریف Mark Zuckerberg از سرویسی که بنیانگذار آن است، هیچ نشانی از «شبکه اجتماعی» یا دهها ویژگی منحصربفرد دیگر Facebook نیست.
آیا شما هم میتوانید تعریفی در این حد خلاصه و در یک جمله از محصول خود داشته باشید؟ بسیاری از ما اصرار داریم که تمامی ویژگیهای آن را در توضیح محصول بیاوریم و در نتیجه باعث سردرگمی دیگران میشویم.
در تمامی ارائههای شفاهی، توضیحات متنی و هر نوع توضیحی که هرجایی قرار است از محصول شما عنوان شود، باید بتوان بهینهترین آنها را ارائه داد که رسالت اصلی آن سرویس یا واضحترین ایده بنیانگذار آن را بیان کند.
مقاله امروز راهنماییست استراتژیک برای این بتوانید به این توضیح یک جملهای از محصول خود برسید.
این مقاله را از دست ندهید
https://medium.dave-bailey.com/the-magic-formula-to-describe-a-product-in-one-sentence-175ce38619c7
(زمان حدودی مطالعه، ۷ دقیقه)
#Design
@Dexign فلسفه دیزاین
ــــــ
میدانستید تعریف Mark Zuckerberg از Facebook چیست؟
«چیزی که شما میتواند اسم کسی را در آن جستجو کرده و کلی اطلاعات درباره آن فرد بفهمید.»
یا تعریف Travis Kalanick، از Uber (سرویسی که اسنپ مشابه آن است)؟
«شما دکمهای را فشار میدهید و ۵ دقیقه بعد یک مرسدس میاد و شما رو به هرکجا بخواهید میبره.»
در تعریف Mark Zuckerberg از سرویسی که بنیانگذار آن است، هیچ نشانی از «شبکه اجتماعی» یا دهها ویژگی منحصربفرد دیگر Facebook نیست.
آیا شما هم میتوانید تعریفی در این حد خلاصه و در یک جمله از محصول خود داشته باشید؟ بسیاری از ما اصرار داریم که تمامی ویژگیهای آن را در توضیح محصول بیاوریم و در نتیجه باعث سردرگمی دیگران میشویم.
در تمامی ارائههای شفاهی، توضیحات متنی و هر نوع توضیحی که هرجایی قرار است از محصول شما عنوان شود، باید بتوان بهینهترین آنها را ارائه داد که رسالت اصلی آن سرویس یا واضحترین ایده بنیانگذار آن را بیان کند.
مقاله امروز راهنماییست استراتژیک برای این بتوانید به این توضیح یک جملهای از محصول خود برسید.
این مقاله را از دست ندهید
https://medium.dave-bailey.com/the-magic-formula-to-describe-a-product-in-one-sentence-175ce38619c7
(زمان حدودی مطالعه، ۷ دقیقه)
#Design
@Dexign فلسفه دیزاین
ــــــ
Medium
The Art of Writing One-Sentence Product Denoscriptions
A look back at early interviews with Facebook and Uber CEOs illustrates an ingenious way to communicate hard-to-describe products.
این پست تا به حال نزدیک به ۱۹۰۰ بار مشاهده شده و به نظر میرسد برای خوانندگان جدید کانال جذاب باشد.
#پست_مجدد
#پست_مجدد
Forwarded from فلسفه دیزاین (Ramin Khatibi)
سوالاتی که هر دیزاینر جدیدی باید از تیمش بپرسد
در اکثر جاها صحبت از سوالاتی هست که باید در مصاحبه از دیزاینر جدیدتون بپرسید. اما این بار ما میخواهیم از زاویه دیگری به موضوع نگاه کنیم. میخواهیم سوالاتی رو بررسی کنیم که هر دیزاینر جدیدی که عضو یک تیم شده، باید از اعضای تیمش بپرسه.
اجازه بدید با یه داستان کوتاه شروع کنیم.
آقای Jason Cashdollar به تازگی به عضویت تیم دیزاین اپلیکیشن Facebook Lite در فیسبوک در اومده. اولین تسک Jason بازطراحی روند عضویت در این اپلیکیشن هست و هدفی که براش تعیین شد عبارت بود از «کاهش سردرگمی کاربرانی که میخواهند ثبتنام کنند.». Jason مراحلی که هر دیزاینری برای دیزاین طی میکنه رو رفت و در نهایت پروپوزالی رو برای تیمش ارسال کرد.
انتظار Jason این بود که تمام اعضای تیم با پیشنهاد اون به وجد بیان و هیجانزده بشن. ولی بعد از اینکه عکسالعمل تیم رو دید متوجه شد که به قول خودش «مسابقه اشتباهی رو برنده شده بود.» و چیزی که طراحی کرده بود کارایی لازم رو نداشت.
یک لحظه همینجا صبر کنید. حدس میزنید دلیل این موضوع چی بود؟
دلیل این بود که اطلاعات قبلی رو که لازم بود درباره پروژه بدونه، از تیم درخواست نکرده و مسیری اشتباهی رو برای بازطراحی این محصول پیش رفته بود.
بعد از این تجربه، Jason سوالاتی رو برای خودش تعیین کرد به همه اعضای تازه تیمها بده که از تیمشون بپرسن تا تجربه مشابهی نداشته باشن.
پیشنهاد میکنم داستان کامل و سوالاتی که پرسیدنشون رو پیشنهاد میده، از زبان خود Jason بخونید.
https://medium.com/facebook-design/questions-to-ask-as-a-new-designer-on-the-team-7e3ace0c787f
(زمان حدودی مطالعه، ۷ دقیقه)
پ. ن.
داشتن پایگاه دانش (knowledge base) همیشه به روند ملحق شدن اعضای جدید به تیم کمک میکنه. لازم نیست حتما از سیستمهای پیچیده استفاده کنید، ما ۸ ماهیست که یه نسخه کوچیکش رو در قالب یک Board روی Trello راهاندازی کردیم و بچههای تیم خودشون بروزرسانیش میکنند و کاملا کارمون رو راه میاندازه.
#تیم #طراحی_محصول
@Dexign دیزاین
___
در اکثر جاها صحبت از سوالاتی هست که باید در مصاحبه از دیزاینر جدیدتون بپرسید. اما این بار ما میخواهیم از زاویه دیگری به موضوع نگاه کنیم. میخواهیم سوالاتی رو بررسی کنیم که هر دیزاینر جدیدی که عضو یک تیم شده، باید از اعضای تیمش بپرسه.
اجازه بدید با یه داستان کوتاه شروع کنیم.
آقای Jason Cashdollar به تازگی به عضویت تیم دیزاین اپلیکیشن Facebook Lite در فیسبوک در اومده. اولین تسک Jason بازطراحی روند عضویت در این اپلیکیشن هست و هدفی که براش تعیین شد عبارت بود از «کاهش سردرگمی کاربرانی که میخواهند ثبتنام کنند.». Jason مراحلی که هر دیزاینری برای دیزاین طی میکنه رو رفت و در نهایت پروپوزالی رو برای تیمش ارسال کرد.
انتظار Jason این بود که تمام اعضای تیم با پیشنهاد اون به وجد بیان و هیجانزده بشن. ولی بعد از اینکه عکسالعمل تیم رو دید متوجه شد که به قول خودش «مسابقه اشتباهی رو برنده شده بود.» و چیزی که طراحی کرده بود کارایی لازم رو نداشت.
یک لحظه همینجا صبر کنید. حدس میزنید دلیل این موضوع چی بود؟
دلیل این بود که اطلاعات قبلی رو که لازم بود درباره پروژه بدونه، از تیم درخواست نکرده و مسیری اشتباهی رو برای بازطراحی این محصول پیش رفته بود.
بعد از این تجربه، Jason سوالاتی رو برای خودش تعیین کرد به همه اعضای تازه تیمها بده که از تیمشون بپرسن تا تجربه مشابهی نداشته باشن.
پیشنهاد میکنم داستان کامل و سوالاتی که پرسیدنشون رو پیشنهاد میده، از زبان خود Jason بخونید.
https://medium.com/facebook-design/questions-to-ask-as-a-new-designer-on-the-team-7e3ace0c787f
(زمان حدودی مطالعه، ۷ دقیقه)
پ. ن.
داشتن پایگاه دانش (knowledge base) همیشه به روند ملحق شدن اعضای جدید به تیم کمک میکنه. لازم نیست حتما از سیستمهای پیچیده استفاده کنید، ما ۸ ماهیست که یه نسخه کوچیکش رو در قالب یک Board روی Trello راهاندازی کردیم و بچههای تیم خودشون بروزرسانیش میکنند و کاملا کارمون رو راه میاندازه.
#تیم #طراحی_محصول
@Dexign دیزاین
___
Medium
Questions to ask as a new designer on the team
Last summer I switched teams at Facebook. My first project seemed simple enough: redesign the sign up flow for Facebook Lite, an app for…
دیزاین برای حافظه، دیزاین برای انسانها
در گذشته به اعداد اعتقاد نداشتم و سالهای سال تمامی حرفها و افسانههایی که درباره اعداد گفته میشد را نادیده میگرفتم. بعد از وارد شدن به زمینه دیزاین، وقتی داشتم سعی میکردم که در موضوعات مختلف اطلاعات کسب کنم، به جملاتی برخوردم که نظرم را تغییر داد.
«اگر به آدمها بگویید یک عدد تصادفی تک رقمی بگویند، اکثر آنها عدد ۷ را خواهند گفت.»
«بیشتر افراد میتوانند حداکثر ۷ چیز را در لحظه و در حافظه کوتاهمدت خود نگهدارند.»
و جملاتی از این دست.
امروز مقالهای را بررسی میکنیم که نویسنده آن، آقای Martin Jancik، طراحی در چارچوب محدودیتهای حافظه انسان را هدف قرارداده و با معرفی مقالات و نظریات مختلف سعی دارد ما را برای رسیدن به دیزاینی که هماهنگ با روندهای حافظه انسان است، یاری کند.
آقای Jancik مطالب مختلفی را در رابطه با این موضوع مطرح میکند که بخشیهایی از طراحی حسی، یکپارچگی طرح و غیره را شامل میشود.
از نکات جالب توجه در این مقاله که شاید بسیاری از ما از این زاویه به آنها نگاه نکرده باشیم، میتوان به تغییر رنگ Linkهای کلیک شده روی صفحات وب اشاره کرد که به حافظه ما کمک میکند.
پیشنهاد میکنم این مقاله جالب را همین حالا مطالعه کنید.
https://uxplanet.org/designing-for-human-memory-a2cdc0b6a75a
(زمان حدودی مطالعه، ۱۰ دقیقه)
#تجربه_کاربر #روانشناسی
@Dexign فلسفه دیزاین
____
در گذشته به اعداد اعتقاد نداشتم و سالهای سال تمامی حرفها و افسانههایی که درباره اعداد گفته میشد را نادیده میگرفتم. بعد از وارد شدن به زمینه دیزاین، وقتی داشتم سعی میکردم که در موضوعات مختلف اطلاعات کسب کنم، به جملاتی برخوردم که نظرم را تغییر داد.
«اگر به آدمها بگویید یک عدد تصادفی تک رقمی بگویند، اکثر آنها عدد ۷ را خواهند گفت.»
«بیشتر افراد میتوانند حداکثر ۷ چیز را در لحظه و در حافظه کوتاهمدت خود نگهدارند.»
و جملاتی از این دست.
امروز مقالهای را بررسی میکنیم که نویسنده آن، آقای Martin Jancik، طراحی در چارچوب محدودیتهای حافظه انسان را هدف قرارداده و با معرفی مقالات و نظریات مختلف سعی دارد ما را برای رسیدن به دیزاینی که هماهنگ با روندهای حافظه انسان است، یاری کند.
آقای Jancik مطالب مختلفی را در رابطه با این موضوع مطرح میکند که بخشیهایی از طراحی حسی، یکپارچگی طرح و غیره را شامل میشود.
از نکات جالب توجه در این مقاله که شاید بسیاری از ما از این زاویه به آنها نگاه نکرده باشیم، میتوان به تغییر رنگ Linkهای کلیک شده روی صفحات وب اشاره کرد که به حافظه ما کمک میکند.
پیشنهاد میکنم این مقاله جالب را همین حالا مطالعه کنید.
https://uxplanet.org/designing-for-human-memory-a2cdc0b6a75a
(زمان حدودی مطالعه، ۱۰ دقیقه)
#تجربه_کاربر #روانشناسی
@Dexign فلسفه دیزاین
____
Medium
Designing for Human Memory
How we can design interfaces that eliminate confusion and lower the cognitive effort.
این پست تا به حال نزدیک به ۲۱۰۰ بار مشاهده شده و به نظر میرسد برای خوانندگان جدید کانال جذاب باشد.
#پست_مجدد
#پست_مجدد
Forwarded from فلسفه دیزاین (Ramin Khatibi)
نمونههای جالب اینتراکشن (شماره ۱)
هر محصولی، هرچقدر هم که رابط کاربری زیبایی داشته باشه، برای القای حس و تجربه بهتر، به اینتراکشن (Interaction) احتیاج داره.
اینتراکشنها همون عکسالعملهای اغلب انیمیشنی هستند که اپلیکیشنها در پاسخ به اعمال کاربر (زدن روی یک دکمه، Swipe کردن و یا منتظر بارگذاری موندن و …) انجام میدن.
مثال خوبی که میشه از اینتراکشن در اپلیکیشنهای ایرانی زد اینه که در اپلیکیشن اسنپ وقتی منتظر قبول درخواست سفرتون از طرف یکی از رانندهها هستید، صفحه انتظاری میبینید که ماشینی در اون در حال حرکت هست. اگر روی ماشین بزنید، بوق میزنه. از بازخوردهایی که از این ایده ساده ولی جذاب و خلاقانه از افراد مختلف گرفتم به عینه دیدم که باعث شده کاربرها حس بسیار بهتری نسبت به محصول در مقایسه با نمونههای مشابهش داشته باشند.
برای اینکه بتونید بهتر و با ایدههای جالبتری اینتراکشنهای محصولتون رو طراحی کنید، چند وقت یک بار نمونههای این شکلی در کانال ارسال میکنم که دیدنشون باعث جرقه ایده در ذهن میشه.
توجه کنید که صفحه مقاله امروز به خاطر وجود انیمیشنهای gif که در اون وجود داره، کمی سنگین هست ممکنه نمایشش کند باشه.
https://medium.muz.li/ui-interactions-of-the-week-72-65ea29a45c49
(زمان حدودی مطالعه، ۱۰ دقیقه)
#انیمیشن #طراحی_محصول #اینتراکشن #تجربه_کاربری
@Dexign دیزاین
___
هر محصولی، هرچقدر هم که رابط کاربری زیبایی داشته باشه، برای القای حس و تجربه بهتر، به اینتراکشن (Interaction) احتیاج داره.
اینتراکشنها همون عکسالعملهای اغلب انیمیشنی هستند که اپلیکیشنها در پاسخ به اعمال کاربر (زدن روی یک دکمه، Swipe کردن و یا منتظر بارگذاری موندن و …) انجام میدن.
مثال خوبی که میشه از اینتراکشن در اپلیکیشنهای ایرانی زد اینه که در اپلیکیشن اسنپ وقتی منتظر قبول درخواست سفرتون از طرف یکی از رانندهها هستید، صفحه انتظاری میبینید که ماشینی در اون در حال حرکت هست. اگر روی ماشین بزنید، بوق میزنه. از بازخوردهایی که از این ایده ساده ولی جذاب و خلاقانه از افراد مختلف گرفتم به عینه دیدم که باعث شده کاربرها حس بسیار بهتری نسبت به محصول در مقایسه با نمونههای مشابهش داشته باشند.
برای اینکه بتونید بهتر و با ایدههای جالبتری اینتراکشنهای محصولتون رو طراحی کنید، چند وقت یک بار نمونههای این شکلی در کانال ارسال میکنم که دیدنشون باعث جرقه ایده در ذهن میشه.
توجه کنید که صفحه مقاله امروز به خاطر وجود انیمیشنهای gif که در اون وجود داره، کمی سنگین هست ممکنه نمایشش کند باشه.
https://medium.muz.li/ui-interactions-of-the-week-72-65ea29a45c49
(زمان حدودی مطالعه، ۱۰ دقیقه)
#انیمیشن #طراحی_محصول #اینتراکشن #تجربه_کاربری
@Dexign دیزاین
___
Medium
UI Interactions of the week #72
via Muzli design inspiration
۲۰ آموزش کاربردی انیمیشنهای رابط کاربری
این موضوع که حتما در اپلیکیشنها و سرویسهایی که دیزاین میکنید، از انیمیشن استفاده کنید لزوما خوب نیست. ولی اینکه ایدههای خوب برای ساخت انیمیشن داشته باشید و به بیان دیگر، ابزارها را بشناسید، به شما کمک خواهد کرد که دیزاین یک محصول را از همه جوانب ببینید و اکثر پتانسیلهای بالقوه در دیزاین آن را تشخیص بدهید.
قبلتر هم در درباره انیمیشنهای رابط کاربری صحبت کردهایم ولی اینبار میخواهم مقالهای را معرفی کنم که ۲۰ آموزش کاربردی، با نتیجه بسیار جذاب، در یک جا جمع کرده و در دسترس مخاطبان قرار داده است.
پیشنهاد میکنم این مقاله پرطرفدار را از دست نداده و از دیدن انیمیشنها و آموزشهای آن لذت برده و ایده بگیرید.
https://medium.muz.li/20-really-useful-ui-animation-tutorials-every-designer-should-know-c302085245d6
(زمان حدودی مطالعه، ۵ دقیقه)
#رابط_کاربر #انیمیشن
@Dexign فلسفه دیزاین
___
این موضوع که حتما در اپلیکیشنها و سرویسهایی که دیزاین میکنید، از انیمیشن استفاده کنید لزوما خوب نیست. ولی اینکه ایدههای خوب برای ساخت انیمیشن داشته باشید و به بیان دیگر، ابزارها را بشناسید، به شما کمک خواهد کرد که دیزاین یک محصول را از همه جوانب ببینید و اکثر پتانسیلهای بالقوه در دیزاین آن را تشخیص بدهید.
قبلتر هم در درباره انیمیشنهای رابط کاربری صحبت کردهایم ولی اینبار میخواهم مقالهای را معرفی کنم که ۲۰ آموزش کاربردی، با نتیجه بسیار جذاب، در یک جا جمع کرده و در دسترس مخاطبان قرار داده است.
پیشنهاد میکنم این مقاله پرطرفدار را از دست نداده و از دیدن انیمیشنها و آموزشهای آن لذت برده و ایده بگیرید.
https://medium.muz.li/20-really-useful-ui-animation-tutorials-every-designer-should-know-c302085245d6
(زمان حدودی مطالعه، ۵ دقیقه)
#رابط_کاربر #انیمیشن
@Dexign فلسفه دیزاین
___
Medium
20 Really Useful UI Animation Tutorials Every Designer Should Know
“20 Really Useful UI Animation Tutorials Every Designer Should Know” is published by Premiumuikits in Muzli - Design Inspiration.
کولهپشتی یک دیزاینر
اخیرا چند نفر از دوستان و آشنایان، افرادی علاقهمند به دیزاین را به من معرفی کردند و خواستند که در این مسیر کمکشان کنم. با وجود اینکه سالها قبل کارگاهها و کلاسهایی برگزار کرده بودم ولی همیشه افراد جدید با رویکردهای جدید به یادگیری دیزاین، من را به چالش کشیدهاند.
بعد از اینکه به هر سختی ممکن این روند معرفی و شروع یادگیری افراد، چند بار تکرار شد، متوجه شدم که قدمهای اولیه یادگیری را به مرور به شکل یک بسته شروع (Starter Kit) درآوردهام. درست مثل کولهپشتی یک گردشگر که وسایل داخل آن تمام چیزیست که برای برداشتن اولین قدمها نیاز دارد ولی وقتی به نقاط مشخصی در مسیر میرسد، برای ادامه دادن راه، نیاز دارد محتویات کولهاش را دوباره پُر کند یا دستی به سر و روی آنهایی که زیاد استفاده شدهاند بکشد.
در جستجوهایم به وبسایت Designer Lynx برخوردم. جایی که شاید ۸۰ درصد منابعی را که برای یادگیری معرفی میکنم، یکجا جمع کردهست.
هیجانزده دست به صفحهکلید بُردم تا دربارهش برای شما بنویسم.
درست است که بخشهای مختلف این وبسایت دستچینی هستند از بهترین منابع شروع دیزاین محصولات دیجیتال، ولی صرفا ابزارهای کولهپشتی شما به حساب میآیند. حتی وقتی شما بهترینها را در کولهپشتی خود داشته باشید، اگر به کار نبندیدشان، فقط سنگینی آنها را به دوش کشیدهاید.
کتابها و پادکستهای معرفی شده این وبسایت تاثیرات زیادی در زندگی کاری من داشتهاند. پیشنهاد میکنم زمان بستن کولهپشتی خود، آنها را جا نگذارید.
https://www.designerlynx.co/
#معرفی_منبع #UX
@Dexign فلسفه دیزاین
____
اخیرا چند نفر از دوستان و آشنایان، افرادی علاقهمند به دیزاین را به من معرفی کردند و خواستند که در این مسیر کمکشان کنم. با وجود اینکه سالها قبل کارگاهها و کلاسهایی برگزار کرده بودم ولی همیشه افراد جدید با رویکردهای جدید به یادگیری دیزاین، من را به چالش کشیدهاند.
بعد از اینکه به هر سختی ممکن این روند معرفی و شروع یادگیری افراد، چند بار تکرار شد، متوجه شدم که قدمهای اولیه یادگیری را به مرور به شکل یک بسته شروع (Starter Kit) درآوردهام. درست مثل کولهپشتی یک گردشگر که وسایل داخل آن تمام چیزیست که برای برداشتن اولین قدمها نیاز دارد ولی وقتی به نقاط مشخصی در مسیر میرسد، برای ادامه دادن راه، نیاز دارد محتویات کولهاش را دوباره پُر کند یا دستی به سر و روی آنهایی که زیاد استفاده شدهاند بکشد.
در جستجوهایم به وبسایت Designer Lynx برخوردم. جایی که شاید ۸۰ درصد منابعی را که برای یادگیری معرفی میکنم، یکجا جمع کردهست.
هیجانزده دست به صفحهکلید بُردم تا دربارهش برای شما بنویسم.
درست است که بخشهای مختلف این وبسایت دستچینی هستند از بهترین منابع شروع دیزاین محصولات دیجیتال، ولی صرفا ابزارهای کولهپشتی شما به حساب میآیند. حتی وقتی شما بهترینها را در کولهپشتی خود داشته باشید، اگر به کار نبندیدشان، فقط سنگینی آنها را به دوش کشیدهاید.
کتابها و پادکستهای معرفی شده این وبسایت تاثیرات زیادی در زندگی کاری من داشتهاند. پیشنهاد میکنم زمان بستن کولهپشتی خود، آنها را جا نگذارید.
https://www.designerlynx.co/
#معرفی_منبع #UX
@Dexign فلسفه دیزاین
____
هنری جاری، از سرچشمههای مراقبه
مدتها قبل طراحی دفترهای کار شرکتهای بزرگ تکنولوژی در اینترنت همهگیر شد و خیلی از ما این عکسها را دست به دست کرده و به دوستانمان نشان میدادیم و احتمالا حالا هم دلمان بخواهد در فضاهایی مشابه کار کنیم.بسیاری از شرکتهای سایر کشورها از جمله ایران هم همان رویکرد را در دیزاین محیط داخلی دفتر خود در نظر گرفتند.
از رویکردهای قدیمیتر میشود به فوتبالدستی و از رویکردهای جدیدتر به هماهنگی فضا و موضوع سرویسی که آن شرکت ارائه میدهد اشاره کرد. که البته تا امروز بخش اول، یعنی فوتبالدستی، اقبال بیشتری در ایران پیدا کرد.
امروز درباره یک دیزاینر فضاهای داخلی استارتاپها صحبت میکنیم، خانم Kelly Robinson. ایشان طراح داخلی شرکتهایی مثل Airbnb، SoundCloud و همچنین Headspace بودهاند. دیزاینهای خانم Robinson به نوشتار خود مقاله، «ضدفضای کار» یا Anti-Office Space است. اعتقاد جالب ایشان این است که باید هر فضا، هر حسی را که لازم است به کاربر آن محیط بدهد.
«وقتی افراد حس کنند که فضای شرکت از حضور آنها استقبال میکند، احساس راحتی بیشتری خواهند داشت و بیشتر خودشان خواهند بود.»
از بین همه این طراحیهای داخلی، شرکت Headspace بیشترین جذابیت و هیجان را برای من داشت، چراکه راستش اصلا فکرش را نمیکردم انقدر شرکت بزرگی شده باشد.
خانم Robinson میگوید که جای تمرکز روی طراحی فضا، روی طراحی جریان انرژی تمرکز دارد. تکنیکهای مختلف ایشان در این مقاله به اختصار آورده شده که اکثر آنها متاثر از «مراقبه» یا meditation و «یوگا»ست.
این مقاله و عکسهای جذابش را از دست ندهید.
https://magenta.as/zen-and-the-art-of-designing-startups-91b172de8d0a
(زمان حدودی مطالعه، ۱۱ دقیقه)
پ. ن.
نمیدانم چرا بعضی از ما به جای «مراقبه» میگوییم meditation. به نظرم مراقبه کلمه بسیار زیباتریست. اپلیکیشن بینظیر Headspace را برای مراقبه از دست ندهید.
#Design
@Dexign فلسفه دیزاین
____
مدتها قبل طراحی دفترهای کار شرکتهای بزرگ تکنولوژی در اینترنت همهگیر شد و خیلی از ما این عکسها را دست به دست کرده و به دوستانمان نشان میدادیم و احتمالا حالا هم دلمان بخواهد در فضاهایی مشابه کار کنیم.بسیاری از شرکتهای سایر کشورها از جمله ایران هم همان رویکرد را در دیزاین محیط داخلی دفتر خود در نظر گرفتند.
از رویکردهای قدیمیتر میشود به فوتبالدستی و از رویکردهای جدیدتر به هماهنگی فضا و موضوع سرویسی که آن شرکت ارائه میدهد اشاره کرد. که البته تا امروز بخش اول، یعنی فوتبالدستی، اقبال بیشتری در ایران پیدا کرد.
امروز درباره یک دیزاینر فضاهای داخلی استارتاپها صحبت میکنیم، خانم Kelly Robinson. ایشان طراح داخلی شرکتهایی مثل Airbnb، SoundCloud و همچنین Headspace بودهاند. دیزاینهای خانم Robinson به نوشتار خود مقاله، «ضدفضای کار» یا Anti-Office Space است. اعتقاد جالب ایشان این است که باید هر فضا، هر حسی را که لازم است به کاربر آن محیط بدهد.
«وقتی افراد حس کنند که فضای شرکت از حضور آنها استقبال میکند، احساس راحتی بیشتری خواهند داشت و بیشتر خودشان خواهند بود.»
از بین همه این طراحیهای داخلی، شرکت Headspace بیشترین جذابیت و هیجان را برای من داشت، چراکه راستش اصلا فکرش را نمیکردم انقدر شرکت بزرگی شده باشد.
خانم Robinson میگوید که جای تمرکز روی طراحی فضا، روی طراحی جریان انرژی تمرکز دارد. تکنیکهای مختلف ایشان در این مقاله به اختصار آورده شده که اکثر آنها متاثر از «مراقبه» یا meditation و «یوگا»ست.
این مقاله و عکسهای جذابش را از دست ندهید.
https://magenta.as/zen-and-the-art-of-designing-startups-91b172de8d0a
(زمان حدودی مطالعه، ۱۱ دقیقه)
پ. ن.
نمیدانم چرا بعضی از ما به جای «مراقبه» میگوییم meditation. به نظرم مراقبه کلمه بسیار زیباتریست. اپلیکیشن بینظیر Headspace را برای مراقبه از دست ندهید.
#Design
@Dexign فلسفه دیزاین
____
Medium
Zen and the Art of Designing Startups
How Kelly Robinson creates inspiring offices for the likes of Airbnb, Headspace, and SoundCloud.
باشه/بیخیال یا بیخیال/باشه؟
یکی از چالشهایی که احتمالا با آن مواجه شدهاید، انتخاب جای دکمههای یک صفحه است. اینکه دکمه Ok در سمت راست دکمه Cancel قرار گیرد یا برعکس.
امروز مقالهای را معرفی میکنم که به جمعآوری اطلاعات و نمونههای مختلف در اینباره پرداخته و نظرات نویسنده را هم در میان آنها بصورت نتیجهگیریهایی برای شفافتر کردن موضوع، مطرح کرده است.
این مقاله با بررسی نمونههایی از سیستمعاملهای مختلف و یا نسخههای مختلف یک سیستمعامل، به ما کمک میکند تا با دیدن نمونهها و نظرات سایر دیزاینرها، بتوانیم تصمیمی با پشتوانه استدلالی محکمتر بگیریم.
چیزی که به من شخصا در Focus Groupهای مختلف با تعداد اعضای متفاوت، ثابت شده این است که مهمترین نکته در موفقیت دیزاین در مواجهه با چنین چالشهایی، اعمال کمترین تغییر در Pattern استفاده کاربران هر پلتفرم است. چراکه به عقیده من «بهترین» جواب در دیزاین وجود ندارد و به شرط تست کردن ایدههایتان، تصمیمهای «به اندازه کافی خوب» هم میتواند در وقت شما صرفهجویی کرده و احتمال موفقیت شما را افزایش دهد.
پیشنهاد میکنم این مقاله را از دست ندهید.
https://medium.muz.li/ok-key-and-cancel-key-which-one-should-be-set-up-on-the-left-4780e86c16eb
(زمان حدودی مطالعه، ۷ دقیقه)
#بررسی #چالش
@Dexign فلسفه دیزاین
____
یکی از چالشهایی که احتمالا با آن مواجه شدهاید، انتخاب جای دکمههای یک صفحه است. اینکه دکمه Ok در سمت راست دکمه Cancel قرار گیرد یا برعکس.
امروز مقالهای را معرفی میکنم که به جمعآوری اطلاعات و نمونههای مختلف در اینباره پرداخته و نظرات نویسنده را هم در میان آنها بصورت نتیجهگیریهایی برای شفافتر کردن موضوع، مطرح کرده است.
این مقاله با بررسی نمونههایی از سیستمعاملهای مختلف و یا نسخههای مختلف یک سیستمعامل، به ما کمک میکند تا با دیدن نمونهها و نظرات سایر دیزاینرها، بتوانیم تصمیمی با پشتوانه استدلالی محکمتر بگیریم.
چیزی که به من شخصا در Focus Groupهای مختلف با تعداد اعضای متفاوت، ثابت شده این است که مهمترین نکته در موفقیت دیزاین در مواجهه با چنین چالشهایی، اعمال کمترین تغییر در Pattern استفاده کاربران هر پلتفرم است. چراکه به عقیده من «بهترین» جواب در دیزاین وجود ندارد و به شرط تست کردن ایدههایتان، تصمیمهای «به اندازه کافی خوب» هم میتواند در وقت شما صرفهجویی کرده و احتمال موفقیت شما را افزایش دهد.
پیشنهاد میکنم این مقاله را از دست ندهید.
https://medium.muz.li/ok-key-and-cancel-key-which-one-should-be-set-up-on-the-left-4780e86c16eb
(زمان حدودی مطالعه، ۷ دقیقه)
#بررسی #چالش
@Dexign فلسفه دیزاین
____
Medium
“Ok-Key” and “Cancel-Key”, Which One Should Be Set Up on the Left?
“Ok-key” and “cancel-key”, which one should be set up on the left? It’s an eternal war of button sort between UI designers preferring…
چه کسی پیروز این مسابقه سرعت است؟
در وجود تمام ما دیزاینرها و شاید کل کسانی که کارهای خلاقانه انجام میدهند، چیزی هست که اجازه نمیدهد آرام بگیریم. هربار چیزی را میبینیم، حتی اگر آن چیز دارد درست کار میکند، علاقه داریم آن را بهتر کنیم.
صفحات بارگذاری یا Loading، همیشه حیاط خلوتی برای دیزاینرها بودهاند تا ایدههای خود را در آن تست کنند. اهمیت این امر از دو جهت است، اول اینکه دیزاینرها در صفحهای با کمترین پیچیدگی، ایده خود را پیاده کرده و دوم اینکه کاربر را برای حس نکردن زمان بارگذاری، جستجو و هر اتفاقی که در جریان است، کمک میکنند.
در همین راستا، مدتیست شرکتهایی مثل Facebook و Google دست به پیاده کردن مدلی از طراحی Loading زدند که به اسامی Non-Blocking UI، Progressive Loading و … معروف شد.
راستش را که بخواهید، از نظر من هم این دیزاین بسیار زیباتر و جذابتر از آن عناصر چرخان که قبلتر در Loadingها استفاده میشد، است. ولی این اتفاق همیشه هم خوب نیست. میپرسید چرا؟
پاسخ سادهست، به خاطره همین جذابیت کاربر با دقت و توجه بیشتری به صفحه نگاه کرده و حس میکند که زمان بارگذاری طولانیتر است. دلیل قرار دادن آینه در آسانسورها هم این است که ما سرگرم شده و کُندی سرعت رسیدن به طبقه مورد نظرمان را حس نکنیم، ولی در این Loadingهای جدید، یه حرکت خاص مدام تکرار شده و به خاطر جلب توجه، باعث کلافه شدن کاربر میشود.
در مقاله امروز، Kathryn Faulkner و Katherine Olvera، دو طراح تجربه کاربری، تستی را ترتیب دادهاند که بازخورد کاربران از حالتهای مختلف Loading را تست کنند.
نتایج جالب و قابل تامل است:
https://www.viget.com/articles/a-bone-to-pick-with-skeleton-screens
(زمان حدودی مطالعه، ۵ دقیقه)
#بررسی #چالش #Loading
@Dexign فلسفه دیزاین
____
در وجود تمام ما دیزاینرها و شاید کل کسانی که کارهای خلاقانه انجام میدهند، چیزی هست که اجازه نمیدهد آرام بگیریم. هربار چیزی را میبینیم، حتی اگر آن چیز دارد درست کار میکند، علاقه داریم آن را بهتر کنیم.
صفحات بارگذاری یا Loading، همیشه حیاط خلوتی برای دیزاینرها بودهاند تا ایدههای خود را در آن تست کنند. اهمیت این امر از دو جهت است، اول اینکه دیزاینرها در صفحهای با کمترین پیچیدگی، ایده خود را پیاده کرده و دوم اینکه کاربر را برای حس نکردن زمان بارگذاری، جستجو و هر اتفاقی که در جریان است، کمک میکنند.
در همین راستا، مدتیست شرکتهایی مثل Facebook و Google دست به پیاده کردن مدلی از طراحی Loading زدند که به اسامی Non-Blocking UI، Progressive Loading و … معروف شد.
راستش را که بخواهید، از نظر من هم این دیزاین بسیار زیباتر و جذابتر از آن عناصر چرخان که قبلتر در Loadingها استفاده میشد، است. ولی این اتفاق همیشه هم خوب نیست. میپرسید چرا؟
پاسخ سادهست، به خاطره همین جذابیت کاربر با دقت و توجه بیشتری به صفحه نگاه کرده و حس میکند که زمان بارگذاری طولانیتر است. دلیل قرار دادن آینه در آسانسورها هم این است که ما سرگرم شده و کُندی سرعت رسیدن به طبقه مورد نظرمان را حس نکنیم، ولی در این Loadingهای جدید، یه حرکت خاص مدام تکرار شده و به خاطر جلب توجه، باعث کلافه شدن کاربر میشود.
در مقاله امروز، Kathryn Faulkner و Katherine Olvera، دو طراح تجربه کاربری، تستی را ترتیب دادهاند که بازخورد کاربران از حالتهای مختلف Loading را تست کنند.
نتایج جالب و قابل تامل است:
https://www.viget.com/articles/a-bone-to-pick-with-skeleton-screens
(زمان حدودی مطالعه، ۵ دقیقه)
#بررسی #چالش #Loading
@Dexign فلسفه دیزاین
____
https://www.viget.com
A Bone to Pick with Skeleton Screens | Viget
Facebook and Google use skeleton screens to make their apps feel faster. Should you be using them too?