امیرعباس عبدالعلی که پیش‌تر او را به خاطر کتابی که به زیبایی ترجمه کرده بود(۱۰۱ترفند و نکته در رابطه با CSS)، می‌شناختیم. به تازگی کتاب جدیدی  تحت عنوان آموزش HTML5 و CSS3 در قالب پروژه را ترجمه کرده و آن را در اختیار عموم قرار داده است.

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

مشاهده صفحه اختصاصی این کتاب

از  Jonathan Ive مهندس ارشد طراحی شرکت اپل. + +

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

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

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

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

هر ایده ای که قرار است به محصول تبدیل شود بسیار ظریف و شکننده هست پس از همین اول کار بهتر است سه ویژگی ممتاز برای آن دست و پا کرد و بنیاد کار را بر پایه آن سه ویژگی که حکم سه ستون محکم را بازی میکنند، بنا نهاد.

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

به تصویر زیر نگاه کنید:

اولین چیزی که به ذهنم رسید خانه ای است که یک کودک نقاشی کرده و بعد ازآمدن زلزله بعضی دیوار های آن خانه ریخته و به یک آثار باستانی تبدیل شده.

و دومین: دو نفر که در زیر دوش حمام ایستاده اند و کفپوش حمام کاشی قرمز است.

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

آقای شهریار رحیمی مدیر عامل شرکت همکاران سیستم در مراسم تغییر نشان این شرکت معتقد است که این نشان مورد توجه نسل جدید و جوان است. اما من معتقدم نسل جوان این نشان را نمیپسندند. حس هایی در این نشان نهفته است که عرض میکنم خدمتتان:

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

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

نشان باید مدرن بودن، تفکر جدید و ذوق هنری شرکت را بیان کند اما نشان جدید مهربان نیست بلکه عصبانی و خشن است.

درک کاربران عادی نسبت به دید بصری بسیار بالا رفته و نسبت به این موضوع بسیار باهوش شده اند، من سعی کردم دید خودم را حتی در حد یک فرد ۱۵ تا ۲۰ ساله پایین بیاورم برای خوب دیدن نشان جدید و مشاهدات و تفکرات خودم که میتواند ملاکی بر اساس تفکرات یک فرد جوان باشد بیان کنم.

در تصویر زیر سه نشان برگزیده را میبینید که همکاران سیستم از بین طرح های ورودی این ۳ را انتخاب کرده و در نهایت یکی از آنها نشان اصلی شرکت شده:

به نظر میرسد این ۳ نشان هم ایراداتی دارند، بگذارید در نگاه اول به نشان ها کمی ساده تر فکر کنیم:

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

نشان آخر مانند نشان انتخاب شده نهایی، دو حرف انگلیسی S/G هستند چرا از حروف انگلیسی استفاده شده؟ خلاقیت در بنیاد این نشان وجود ندارد به همین سادگی. بهتر است این واقعیت را بپذیریم که این نشان های برگزیده به هیچ عنوان برازنده غولی مثل همکاران سیستم نیستند.

توجه داشته باشید که با دید خیلی ساده به موضوع کیفیت نشان ها نگاه کردیم یعنی مانند نوع فکر کردن یک فرد ۲۰ تا ۲۵ ساله و اولین چیزی که با دیدن نشان ها در ذهنمان نقش بست، گفتیم.

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

ویژگیهایی که بهتر است در روح نشان جدید همکاران سیستم دمیده شود:

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

با احترام، تیم مانی پیکسل

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

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

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

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

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

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

تبلیغات نامناسب:
متاسفانه بسیاری از سایت‌ها در مورد تبلیغات کنترل خاصی اعمال نکرده‌اند و این این باعث شده تا یک‌پارچگی سایت از بین برود. در مورد مکان و شکل تبلیغات بیشتر دقت کنید، نباید کاربر را آزار دهد و تمرکز وی را بر‌هم زند.

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

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

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

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

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

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

بهتر است بخوانید:

نکات طراحی وب: کاربرد‌پذیری – مقدمه
نکات طراحی وب: کاربردپذیری – طراحی نامریی
شیوه صحیح پیوست فونت به صفحه وب در CSS3 به همراه ۴۰ فونت فارسی اصلاح شده برای فایرفاکس ۶
کارگاه آموزشی HTML5 + CSS3

هر ساله  روز جهانی کاربردپذیری در کشورهای مختلف برگزار می شود. امسال نیز همانند سال گذشته این روز در ایران به همت دوستانی چون پرهام باغستانی و محمدرضا محمدعلی در روز پنجشنبه ۱۹ آبان ماه در دانشگاه علم و فرهنگ برگزار می گردد.

«داوود تراب زاده» نیز به عنوان نماینده تیم مانی پیکسل در این روز ارائه ای با موضوع «طراحی احساسی» خواهد داشت که امیدواریم مورد استقبال دوستان قرار گیرد.

 برای اطلاعات بیشتر در مورد جزئیات این همایش به این آدرس مراجعه کنید.

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

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

برای دیدن اسکرین شات از طرح در سایز ۱۰۰% و با کیفیت بهتر به این نشانی مراجعه کنید.

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

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

در مرورگر گوگل کروم و یا سافاری می توانید بهترین حالت نمایش لوگوها را مشاهده کنید.

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

وب سایت معرفی بیتل: volkswagen beetle

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

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

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

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

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

رنگها استفاده شده در بخشها بصورت سرد و گرم تکرار شده و کاربر احساس خستگی نمیکند، این تکنیک برای جذاب شدن و وسوسه کردن کاربر برای ادامه بسیار مفید است.

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

استفاده از منو هدایت کننده، که کاربر اگر در وسط صفحه بود با یک نگاه بخشها را ببیند و راحت دسترسی داشته باشد به بخش اول یا آخر صفحه.

استفاده از CSS3, JS, HTML5 برای پیاده سازی طرح یکی از نکات جالبی هست که میتوان به آن اشاره کرد، طوری که یکی از اعضای تیم پیاده سازی این صفحه در توییت خود این صفحه را با عنوان “همه جذابیت های صفحه را بدون ادوبی فلش ایجاد کردیم” معرفی کرد. اگر منطقی بخواهیم فکر کنیم خیلی از انیمشن هایی که در وب هستن را به کمک HTML5 و بدون فلش میتوان ایجاد کرد.

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