هفت اصل فعال‌کننده‌های دستی در ریز‌تعامل‌ها / Microinteractions Manual Triggers

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

بهترین تعامل با کاربر از درک کاربر ومحیط شروع می‌شود، یعنی اینکه ما بدونیم کاربر می‌خواد چیکار کنه؟ کی قرار این کار انجام بشه؟ کجا قرار این ریز‌تعامل اتفاق بیافته؟ ادامه مطب…

مقدمه‌ای بر Microinteractions یا جزییات دوست‌داشتنی در طراحی

پنج‌شنبه هفته پیش در ریحون ارایه‌هایی داشتیم در مورد Whitespace، Node.js و من هم در مورد Microinteractions صبحت کردم که در این مطلب قصد دارم در موردش بنویسم.

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

The details are not the details. They make the design.
~ Charles Eames

این جمله معروف، اشاره میکنه به اهمیت جزییات و میخواد بگه که اصل کار طراحی توجه به جزییات هست و مخصوصا در یک بازار رقاباتی این جزییات باعث فرق بین یک محصول خوب و عالی و مزیت رقابتی شما خواهد شد!

Microinteractions آن جزییاتی از طراحی است که کاربر معمولا نمیبینه ولی حسش میکنه و حتی ممکن یادش هم نمونه که آن Microinteractionsی که دیده چه بوده، اما قطعا آن برنامه را یادش میمونه و میگه “من عاشق این اپلیکیشن هستم!”

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

ادامه مطب…

چشم طراح، چشم حقیقت بین

یک سوال مهم وجود داره این که دیزاین یعنی چی و چطور میشه آن را یاد گرفت؟

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

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

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

ادامه مطب…

ساختارمندتر کردن پروژه‌های CSS با استفاده از ویژگی Extend

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

یکی از این کارهای موثر، پیاده‌سازی مفاهیم Object Oriented CSS است که به طور خیلی ساده، OOCSS یعنی جدا کردن قسمت‌های مختلف: ساختار، طراحی و … و پرهیز از تکرار کد‌ها.
خیلی وقت‌ها پیش می‌آید که قسمت زیادی در کد‌ها و یا حتی پروژه‌های مختلف تکرار می‌شود. این موضوع اصلی این مطلب هست که روش‌های مختلفی برای حل این مسله داریم.

دو راه حل کلی برای حذف تکرار کدهای CSS وجود دارد:

  1. ایجاد تغییرات در نام‌های کلاس‌ها در فایل HTML
  2. تغیر در ساختار نوشتار CSS

یک مثال ساده مطرح میکنم: من برای نمایش لوگو سایت‌ها عکس را به عنوان بکگراند المان(در هدر مثلا h1 و در فوتر span) قرار می‌دهم و با این کار میتونم نام سایت را هم درون تگ HTML بنویسم. و سپس با استفاده از CSS آن نام را از نمایش کاربر مخفی نگه می‌دارم و تنها برای موتور‌های جستجو خوانایی دارد.
خب برای هر عکسی که بخواهم این کار را بکنم (لوگو هدر، لوگو فوتر و …) باید این کد‌ HTMLنوشته:

ادامه مطب…

ساختار تعریف و استفاده از Media Queries در Sass

برای راحت‌تر شدن طراحی واکشگرا(Responsive) ابزار‌، فریمورک و روش‌های بسیاری آمده که در همین رابطه قصد دارم ساختاری که برای تعریف مدیا کوئری‌ها در Sass استفاده میکنم را شرح دهم. در انتها این مطلب با مفاهیم زیر آشنا می‌شوید:

  • Interpolation – #{}
  • @content
  • nth()
  • length()
  • @warn

من طرفدار فریمورک Zurb Foundation هستم، پس اول به روش فاندیشن متغیر‌های مربوط به مدیا کوئری را تعریف میکنم.
اولین سری متغیرها مشخص کننده محدوده‌ی مدیا کوئری‌ها هستند که به پنج قسمت تقسیم شدند(شما میتونید این محدوده‌ها و تعدادشون را بر اساس نیاز خودتون تغییر بدهید):

ادامه مطب…

نوبهار است، در آن کوش که خوش دل باشی

happy-nowruz_pedram-khoshbakht

پیشنهاد می‌کنم این ویدیو را ببینید :)

