بایگانی‌های طراحی وب

نوشته‌ها

چقدر سایت منطبق بر موبایل شما خوب است؟

۱۳۹۶/۰۱/۳۰/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

چقدر سایت منطبق بر موبایل شما خوب است؟ – امروزه طراحی سایت ها برای استفاده در موبایل ها به بالاترین میزان خود رسیده است. در واقع، این نوع از طراحی ها از سال ۲۰۱۴ گوی سبقت را از طراحی برای دسکتاپ ها ربوده اند. اما واقعا طراحی سایت ها برای استفاده در موبایل ها چقدر در موفقیت یک شرکت، کمپانی یا هر جای دیگری تاثیر گذار هستند؟

مطابق با آمار منتشر شده از comeScore، حدود ۶۵٪ از زمانی که برای سپری کردن در دنیای دیجیتال سپری می شود، از طریق موبایل ها می باشد، در حالی که این نسبت برای دسکتاپ ۳۵٪ است. این میزان استفاده از موبایل ها هر ساله ۵ درصد رشد دارد. در واقع استفاده از فضای اینترنت بوسیله گوشی های هوشمند بطور قابل توجهی رو به افزایش است.

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

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

مشکل دیگر، بخصوص برای گروه های مسن تر افراد عدم اعتماد آن هاست. مطابق آمار، نفوذ این سایت ها برای این افراد در حدود ۸۰٪ است، اما برای گروه های ۳۴-۱۸ به بالای ۹۳٪ هم رسیده است.

این آمار به ما یادآور می شوند که استفاده از موبایل، روز به روز بیشتر شده و بر محبوبیت آن افزوده می شود. همچنین به ما متذکر می شود که اگر سایت یا برند شما برای نمایش در موبایل ها بهینه سازی نشده است، دیگر وقت آن رسیده تا اقدام کنید.

وب سایت testmysite.thinkwithgoogle یک روش سریع برای تست وب سایت شما بوده و کاربر پسند بودن سایت را در موبایل ارزیابی می کند. آدرس سایت خود را وارد کرده و چند لحظه صبر کنید. این کار را برای سایت خود و تعدادی از محبوب ترین سایت ها انجام داده و نتیجه را مقایسه کنید. در این مقاله، چندین سایت محبوب توسط این سایت بررسی شده اند، بغیر از گوگل، سرعت سایت ها در موبایل ها ضعیف و عددی بین ۴۸ تا ۶۲ از ۱۰۰ است.

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

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

منبع: دوران دات نت

7 عامل موفقیت یا عدم موفقیت وب سایت ها در طراحی

۷ عامل موفقیت یا عدم موفقیت وب سایت ها در طراحی

۱۳۹۶/۰۱/۲۹/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

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

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

۱- هدف/ مهمترین عامل موفقیت یک وب سایت

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

۲- وضوح راهی برای کسب موفقیت سایت

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

۳- قابلیت استفاده نیاز اولیه کاربران سایت

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

۴- دسترس پذیری عاملی برای کسب موفقیت سایت

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

۵- تمرکز بر روی کاربر اولویت طراحی سایت

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

۶- جابجایی در محتوا یا ناوبری در سایت

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

۷- ظاهر سایت

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

منبع: دوران دات نت

تاثیر سیگنال های شبکه های اجتماعی بر سئو

۱۳۹۶/۰۱/۱۹/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

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

تاثیر سیگنال های شبکه های اجتماعی بر سئو و بهینه سازی سایت

همانطور که می دانید سئو به طور کلی به دوبخش سئو داخلی و سئو خارجی تقسیم می شود، سئو داخلی ۳۰ و خارجی ۷۰ درصد از فاکتور های سئو را در بر می گیرند و شبکه های اجتماعی سهمی ۱۰ درصدی از این ۷۰ درصد دارند (البته این ارقام نظر شخصی بنده است و ممکن است اشتباه باشد!).
شبکه های اجتماعی چگونه بر سئو تاثیر می گذارند؟

به طور کلی هر سیگنالی که از شبکه های اجتماعی به خصوص Twitter و Google Plus دریافت می گردد خوب است و تا حدی بر رتبه سایت تاثیر گذار است.
سیگنال های دریافتی از شبکه های اجتماعی به چه معناست؟

منظور از سیگنال های شبکه های اجتماعی می تواند هر چیزی باشد که درون یک Social Network به نفع شما اتفاق می افتد، این سیگنال می تواند لینک، لایک، ریتویت، اشتراک گذاری مطالب و … باشد. اما طبق تجربیات بنده برندینگ و برنسازی از طریق شبکه های اجتماعی بیشترین تاثیر را بر بهینه سازی و رتبه سایت دارند.
اما نکته قابل توجه این است که علاوه بر بحث سئو سایت و بهینه سازی شبکه های اجتماعی به خصوص Facebook و Twitter مکان خوبی برای بازاریابی (بازاریابی شبکه های اجتماعی را مطالعه نمایید)، فروش کالا و جذب مخاطب برای وب سایت هستند.

