طراحی وب سایت

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

مهارتها و فنون

طراحی بازاریابی و ارتباطات

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

طراحی تجربه کاربر و طراحی تعاملی

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

صفحه آرایی

بخشی از طراحی رابط کاربری تحت تأثیر کیفیت چیدمان صفحه قرار دارد. به عنوان مثال ، یک طراح ممکن است بررسی کند که آیا هنگام طراحی چیدمان صفحه سایت باید در صفحات مختلف ثابت بماند. عرض پیکسل صفحه نیز ممکن است برای ترازبندی اشیا در طرح چیدمان حیاتی تلقی شود. محبوب ترین وب سایت های با عرض ثابت به طور کلی دارای عرض یکسان برای مطابقت با محبوب ترین پنجره مرورگر فعلی ، در محبوب ترین وضوح صفحه نمایش فعلی ، با محبوب ترین اندازه کنونی کنونی هستند. اکثر صفحات نیز برای نگرانی از زیبایی شناسی در صفحه نمایش های بزرگ تراز وسط قرار دارند. طرح بندی سیالات در حدود 2000 به عنوان جایگزینی برای طرح های مبتنی بر جدول HTML و طراحی مبتنی بر شبکه در هر دو اصل طراحی صفحه آرایی و در روش برنامه نویسی محبوبیت پیدا کردند ، اما تصویب آنها بسیار کند بود. این به دلیل ملاحظات بود دستگاه های صفحه خوانی و اندازه های مختلف ویندوز که طراحان هیچ کنترلی روی آنها ندارند. بر این اساس ، یک طرح ممکن است به واحدهایی تقسیم شود (نوارهای کناری ، بلوک های محتوا ، مناطق تبلیغاتی تعبیه شده ، مناطق پیمایش) که به مرورگر ارسال می شوند و به بهترین شکل ممکن توسط مرورگر در پنجره نمایشگر قرار می گیرند. از آنجا که مرورگر جزئیات صفحه خواننده را تشخیص می دهد (اندازه پنجره ، اندازه قلم نسبت به پنجره و غیره) ، مرورگر می تواند تنظیمات طرح بندی خاص کاربر را برای طرح مایع انجام دهد ، اما طرح بندی با عرض ثابت را ندارد. اگرچه چنین صفحه ای ممکن است اغلب موقعیت نسبی واحدهای اصلی محتوایی را تغییر دهد ، ممکن است ستون های فرعی به جای اینکه در کنار آن قرار بگیرند ، در زیر متن متن جابجا شوند. این یک نمایشگر انعطاف پذیرتر از یک طرح سخت افزاری مبتنی بر شبکه است که متناسب با پنجره دستگاه نیست. به طور خاص ، موقعیت نسبی بلوک های محتوا ممکن است تغییر کند در حالی که محتوای درون بلوک تحت تأثیر قرار نمی گیرد. همچنین این امر نیاز کاربر به پیمایش افقی صفحه را به حداقل می رساند. طراحی وب پاسخگو یک رویکرد جدیدتر ، مبتنی بر CSS3 و سطح عمیق تری از مشخصات هر دستگاه در صفحه سبک صفحه از طریق استفاده پیشرفته از قانون CSSmedia است. در مارس 2018 گوگل اعلام کرد که نمایه سازی موبایل را برای اولین بار انجام می دهند. سایت هایی که از طراحی پاسخگو استفاده می کنند به خوبی مطابقت دارند که از این رویکرد جدید برخوردار هستند.

تایپوگرافی

طراحان وب می توانند به جای استفاده از طیف وسیعی از حروف چاپ یا سبک های نوع ، تنوع نوع تایپ وب سایت را به فقط تعداد محدودی از سبک مشابه محدود کنند. اکثر مرورگرها تعداد مشخصی از قلم های ایمن را تشخیص می دهند که طراحان عمدتا برای جلوگیری از عوارض از آنها استفاده می کنند. بارگیری قلم بعداً در ماژول قلمهای CSS3 گنجانده شد و از آن زمان در Safari 3.1 ، Opera 10 و Mozilla Firefox 3.5 پیاده سازی شده است. متعاقباً این امر علاقه به تایپوگرافی وب و همچنین استفاده از بارگیری قلم را افزایش داده است. بیشتر طرح های سایت فضای منفی را برای تقسیم متن به پاراگراف و همچنین جلوگیری از متن تراز وسط در بر می گیرد.

نقاشی متحرک

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

کیفیت کد

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