مقالات سئو، طراحی سایت و گرافیک، تولید محتوا، برندینگ و بازاریابی دیجیتال

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

طراحی وب به چه کاری گفته می‌شود؟

طراحی وب (طراحی سایت Web Design) شامل بسیاری از مهارت‌ها و رشته‌های مختلف در تولید و نگهداری وب سایت‌ها می‌شود. حوزه‌های مختلف طراحی وب شامل طراحی گرافیک وب، طراحی رابط کاربری (طراحی UI)، کد نویسی، استفاده از کدها و نرم افزارها برا تولید صفحه وب، طراحی تجربه کاربری (طراحی UX)، و بهینه‌سازی موتورهای جستجو (سئو SEO) می‌شود. برای طراحی سایت افراد زیادی در کنار هم و معمولا در قالب یک تیم همکاری می‌کنند. اصطلاح «طراحی وب» معمولاً برای توصیف فرآیند طراحی مربوط به طراحی فرانت اند (سمت مشتری) یک وب سایت از جمله نوشتن کدها استفاده می‌شود. طراحی وب تا حدی با مهندسی و توسعه وب همپوشانی دارد. از طراحان وب انتظار می‌رود که با دستورالعمل‌های و استانداردهای به روز آشنایی کامل داشته باشند.

تاریخچه طراحی وب

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

در ابتدا طراحی وب سایت‌ها با استفاده از تگ‌های <table> انجام می‌شد. در نهایت، طراحان وب توانستند راه خود را برای ایجاد ساختارهای بیشتر برای وب‌سایت‌ها پیدا کنند. 

اولین موتور جستجو چه بود؟

در نوامبر ۱۹۹۳ ALIWEB (Archie Like Indexing for the WEB) اولین موتور جستجویی بود که ایجاد شد. این موتور جستجو به کاربران کمک می‌کرد تا اطلاعات مورد نیاز خود را پیدا کنند.

شروع وب و طراحی سایت

در سال ۱۹۸۹، زمانی که تیم برنرزلی (Tim Berners-Lee) در سرن (CERN) کار می‌کرد، پیشنهاد ایجاد یک پروژه فرامتنی جهانی را داد که بعدها به عنوان وب جهانی شناخته شد. از سال ۱۹۹۱ تا ۱۹۹۳ شبکه جهانی وب متولد شد. در این دوران در صفحات HTML فقط می‌توانستیم با استفاده از یک مرورگر وب ساده متن‌های خطی را مشاهده کنیم. در سال ۱۹۹۳ مارک اندرسن (Marc Andreessen) و اریک بینا (Eric Bina) مرورگر موزاییک (Mosaic) را ایجاد کردند. در آن زمان مرورگرهای متعددی وجود داشت، با این حال اکثر آنها مبتنی بر یونیکس و متنی بودند. هیچ رویکرد یکپارچه‌ای برای  استفاده از عناصر طراحی گرافیکی مانند تصاویر یا صداها وجود نداشت. مرورگر موزاییک این قالب را شکست. W3C در اکتبر ۱۹۹۴ ایجاد شد تا با توسعه پروتکل‌های مشترکی که تکامل وب را ارتقا می‌بخشد و قابلیت همکاری میان طراحان را تضمین می‌کند، وب به سمت رسیدن به پتانسیل‌های خود حرکت کرد.

این امر هر شرکتی را از انحصار یک مرورگر و زبان برنامه‌نویسی مناسب منصرف کرد. در حال حاضر نیزW3C  به تعیین استانداردها ادامه می‌دهد و یکی از مهمترین منابع طراحان سایت است. در سال ۱۹۹۴ آندرسن شرکت ارتباطات موزائیک را تشکیل داد که بعدها تحت عنوان نت اسکیپ ارتباطات (Netscape Communications)، مرورگر نت اسکیپ ۰.۹ (Netscape) شناخته شد. نت اسکیپ تگ‌های HTML خود را بدون توجه به فرآیند استانداردهای سنتی ایجاد کرد. به عنوان مثال، نت اسکیپ ۱.۱  دارای تگ‌هایی برای تغییر رنگ پس‌زمینه و قالب‌بندی متن با جداول در صفحات وب بود. 

در طول سال‌های ۱۹۹۶ تا ۱۹۹۹، جنگ مرورگرها (Browser) آغاز شد، زیرا مایکروسافت (Microsoft) و نت اسکیپ برای تسلط کامل بر بازار مرورگرها می‌جنگیدند. در طول این مدت، بسیاری از فناوری‌های جدید در این زمینه به وجود آمده از جمله CSS (Cascading Style Sheets)، جاوا اسکریپ و HTML داینامیک (Dynamic HTML). در کل، رقابت مرورگرها منجر به خلاقیت‌های مثبت بسیاری شد و به تکامل سریع طراحی وب (طراحی سایت) کمک کرد.

