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

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

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

الان اواخر عمر مد طراحی تخت (Flat Design) هست که شامل چیزهایی مثل استفاده از رنگ‌های مات، سایه‌های بلند (Long Shadow)، عدم وجود گوشه‌های گرد و ... هست. قبل از طراحی تخت، دوران طراحی پارالاکس بود و بعد با مد شدن طراحی تخت، طراح‌ها شروع کردن به نکوهش کسایی که از پارالاکس در طرح‌هاشون استفاده می‌کنن. ترندها تا یه جایی خوب و مفیدن. باعث میشن که طراح‌ها هر روز خلاقیت‌های جدید به خرج بدن و سعی کنن که با بقیه متفاوت باشن، و اینکه کلا رنگ و روی وب رو عوض می‌کنن. اما سبک‌ها و ترندها می‌تونن بیشتر از اینکه مفید باشن، به شدت مخرب باشن:

تمام وب‌سایت‌ها شبیه همدیگه شدن!

گاهی دوستان به من می‌گن که چرا متون توی وبلاگم و بقیه کارهام هم‌تراز (Justify) نیستن. من هربار سعی کردم که توضیح بدم دلایم رو برای این‌کار ولی تصمیم گرفتم این‌بار اینجا در موردش به صورت کامل‌تر توضیح بدم.

متون هم‌تراز (Justified Text)

متون هم‌تراز به پاراگراف‌هایی گفته می‌شه که از از سمت راست و چپ حاشیه مشخصی دارن و درواقع طول هرخط در پاراگراف طوری تنظیم می‌شه که انتهای هر خط، با انتهای خطوط دیگه در یک راستا باشن. ازین روش در تایپوگرافی متون چاپی استفاده زیادی می‌شه. مثلا اگر به روزنامه‌ها و کتاب‌های چاپ شده دقت کنید، می‌بینید که تقریبا همه متناشون به این شکل تنظیم شدن. هم‌ترازی متن به خواننده کمک می‌کنه که راحت‌تر متون رو مطالعه کنن و چشمشون خسته نشه و یه حس تقارنی هم القا بشه. متن زیر یک پاراگراف از کتاب The Great Gatsby هست:

در طی چند سال اخیر، طراحی واکنش‌گرا (Responsive Web Design) به یکی از بحث‌های داغ و مهم بین طراح‌ها و توسعه‌دهنده‌های وب تبدیل شده  و با توجه به رشد مرورگرها و گستردگی پشتیبانی از Media Query ها، این روزها خیلی مهم هست که یه طراح بتونه وب‌سایتی طراحی کنه که در بیشتر دستگاه‌ها و صفحه نمایش‌های موجود، به درستی نمایش داده بشه.

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

این همایش ۱۴ آذر ۹۲ از طرف «مدرسه استانداردهای وب» در تهران برگزار می‌شه و من هم دبیر علمی این همایش هستم. «مدرسه استدانداردهای وب» قرار هست یه مجموعه باشه که در در زمینه آموزش استانداردهای وب و طراحی اون فعالیت کنه و این همایش اولین قدم در این راهه. این مجموعه، با حمایت آکادمی مجید آنلاین و مجید علوی‌زاده عزیز شکل گرفته و من خوشحالم که می‌تونم در آینده قدم‌های بهتری در زمینه آموزش وب بردارم با کمک این دوستان.

سالهاست که ما در وب و طراحی وب به پیروی از طراحی گرافیک، از واحدهای پیکسلی برای مشخص کردن ابعاد و اندازه‌ها استفاده می‌کنیم. همونطوری که قبلا در مطلب تصاویر SVG آینده وب هستند گفتم، تکنولوژی داره به سمتی حرکت می‌کنه که توش پیکسل‌ها دائما در حال تغییر هستن. ما سال‌ها از صفحه‌های نمایش با فشردگی ۱ پیکسل استفاده کردیم و بعد با معرفی شدن صفحه‌نمایش رتینا از طرف اپل، این فشردگی به ۲ پیکسل تبدیل شد. به این معنی که تعداد پیکسل‌هایی که در یک اندازه واحد جا می‌گیرن ۲ برابر شد. بعد از صفحه‌نمایش رتینا، شرکت‌های مختلف فشردگی‌های پیکسلی جدید و بالاتری رو معرفی کردند و این مسئله کار رو برای ما طراح‌های وب خیلی سخت کرد؛ چرا که باید طرح‌های ما تو هر دستگاهی با هر سایز صفحه‌نمایش و فشردگی پیکسلی، عالی نمایش داده بشن. (لطفا برای توضیحات بیشتر در این مورد، مقاله‌ای که بالاتر بهش اشاره کردم رو بخونید.)

مشکلات طراحی پیکسلی

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

font: 14px/22px "Helvetica Neue", Arial, sans-serif;

