طراح غرق در تکنولوژی

یکی از سوالاتی که همیشه در ایمیل٬ تویتر٬ فیس‌بوک و حتی در سمینارها و رویداد‌ها دوستان از من می‌پرسند درباره‌ی شیوه به روز بودن درباره تکنولوژی‌های طراحی اینترفیس وب است. مطالبی که در ادامه می‌آورم برای کسانی است که طراحی را بلدند و مشکلی با طراحی یک سایت با HTML,CSS و جاواسکریپت ندارند. اگر از خوانندگان این مطلب هستید که توانایی طراحی یک سایت ساده با استفاده از تکنیک‌های معمول را ندارید٬ مطالب این پست برایتان مفید نخواهد بود. شما بهتر است اول طراحی با HTML و CSS را به شکل مطلوبی یاد بگیرید و پس از آن به دنبال به روز بودن درباره‌ی تکنولوژی‌های روز باشید. کسانی که مبتدی باشند می‌توانند از دو کتابی که ترجمه کردم برای آموزش HTML5 و CCS3 و همینطور کتاب صد یک نکته و ترفند CSS استفاده کنند که البته هر دو کتاب در سطح مبتدی نیست و قبل از شروع باید اندکی شخصا از طریق سایت و یا کتاب‌های دیگر مقدمات را یاد بگیرید و سپس از این کتاب‌ها استفاده کنید.

بر می‌گردیم سر اصل مطلب. شما طراحی هستید که تا حد مطلوب به HTML و CSS مسلطید و می‌توانید صفحات منظم و قابل قبولی طراحی کنید. حال احساس می‌کنید از همه عقب هستید. هر روز تکنولوژی جدید مطرح می‌شود. فریم‌ورک‌ها یکی پس از دیگری ظاهر می‌شوند و یادگیری هر کدام ممکن است هفته‌ها یا حتی ماه‌ها زمان ببرد. مدام تکنیک‌های مختلف رو می‌بینید که احساس می‌کنید باید یادشان بگیرید. در سایت‌های مثل CodePen افکت‌هایی را می‌بینید و احساس می‌کنید از نظر توانایی خیلی پایین‌تر از طراحان دیگر هستید و این باعث اضطراب شما می‌شود. فقط خواستم بگویم که شما تنها نیستید. حتی برترین طراحان دنیا هم این حس را خواهند داشت ولی هر طراح بر اساس الگو و شیوه‌ی خودش٬‌ اطلاعاتش را به روز نگه می‌دارد و تکنولو‌ژی‌های مورد نیازش را یاد می‌گیرد. در این پست من درباره منابعی که خودم شخصا از آنها استفاده می‌کنم و شیوه پیدا کردن تکنولوژی‌های مناسب را توضیح می‌دهم.

از کجا شروع می‌کنم؟

در حال حاضر تعداد بسیار زیادی سایت و منبع برای طراحی اینترفیس وب وجود دارد ولی همه سایت‌ها٬ کیفیت لازم را ندارند. خیلی از این سایت‌ها صرفا راه‌اندازی شده‌اند تا مخاطب جذب کنند. عموما سایت‌های زیادی شبیه به تیتر: «۱۰ ابزار مفید برای طراحی» و یا «۲۰ ترند طراحی در سال ۲۰۱۴» و امثال آن را دارند که عموما مطالب عمیقی ندارند و صرفا مطالبی را درج می‌کنند که تاریخ مصرف داشته و برای خواندن تفریحی مناسبند. البته مفید بودن بعضی از این پست‌ها را نفی نمی‌کنم ولی سایت‌های بهتری هم وجود دارد که درباره همه‌شان توضیح می‌دهم. تعدادی سایت هم وجود دارد که مطلب عمیق‌تر و بهتری می‌نویسند ولی دنبال کردن همه‌شان کار سختی است. خوب من چکار می‌کنم؟ به شخصه اول از این سایت‌ها شروع نمی کنم. من در قدم اول یک سری هفته نامه و روزنامه مرتبط با طراحی را چک می‌کنم که به شکل روزانه یا هفتگی مطالب داغ مربوط به طراحی وب را عموما در آخر هفته میلادی برایم ارسال می‌کنند. لیستشان اینجاست:

  1. Sidebar
  2. CSS Weekly
  3. HTML5 Weekly
  4. Web Design Weekly
  5. JavaScript Weekly
  6. Responsive Web Design Weekly
  7. Smashing Newsletter