جمع بندی

به طور کلی گوگل سایت هایی را که در شبکه های اجتماعی محبوب هستند و فعالیت دارند را بیشتر از بقیه سایت ها دوست دارد اما این به این معنی نیست که فعالیت در شبکه های اجتماعی به معنی پایان سئو وب سایت است! همانطور که گفتم شبکه های اجتماعی تنها سهمی ۱۰ دصدی از یک فاکتور ۷۰ درصدی سئو را دارند، این بدین معناست انجام تمامی کارهای ذکر شده در شبکه های اجتماعی مانند: لینک بیلدینگ، برندینگ، تولید محتوا و … تنها ۱۰ درصد از ۷۰ درصد فاکتور های سئو را در بر می گیرد.

منبع: دوران دات نت

نکات طراحی UX برای منوهای کشویی

۱۳۹۶/۰۱/۱۵/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

نکات طراحی UX برای منوهای کشویی – در این راهنما سعی شده است که برخی تکنیک های طراحی مفید برای ساخت منوهای کشویی را متذکر شویم، که شامل منوهای کشویی چندسطحی و همچنین مگامنوها می باشد که همگی دارای قواعد طراحی یکسانی می باشد.

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

– استفاده از نشانگرها برای زیر منوها

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

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

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

– فضایی همراه با پدینگ لینک ها

عدم استفاده از فضای مناسب در منوها بسیار آزاد دهنده است.

لینک ها در منوهای کشویی دارای فضای بسیار کمی برای خود هستند، لازم است به این نکته اشاره شود که تفاوت زیادی بین مفهوم margin و padding وجود دارد.

با margin شما تنها می توانید روی متن مورد نظر کلیک کنید و ناحیه قابل کلیک، تنها به اندازه متن مورد نظر است. اما با padding کل ناحیه مورد نظر قابلیت کلیک پیدا کرده و در واقع کاربر دارای ناحیه ی بزرگتری برای انتخاب است. در واقع در منوها بهتر است، سعی نمود تا برای لینک ها، ناحیه نسبتا زیادی جهت انتخاب مشخص کرد.

– هاور

استفاده از کلاس active برای منوهای هاور شده سبب ایجاد توجه بیشتر می شود. بیشتر طراحان از شبه کلاس hover برای لینک ها استفاده می کنند که بسیار کارآمد است.

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

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

– منوهای کشویی سریع و انیمیشنی

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

نتیجه گیری

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

منبع: دوران دات نت

راهنمای سبک (Style Guide) در طراحی سایت

۱۳۹۵/۱۲/۲۴/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

راهنمای سبک (Style Guide) در طراحی سایت – ایجاد و خلق وب سایت هایی جذاب و متفاوت با گذشت زمان پیچیده تر شده و دیگر یک کار انفرادی نیست. اینکه بتوان سایت هایی طراحی نمود که هم از نظر کسب و کار و هم لذت کاربر از تماشا و کار با سایت بهینه و کارآمد باشد از اهمیت بسیار بالایی برخوردار است.

یکی از روش ها، برای اطمینان از طراحی درست سایت، هنگامی که یک تیم روی بخش های مختلف آن کار می کند و یا جدا کردن بخش طراحی از توسعه، ایجاد سند طراحی (design documentation) و یا سبک راهنمای طراحی سایت (Web design style guide) است.

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

Style Guide چیست؟

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

چرا مهم است؟

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

بعلاوه در این صورت توسعه دهندگان می دانند که دقیقا دارای چه المنت های نوشته شده ای هستند و چه مواردی را می بایست از ابتدا شروع به نوشتن کنند.

نحوه ایجاد یک style guide

۱- در ابتدا می بایست شرکت مورد نظر را بررسی نمود که اصولا چه ایده ای برای تشکیل شرکت و طراحی برند آن در نظر گرفته شده است. هرچه بیشتر این موارد بررسی و واکاوی شوند، style guideبهتری می توان درست کرد.

۲- نحوه نگارش، مطابق بررسی ها، نگارش محتوا ۹۵ درصد طراحی سایت را تشگیل می دهد، نحوه نگارش سایت باید کاملا تعیین شود زیرا مهم ترین راه ارتباطی سایت با کاربران می باشد.

