طراحی سایت

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

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

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

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

معرفی ابزارهای ضروری برای طراحی سایت

نحوه فعال سازی نسخه آفلاین سایت

نسخه آفلاین سایت چیست؟
ویژگی به نام Application Cache وجود دارد، با این خاصیت که قابلیت ذخیره سازی تمام قسمت های سایت، به صورت آفلاین را دارد. در نتیجه فایل های JS وCSS و HTML همچنین تصاویر و دیگر اطلاعات سایت را برای کاربران ارسال می کند.
فعالسازی Offline Web Apps برای زمانی کاربرد دارد که کاربران متصل به اینترنت نبوده و قادر خواهند بود به سایت های مورد نظر دسترسی پیدا کنند.

مراحل بکار اندازی نسخه آفلاین سایت

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

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

معرفی مزایای بوت استرپ

از بزرگترین مزایای بوت استرپ این است که مجموعه ای کامل از ابزار رایگان را در اختیار کاربران قرار داده است. همچنین طراحی وب انعطاف پذیر و پاسخگو (Responsive Web Design) از ویژگی های بوت استرپ می باشد.

کد QR یا همان Code Quick Responding کد هایی هستند که استفاده از آن ها روز به روز در حال گسترش می باشد و مطمئنا نمونه هایی را در سایت های اینترنتی مشاهده کرده اید. اما هنوز خیلی ها از کاربرد های کد QR اطلاع ندارند. کد کیوآر کاربرد ارزنده ای می تواند داشته باشد. در این بخش به معرفی کاربرد های QR می پردازیم. کد کیوآر امروزه در طراحی سایت بسیار طرفدار پیدا کرده است.

کاربرد های کد QR

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

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

تکنیک Hero Header در طراحی سایت حرفه ای

ممکن است طرفدار پروپا قرص رنگ های سرزنده و شاد باشید. اما استفاده از تک رنگ ها در ترکیب Hero Header و یک متن پر مایه بسیار حائز اهمیت و جذاب می باشد.

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

استفاده از دکمه های نامرئی در طراحی سایت

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

در 21 آپریل 2015، جستجو و رتبه بندی گوگل بر اساس استفاده از Mobile Friendly بودن سایت شکل گرفت.
این تغییر در جستجو هایی که از مبایل استفاده می شوند، در سراسر جهان تاثیر خواهد گذاشت و تاثیر قابل توجهی نیز در نتایج جستجوی گوگل خواهد داشت.
کاربران نتایج جستجوی بهتر و راحت تر و نیز بهینه شده با کیفیت بالا برای جستجو های موبایل در سایت های Mobile Friendly خواهند داشت. سایت شما نیز باید آماده این تغییرات در جستجو باشد.

آیا سایتتان را مطابق با استاندارد Mobile Friendly گوگل طراحی کرده اید؟

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

کاربرد Material Design و معرفی آن

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