اینها از همه به روزتر هستند. موارد دیگری هم مثل سایت Hey Designer! هم هست ولی گاها یک ماه آپدیت جدیدی ندارد یا موارد دیگری همچون Open Web Platform Daily Digest که رایگان نیستند و باید بابت استفاده از سرویسشان حق اشتراک بپردازید. ولی همین موارد بالا کفایت می‌کند. از همه به روزتر و منظم تر sidebar است که هر روز پنج لینک را به ایمیل شما ارسال می‌کند. بسیاری از مطالبش تحلیلی است و آموزش٬ خیلی کم در بین آنها پیدا می‌شود. مورد دوم CSS Weekly هست که از نظر من در انتخاب آموزش‌ها از بقیه بهتر عمل می‌کند و هر شماره واقعا اطلاعات خوبی دارد و بسیار مفید است. بقیه هم مطالب خوبی برای شما ارسال می‌کنند و گاها یکی دو مقاله خیلی خوب بین اکثرشان یکسان است. مورد آخر روزنامه خود اسمشینگ است که مطالب خوبشان را دسته‌بندی کرده و برایتان ارسال می‌کند. مورد اول روزانه و بقیه به شکل هفتگی منتشر می‌شوند.

حال من چه استفاده‌ای از هفته‌نامه ها و روزنامه‌های بالا می‌کنم. من بیشتر برای فهمیدن ترند طراحی از اینها استفاده می‌کنم. مثلا در یک بازه زمانی مشخص یک سری کلمات کلیدی در همه مقالات باب می‌شود. به عنوان مثال اخیرا درباره نرم افزار Sketch 3 زیاد می‌خوانیم و این کلمه ترند شده و مطالب زیادی درباره‌اش می‌نویسند. یک زمانی Sass ترند شده بود و مقالات زیادی درباره آن می‌دیدید. در کل این هفته‌نامه و روزنامه‌ها برای آشنایی با آخرین ترفند‌ها و ترند‌های روز بسیار مفیدند. حالا من همه اینها را تا ته می خوانم. جواب کاملا مشخص است: نه! زمان کافی برای خواندن همه را ندارم. نگاه می‌کنم ببین چه موضوعی داغ‌تر است و سعی می‌کنم درباره آنها بخوانم. فقط درصد کمی از مقالات را می‌خوانم و بقیه را بوکمارک می‌کنم برای خواندن در زمانی که بهشان نیاز دارم. مثلا الان SVG ترند است و برنامه‌ریزی کردم تا درباره‌ی SVG اطلاعات بیشتری کسب کنم.

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

حالا می‌رسیم سر قضیه سایت‌ها. سایت‌های مختلفی هستند که درباره طراحی اینترفیس وب می‌نویسند ولی شخصا تعداد بسیار کمی را دنبال می‌کنم. من فقط همین سایت‌ها را دنبال می‌کنم که اینجا لیست شده است:

  1. Smashing Magazine
  2. CSS-Tricks
  3. Tuts Plus
  4. A List Apart
  5. Team Tree House Blog
  6. Codrops

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