انواع مختلف سرتیتر : h1، h2، h3، h4، h5، h6 . انواع مختلف bold -italic و … همچنین سفارشی سازی لینک ها، استفاده از فونت های زیبا و ضخامت فونت ها همگی و همگی می بایست در نگارش مد نظر قرار گرفته شود.

۳- پالت رنگ: انسانها بطور عجیبی رنگ ها را درک و با آن ارتباط برقرار می کنند، بطور مثال به برند کوکا کولا فکر کنید قطعا اولین چیزی که در ذهنتان خواهید دید رنگ قرمز برند کوکا کولاست.

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

۴- آیکانگرافی: آیکن ها صدها سال است که وجود دارند،‌حتی پیش از متون و کلمات. مزیت استفاده از آیکن ها این است که می توانند بدون استفاده از کلمات به کاربران نشان داد که چکار می توانند انجام دهند و چه اتفاقی قرار است بیافتد. انتخاب آیکن مناسب به متن مفهوم بیشتری می دهد. شکل آیکن ها را با دقت انتخاب کنید.

۵- تصاویر: تصاویر هم به اندازه کلمات مهم هستند. حتما از تصاویر مناسب و گویا برای سایت استفاده باید استفاده شود. همانطور که پیش تر گفته شد اگر درباره کمپانی مورد نظر تحقیق شود می توان تصاویر مناسبی برای آن سایت انتخاب کرد.

۶- فرم ها: فرم ها، چیزهایی هستند که سایت یا وب اپلیکیشن را تعاملی و پویا می کند و بنابراین کاربر می تواند داده را وارد نموده و می توان با کاربر تعامل داشت.

از ظاهر زیبا برای فرم ها حتما می بایست استفاده نمود و همچنین از پیغام هایی بنظر ساده اما کاربردی هستند استفاده نمود مثلا ؛پیغام شما با موفقیت ارسال شد؛

۷- دکمه: دکمه ها ترکیبی از پالت های رنگ و فرم ها هستند. باید دکمه ها دارای طراحی حرفه و متفاوت باشند.

۸- فضا: استفاده از فضاها در style guide دارای اهمیت زیادی است. فضای بین عنوان ها، دکمه ها، تصاویر،‌فرم ها و دیگر المنت ها بسیار مهم است. داشتن فضای درست به این دلیل مهم است که باعث ایجاد نوعی تنفس بین عناصر شده و باعث حرفه ای شدن طراحی می گردد.

مثال ها: در زیر سایت هایی برای کمک به طراحی style guide آ ورده شده است

پالت رنگ

منبع: دوران دات نت

روند طراحی پنجره مدال در طراحی وب سایت

۱۳۹۵/۱۲/۱۷/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

روند طراحی پنجره مدال در طراحی وب سایت

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