در سال ۱۹۹۶، مایکروسافت اولین مرورگر رقابتی خود را منتشر کرد که با ویژگی ها و برچسب‌های HTML خود یک مرورگر همه چیز تمام بود. این مرورگر اولین مرورگری بود که از style sheet می‌کرد، که در آن زمان به عنوان یک تکنیک بسیار مبهم دیده بود اما امروزه یکی از جنبه های مهم طراحی سایت است. تگ‌های اچ‌تی‌ام‌ای ابتدا برای نمایش داده‌های جدولی در نظر گرفته شده بود. با این حال، طراحان به سرعت به پتانسیل استفاده از جداول HTML برای ایجاد طرح‌بندی‌های پیچیده و چند ستونی پی بردند. در این زمان، به نظر می‌رسید که نیاز به طراحی و زیبایی‌شناسی در ساختار سایت وجود دارد. سایت‌های HTML در طراحی محدود بودند، حتی برای ایجاد طرح‌های پیچیده، بسیاری از طراحان وب مجبور بودند از ساختارهای جدولی پیچیده استفاده کنند. در دسامبر ۱۹۹۶ W3C برای طراحی و طرح‌بندی صفحات سایت CSS را معرفی کرد. سی‌اس‌اس به کد HTML اجازه می‌دهد تا طراحی وب بدون جدول را به وجود بیاورد

در سال ۱۹۹۶، فلش (که در ابتدا با نام FutureSplash شناخته می‌شد) توسعه یافت. در آن زمان، ابزار توسعه محتوای فلش (Flash) در مقایسه با حال، نسبتا ساده بود. این ابزار با استفاده از طرح‌بندی و ابزارهای ترسیمی به طراحان وب اجازه می‌داد تا فراتر از HTML، گیف‌های متحرک و جاوا اسکریپت بروند. با این حال، از آنجایی که اجرای Flash به یک افزونه نیاز داشت، بسیاری از توسعه دهندگان وب از ترس محدود کردن سهم بازار خود به خاطر عدم سازگاری، از استفاده از آن اجتناب کردند. در عوض، طراحان به سمت استفاده از انیمیشن‌های گیف و جاوا اسکریپت بازگشتند. اما مزایای فلش آن را به اندازه کافی در بازارهای هدف محبوب کرد تا در نهایت راه خود را به اکثریت قریب به اتفاق مرورگرها رساند و به اندازه‌ای قدرتمند شده که برای توسعه کل سایت ها مورد استفاده قرار می‌گرفت.

در سال ۱۹۹۸، نت اسکیپ کد Netscape Communicator را تحت یک مجوز منبع باز (Open Source) منتشر کرد و هزاران توسعه دهنده را قادر ساخت تا در بهبود این نرم‌افزار مشارکت کنند. با این حال، این توسعه دهندگان تصمیم گرفتند استانداردی را برای وب از ابتدا ایجاد کنند، که توسعه مرورگر منبع باز را هدایت کرده و قابل گسترش به یک پلت فرم برنامه کامل را داشته باشد. در این دوران پروژه‌های استاندارد وب شکل گرفت و انطباق مرورگر با استانداردهای HTML و CSS ارتقا پیدا کرد.

برنامه هایی مانند Acid1، Acid2 و Acid3 به منظور آزمایش مرورگرها برای انطباق با استانداردهای وب ایجاد شدند. در سال ۲۰۰۰، اینترنت اکسپلورر (Internet Explorer)  برای مک (Mac) منتشر شد، که اولین مرورگری بود که به طور کامل از HTML  ۴.۰۱ و CSS  ۱ پشتیبانی می‌کرد. همچنین اولین مرورگری بود که به طور کامل از فرمت تصویر PNG پشتیبانی می کرد. در سال ۲۰۰۱، پس از کمپین مایکروسافت برای محبوب کردن اینترنت اکسپلورر، ۹۶ درصد از سهم استفاده از مرورگر را به این ابزار رساند و این موضوع نشان دهنده پایان جنگ مرورگرها بود زیرا اینترنت اکسپلورر رقیب واقعی نداشت.

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

از زمان پایان جنگ مرورگرها بازهم مرورگرهای جدید منتشر شده‌اند. بسیاری از آنها منبع باز هستند، به این معنی که توسعه سریع‌تری دارند و از استانداردهای جدید حمایت بیشتری می‌کنند. امروزه دیگر IE جایی در میان مرورگرها ندارد.