این روش به خودی خود ایرادی نداره، ولی وقتی بخوایم در مورد کاربردپذیری (Usability) و دستیابی‌پذیری (Accessibility) در طراحی و یا طراحی واکنش‌گرا (Responsive Design) حرف بزنیم و تصمیم بگیریم، روش تعیین سایز و ابعاد بر اساس پیکسل مشکلات فراوانی داره.

مشکلات تایپوگرافی

تقریبا تمام مرورگرها به صورت پیشفرض یک فونت و یک اندازه قلم برای تمام صفحات وب تعیین می‌کنند که اگر صفحه‌ای در وب خودش فونت و سایز رو تعیین نکرده باشه، صفحه رو بشه راحت مشاهده کرد. اکثر مرورگرها برای قلم پیش‌فرض فونت Times و سایز ۱۶ پیکسل رو انتخاب می‌کنند و این به صورت یه استاندارد در اومده؛ ولی نکته مهم در این مورد این هست که کاربری که از اون مرورگر استفاده می‌کنه می‌تونه این پیش‌فرض رو تغییر بده. مثلا کسی که مشکل بینایی داره، می‌تونه به تنظیمات مرورگرش رو باز کنه و به جای ۱۶ پیکسل، ۳۲ پیکسل رو انتخاب کنه، در نتیجه این کار، همه چیز روی وب باید ۲ برابر بشه ولی این اتفاق نمی‌افته چون بیشتر جاها، طراح‌های وب بر اساس پیکسل همه چیز رو تعیین کردند.

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

مشکلات اجزای رابط کاربری

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

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

دوم و سوم آبان ماه امسال با همکاری آکادمی مجید آنلاین یه کارگاه آموزش HTML5/CSS3 و تایپوگرافی در وب برگزار می‌کنم. تو این کارگاه ۱۴ ساعته (۲ روز ۷ ساعته) در مورد تغییرات و امکانات جدید HTML5 و CSS3 صحبت می‌کنیم و نحوه استفاده از اون‌ها رو در پروژه‌های واقعی بررسی می‌کنیم. با توجه به علاقه شخصیم به تایپوگرافی، بخشی از این کارگاه رو اختصاص می‌دیم به تایپوگرافی در وب و در مورد تایپوگرافی خوب در زبان فارسی و چگونگی پیاده سازیش در وب بحث می‌کنیم. ظرفیت این کارگاه ۱۲ نفر هست و اگر قبل از ۲۵ مهر ثبت‌نام کنید، شهریه هر نفر ۲۶۰هزار تومان هست. برای اطلاعات بیشتر و مشاهده سرفصل‌های دوره یه سری به صفحه

چند روز پیش دیدم که سایت Flat UI Colors در شبکه‌های اجتماعی توسط طراح‌های وب به اشتراک گذاشته می‌شد و اکثر اون‌ها در بخش توضیحات لینک نوشته بودن: «اگر میخواید تخت طراحی کنید، بهتره ازین رنگ‌ها استفاده کنید!». گویا بیشتر طراح‌های ما (و حتی طراح‌های تازه کار در دنیا) تصور می‌کنن که طراحی تخت به معنی استفاده از چند شکل هندسی و طیفی از رنگ‌های خاص هست و اگر توی طرحشون از سایه‌ها و Gradientها استفاده نکنن، معنیش اینه که به طراحی تخت مسلط شدن و دیدشون به دنیای طراحی باز شده.

ولی اینطور نیست.

طرح قبلی وبلاگم را ۲۶ مهر ۹۰ طراحی فعال کرده بودم و از آن زمان چند بار تغییرات مختلفی رویش اعمال شد تا باب میلم شود. اما چون برای طراحی آن از توییتر بوت‌سترپ (که آن موقع اینترنت را اشغال نکرده بود!) استفاده کرده بودم، و رنگ و رخی که مد نظرم بود را نداشت، تصمیم گرفتم که دوباره قالب وبلاگ را طراحی کنم ولی این بار خیلی ساده‌تر.

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

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

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

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

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

شماهم اگر برای طراحی وب، گاهی از فوتوشاپ استفاده می‌کنید، حتما به این مشکل برخوردید که هنگام خروجی گرفتن برای وب (Save for web and devices) نتیجه‌ای که از کار حاصل میشه، با چیزی که در فوتوشاپ روش کار می‌کردید اندکی متفاوت هست و این خیلی بده. تصور کنید که ساعت‌ها وقتتون رو صرف پیدا کردن رنگ‌های مناسب کردید و بخاطر این مشکل، کارتون چیزی که میخواستید نشد.

بعد از کمی گشت و گذار در اینترنت و خرید کتاب Mastering Photoshop for Web Designers به پیشنهاد دوستان، بالاخره راه حل این مشکل رو پیدا کردم که امیدوارم به اشتراک گذاشتنش کمی از دردسرهاتون رو کم کنه.

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