در این بین قدم اول برای یادگیری مطلب جدید Smashing magazine است. مطالب این سایت کامل و جامع است و قطعا آموزشی که در این سایت درج شده از هر سایت دیگری کامل‌تر است. اگر مطلب مناسب را اینجا پیدا نکردم به سراغ CSS Tricks می‌روم که اغلب مطالب فنی خیلی خوبی دارد. در قدم سوم هم از Tuts Plus استفاده می‌کنم که درباره مطلب جدید اطلاعات کسب کنم. سایت A List Apart خیلی کم مقالات آموزشی منتشر می‌کند ولی مطالب تحلیلی خوبی دارد و گه گاه مطالبش را می‌خوانم. مورد آخر هم Team Tree House است که اینجا هم گاها آموزش‌های مفصل و خوبی پیدا می‌شود که خیلی ساده و روان نوشته شده. مورد آخر یعنی Codrops هم ایده‌های خیلی ناب و خوبی را برای ایجاد افکت‌های مدرن با CSS و JS منتشر می‌کند. مطالبی که در این سایت منتشر می‌شود اغلب حالت آموزش دارد و کد آماده هم در پست قرار دارد که می‌توانید استفاده کنید. غیر از این‌ها هیچ سایت دیگری را دنبال نمی‌کنم. شاید بگویید که سایت هایی مثل Noupe و Web Designer Depot و Specky Boy و بقیه چه می‌شوند؟!! اگر صادق باشیم کیفیت مطالب این سایت‌ها در اغلب موارد خیلی از سایت‌هایی که در بالا معرفی کردم پایین‌تر است. البته گاهی مطالب خوب در این سایت‌ها هم پیدا می‌شود که می‌توانید با مراجعه گذری و چک کردن مطالب یک ماه اخیرشان آن مطالب را پیدا کنید.

چه پادکست‌هایی را گوش می‌کنم؟

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

  1. Boag World
  2. The Big Web Show
  3. ShopTalk Show

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

چه کسانی را دنبال می‌کنم؟

افراد حرفه‌ای زیادی در وب فعال‌اند و بهترین محیط برای دنبال کردن این افراد تویتر است. اغلب این متخصصان در فیس‌بوک یا پلاس هم اکانت دارند ولی به نظرم بهترین جا برای دنبال کردنشان تویتر است چون ماهیت تویتر به شکلی است که مطالب تباید موجز و مختصر باشند و به همین خاطر بعضا مطالب خوبی توسط متخصصان در این تویتر منتشر می‌شود. برای دیدن لیست افرادی که من دنبال می‌کنم می‌توانید لیستی از این افراد را در اینجا ببینید. خیلی از این افراد در تویتر از مسائل شخصی می‌نویسند ولی بعضی‌های دیگر مطالب خوبی را منتشر می‌کنند. مثلا David Walsh اگر pen جالبی در سایت codepen ببینید در تویتر به اشتراک می‌گذارد ولی تا به حال به ندرت دیده‌ام که Eric Meyer درباره وب تویت کند و مطالبش اغلب شخصی است. من از اپ TweetDeck روی کروم استفاده می‌کنم و یک ستون اختصاص برای لیستی که لینکش را قرار دادم٬ ایجاد کرده ام. هر زمانی که از تویتر استفاده می‌کنم نگاهی هم به این لیست می‌اندازم که اگر چیز جذابی در آن دیدم بوکمارک کنم و یا همان لحظه بخوانمش.

چطور تکنولوژی جدید را انتخاب کرده و یاد می‌گیرم؟