اغلب سایت ها از مدال ها بعنوان (CTA (Call To Action استفاده می کنند. هرچند از مدال ها می توان برای هرگونه کاربردی بهره گرفت. امروزه در بسیاری از سایت ها از مدال ها جهت ثبت نام اولیه و موارد مشابه می توان استفاده نمود.
در زیر نگاهی به مدال ها و اینکه چگونه کار می کنند می اندازیم و همچنین بررسی می کنیم که چرا باید از آن ها استفاده نمود.

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

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

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

تکنیک های نمایش

اکثریت قریب به اتفاق مدال های پاپ اپ چند ثانیه پس از لود صفحه فرآخوانی می شوند. بیشتر کاربران حتی برای لحظه ای جهت خواندن مدال ها وقت ندارند. بنابراین، این روش بدترین روش نمایش مدال است مگر آن که برای چیزهایی مانند کوکی ها و یا adblock ها بکار روند.
در زیر به متداول ترین تکنیک ها اشاره خواهد شد:
– مدال های موجود در صورتی که کاربر موس را در صفحه رها کند، ظاهر شوند.
– مدال های زمان دار که بعد از x دقیقه/ ثانیه اجرا می شوند.
– مدال های موقعیتی که هنگامی که کاربر توسط اسکرول به محل مورد نظر می رسد اجرا می شوند.
مقایسه طراحی مدال با CSS و JS
پلاگین های جاوااسکریت دارای استایل و کنترل بسیار زیادی هستند، معمولا این نوع از پلاگین ها جهت استفاده پیشنهاد می شوند. هرچند CSS های خالص هم می توانند دارای سازگاری بیشتری باشند.

در زیر به تعدادی از مدال های جاوااسکریپتی گه همگی رایگان هستند اشاره شده است:
Lean modal
یک پلاگین jQuery، که جهت سفارشی سازی بسیار ساده می باشد. Lean Modalدارای یک کتابخانه کوچک می باشد که آنرا تقریبا برای استفاده در هرگونه سایتی مناسب می سازد، البته Lean Modal از embededd content ها و slide show ها پشتیبانی نمی کند، پس نتیجتا برای محتواهای پویا مناسب نمی باشد.

Remodal

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

Simple Modal

اگر در جستجوی پلاگین کم نظیر در ساخت و طراحی هستید این پلاگین مختص شما خواهد بود. این پلاگین در حال حاضر رایگان می باشد. البته میزان تیرگی پس زمینه صفحه زیاد مناسب نیست که می توان آنرا مطابق دلخواه سفارشی نمود. simple modal با embededd content، iframe، درخواست های Ajax و هرچه که شما نیاز دارید میتواند بخوبی کار کند.

اگر میخواهید از مدال های طراحی شده تنها با CSS استفاده کنید در زیر منابعی برای شما معرفی شده است:

CSS Modal

Basic Modal

Modal PureCSS

منبع: دوران دات نت

آشنایی با قابلیت های جدید در HTML5 و کاربردهای آن

۱۳۹۵/۱۲/۱۱/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

آشنایی با قابلیت های جدید در HTML5 و کاربردهای آن، جدیدترین نسخه از HTML (زبان تگ گذاری صفحات وب) با نام HTML5 در حال توسعه است. نماد (لوگو) رسمی HTML5 را در شکل روبرو مشاهده می کنید. بسیاری از مرورگرها به تدریج در نسخه های جدید خود ویژگی های HTML5 را پیاده سازی کرده و پشتیبانی می کنند. این ویژگی ها، جدید و بعضاً بی نظیر هستند و دنیای وب را متحول می سازند.

آشنایی با قابلیت های جدید در HTML5 و کاربردهای آن

کلاس معنایی (Semantics)
معنا بخشیدن به ساختار HTML در مرکز HTML5 قرار دارد. مجموعه جدیدی از تگ های معنایی به HTML5 افزوده شده است و همین طور به همراه RDFa، Microdata و Microformats وب مفیدتری بر پایه داده برای برنامه ها و کاربران ایجاد می کند.

برای نمونه تگ هایی مثل section، article، footer، header و nav برای چنین منظوری تدارک دیده شده اند. با تگ article قسمتی که محتوا و مطلبی مانند یک مقاله قرار دارد را می توان مشخص کرد. با استفاده از nav می توان لینک های ناوبری سایت (navigation) را از سایر قسمت ها متمایز کرد.
همین طور Microdata که پروتکل مجزایی از HTML5 برای افزودن داده ساختاریافته به صفحه وب است بیشتر حول HTML5 توسعه یافته است.

کلاس ذخیره سازی و برنامه آفلاین (Offline & Storage)
این یکی از ویژگی هایی است که در نوع خود یک تحول بزرگ در صفحات و برنامه های تحت وب به شمار می رود. با به کار گیری ویژگی های این دسته، برنامه های وب سریعتر کار می کنند و حتی می توانند بدون اتصال به اینترنت به کار خود ادامه دهند. امکاناتی که در این رده به HTML افزوده شده اند عبارتند از:
HTML5 App Cache
Local Storage
Indexed DB
File API
تعدادی از این ویژگی ها این امکان را ایجاد می کنند که یک صفحه وب در یک مرورگر بتواند داده های خود را ذخیره و نگهداری کند و بتواند به صورت آفلاین کاری را انجام دهد و سپس در اتصال بعدی به اینترنت مجددا خود را با برنامه موجود در سرور به روز کند.

کلاس دسترسی به دستگاه ها (Device Access)
با استفاده از API موقعیت جغرافیایی که HTML5 ارائه می کند (Geolocation API) برنامه های وب می توانند ویژگی های غنی تر و آگاه تری نسبت به دستگاه کاربر ارائه کنند.
با اجازه کاربر، برنامه نویس می تواند اطلاعات موقعیت مکانی کاربر را دریافت کند و با توجه به این داده ها، موقعیت جغرافیایی کاربر را در اطلاعاتی که در صفحه به او ارائه می دهد تاثیر بدهد. برنامه نویس می تواند با استفاده از JavaScript به این داده ها دسترسی بیابد.

کلاس اتصال (Connectivity)
اتصالی که بسیار بهینه تر هست به معنی یک چت همزمان تر، بازی های سریعتر و ارتباطات بهتر است. سوکت های وب (Web Sockets) داده ها را به شکل بهینه تری نسبت به قبل بین کلاینت و سرور رد و بدل می کنند.
پروتکل وب سوکت یک ارتباط کاملا دو طرفه بین کلاینت و برنامه سمت سرور فراهم می کند. با استفاده از این API در جاوا اسکریپت می توانید این ارتباط را در کلاینت مدیریت کنید.

کلاس چند رسانه ای (Multimedia)
عبارت جالبی که در این باره بیان می شود این است که audio و video به شهروندان درجه اول HTML5 تبدیل می شوند. یعنی همانطور که قبلا تصویر img در گذشته به صورت پیش فرض پشتیبانی می شد از صوت و ویدئو نیز پشتیبانی می شود.
بنابراین با HTML5 تگ های audio و video نیز به مجموعه تگ های تولید صفحه وب افزوده می شوند و نیازی به استفاده از راه حل های دیگر با فلش یا جاوااسکریپت برای نمایش صدا و تصویر ندارید.

کلاس گرافیک و افکت (Graphics & Effects)
پیش از این برنامه نویسان وب برای جلوه های بصری در صفحات وب دچار محدودیت زیادی بودند. نهایتا از CSS، و جاوا اسکریپت و یا پلاگین هایی نظیر فلش برای مقاصد خود بهره می بردند ولی اکنون با با استفاده از SVG، canvas، WebGL و ویژگی های CSS3 می توانید کاربران خود را با جلوه های بصری شگفت زده کنید.
برای نمونه در CSS3 امکانات جالبی برای ساخت حرکت های ساده و حتی انیمیشن تعبیه شده است. تگ canvas تگ جدیدی است که برای رسم گرافیکی از آن در صفحات وب استفاده می شود. SVG نیز یک فرمت گرافیکی وکتور بوده است که اکنون HTML5 از آن به صورت درون متنی (inline) پشتیبانی می کند.

کلاس کارآیی و یکپارچه سازی (Performance & Integration)
در این دسته امکان تولید نرم افزار های وب و صفحات داینامیک به شکل سریعتری با به کارگیری تکنیک ها و تکنولوژی هایی نظیر Web Worker و XHR 2 فراهم شده است. کاربران در این صورت تجربه بهتری در کار با نرم افزار های تحت وب خواهند داشت که اکنون پاسخگویی و واکنش بهتری دارند.
برای نمونه با استفاده از worker ها می توان کدهایی را با جاوا اسرکیپت اجرا کرد که بتوانند به صورت همزمان در حال اجرا باشند ولی کار بازدید کننده با صفحه را متوقف نسازند.

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

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

منبع: دوران دات نت

طراحی صفحات در سال ۲۰۱۷ – قسمت دوم

۱۳۹۵/۱۲/۱۱/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

طراحی صفحات در سال ۲۰۱۷ – قسمت دوم – در مقاله پیشین به تعدادی از موارد که امسال (۲۰۱۷) برای طراحی سایت ها مورد توجه قرار خواهند گرفت پرداختیم، در این مقاله به ادامه آنها می پردازیم.

الگوهای جدید منوبار (نوار راهنما)

هیچ اجباری برای قرار دادن منوها فقط در بالای صفحه وجود ندارد. امسال می توانید نوار راهنمای سایت خود را به طور خلاقانه، هر طور که تمایل داشتید در وب سایت خود به کار بندید، مثلا به صورت pop-out در کنار یا زیر وب سایت خود قرار دهید.

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

واقع گرایی بیشتر

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

طراحی سایت برای نمایشگرهای کوچک

طراحی صفحات در سال 2017 - قسمت دوم

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

منبع: دوران دات نت

طراحی صفحات وب در سال ۲۰۱۷ – قسمت اول

۱۳۹۵/۱۲/۱۱/۰ دیدگاه /در اخبار و مقالات /توسط علیرضا حمداللهی

برای نو کردن وب سایتتان در سال ۲۰۱۷ آماده باشید!

ابتدای هر سال زمان بسیار مناسبی برای بررسی طراحی های انجام شده در سال گذشته و همچنین پروژه های جدید است.

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

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

گرادیانت ها

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

پارالاکس

استفاده از پارالاکس ها در سال ۲۰۱۶ بسیار متداول بود که نشان دهنده ایده ی خلاقانه آن بوده و همچنان در سال ۲۰۱۷ در وب سایت ها استفاده خواهند شد و جلوه های خیال انگیز تری نیز برایشان بکار خواهد رفت. در روند تکاملی، از آن جا که طراحی وب سایت ها به سمت طراحی های پویا و واقع گرایانه در حرکت است و پارالاکس ها از قاعده مستثنی نخواهند بود و به جهت واقع گرایانه بودن پارالاکس ها، استفاده از آن ها در این سال رو به افزایش خواهد بود.

سادگی

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

منبع: دوران دات نت