امسال را با نوشتن چند آرزو شروع کردم دقایقی قبل از سال تحویل که دوست دارم آن‌ها را با شما به اشتراک بذارم

آرزوی سلامتی دارم برای پدر و مادر‌ها
آرزو دارم وحدت بین همه‌ی‌مان را
آرزو دارم منیت از میانمان برود
آرزو دارم قضاوت نیز حذف شود
آرزو دارم امسال سراسر بازتاب مثبت باشد
آرزو دارم درکمون از هم زیاد شود
آرزو دارم امسال سراسر آگاهی باشد
آرزو دارم دوستی و لبخند مردم را
آرزو دارم آرمش روح پدرم را
آرزو دارم درک هستی را
آرزو دارم درک دوست را

چجوری با SASS یکبار کد بزنیم و دو خروجی RTL و LTR بگیریم؟

یکی از مشکلاتی که همیشه در طراحی سایت درگیرش بودیم و ساعت‌ها وقتمون را در شرکت می‌گرفت طراحی سایت‌های دو زبانه و ماجرای RTL کردن بود. اما با استفاده از Sass و ایده گرفتن از روشی که Foundation برای راست به چپ کردن استفاده کرده به روشی رسیدم که به راحتی می‌توانید یکبار کد بزنید اما با تغییر مقدار یک متغیر خروجی متفاوتی از فایل CSS خود بگیرید.

کد زیر بر همین اساس نوشته شده:

// Choose your site direction. LTR or RTL?
$text-direction: ltr;

// We equal $text-direction to $dir, you can use both of them in your code
@import "direction-controller";

body {
    direction: $dir;
    text-align: $left;

    // For different image in your code, you can use this solution. Use
    background-image: url(../img/#{$dir}/bg.png);
    background-position: $left top;

	@include if-ltr {
		line-height: 18px;
	}
	@include if-rtl {
		line-height: 22px;
		h1 {
			line-height: 25px;
		}
	}
}

#container {
    float: $left;
    line-height: dir-check(52px, 30px);
    padding: dir-values(1px 2px 3px 0);
}

#sidebar {
    float: $right;
    margin-#{$left}: 50px;
}
.next {
	content: dir-check('>', '<');
}
.br {
	border-radius: br-values(0 0 25px 0);
}

همانطور که میبینید فقط کافی است یکسری قوانین را در نوشتن رعایت کنید. برای گرفتن خروجی rtl یا ltr مقدار متغیر text-direction را تغییر دهد.(خروجی را ببینید: RTL، LTR)

روش استفاده

یک مجموعه توابع و میکسین نوشتم که پس از متغیر text-direction آن را import می‌کنیم. نگاهی به این فایل بیاندازید.

متغیر‌ها

در این فایل دو متغیر right و left تعریف شده که این دو بر اساس rtl بودن یا نبودن مقدار آن‌ها تغییر می‌کند:

ادامه مطب…

Sass چی داره که Less نداره؟

Syntactically Awesome Style Sheets NOT SASS

امیدوارم از مطلب قبل تا الان با Sass کار کرده باشید، چطور بود؟ به مشکلی بر نخوردید؟ اگر چیزی بوده توی کامنت‌ها بگید تا در موردش بحث کنیم.

Sass ابزار‌های قدرتمندی در اختیار میذاره که هیجان کار و سر و کله زدن با آن ها را بالا می‌بره:

 

Mixin Directives

Mixinها یکی از قدرت‌ترین ویژگی‌هایی است که از تکرار کد جلوگیری کرده و باعث تمیز شدن کد می‌شود. در واقع کد را یکبار نوشته و چندجا استفاده می‌کنید. مثال زیر را ببینید:

ادامه مطب…

کدهای پایه SASS و شروع با Compass

sass-compass-power

در این مطلب قصد دارم کد‌های پایه را برای شروع کار بگم اما قبل از آن می‌خوام یکی از فریم‌ورک‌هایی که بر پایه SASS ساخته شده به نام Compass را نصب کنید. یکی از ویژگی‌های منحصربفرد sass فریم‌ورکای زیادی که براش وجود داره. و کامپس اولین فریم‌ورکی که توسط Chris Eppstein از نویسندگان هسته sass برایش نوشته شده.