حالا می‌رسیم به بخش مهم ماجرا. در سایت‌ها و هفته‌نامه‌هایی که فهرست شدند٬‌ مطالب بسیار زیادی منتشر می‌شود. من چه باید یاد بگیرم؟ کدام تکنولوژی بهتر است؟ اگر یکی را انتخاب کنم و مناسب نباشد و وقتم تلف شود چه؟ قطعا این سوالات را از خودتان می‌پرسید و دنبال جوابشان هستید. همه با این سبک سوالات مواجه می‌شوند. من تکنولوژی مورد نظرم را به این شکل انتخاب می‌کنم:

  1. نگاه می‌کنم ببینم چه تکنولوژی‌ جدیدی آمده که به تخصص من نزدیک‌تر است. برای پیدا کردن تکنولوژی‌های ترند شده همان هفته‌نامه‌ها و سایت‌هایی که لیست کردم کافی‌اند. وقتی می‌بینید همه مشغول صحبت از Sass و یا Git هستند پس یادگیری این دو لازم به نظر می‌رسد. در کنار اینها تکنولوژی‌های مفید دیگری نیز هستند که مایلید یاد بگیرید ولی یا رابطه مستقیمی با کار شما ندارند و یا یادگیریشان زمان زیادی می‌طلبد. مثلا به شخصه دوست دارم AngularJS را یاد بگیرم ولی یادگیری این فریم‌ورک فقط به درد کسانی می‌خورد که می‌خواهند اپ‌های تک صفحه‌ای تحت وب و یا اپ‌های هیبریدی موبایل طراحی کنند. همینطور یادگیری کاملش زمان زیادی نیاز دارد و در حال حاضر به کاری که انجام می‌دهم ارتباط زیادی ندارد. توسعه اپ موبایل از برنامه‌های آینده من است به همین خاطر فعلا موکولش کرده‌ام به زمانی که تایم بیشتری در اختیار داشته باشم و دوباره برمی‌گردم تا این فریم‌ورک را هم یاد بگیرم.
  2. اگر تکنولوژی‌هایی که روی بورس هستند مشابه‌های دیگری هم دارند باید همه را کنترل کنید. مثلا زمانی که من به سمت css preprocessor ها رفتم گزینه‌های مختلفی از جمله Sass و LESS و Stylus موجود بود. من محبوبیت هر کدام را چک کردم. تعداد لایک‌های هر پروژه و میزان فعال بودن آن را در Github چک کردم تا آن که از همه معروف‌تر است و توسعه‌دهندگان بیشتری دارد را انتخاب کنم.
  3. بعد از آن سایت هر کدام را چک کردم تا ببینم حجم مستنداتشان چقدر است و برای یادگیری باید چقدر برایش زمان بگذارم و آیا صرف این مقدار زمان برای آن تکنولوژی ارزشش را دارد یا خیر.
  4. بعد که مطمئن شدم که یکی را قرار است یاد بگیرم برای شروع اول به یکی از سایت‌هایی که معرفی کردم مراجعه می‌کنم تا ببینم که مطلبی درباره‌ی این تکنولوژی نوشته‌اند یا نه. اغلب Smashing Magazine شما را ناامید نمی‌کند و همیشه مطلب خوبی خواهد داشت.
  5. حداقل یکی دو روز کامل را صرف یادگیری این تکنولوژی می‌کنم. گاها حین کار کردن٬ سرچ هم می‌کنم تا هر بخش مقاله که می‌خوانم برایم روشن نیست را بهتر بفهمم. گاهی می‌بینم مطلب خیلی جزپیات دارد و خواندن مقاله خیلی زمان می‌گیرد در اینجا اغلب نگاهی به بخش ویدیو در سایت Tuts Plus و یا Lynda.com می‌اندازم تا ببینم فیلمی درباره این تکنولوژی دارند یا خیر. اگر باشد سعی می‌کنم آن فیلم را روی وب پیدا کنم.
  6. در قدم بعد سعی می‌کنم همان چیزی که یاد گرفتم را در قالب پروژه‌ای کوچک استفاده کنم تا اطلاعات کسب شده از یادم نرود. این بهترین شیوه یادگیری است. مثلا همین بلاگ Front-end به من کمک می‌کند که Git را فراموش نکنم چون با نوشتن هر مطلب باید با استفاده از Git مطالب جدید را به سایت بفرستم.
  7. وقتی پروژه‌ای را کار کنید قطعا با ده‌ها و شاید صد‌ها مشکل مواجه شوید که نه در مقالات بوده و نه در فیلم‌ها درباره‌اش توضیحی داده شده است. در اینجا سایت Stack Overflow به میزان غیر قابل تصوری به شما کمک می‌کند. سوالی نبوده که جوابش را در این سایت پیدا نکرده باشم. اگر هم سوالی داشته باشید می‌پرسید و اغلب در یکی دو ساعت جواب مناسبی برای سوال خود می‌گیرد. در زمان انجام پروژه اگر این سایت در دسترسم نباشد سرعتم حداقل ۴۰ درصد کمتر می‌شود و به شدت به منابع این سایت وابسته هستم.

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

چه کتاب‌هایی را می‌خوانم؟