W3C استانداردهای جدیدی را برای HTML  و CSS و همچنین  APIهای جاوا اسکریپت جدید منتشر کرده است که هر کدام به عنوان یک استاندارد جدید اما جداگانه مورد استفاده قرار می‌گیرند. 

با بهبود پوشش اینترنت 3G و LTE بخش زیادی از ترافیک وب سایت توسط تلفن همراه به وجود آمد. این امر صنعت طراحی وب (طراحی سایت) را تحت تاثیر قرار داد و آن را به سمت سبک‌های مینیمال، سبک و ساده سوق داد. به طور خاص، رویکرد «ابتدا موبایل» پدیدار شد، که مستلزم ایجاد طراحی وب‌سایت ریسپانسیو است.

طراحان وب (طراح سایت) بسته به بخشی از فرآیند طراحی و تولید سایت که درگیر آن هستند، از ابزارهای مختلفی استفاده می‌کنند. این ابزارها در طول زمان توسط استانداردها و نرم‌افزارهای جدیدتر به‌روز می‌شوند، اما اصول اصلی آنها ثابت می‌ماند. معمولا طراحان وب از ویرایشگرهای گرافیکی برداری و پیکسلی برای ایجاد تصاویر سایت استفاده می‌کنند. یک وب‌سایت را می‌توان با استفاده از نرم‌افزار سازنده وب‌سایت WYSIWYG یا سیستم مدیریت محتوا (CMS) ایجاد کرد، یا می‌توان صفحات وب منفرد را دقیقاً به همان روشی که اولین صفحات وب ایجاد شد، به صورت دستی کدگذاری کرد.

طراحی سایت و طراحی تجربه کاربری UX

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

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

برای طراحی وب (طراحی سایت) نیاز به داشتن برخی مهارت‌ها و آشنایی با تکنیک‌های مشخص وجود دارد. در این بخش برخی از مهارت‌ها و تکنیک‌ها را با هم بررسی می‌کنیم.

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

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

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

طراحی تجربه کاربری و طراحی ریسپانسیو وب

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

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

برنامه نویسی و استفاده از پلاگین در طراحی وب

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

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

صفحه آرایی Layout

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

محبوبیت طرح‌بندی‌های سیال (Fluid layouts) در حدود سال ۲۰۰۰ افزایش یافت تا به مرورگر اجازه دهد تا تنظیمات طرح‌بندی خاص کاربر را بر اساس جزئیات صفحه‌خوان خواننده (اندازه پنجره، اندازه فونت نسبت به پنجره و غیره) انجام دهد. 

طراحی وب ریسپانسیو یک رویکرد جدیدتر، مبتنی بر CSS3، و سطح عمیق‌تری از مشخصات هر دستگاه در صفحه سبک صفحه از طریق استفاده پیشرفته از قانون CSS @media است. در مارس ۲۰۱۸، گوگل اعلام کرد که فهرست‌سازی اول موبایل (Mobile-first) را راه‌اندازی کرد. سایت‌هایی که از طراحی واکنش‌گرا (ریسپانسیو) استفاده می‌کنند، رتبه‌های بهتری در موتورهای جستجو به دست می‌آورد.

برای آشنایی بیشتر با مفاهیم سئو خواندن مطالب زیر را به شما توصیه می‌کنیم:

• سئو چیست؟
• اصطلاحات سئو
• طراحی سایت ریسپانسیو

تایپوگرافی در طراحی وب

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

امروزه دانلود فونت در ماژول فونت CSS3 گنجانده شد و اکثر مرورگرها از آن پشتیبانی می‌کنند. این موضوع علاقه به تایپوگرافی وب و همچنین استفاده از دانلود فونت را افزایش داده است.

موشن گرافیک در طراحی وب

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

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

کیفیت کد در طراحی وب

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

وب سایت‌های استاتیک

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

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

توجه: تقریبا همه وب سایت‌ها دارای بخشی از محتوای ثابت مثل تصاویر و متن هستند. 

وب سایت‌های پویا (داینامیک)

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

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

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

مشاغل طراحی وب

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

مشاغل دیگری که ممکن است در ایجاد یک وب سایت دخیل باشند عبارتند از:

• طراحان گرافیک برای ایجاد تصاویر بصری برای سایت مانند لوگو، طرح‌بندی و دکمه‌ها
• متخصصان بازاریابی اینترنتی برای کمک به حفظ حضور وب از طریق راه حل‌های استراتژیک برای هدف قرار دادن بینندگان سایت، با استفاده از تکنیک‌های بازاریابی و تبلیغاتی در اینترنت
• متخصصین سئو برای کسب موفقیت سایت در موتورهای جستجو
• تولید کنندگان محتوای متنی، گرافیکی و ویدئویی
• طراح تجربه کاربر (UX)

خدمات طراحی وب لولسا

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