Compass با تمرکز بر قدرت‌مندتر ساختن و راحت‌تر کردن SASS ساخته شده که Mixin و توابع مختلفی را در رابطه با CSS3 ،Typography ،Utilities ،Layout ،Reset ارایه کرده است.

ادامه مطب…

از Sass نترسید!

در همایش استانداردهای وب که هفته پیش برگذار شد(+)، محسن براتی در مورد Sass ارائه‌ایی داشت و قبل از شروع ارائه سوالی مطرح کرد:

شما Sass را ترجیح میدید یا LESS؟

عده‌ایی که LESS را انتخاب کردند معتقد بودند که کار با Sass سخت است و برای همین آن را ترجیح میدن… و این دلیل خوبی برای نوشتن مطلب در مورد Sass عزیزی است که این چند وقت به شدت از کار کردن باهاش لذت میبرم.

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

sass

در مورد CSS Preprocessor ها (مانند: LESS, Sass, Stylus) باید بگم که این زبان‌ها این امکان را به ما می‌دهند که کدهای CSS را شبیه به زبان‌های برنامه‌نویسی استفاده کنیم و بتوانیم توابع و متغیر‌هایی تعیین کنیم که کار ما را وسعت و سرعت بخشد.(البته این توضیح خیلی ناقص و کوتاه است، بد نیست راجبش یکم سرچ کنید)

ادامه مطب…

گزارش تصویری دومین همایش استاندارد‌های وب و بستر وب باز

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

از هر ارائه یک عکس به عنوان نماد آن ارائه جدا کردم که در زیر میتونید آن‌ها را ببینید:

ادامه مطب…

تنها اولویت انسان است(HEO)

در مطلب قبل چرخه‌ایی مهم در طراحی وب را دیدیم و سوالی مطرح شد تحت عنوان:

اولویت در پروژه‌های وب با چیست؟

میخواهم بگویم که تنها اولویت با انسان است! یعنی بهینه‌سازی برای انسان HEO :

  • بهینه‌سازی برای چشم انسان                    Human Eye Optimization
  • بهینه‌سازی احساسی انسان              Human Emotion Optimization
  • بهینه‌سازی تجربه انسانی               Human Experience Optimization
تمامی کارهایی که ما میکنیم از SEO بگیریم برای جذب بازدید کننده از موتور‌های جستجو تا گرافیکی که جذابیتی را ایجاد کند و مفهوم کاربردپذیری که سایت ما را برای بیننده کاربردی کند و تجارب کاربری که وبسایت ما را برای کاربر آشنا به نظر می آورد تا راحت‌تر کار کنند همه و همه یک مفهوم دارند وب سایتمان را برای یک انسان طراحی کنیم. نه برای روبوت‌های گوگل که سایتمان را اول کنند در جستجو نه برای یک هنرمند که سایتمان فقط گرافیک و عکس سنگین باشد.
بستگی به هدفمان وبسایتی را بنا میکنیم که قشر خواصی را جذب کنیم پس تمرکزمان نباید فقط بر یک موضوع خواص باشد به عنوان مثال اگر فقط روی SEO تمرکز کنیم بازدید کننده زیادی از طریق جستجو به وبسایت ما می‌آیند ولی فرض کنید فروشگاه ما پر از بازدید کننده شود ولی اگر خرید نکنند تمام تلاش ما برای جذب بیهوده بوده است.
و حالا ما بیاییم روی تجارب کاربری و کاربردپذیری کار کنیم در صورتی که بازدید کننده‌ایی نداشته باشیم فایده‌ایی ندارد باز شکست خوردیم.
یکی از مهم‌ترین دلایلی که توسعه وب را به عنوان حرفم انتخاب کردم تعامل آن مابین تکنولوژی، هنر و اجتماع است. جایی که اگر بخوای موفق باشی باید همه ابعاد را در نظر بگیری و این دقیقا مثل روابط اجتماعی می‌ماند باید انسان را مدنظر داشت بقیه چیزها ابزار هستند و بهانه ارتباط.
مقالات مرتبط:
پی‌نوشت: این مطلب را در محیط عالی کافه کتاب لاله زار نوشتم. محیط بسیار آرامش بخشی، پیشنهاد میکنم حتما به اینجا سر بزنید.