اگر صادق باشم چند وقتی است که کتاب‌های فنی خیلی خاصی را نمی‌خوانم. مشکلی که با کتاب‌ها دارم بحث مفصل بودن و کشدار بودن آنهاست. مثلا بک مطلب که می‌توان در ۱۰ دقیقه توضیحش داد در کتاب در ۴۰ صفحه توضیح داده شده که خواندنش دو ساعت وقت شما را می‌گیرد. جدا از آن چیزی را که از کتاب می‌آموزید اگر در کار استفاده نکنید به سرعت فراموشش می‌کنید. من شاید ده‌ها کتاب مرتبط با طراحی اینترفیس را خوانده باشم ولی به جرات می‌توانم بگویم شاید تنها ۱۵ درصد از آن همه مطلب را الان به یاد دارم.م عمولا به جای کتاب‌های خودآموز و مبتدی از کتاب‌های مرجع و یا کتاب‌های آشپزی یا همان Cookbook استفاده می‌کنم. این کتاب‌ها مشکلی را توضیح داده اند و راه حل را در ادامه نوشته‌اند. مثلا کتاب ۱۰۱ نکته و ترفند CSS از همین جنس کتاب است. این کتاب‌ها عملی‌تراند و به نظرم مفید‌تر واقع می‌شوند. کتاب مرجع را هم نگه می‌دارم که هر زمان برای دستوری مشکل داشتم به آنها مراجعه کنم که ایراداتی که دارم را برطرف کنم. به طور خلاصه برای من در حال حاضر فیلم و مقاله ارزشمند‌تر از کتاب است ولی همچنان کتاب‌های مرجع را دریافت کرده و نگه می‌دارم و از آنها استفاده می‌کنم. در این بین کتاب‌هایی هم هستند که استثنااند و وقت گذاشتن برای خواندنشان خیلی هم خوب است که بعدا در پست‌های دیگر یک سری کتاب که به نظرم خواندنشان برای هر طراحی اینترفیسی ضروری است را لیست می‌کنم. مثلا در بین کتاب‌هایی که اخیرا دیدم کتاب Eloquent JavaScript به نظرم عالی بود و یکی از بهترین کتاب‌هاییست که درباره جاواسکریپت نوشته شده است.

زمانی که مدتی از متد‌های طراحی روز دور بیافتم چه می‌کنم؟

سوالی که مطرح می‌شود این است که بنا به دلایلی ممکن است مدتی از وب دور باشیم و نتوانیم مطالب را دنبال کنیم. اگر بعد از مثلا ۳ ماه برگردیم می‌توانیم خودمان را برسانیم؟ جواب به این سوال بیشتر بستگی به آن بازه زمانی دارد. هر چقدر بیشتر دور مانده باشید زمان بیشتری را باید صرف یادگیری تکنولوژی‌های جدید بکنید ولی حقیقت این است که با سه ماه دور بودن اتفاق خاصی نمی‌افتد. به نظرم با دو هفته تلاش بعد از سه ماه می‌توانید خودتان را برسانید ولی اگر مدت زمان دور افتادن شما زیاد باشد بعدا مجبورید خیلی چیزها را در کنار هم بیاموزید که زمان زیادی می‌طلبد. مثلا فرض کنید شما یک سال است مطالب مرتبط با اینترفیس را دنبال نمی‌کنید. در یک سال گذشته استفاده از Git حتی برای پروژه‌های طراحی اینترفیس هم زیاد استفاد شد و یادگیریش واجب شده٬ در کنار آن پیش پردازشگر‌های CSS مثل Sass و LESS محبوب شدند و باید یکی از این‌ها را حتما بدانید. در کنار اینها ابزارهای Task Runner مثل Grunt و Gulp محبوب شدند٬‌ بعد از آن بحث Icon Font ها داغ شد و الان هم حرف از SVG و متحرک سازی آن است و اگر بخواهید در یک بازه زمانی کوتاه همه را یاد بگیرید قطعا با مشکل مواجه می‌شوید. اگر می‌خواهید به روز باشید و تکنولوژی روز را دنبال کنید بهتر است که بیشتر از سه الی چهار ماه از کارتان دور نیافتید. حال اگر هم این اتفاق افتاد با تلاش بیشتر و با صرف یکی دو ماه می‌توانید خودتان را برسانید.

حرف آخر

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

حالا نوبت شماست. در بخش کامنت اگر سایتی می‌شناسید که از آن استفاده می‌کنید و به نظرتان برایتان کار می‌کند لیست کنید که بقیه دوستان و خودم بتوانیم از آنها استفاده کنیم. اگر متد یادگیری خاصی دارید و برایتان کار می‌کند مایلم درباره آن بشنوم ;)