اواخر آذر ۹۰، آرش زاد، موسس و سردبیر وبلاگینا، با من در مورد طراحی مجدد وبلاگینا به مناسبت چهارمین سال تولدش تماس گرفت. بعد از توافق قرار شد که اون اطلاعات لازم رو برای من ارسال کنه و من بر اساس اون اطلاعات براش یه Sketch تهیه کنم و توی جلسه‌ی بعدیمون بهش نشون بدم. حاصل تبادل اطلاعاتی که برای اون طرح شد، ۳۶ تا ایمیل شد که توش تمام اطلاعات لازم رو من دریافت کردم.

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

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

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

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

از امروز قالب جدید وبلاگ رو فعال کردم. داستان از این قرار هست که من در این وبلاگ که قبلا اسمش «ماورای وب» بود و تحت دامنه‌ی دیگری فعالیت می‌کرد، از سایت ۱۳۸۴ تا کنون فعالیت می‌کنم. البته نه به صورت منظم و مداوم، در طول این سال‌ها بارها بوده که چیزی برای نوشتن نداشته‌ام. تا یکی دو سال اخیر هم بیشتر از اینکه جنبه‌ی علمی داشته باشد، بیشتر در مورد زندگی شخصی‌ام که گاه بی ربط بود مطالبی می‌نوشتم. قالب قبلی این وبلاگ، حدود ۴سال پیش انتخاب شد و از آن زمان تغییراتی زیادی رویش اعمال شده بود. ولی داستان همان کوزه‌گر و کوزه‌ی شکسته‌اش است. من هیچوقت فرصت طراحی قالب اختصاصی نداشته‌ام، یا بهتر بگویم، خیلی

روز جهانی کاربردپذیری (World Usability Day) روز پنجشنبه ۱۹هم آبان ۱۳۹۰ در دانشگاه علم و فرهنگ تهران برگزار خواهد شد. در این همایش، شیوه‌های طراحی و اجرای تجربه کاربری (UX) و رابط کاربری (UI) به بحث گذاشته خواهد شد. همچنین من به عنوان موسس گروه ققنوس، در این همایش ارائه‌ای کوتاهی خواهم داشت در مورد محصولات ققنوس و نحوه‌ی اجرای تجربه‌ی کاربری در این محصولات. این شیوه‌ها به صورت عملی روی پروژه‌های اخیر ما، به خصوص ۳۱شب نمایش داده خواهند شد. علاوه بر این، گروه ققنوس (Phoenix Alternative) یکی از حامیان برگزاری این همایش است. طراحی مجدد و بهینه‌سازی وب‌سایت روز جهانی کاربردپذیری ۱۳۹۰ در ایران بر ع

چندین سال است به عنوان طراح وب فعالیت می‌کنم. در تمام مدت کمتر به مشتری‌ها / مدیرانی برخورده‌ام که به طراح‌های وب خود اعتماد داشته باشند و این مساله غالبن باعث شکست و یا افت پروژه‌های وب آن‌ها میگردد. ارزش طراح‌های وب بیشتر از این است که شما به آن‌ها دستور دهید تا چند پیکسل را جابجا کنند. ارزش طراح‌های وب بیشتر از به اصطلاح Pixel Pusher بودن است. آن‌ها اطلاعات خوبی در مورد دنیای اینترنت و نحوه‌ی کار آن دارند و مطمئنن بهتر از خود ِ شما می‌توانند تجارت شما را در دنیای اینترنت رو به جلو حرکت دهند. آن‌ها کارابران معمولی را می‌شناسند، کاربرد رنگ‌ها را می‌دانند و از تکنیک‌های طراحی وب نهایت استفاده

سلام،

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

(توضیح اینکه امتیاز بالاتر = پشتیبانی بهتر از HTML5 = بهتر)

رتبه پنجم: مرورگر اپرا (نسخه ۱۰.۱۰ مکینتاش)

[caption id="attachment_276" align="aligncenter" width="650" caption="Opera 10.10 Mac OS X 10.6"][/caption]

رتبه چهارم: مرورگر فایرفاکس (نسخه ۳.۶.۳ مکینتاش)

[caption id="attachment_277" align="aligncenter" width="650" caption="Firefox 3.6.3 Mac OS X 10.6"][/caption]

ادامه تست رو در ادامه مطلب بخونید...

سلام دوستان، به زودی استدیو طراحی وب ققنوس شروع به کار میکنه. املای ققنوس رو Phinix با تلفظ کلمه اصلی (phoenix: fee-niks) انتخاب کردیم تا مشکلی برای Branding پیش نیاد. چون الان صدها شرکت با همین اسم دارن فعالیت میکنن. موقعیت فیزیکی استدیو، Thornhill در کشور کانادا هست. وبسایت استدیو رو تا چند روز دیگه آماده میکنم. اینجا: www.thephinix.com [caption id="attachment_196" align="aligncenter" width="590" caption="The Phinix Design Studio"][/caption] البته تیم بزرگی نداریم. فعلا دو نفر هستیم. من ( سالار کابلی ) و دوست خوبم، میلاد توتونچیان درود. سالار