جدیدترین روشهای طراحی سایت

رتبه این آیتم
رتبه 4 در 1 رای از 1 تا 5

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

  • سوال بپرسید

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

  • به کدهاتون گوش کنید

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

  • از دسترس پذیری ذاتی حفاظت کنید

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

  • از مزایای بارگذاری مشروط استفاده کنید

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

  • برای نوشتن از تابع Cubic-bezier استفاده کنید

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

عملکرد زمانبندی انتقال: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear easing */

اگه فکر میکنید نوشتن تابع Cubic-bezier با دست کار شما نیست، نگران نباشید. میتونید با ابزار Ceaser خیلی سریع یکی از معادلات رو بکار بگیرید یا خودتون معادله بنویسید.

  • از عبارتهایی که بیشتر سرچ میشن استفاده کنید

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

  • از دور به نمای کلی نگاه کنید

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

  • فایلهای CSS تون رو طبقه بندی کنید

طبقه بندی اسامی فایلهای CSS باعث میشه راحتتر به محتواشون پی ببرید. اینطوری هر وقت بخشی از سایت خروجی نمیداد، بذارید .config.scss، و اگه فایلی بخشهای دیگه رو وارد میکرد .manifest.scss..

  • از ذخیره آسان تصاویر کمک بگیرید

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

picture>
    <source type="image/webp" srcset="image.webp">
    <img src="image.png" alt="A rad wolf.">
</picture>

WebP برای مرورگرهاییه که از WebP پشتیبانی میکنند و برای تصاویری که نمیکنند فقط یه ol' PNG ساده بذارید، در هر دو صورت فقط یک درخواست نمایش داده میشه.

  • استاد رفع عیب در جاوااسکریپت بشید

هیچ وقت قدرت console.log رو دست کم نگیرید. هر وقت میخواهید یه خط خاص رو بفهمید، با یه اطلاعات مفیدی تگش کنید. یه چیزی مثل console. log('foo; a=', a) کمک میکنه اونو در ارتباط با عملکرد foo بشناسید. وقتی میخواهید یه مشکلی رو رفع کنید، هر جایی رو که به نظرتون ارتباط میتونه داشته باشه رو با console. log('boom1')، console.log('boom2') و ... لاگ کنید تا بتونید ببینید دقیقا کجای کدتون مشکل داره.

  • تصاویر پس زمینه رو واکنشگرا کنید.

برای داشتن تصاویر پس زمینه واکنشگرا (ریسپانسیو)، صرف نظر از عرض نمایشگر، باید تصاویر رو واکنشگرا کنید. استفاده از  کد CSS زیر برای ساخت تصاویر پس زمینه واکنشگرا بکار میره:
background-size:cover;
علاوه بر مقیاس پذیر شدن تصویر با اندازه نمایشگر، نسبت پیکسهای تصویر هم بدون نیاز به مارک آپ یا قوانین دیگه خودکار میشه.

  • برای ساخت سیستم های شبکه ای از میکسین استفاده کنید

با بهره گیری از Sass mixin میشه سیستمهای شبکه ای خیلی خوبی ساخت.
سیستم شبکه ای میونه هر تعداد که بخواهید ستون داشته باشه، اما خود mixin تعداد کل ستونها و با تعداد کل شیارها رو مشخص میکنه (یه شیار کمتر از تعداد ستونهاست).
بعد ستونهای شناور رو از سمت راست (برای متون انگلیسی) منظم میکنه. میکسین وابسته به متغیره به خصوص وابسته به عرض ستون و شیار. در آخر هم یه :last-of-type  حاشیه همه رو تا آخرین ستون همه ردیفها منظم میکنه.

  • به مبحث ها فکر کنید نه به صفحات

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

  • از صفحه کلید پشتیبانی کنید

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

  • سریع روی مرورگر طراحی کنید

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

  • کدهاتونو ساده کنید

تا حالا شده مجبور بشید، در صورتی که نتیجه امتحانی درست از آب در اومد، یه چیزی رو برگردونید؟ مثلا فرض کنید میخواهید یه چیزی مثل اینها رو بنویسید:

if (user.isAdmin()) {
    return password;
} else {
    return false;
}

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

return user.isAdmin() && password;
  • عرضها رو به صورت درصدی بنویسید

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

  • برای عنوان ها حوزه تعیین کنید

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

  • استفاده از گیت

با بکارگیری گیت در وقتتون صرفه جویی کنید. یه فایل جهانی برای فایلهایی که هیچ وقت نمیخواهید اجرا بشن بکار بگیرید. یه فایل gitignore در gitignore بذارید و بعد میتونید $ git config--global core.excludesfile ~/.gitignore.

  • از Git hooks استفاده کنید

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

  • از مشکلات و اشتباهات درس بگیرید

هر چقدرم که برنامه تونو تست کرده باشید و از دستگاه های مختلفی استفاده کرده باشید، باز هم ممکنه مسائل پیش بینی نشده ای اتفاق بیفتن. شما هیچ وقت نمیتونید برنامه ای راه بندازید که باگ نداشته باشه، پس بیایید به کاربرهاتون درباره مشکلاتی که موقع کار با سایتتون روبرو میشن توضیح بدید و کارشونو راحت کنید.
با استفاده از یه فرم ساده از سایت خودتون از قدرت GitHub API بهره مند بشید. خطاهای سرور رو گزارش و آنالیز کنید و از یه چیزی مثل window.onerror برای حفظ خطاهای جاوااسکریپت استفاده کنید (یا اول کدتون از {} catch(e) {} استفاده کنید). یه نفس عمیق بکشید و با هوشیاریتون کارتونو عالی کنید.

  • سرعت سایتتونو حس کنید

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

  • از نوارهای طولانی برای انتخاب استفاده نکنید

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

  • اندازه آیکونها رو با background-image: cover; مشخص کنید

اگه از قابلیت background-image برای افزودن عکس به آیکون استفاده میکنید، یه گزینه دیگه برای اینکار استقاده از background-image: cover; است. تو تئوری، اگه تصویر آیکون گوشه های گردی داشته باشه هم میتونید از background-image: cover;  استفاده کنید، اما ممکنه بخشی از عکس آیکون حذف بشه. این کار باعث میشه اندازه تصویر متناسب بشه.

  • مختصر و مفید باشید

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


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

شبکه اجتماعی های نویسنده اینستاگرام ، گوگل پلاس و لینکدین.

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در گوگل پلاس به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

آیتم های مرتبط

1 نظر

يک نظر بدهيد

موارد ستاره دار الزامی هستند

تماس با ما

info [ at ] joomir.com
تهران، سعادت آباد، سرو غربی، کوچه آریا، پلاک 4، واحد 7
22083926 - 22085386 - 22082258
طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد