نمونههای جالب اینتراکشن (شماره ۲)
در ادامه معرفی ایدههای جالب اینتراکشن، همونطور که گفته بودم برای اینکه بتونید بهتر و با ایدههای جالبتری اینتراکشنهای محصولتون رو طراحی کنید، چند وقت یک بار نمونههای این شکلی در کانال ارسال میکنم.
این هم پست دوم معرفی این مجموعه انیمیشنهای اینتراکشن.
توجه کنید که صفحه مقاله امروز به خاطر وجود انیمیشنهای gif که در اون وجود داره، کمی سنگین هست ممکنه بارگذاری صفحه کمی کند باشه.
https://medium.muz.li/ui-interactions-of-the-week-81-37d6aa734dde
#انیمیشن #طراحی_محصول #اینتراکشن #تجربه_کاربری
@Dexign دیزاین
___
در ادامه معرفی ایدههای جالب اینتراکشن، همونطور که گفته بودم برای اینکه بتونید بهتر و با ایدههای جالبتری اینتراکشنهای محصولتون رو طراحی کنید، چند وقت یک بار نمونههای این شکلی در کانال ارسال میکنم.
این هم پست دوم معرفی این مجموعه انیمیشنهای اینتراکشن.
توجه کنید که صفحه مقاله امروز به خاطر وجود انیمیشنهای gif که در اون وجود داره، کمی سنگین هست ممکنه بارگذاری صفحه کمی کند باشه.
https://medium.muz.li/ui-interactions-of-the-week-81-37d6aa734dde
#انیمیشن #طراحی_محصول #اینتراکشن #تجربه_کاربری
@Dexign دیزاین
___
Muzli -Design Inspiration
UI Interactions of the week #81
via Muzli design inspiration
قدرت ناشناخته فضاهای خالی
همه ما بارها جملاتی مثل «موسیقی، فضای خالی بین نُتهاست.» یا «هر کُل، مجموعهای از جزئیات است.» و … را شنیدهایم.
همه این جملات سعی دارند اهمیت کامپوزیسیون یا Composition را به ما بگویند. هرجا مجموعهای وجود دارد که یک «کُل» را تشکیل دادهست، کامپوزیسیون نقش مهمی ایفا میکند.
با مقاله امروز، مطلبی مرتبط با مقدمه بالا را مرور خواهیم کرد که به بررسی اهمیت و قدرت «فضاهای خالی»، Negative Spaces یا Whitespaces، این ابزارهای قدتمندی در دیزاین، میپردازد.
در این مقاله، آقای Nick Babich با اشاره به چهار اتفاق اصلی که فضاهای خالی باعث آن میشوند، قدرت این فضاها را به مخاطبین نمایش میدهد.
در این مطلب در کنار مثالهایی از سرویس معروف Dropbox، اصولی مانند گشتالت، تایپوگرافی و ساختن حس با استفاده از دیزاین به چشم میخورد که پیشتر درباره آنها مطالبی در کانال ارائه شده است.
مقالات آقای Nick Babich همیشه ریشهها و پایههای دیزاین را هدف میگیرد و با بررسی دقیق و نگاه از زاویهای جدید، موضوع مورد بحث را به بهترین شکل بیان میکند.
پیشنهاد میکنم فرصت را از دست نداده و همین حالا این مقاله را مطالعه کنید.
https://uxplanet.org/the-power-of-whitespace-a1a95e45f82b
(زمان حدودی مطالعه، ۸ دقیقه)
#رابط_کاربری #اصول #فضاهای_خال
@Dexign دیزاین
___
همه ما بارها جملاتی مثل «موسیقی، فضای خالی بین نُتهاست.» یا «هر کُل، مجموعهای از جزئیات است.» و … را شنیدهایم.
همه این جملات سعی دارند اهمیت کامپوزیسیون یا Composition را به ما بگویند. هرجا مجموعهای وجود دارد که یک «کُل» را تشکیل دادهست، کامپوزیسیون نقش مهمی ایفا میکند.
با مقاله امروز، مطلبی مرتبط با مقدمه بالا را مرور خواهیم کرد که به بررسی اهمیت و قدرت «فضاهای خالی»، Negative Spaces یا Whitespaces، این ابزارهای قدتمندی در دیزاین، میپردازد.
در این مقاله، آقای Nick Babich با اشاره به چهار اتفاق اصلی که فضاهای خالی باعث آن میشوند، قدرت این فضاها را به مخاطبین نمایش میدهد.
در این مطلب در کنار مثالهایی از سرویس معروف Dropbox، اصولی مانند گشتالت، تایپوگرافی و ساختن حس با استفاده از دیزاین به چشم میخورد که پیشتر درباره آنها مطالبی در کانال ارائه شده است.
مقالات آقای Nick Babich همیشه ریشهها و پایههای دیزاین را هدف میگیرد و با بررسی دقیق و نگاه از زاویهای جدید، موضوع مورد بحث را به بهترین شکل بیان میکند.
پیشنهاد میکنم فرصت را از دست نداده و همین حالا این مقاله را مطالعه کنید.
https://uxplanet.org/the-power-of-whitespace-a1a95e45f82b
(زمان حدودی مطالعه، ۸ دقیقه)
#رابط_کاربری #اصول #فضاهای_خال
@Dexign دیزاین
___
Medium
The Power Of Whitespace
by Nick Babich
رازِ تعادل بین کار و زندگی شخصی
بهمن ماه ۳ سال پیش بود که به خودم آمدم و دیدم ۳ کار بصورت پروژه و با زمانبندی فشرده قبول کردهام و از طرف دیگر در شرکتی که پارهوقت در آن مشغول بودم دو پروژه در دست طراحی دارم. با سختی فراوان و کمی تاخیر در موعدهای تحویل، تمامی کارها را به سرانجام رساندم. برای منی که همیشه به خاطر علاقه بسیار زیادم به دیزاین، از کار کردن لذت میبردم، سخت بود که ببینم در آن برهه زمانی، برای اولین بار در تمام این سالها، حس بدی پیدا کردهام. در آغاز سال بعد کارهای خود را سبکتر کرده و تلاشی مداوم را برای جایگزینی کیفیت به جای کمیت، در کارهای شرکت و پروژههای شخصی آغاز کردم.
ولی همیشه این سوال در ذهن من باقی ماند: افرادی که در شرکتهای بزرگ دنیا کار میکنند که شاید یک ساعت کار آنها و تصمیمی که در عرض چند دقیقه میگیرند، سرنوشت سرویسی را تعیین میکند که میلیونها نفر از آن استفاده میکنند، چگونه بین کار و زندگی تعادل ایجاد میکنند؟
خانم Julie Zhou، معاون دیزاین Facebook که بارها از او گفتهام، در جواب یکی از خوانندگان خود به این موضوع میپردازد.
خانم Zhou در شرکتی کار میکند که به گفته دو هفته پیشِ Mark Zuckerberg حالا ۲ میلیارد کاربر دارد (جمعیت کل جهان ۷ میلیارد نفر است.) و مسئولیت هر تصمیم مدیران آن چندین برابر شدهست.
ایشان در جواب، با اشاره به اینکه این سوال دغدغه بسیاری از کسانیست که در Silicon Valley در تکاپوی رسیدن به موفقیت هستند، بصورت موردی به چند نکته کلیدی از تجربیات خود میپردازد که رعایت کردن و توجه به آنها، ما را تصمیمگیری درباره مرزهای بین کار و زندگی شخصی، کمک میکند.
پیشنهاد میکنم همین حالا این مقاله بسیار لذتبخش و روشنگر را مطالعه کنید.
https://medium.com/the-year-of-the-looking-glass/the-mystery-of-work-life-balance-b8cf09c140f8
(زمان حدودی مطالعه، ۱۰ دقیقه)
پ. ن.
شاید خالی از لطف نباشد که به این موضوع هم اشاره کنم که چندی قبل، آقای Tobias van Schneider، طراح ارشد سابق Spotify، کسی که علاوه بر وبلاگنویسی، انجام مصاحبه با افراد و ساخت پادکست، به سخنرانی در جمعهای مختلف و همینطور انجام پروژههای مختلف میپردازد، در نوشتهای به سوال زیر پاسخ داده بود:
چگونه فرصت میکنید تمام این کارها را انجام دهید؟
آقای van Schneider در جواب گفته بود که هیچ لحظهای را از دست نمیدهم.
وقتی از سر کار به خانه میآیم، بدون از دست دادن لحظهای، پای کارهای شخصی خود مینشنیم و آنها را با علاقه انجام میدهم. چون میدانم اگر استراحت کنم، بسیار سخت دوباره کار را آغاز میکنم.
#زندگی_دیزاینر #سبک_زندگی
@Dexign دیزاین
___
بهمن ماه ۳ سال پیش بود که به خودم آمدم و دیدم ۳ کار بصورت پروژه و با زمانبندی فشرده قبول کردهام و از طرف دیگر در شرکتی که پارهوقت در آن مشغول بودم دو پروژه در دست طراحی دارم. با سختی فراوان و کمی تاخیر در موعدهای تحویل، تمامی کارها را به سرانجام رساندم. برای منی که همیشه به خاطر علاقه بسیار زیادم به دیزاین، از کار کردن لذت میبردم، سخت بود که ببینم در آن برهه زمانی، برای اولین بار در تمام این سالها، حس بدی پیدا کردهام. در آغاز سال بعد کارهای خود را سبکتر کرده و تلاشی مداوم را برای جایگزینی کیفیت به جای کمیت، در کارهای شرکت و پروژههای شخصی آغاز کردم.
ولی همیشه این سوال در ذهن من باقی ماند: افرادی که در شرکتهای بزرگ دنیا کار میکنند که شاید یک ساعت کار آنها و تصمیمی که در عرض چند دقیقه میگیرند، سرنوشت سرویسی را تعیین میکند که میلیونها نفر از آن استفاده میکنند، چگونه بین کار و زندگی تعادل ایجاد میکنند؟
خانم Julie Zhou، معاون دیزاین Facebook که بارها از او گفتهام، در جواب یکی از خوانندگان خود به این موضوع میپردازد.
خانم Zhou در شرکتی کار میکند که به گفته دو هفته پیشِ Mark Zuckerberg حالا ۲ میلیارد کاربر دارد (جمعیت کل جهان ۷ میلیارد نفر است.) و مسئولیت هر تصمیم مدیران آن چندین برابر شدهست.
ایشان در جواب، با اشاره به اینکه این سوال دغدغه بسیاری از کسانیست که در Silicon Valley در تکاپوی رسیدن به موفقیت هستند، بصورت موردی به چند نکته کلیدی از تجربیات خود میپردازد که رعایت کردن و توجه به آنها، ما را تصمیمگیری درباره مرزهای بین کار و زندگی شخصی، کمک میکند.
پیشنهاد میکنم همین حالا این مقاله بسیار لذتبخش و روشنگر را مطالعه کنید.
https://medium.com/the-year-of-the-looking-glass/the-mystery-of-work-life-balance-b8cf09c140f8
(زمان حدودی مطالعه، ۱۰ دقیقه)
پ. ن.
شاید خالی از لطف نباشد که به این موضوع هم اشاره کنم که چندی قبل، آقای Tobias van Schneider، طراح ارشد سابق Spotify، کسی که علاوه بر وبلاگنویسی، انجام مصاحبه با افراد و ساخت پادکست، به سخنرانی در جمعهای مختلف و همینطور انجام پروژههای مختلف میپردازد، در نوشتهای به سوال زیر پاسخ داده بود:
چگونه فرصت میکنید تمام این کارها را انجام دهید؟
آقای van Schneider در جواب گفته بود که هیچ لحظهای را از دست نمیدهم.
وقتی از سر کار به خانه میآیم، بدون از دست دادن لحظهای، پای کارهای شخصی خود مینشنیم و آنها را با علاقه انجام میدهم. چون میدانم اگر استراحت کنم، بسیار سخت دوباره کار را آغاز میکنم.
#زندگی_دیزاینر #سبک_زندگی
@Dexign دیزاین
___
Medium
The mystery of work-life balance
This was first published on my mailing list The Looking Glass. Every week, I answer a reader’s question.
گذری بر مفهوم «آیکنهای تطبیقپذیر»
گاهی تغییراتی ساده در ابزارها و یا دیدگاهها میتوانند تاثیری شگرف روی روند کار و همچنین محصولات تولیدی ما بگذارند. چند روز قبل یکی از اعضای تیم دیزاین ما، من را با مفهوم «آیکنهای تطبیقپذیر» یا Adaptive Icons آشنا کرد که به تازگی در Android O معرفی شده است.
بعد از کمی فکر کردن به این مفهوم جدید، مهمترین نکتهای که من را مجذوب آن کرد، سادگی دیدگاهی بود که در این مفهوم قرار داشت.
اجازه بدهید این مفهوم را با یک مثال توضیح بدهم. آیکن اپلیکیشن تلگرام را در نظر بگیرید. در صفحه موبایل، شما این آیکن را از بالا و بصورت عمودی نگاه میکنید، لذا آن را دو بعدی میبینید. حالا برای لحظهای، آیکن اپلیکیشن تگرام را در هوا معلق تصور کنید. وقتی این آیکن در فضا قرار دارد، اگر زاویه نگاه خود را کمتر کرده و از کنار به آن نگاه کنید، خواهید دید که این آیکن حجم دارد و از دو لایه روی هم تشکیل شده است. لایه پایینی متشکل از یک پاکت نامه و رنگ زمینه آبیست و لایه بالایی، یک ماسک مربعی که وسط آن بصورت دایره خالیست.
این دقیقا مفهومیست که با نام آیکنهای تطبیقپذیر مطرح شده است.
این نوع نگاه به آیکنها در ابتدا بسیار ساده و پیش پا افتاده میآید ولی اگر نیمنگاهی به فرصتها و پتانسیلهای بصری که برای طراحان به ارمغان میآورد، بیاندازید، مانند من هیجانزده خواهید شد.
مقاله امروز از آقای Nick Butcher است که خود نیز در شرکت گوگل Development و Design انجام میدهد.
ایشان در مقاله خود بصورت مفصل به نحوه استفاده عملی از مفهوم «آیکنهای تطبیقپذیر» میپردازد.
از شما دعوت می کنم به پست بعدی که نمونه اجرا شده از آیکن اپلیکیشن Play Store بصورت تطبیقپذیر است، توجه کنید.
بدون لحظهای درنگ، به سراغ مقاله بروید و آن را مطالعه کنید.
https://medium.com/google-design/designing-adaptive-icons-515af294c783
(زمان حدودی مطالعه، ۱۰ دقیقه)
#مفاهیم #اینتراکشن #آیکن #اندروید
@Dexign دیزاین
___
گاهی تغییراتی ساده در ابزارها و یا دیدگاهها میتوانند تاثیری شگرف روی روند کار و همچنین محصولات تولیدی ما بگذارند. چند روز قبل یکی از اعضای تیم دیزاین ما، من را با مفهوم «آیکنهای تطبیقپذیر» یا Adaptive Icons آشنا کرد که به تازگی در Android O معرفی شده است.
بعد از کمی فکر کردن به این مفهوم جدید، مهمترین نکتهای که من را مجذوب آن کرد، سادگی دیدگاهی بود که در این مفهوم قرار داشت.
اجازه بدهید این مفهوم را با یک مثال توضیح بدهم. آیکن اپلیکیشن تلگرام را در نظر بگیرید. در صفحه موبایل، شما این آیکن را از بالا و بصورت عمودی نگاه میکنید، لذا آن را دو بعدی میبینید. حالا برای لحظهای، آیکن اپلیکیشن تگرام را در هوا معلق تصور کنید. وقتی این آیکن در فضا قرار دارد، اگر زاویه نگاه خود را کمتر کرده و از کنار به آن نگاه کنید، خواهید دید که این آیکن حجم دارد و از دو لایه روی هم تشکیل شده است. لایه پایینی متشکل از یک پاکت نامه و رنگ زمینه آبیست و لایه بالایی، یک ماسک مربعی که وسط آن بصورت دایره خالیست.
این دقیقا مفهومیست که با نام آیکنهای تطبیقپذیر مطرح شده است.
این نوع نگاه به آیکنها در ابتدا بسیار ساده و پیش پا افتاده میآید ولی اگر نیمنگاهی به فرصتها و پتانسیلهای بصری که برای طراحان به ارمغان میآورد، بیاندازید، مانند من هیجانزده خواهید شد.
مقاله امروز از آقای Nick Butcher است که خود نیز در شرکت گوگل Development و Design انجام میدهد.
ایشان در مقاله خود بصورت مفصل به نحوه استفاده عملی از مفهوم «آیکنهای تطبیقپذیر» میپردازد.
از شما دعوت می کنم به پست بعدی که نمونه اجرا شده از آیکن اپلیکیشن Play Store بصورت تطبیقپذیر است، توجه کنید.
بدون لحظهای درنگ، به سراغ مقاله بروید و آن را مطالعه کنید.
https://medium.com/google-design/designing-adaptive-icons-515af294c783
(زمان حدودی مطالعه، ۱۰ دقیقه)
#مفاهیم #اینتراکشن #آیکن #اندروید
@Dexign دیزاین
___
Medium
Designing Adaptive Icons
Android O introduces a new app icon format: adaptive icons. Adaptive icons can make devices more coherent by unifying the shape of all app…
This media is not supported in your browser
VIEW IN TELEGRAM
نمایش ایدههای مختلف اجرای آیکنها بصورت تطبیقپذیر با حرکت دو لایه با هم (سمت چپ) و دو لایه جدای از هم (سمت راست)
@Dexign دیزاین
@Dexign دیزاین
این پست تا به حال نزدیک به ۸۰۰ بار مشاهده شده و به نظر میرسد برای خوانندگان جدید کانال جذاب باشد.
#پست_مجدد
#پست_مجدد
Forwarded from فلسفه دیزاین (Ramin Khatibi)
احتیاج کاربر را طراحی کنید،
نه درخواست او را!
قطعا هیچ سرویسی بدون گرفتن بازخورد (Feedback) کاربران نمیفهمه که آیا در حال حرکت در مسیر درست رفع نیاز کاربر هست یا نه.
ولی در بسیاری از مواقع، سرویسها ایمیل و تماسهایی از کاربران دریافت میکنن که بصورت مستقیم خواستار ایجاد بخش جدید در سرویس هستند.
سوال مهم اینجاست که آیا باید درخواست کاربر را اجرا کرد یا نه؟
به تجربه شخصی من، مشابه این موضوع هنگام کار با کارفرماهای مختلف پیش میاد. درخواستهایی مثل تغییر رنگ یک بخش خاص در طراحی، به رنگی دیگر و یا اضافه کردن یک دکمه خاص در صفحهای از اپلیکیشن. بسیاری از طراحان محصول به این صورت عمل میکنند که درخواستها را عینا به شکل مطرح شده اجرا میکنند. این کار در اغلب موارد منجر به از دست رفتن یکپارچگی طراحی ظاهری و یا طراحی امکانات محصول میشه.
آقای Michael Sueoka، سرپرست تیم طراحی تجربهکاربری سرویس The Mobile Majority، با مطرح کردن این موضوع و بررسی تبعات مخرب اجرای مستقیم درخواستهای کاربر، راه حلی ارائه میدن که به نظرم باید بخش جداییناپذیری از پروسه طراحی یک محصول باشه.
ایشون با عنوان این که کاربر معمولا نمیدونه که به چه چیزی احتیاج داره و فقط میدونه که چه چیزی رو میخواد، تفاوت این دو حالت رو مثال کودکی دونستن که برای یک وعده اصلی غذایی، مقدار زیادی شکلات طلب میکنه.
در مقابل درخواستهای این چنینی کاربران، راه حل Michael خوندنی هست.
http://blog.invisionapp.com/dont-design-what-users-want/
(زمان حدودی مطالعه، ۷ دقیقه)
#طراحی_محصول #بازخورد
@HamDesign هَم دیزاین
نه درخواست او را!
قطعا هیچ سرویسی بدون گرفتن بازخورد (Feedback) کاربران نمیفهمه که آیا در حال حرکت در مسیر درست رفع نیاز کاربر هست یا نه.
ولی در بسیاری از مواقع، سرویسها ایمیل و تماسهایی از کاربران دریافت میکنن که بصورت مستقیم خواستار ایجاد بخش جدید در سرویس هستند.
سوال مهم اینجاست که آیا باید درخواست کاربر را اجرا کرد یا نه؟
به تجربه شخصی من، مشابه این موضوع هنگام کار با کارفرماهای مختلف پیش میاد. درخواستهایی مثل تغییر رنگ یک بخش خاص در طراحی، به رنگی دیگر و یا اضافه کردن یک دکمه خاص در صفحهای از اپلیکیشن. بسیاری از طراحان محصول به این صورت عمل میکنند که درخواستها را عینا به شکل مطرح شده اجرا میکنند. این کار در اغلب موارد منجر به از دست رفتن یکپارچگی طراحی ظاهری و یا طراحی امکانات محصول میشه.
آقای Michael Sueoka، سرپرست تیم طراحی تجربهکاربری سرویس The Mobile Majority، با مطرح کردن این موضوع و بررسی تبعات مخرب اجرای مستقیم درخواستهای کاربر، راه حلی ارائه میدن که به نظرم باید بخش جداییناپذیری از پروسه طراحی یک محصول باشه.
ایشون با عنوان این که کاربر معمولا نمیدونه که به چه چیزی احتیاج داره و فقط میدونه که چه چیزی رو میخواد، تفاوت این دو حالت رو مثال کودکی دونستن که برای یک وعده اصلی غذایی، مقدار زیادی شکلات طلب میکنه.
در مقابل درخواستهای این چنینی کاربران، راه حل Michael خوندنی هست.
http://blog.invisionapp.com/dont-design-what-users-want/
(زمان حدودی مطالعه، ۷ دقیقه)
#طراحی_محصول #بازخورد
@HamDesign هَم دیزاین
Invisionapp
Don’t design what users want | Inside Design Blog
<p>Too many product designers are in the pattern of simply taking user feedback and implementing it immediately with limited research, questioning, or thought.</p>
سرویس Figma 2.0: ابزاری برای تمام فصول
وقتی ابزار Sketch معرفی شد، من کاربر Photoshop بودم و به خاطر سالها کار با این رفیق قدیمیام و حفظ بودن تمام میانبرها، ضعفها و قوتهایش، دلم نمیخواست به سمت ابزار جدیدی بروم. کمی گذشت و Sketch با بروزرسانیهایش، همه را شگفتزده کرد و تیمهای دیزاین قوی مثل Foursquare به سمت آن رفته و اپلیکیشن خود را با آن بازطراحی کردند.
طلسم را شکستم و استفاده از Sketch را آغاز کردم. این اتفاق به قدری لذتبخش بود که به نقطه عطفی از زندگی کاریام بدل شد و از آن پس هر ابزار جدیدی را امتحان میکنم.
چندی قبل، خبر انتشار یک ابزار Collaborative طراحی رابط کاربری به اسم Figma را خواندم و زمانی را برای تیم دیزاین شرکت خالی کردم تا این ابزار را تست کنیم. چند صفحه از یک اپلیکیشن آشپزی را طراحی کردیم که نتایج آن روی Behance تیممان قابل مشاهدهست:
https://www.behance.net/gallery/49456671/COOKY-APP
بعد از تجربه خوب کار با Figma، اخبار آن را مشتاقانهتر دنبال میکردم. تیم پرشور و هیجان این ابزار کاربردی، حالا نسخه دوم از ابزار خود را معرفی کردند که امکان Prototyping و همچنین امکانی به اسم Developer Handoff را برای کاربران خود به ارمغان آورده است. Developer Handoff ویژگیست که به دیزاینرها اجازه میدهد یک نسخه از فایل دیزاین خود را بصورت View Only و غیرقابل ویرایش با توسعهدهنده پروژه به اشتراک بگذارند. توسعهدهنده با کلیک روی هر لایه میتواند ویژگیهای آن را بصورت غیرقابل ویرایشی ببیند و حتی آیکنها و سایر Assetهای مورد نظر خود را مستقیما از همان فایل، با اندازه و فرمت مد نظرش، خروجی بگیرد.
ابزار Figma، بصورت کامل از فرمتهای گرافیک بُرداری (Vector) پشتیبانی میکند و به راحتی میتوانید از آنها در طراحیهای خود استفاده کنید.
مقاله امروز، معرفی ویژگیهای جدید Figma، از زبان بنیانگذار و مدیرعامل این سرویس، Dylan Field است.
به نظر من آینده از آنِ ابزارهای Collaborative بوده و Figma تا کنون بینظیر عمل کرده است.
مقاله امروز را از دست ندهید:
https://blog.figma.com/figma-2-0-now-with-prototyping-and-developer-handoff-1b309a5d025c
(زمان حدودی مطالعه، ۸ دقیقه)
#معرفی #ابزار #Figma
@Dexign دیزاین
___
وقتی ابزار Sketch معرفی شد، من کاربر Photoshop بودم و به خاطر سالها کار با این رفیق قدیمیام و حفظ بودن تمام میانبرها، ضعفها و قوتهایش، دلم نمیخواست به سمت ابزار جدیدی بروم. کمی گذشت و Sketch با بروزرسانیهایش، همه را شگفتزده کرد و تیمهای دیزاین قوی مثل Foursquare به سمت آن رفته و اپلیکیشن خود را با آن بازطراحی کردند.
طلسم را شکستم و استفاده از Sketch را آغاز کردم. این اتفاق به قدری لذتبخش بود که به نقطه عطفی از زندگی کاریام بدل شد و از آن پس هر ابزار جدیدی را امتحان میکنم.
چندی قبل، خبر انتشار یک ابزار Collaborative طراحی رابط کاربری به اسم Figma را خواندم و زمانی را برای تیم دیزاین شرکت خالی کردم تا این ابزار را تست کنیم. چند صفحه از یک اپلیکیشن آشپزی را طراحی کردیم که نتایج آن روی Behance تیممان قابل مشاهدهست:
https://www.behance.net/gallery/49456671/COOKY-APP
بعد از تجربه خوب کار با Figma، اخبار آن را مشتاقانهتر دنبال میکردم. تیم پرشور و هیجان این ابزار کاربردی، حالا نسخه دوم از ابزار خود را معرفی کردند که امکان Prototyping و همچنین امکانی به اسم Developer Handoff را برای کاربران خود به ارمغان آورده است. Developer Handoff ویژگیست که به دیزاینرها اجازه میدهد یک نسخه از فایل دیزاین خود را بصورت View Only و غیرقابل ویرایش با توسعهدهنده پروژه به اشتراک بگذارند. توسعهدهنده با کلیک روی هر لایه میتواند ویژگیهای آن را بصورت غیرقابل ویرایشی ببیند و حتی آیکنها و سایر Assetهای مورد نظر خود را مستقیما از همان فایل، با اندازه و فرمت مد نظرش، خروجی بگیرد.
ابزار Figma، بصورت کامل از فرمتهای گرافیک بُرداری (Vector) پشتیبانی میکند و به راحتی میتوانید از آنها در طراحیهای خود استفاده کنید.
مقاله امروز، معرفی ویژگیهای جدید Figma، از زبان بنیانگذار و مدیرعامل این سرویس، Dylan Field است.
به نظر من آینده از آنِ ابزارهای Collaborative بوده و Figma تا کنون بینظیر عمل کرده است.
مقاله امروز را از دست ندهید:
https://blog.figma.com/figma-2-0-now-with-prototyping-and-developer-handoff-1b309a5d025c
(زمان حدودی مطالعه، ۸ دقیقه)
#معرفی #ابزار #Figma
@Dexign دیزاین
___
Behance
COOKY APP
This is a delicious result of our team working with Figma.com.It was a joyful experience. Viva Figma team.Hope your enjoy it.
جادوی سیاهی به نام نوتیفیکیشن
سالیان زیادیست که نوتیفیکیشنها به انسانها کمک میکنند. وقتی زنگ در و یا زنگ تلفن به صدا در میآید و یا حتی وقتی کسی نام ما را صدا میکند، در حال دریافت اعلان یا Notification هستیم.
این روزها شنیدن واژه نوتیفیکیشن ما را به یاد نقطه قرمز در اپلیکیشنهای Instagram یا Facebook میاندازد. نقطههایی که با تغییر مغزهای ما در گذر زمان، حالا مجبورمان میکنند که آن بخش را چک کنیم.
تمامی ما روزانه تعداد زیادی نوتیفیکیشن دریافت میکنیم که به ما یادآوری میکنند که سربازهایمان در Clash of Clans آمادهاند، یا رکورد تعداد قدمهای روزانه خود را رد کردهایم؛ و البته به دریافت آنهای عادت کردهایم.
گاهی این ابزار، در دستان کسبوکارهای مختلف به قدرت جادویی سیاهی تبدیل میشود که از آن برای کشاندن کاربران به داخل اپلیکیشنها و وبسایتها خودشان استفاده میکنند.
با شکلگیری فضاهایی مانند شبکههای مجازی آزاد، روز به روز سوالاتی مانند اینکه حد و مرز و قانون استفاده از یک شبکه مجازی کجاست؟ بیشتر مطرح میشود.
به نظر شما چه حد و حدودی در استفاده از نوتیفیکیشنها وجود دارد؟
نویسنده مقاله امروز، آقای Andrew Wilshere به این سوال میپردازد و با بررسی معروفترین سرویسهای دنیا مانند Instagram، Facebook و یا Twitter به ما نشان میدهد که هر کسبوکار و هر سرویسی، حدی متفاوت از استفاده از نوتیفیکیشن را برای خود تعریف کردهاست.
سوال مهم این است که سرویس طراحی شده توسط شما در کجای این مرز قرار میگیرد؟
http://trydesignlab.com/blog/are-notifications-a-dark-pattern-ux-ui/
(زمان حدودی مطالعه، ۱۰ دقیقه)
پ. ن.
در این مقاله مفهومی به اسم Dark Patterns توضیح داده شده است که به معنای کلی برای گول زدن کاربر برای انجام کاری که تمایلی به آن ندارد است. نمونههای جالبی هم معرفی شدهاست.
#مفاهیم #چالش #اعلان #نوتیفیکیشن #الگوهای_تاریک
@Dexign دیزاین
___
سالیان زیادیست که نوتیفیکیشنها به انسانها کمک میکنند. وقتی زنگ در و یا زنگ تلفن به صدا در میآید و یا حتی وقتی کسی نام ما را صدا میکند، در حال دریافت اعلان یا Notification هستیم.
این روزها شنیدن واژه نوتیفیکیشن ما را به یاد نقطه قرمز در اپلیکیشنهای Instagram یا Facebook میاندازد. نقطههایی که با تغییر مغزهای ما در گذر زمان، حالا مجبورمان میکنند که آن بخش را چک کنیم.
تمامی ما روزانه تعداد زیادی نوتیفیکیشن دریافت میکنیم که به ما یادآوری میکنند که سربازهایمان در Clash of Clans آمادهاند، یا رکورد تعداد قدمهای روزانه خود را رد کردهایم؛ و البته به دریافت آنهای عادت کردهایم.
گاهی این ابزار، در دستان کسبوکارهای مختلف به قدرت جادویی سیاهی تبدیل میشود که از آن برای کشاندن کاربران به داخل اپلیکیشنها و وبسایتها خودشان استفاده میکنند.
با شکلگیری فضاهایی مانند شبکههای مجازی آزاد، روز به روز سوالاتی مانند اینکه حد و مرز و قانون استفاده از یک شبکه مجازی کجاست؟ بیشتر مطرح میشود.
به نظر شما چه حد و حدودی در استفاده از نوتیفیکیشنها وجود دارد؟
نویسنده مقاله امروز، آقای Andrew Wilshere به این سوال میپردازد و با بررسی معروفترین سرویسهای دنیا مانند Instagram، Facebook و یا Twitter به ما نشان میدهد که هر کسبوکار و هر سرویسی، حدی متفاوت از استفاده از نوتیفیکیشن را برای خود تعریف کردهاست.
سوال مهم این است که سرویس طراحی شده توسط شما در کجای این مرز قرار میگیرد؟
http://trydesignlab.com/blog/are-notifications-a-dark-pattern-ux-ui/
(زمان حدودی مطالعه، ۱۰ دقیقه)
پ. ن.
در این مقاله مفهومی به اسم Dark Patterns توضیح داده شده است که به معنای کلی برای گول زدن کاربر برای انجام کاری که تمایلی به آن ندارد است. نمونههای جالبی هم معرفی شدهاست.
#مفاهیم #چالش #اعلان #نوتیفیکیشن #الگوهای_تاریک
@Dexign دیزاین
___
Designlab
Are Notifications A Dark Pattern?
Have you ever had a nightmare where you were literally drowning in little red notification badges? I did once, and it got me thinking: what actually are notifi…
پنجمین نسخه از Swarm دوستداشتنی
احتمالا اپلیکیشن Foursquare همچنین Swarm را میشناسید. برای من Foursquare نمونه یک محصول بسیار موفقست (حتی بالاتر از Instagram و Facebook) که پیشرفت و پا گرفتنش را در ایران، لحظه به لحظه پیگیری کردهام. هوشمندی بینظیری که در Gamification داشت و روشهای اغواگرانهای که برای وادار کردن کاربر به فعالیت استفاده میکرد از مهمترین دلایلی بود که من را به این محصول علاقمند میکرد.
بعدها که اپلیکیشن Swarm با هدف جدا کردن تکهی شبکه اجتماعی Foursquare معرفی شد، فعالیت و پیگیریهای من هم کمی کمتر شد ولی این تیم همیشه تاثیر خود را در کار حرفهای من داشتهست. بطوریکه وقتی خواندم که اپلیکیشن جدید Foursquare بطور کامل در Sketch App طراحی شده، مهاجرت به این ابزار را برای خود یک الزام میدیدم.
تیم دیزاین این مجموعه، هماکنون نسخه 5.0 از اپلیکیشن Swarm را منتشر کردند که دستخوش تغییراتی بسیاری شدهاست.
مقاله امروز، داستانیست از زبان یکی از طراحان محصول این تیم که به بررسی روند این بازطراحی میپردازد و نکات جالبی در آن نهفتهست:
- میتوان متوجه دید و دغدغههای یک تیم دیزاین در این سطح، در روند بازطراحی محصول شد.
- میتوانید نمونهای از Style Guideهایی را که در تیمهای دیزاین دیگر ساخته میشود، ببینید.
- متوجه میشوید که یکی از وظایف شما به عنوان دیزاینر، به اشتراکگذاری ایدهها و طرحها و گرفتن بازخوردهاست. در هر سطحی که باشید.
و …
پیشنهاد میکنم همین حالا این داستان زیبا را مطالعه کنید.
https://medium.com/foursquare-direct/how-we-designed-foursquare-swarm-5-0-d774b3164f3f
(زمان حدودی مطالعه، ۱۰ دقیقه)
#تیم #بازطراحی #محصول #Swarm
@Dexign دیزاین
___
احتمالا اپلیکیشن Foursquare همچنین Swarm را میشناسید. برای من Foursquare نمونه یک محصول بسیار موفقست (حتی بالاتر از Instagram و Facebook) که پیشرفت و پا گرفتنش را در ایران، لحظه به لحظه پیگیری کردهام. هوشمندی بینظیری که در Gamification داشت و روشهای اغواگرانهای که برای وادار کردن کاربر به فعالیت استفاده میکرد از مهمترین دلایلی بود که من را به این محصول علاقمند میکرد.
بعدها که اپلیکیشن Swarm با هدف جدا کردن تکهی شبکه اجتماعی Foursquare معرفی شد، فعالیت و پیگیریهای من هم کمی کمتر شد ولی این تیم همیشه تاثیر خود را در کار حرفهای من داشتهست. بطوریکه وقتی خواندم که اپلیکیشن جدید Foursquare بطور کامل در Sketch App طراحی شده، مهاجرت به این ابزار را برای خود یک الزام میدیدم.
تیم دیزاین این مجموعه، هماکنون نسخه 5.0 از اپلیکیشن Swarm را منتشر کردند که دستخوش تغییراتی بسیاری شدهاست.
مقاله امروز، داستانیست از زبان یکی از طراحان محصول این تیم که به بررسی روند این بازطراحی میپردازد و نکات جالبی در آن نهفتهست:
- میتوان متوجه دید و دغدغههای یک تیم دیزاین در این سطح، در روند بازطراحی محصول شد.
- میتوانید نمونهای از Style Guideهایی را که در تیمهای دیزاین دیگر ساخته میشود، ببینید.
- متوجه میشوید که یکی از وظایف شما به عنوان دیزاینر، به اشتراکگذاری ایدهها و طرحها و گرفتن بازخوردهاست. در هر سطحی که باشید.
و …
پیشنهاد میکنم همین حالا این داستان زیبا را مطالعه کنید.
https://medium.com/foursquare-direct/how-we-designed-foursquare-swarm-5-0-d774b3164f3f
(زمان حدودی مطالعه، ۱۰ دقیقه)
#تیم #بازطراحی #محصول #Swarm
@Dexign دیزاین
___
Medium
How we designed Foursquare Swarm 5.0
Revamping our lifelog app
Forwarded from Software Philosophy
شایعترین دلیل تخمین زمان اشتباه یک پروژه
تخمین زمان یک پروژه کار آسانی نیست، مخصوصا اگر بخواهید خیلی دقیق باشید. ولی اغلب موارد مشکل تخمین این نیست که خیلی دقیق نیست، بلکه مشکلش این است که خیلی پرت است!
یکی از شایعترین عواملی که باعث میشود تخمین زمانی یک پروژه خیلی اشتباه باشد، تفاوت قائل نشدن بین دو مفهوم خیلی مهم است: «تخمین زمان» و «تخمین کار».
«تخمین زمان» مفهومی است که مدیران پروژه دوست دارند در مورد آن صحبت کنند. وقتی صحبت میکنند دائما به دنبال شنیدن تخمین زمانی هستند. برای مثال جملهای مانند «این کار تا پنجشنبه هفته بعد انجام میشود» جملهای است که زمان انجام شدن کار را تخمین میزند.
در مقابل «تخمین کار» مفهومی است که معمولا برنامهنویسان دوست دارند در مورد آن صحبت کنند. آنها ترجیح میدهند بگویند که این کار به چقدر زمان نیاز دارد. مثلا کاری است که به ۳ روز زمان نیاز دارد. مثلا جمله «این کار به یک هفته کار نیاز دارد» به این معنی نیست که یک هفته دیگر این کار تمام میشود و صرفا حجم کار مورد نیاز بیان شده.
برای یک تخمین موفق باید این مفاهیم در جلسات کاملا واضح شوند و در مورد آنها جداگانه صحبت شود. همچنین بهتر است از هر دو طیف افراد بالا در جلسات حضور داشته باشند تا جوانب مختلف بررسی شود.
پست زیر این دو مفهوم را معرفی کرده و تفاوت آنها را در مدیریت پروژه شرح دادهاست.
http://mehrandvd.me/2017/08/02/effort-vs-time-estimation/
⁉️ برای بحث و تبادل نظر فنی در مورد این پست، بر روی لینک زیر کلیک کنید:
http://ow.ly/958i30erVZs
#مهران_داودی (http://ow.ly/GwIl309lFEm)
کانال تلگرام:
@SoftwarePhilosophy
___
تخمین زمان یک پروژه کار آسانی نیست، مخصوصا اگر بخواهید خیلی دقیق باشید. ولی اغلب موارد مشکل تخمین این نیست که خیلی دقیق نیست، بلکه مشکلش این است که خیلی پرت است!
یکی از شایعترین عواملی که باعث میشود تخمین زمانی یک پروژه خیلی اشتباه باشد، تفاوت قائل نشدن بین دو مفهوم خیلی مهم است: «تخمین زمان» و «تخمین کار».
«تخمین زمان» مفهومی است که مدیران پروژه دوست دارند در مورد آن صحبت کنند. وقتی صحبت میکنند دائما به دنبال شنیدن تخمین زمانی هستند. برای مثال جملهای مانند «این کار تا پنجشنبه هفته بعد انجام میشود» جملهای است که زمان انجام شدن کار را تخمین میزند.
در مقابل «تخمین کار» مفهومی است که معمولا برنامهنویسان دوست دارند در مورد آن صحبت کنند. آنها ترجیح میدهند بگویند که این کار به چقدر زمان نیاز دارد. مثلا کاری است که به ۳ روز زمان نیاز دارد. مثلا جمله «این کار به یک هفته کار نیاز دارد» به این معنی نیست که یک هفته دیگر این کار تمام میشود و صرفا حجم کار مورد نیاز بیان شده.
برای یک تخمین موفق باید این مفاهیم در جلسات کاملا واضح شوند و در مورد آنها جداگانه صحبت شود. همچنین بهتر است از هر دو طیف افراد بالا در جلسات حضور داشته باشند تا جوانب مختلف بررسی شود.
پست زیر این دو مفهوم را معرفی کرده و تفاوت آنها را در مدیریت پروژه شرح دادهاست.
http://mehrandvd.me/2017/08/02/effort-vs-time-estimation/
⁉️ برای بحث و تبادل نظر فنی در مورد این پست، بر روی لینک زیر کلیک کنید:
http://ow.ly/958i30erVZs
#مهران_داودی (http://ow.ly/GwIl309lFEm)
کانال تلگرام:
@SoftwarePhilosophy
___
Dot Philosophy
Effort vs. Time Estimation - Dot Philosophy
Estimating the required time for a task, is not an easy job to do, if you want to be precise! The main problem with estimating is that, most of the time it is wrong! Being wrong is not too bad for an estimation. But, being too wrong is a disaster for a project.…
۱۰ موقعیتی که طراحان تجربه کاربری از آن متنفر هستند!
اخیرا در توییتر هشتگی راه افتاده بود با عنوان ShitDevelopersSay که خیلی از برنامهنویسان و حتی مدیران فنی ایرانی در توییتر با این هستگ توییت کردند.
تمام توییتها درباره جملاتی بود که معمولا توسعهدهندگان یا برنامهنویسان استفاده میکنند. مانند: «کدهاش رو نوشتم، فقط تستاش مونده.» یا «برنامهنویسی قبلیتون کد نزده، گند زده!»
این جملات تکراری، خندهدار و البته تاملبرانگیز، در تمامی مشاغل وجود دارد. به همین بهانه، امروز مقالهای را از John Saito، کسی که به قول خودش «کلمــات» را برای شرکت و سرویس معظم Dropbox دیزاین میکند، بررسی میکنیم. این مقاله از زاویهای دیگر، به بررسی موقعیتها و جملاتی میپردازد که طراحان تجربه کاربری، بخصوص Copy Writerها از آن متنفرند.
پیشنهاد میکنم همین حالا این نوشته کوتاه و لذتبخش را مطالعه کنید:
https://medium.com/@jsaito/10-things-ux-writers-hate-to-hear-a3d561a63ae8
(زمان حدودی مطالعه، ۶ دقیقه)
#جملات #طراحی_محصول #Copy_Writer
@Dexign دیزاین
___
اخیرا در توییتر هشتگی راه افتاده بود با عنوان ShitDevelopersSay که خیلی از برنامهنویسان و حتی مدیران فنی ایرانی در توییتر با این هستگ توییت کردند.
تمام توییتها درباره جملاتی بود که معمولا توسعهدهندگان یا برنامهنویسان استفاده میکنند. مانند: «کدهاش رو نوشتم، فقط تستاش مونده.» یا «برنامهنویسی قبلیتون کد نزده، گند زده!»
این جملات تکراری، خندهدار و البته تاملبرانگیز، در تمامی مشاغل وجود دارد. به همین بهانه، امروز مقالهای را از John Saito، کسی که به قول خودش «کلمــات» را برای شرکت و سرویس معظم Dropbox دیزاین میکند، بررسی میکنیم. این مقاله از زاویهای دیگر، به بررسی موقعیتها و جملاتی میپردازد که طراحان تجربه کاربری، بخصوص Copy Writerها از آن متنفرند.
پیشنهاد میکنم همین حالا این نوشته کوتاه و لذتبخش را مطالعه کنید:
https://medium.com/@jsaito/10-things-ux-writers-hate-to-hear-a3d561a63ae8
(زمان حدودی مطالعه، ۶ دقیقه)
#جملات #طراحی_محصول #Copy_Writer
@Dexign دیزاین
___
Medium
10 things UX writers hate to hear
Fake conversations, real situations
قدرتهای Sketch و After Effects به کمک هم میآیند
چندی قبل با تیم دیزاین روی طراحی یک بازی Trivia کار میکردیم. شاید بشود گفت که طراحی بازی همیشه یکی از چند لذت والای یک دیزاینر است. دیزاینر دوست دارد حتی اگر بازی اسم-فامیل را به شکل اپلیکیشن در میآورد، انیمیشنهایی در آن بگنجاند و از نظر بصری هیجانانگیزترین چیزی را که ممکن است، بسازد.
این موضوع برای تیم ما هم همینطور بود و برای هر بخش از این بازی Trivia که در حال طراحی آن بودیم انیمیشنهای هیجانانگیزی طراحی کردیم.
وقتی طراحیها به پایان رسید و نوبت به انتقال این انیمیشنها به تیم توسعه رسید، متوجه شدیم که صرفا با نمایش یک فایل MP4، نمیشود تکهها و جزئیات حرکتهای یک انیمیشن را به تیم توسعه منتقل کرد.
برای اینکه این انتقال به شکلی بهتر اتفاق بیافتد، تیم دیزاین ساعتهای زیادی را به مستند کردن انیمیشنهای هر بخش اختصاص داد که کاری بسیار وقتگیر بود.
علیرغم اینکه نتیجه کار تا حد خوبی راضیکننده بود ولی سختی مستندسازی، زمانبندی کار ما را بهم ریخت.
اخیرا به مقالهای از یکی طراحان تجربه کاربری در گوگل برخوردم که دقیقا مشکل مشابهی را داشتند و راه حل دیگری برای آن پیدا کردند. آقای Josh Fleetwood که در واقع راهبر تیم طراحی انیمیشنهای تجربه کاربری گوگل است، در این مقاله توضیح میهد که آنها انیمیشنهای خود را در After Effects میسازند و در انتقالشان به توسعهدهندگان با مشکل زیادی مواجه بودند. برای حل این مشکل دو افزونه (Plugin) بسیار کاربردی را به کار بستند که با استفاده از آنها میتوان خروجیهایی مستند از انیمیشنها به تیمهای توسعه ارائه داد و زندگی را شیرینتر کرد.
پیشنهاد میکنم این مقاله را از دست ندید، چرا که باعث صرفهجویی زیادی در زمان پروژه شما خواهد شد.
https://medium.com/google-design/bringing-sketch-and-after-effects-closer-together-d83b3e729c93
(زمان حدودی مطالعه، ۸ دقیقه)
#ابزار #افزونه #انیمیشن #تجربه_کاربری #motion
@Dexign دیزاین
___
چندی قبل با تیم دیزاین روی طراحی یک بازی Trivia کار میکردیم. شاید بشود گفت که طراحی بازی همیشه یکی از چند لذت والای یک دیزاینر است. دیزاینر دوست دارد حتی اگر بازی اسم-فامیل را به شکل اپلیکیشن در میآورد، انیمیشنهایی در آن بگنجاند و از نظر بصری هیجانانگیزترین چیزی را که ممکن است، بسازد.
این موضوع برای تیم ما هم همینطور بود و برای هر بخش از این بازی Trivia که در حال طراحی آن بودیم انیمیشنهای هیجانانگیزی طراحی کردیم.
وقتی طراحیها به پایان رسید و نوبت به انتقال این انیمیشنها به تیم توسعه رسید، متوجه شدیم که صرفا با نمایش یک فایل MP4، نمیشود تکهها و جزئیات حرکتهای یک انیمیشن را به تیم توسعه منتقل کرد.
برای اینکه این انتقال به شکلی بهتر اتفاق بیافتد، تیم دیزاین ساعتهای زیادی را به مستند کردن انیمیشنهای هر بخش اختصاص داد که کاری بسیار وقتگیر بود.
علیرغم اینکه نتیجه کار تا حد خوبی راضیکننده بود ولی سختی مستندسازی، زمانبندی کار ما را بهم ریخت.
اخیرا به مقالهای از یکی طراحان تجربه کاربری در گوگل برخوردم که دقیقا مشکل مشابهی را داشتند و راه حل دیگری برای آن پیدا کردند. آقای Josh Fleetwood که در واقع راهبر تیم طراحی انیمیشنهای تجربه کاربری گوگل است، در این مقاله توضیح میهد که آنها انیمیشنهای خود را در After Effects میسازند و در انتقالشان به توسعهدهندگان با مشکل زیادی مواجه بودند. برای حل این مشکل دو افزونه (Plugin) بسیار کاربردی را به کار بستند که با استفاده از آنها میتوان خروجیهایی مستند از انیمیشنها به تیمهای توسعه ارائه داد و زندگی را شیرینتر کرد.
پیشنهاد میکنم این مقاله را از دست ندید، چرا که باعث صرفهجویی زیادی در زمان پروژه شما خواهد شد.
https://medium.com/google-design/bringing-sketch-and-after-effects-closer-together-d83b3e729c93
(زمان حدودی مطالعه، ۸ دقیقه)
#ابزار #افزونه #انیمیشن #تجربه_کاربری #motion
@Dexign دیزاین
___
Medium
Bringing Sketch and After Effects Closer Together
Introducing two new animation workflow tools from UX Motion Design at Google
طراحی دکمهها در گذر زمان
دکمهها موجودات جالبی هستند. قبلتر هم مفصلا به آنها پرداخته بودیم. با دکمهها ما خرید خود را نهایی میکنیم، به حساب خود در اپلیکیشن موبایلبانکمان وارد میشویم، فرمهای ثبتنام را ثبت میکنیم و …
در مقاله امروز، آقای Wojciech Dobry نتیجه بررسی را که روی تغییرات طراحی ۸ ساله دکمهها داشتهاند، ارائه میدهند.
این تحقیق روی پلتفرم Dribbble اتفاق افتاده است.
پیشنهاد میکنم این سیرِ زمانی جالب را همین حالا روی این مقاله بررسی کنید:
https://www.toptal.com/designers/ui/button-design-dribbble-timeline
(زمان حدودی مطالعه، ۶ دقیقه)
#دکمه #تاریخچه #روند
@Dexign دیزاین
___
دکمهها موجودات جالبی هستند. قبلتر هم مفصلا به آنها پرداخته بودیم. با دکمهها ما خرید خود را نهایی میکنیم، به حساب خود در اپلیکیشن موبایلبانکمان وارد میشویم، فرمهای ثبتنام را ثبت میکنیم و …
در مقاله امروز، آقای Wojciech Dobry نتیجه بررسی را که روی تغییرات طراحی ۸ ساله دکمهها داشتهاند، ارائه میدهند.
این تحقیق روی پلتفرم Dribbble اتفاق افتاده است.
پیشنهاد میکنم این سیرِ زمانی جالب را همین حالا روی این مقاله بررسی کنید:
https://www.toptal.com/designers/ui/button-design-dribbble-timeline
(زمان حدودی مطالعه، ۶ دقیقه)
#دکمه #تاریخچه #روند
@Dexign دیزاین
___
Toptal Design Blog
Button Design Over the Years – The Dribbble Timeline | Toptal®
Digital design and UIs are evolving at an incredible pace and the styling of buttons along with it. The Dribbble Button Timeline shows us how button styles have developed over the past decade.
معرفی 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 دیزاین
_______