طراحی سایت (وب دیزاین، Web-Design) در عصر جدید، واژه ای است که کمتر کسی نشنیده باشد. در گذشته  اگر فردی قصد داشت محصولات خود را به مشتریان خود عرضه کند فقط کافی بود یک باب مغازه در محله و جایی اجاره یا خریداری نماید. به جهت محله محور بودن خرید های قدیمی، در کمترین زمان اهالی آن محل محصولات آن را می دیدند. معرفی دهان به دهان اهالی محل، باعث می شد آن مغازه شناخته شده و دیگر اهالی از آن فرد خرید کنند. با گذشت زمان، گسترش شهرها، تنوع محصولات، برند محوری، رشد سریع اینترنت و از همه مهم تر زمان کم افراد، به مرور کسب و کار های سنتی جای خود را به نوع اینترنتی و به روز تر دادند. از دغدغه های شهرنشیتان ضیق وقت و ترافیک سنگین است. از این رو افرادی که در شهرهای بزرگ زندگی می کنند برای اینکه محصولی را بخرند، نمی توانند تمام مغازه های شهر را بگردند. اینجاست که اگر مدیر یک کسب و کار سایت خود را طراحی کرده باشد؛ می تواند با ارائه محصولات خود در وب سایتش شانس بیشتری برای فروش داشته باشد.

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

  1. کد نویسی هسته (Core)
  2. طراحی قالب سایت

حال سوال این است که وب سایت، وبگاه، تارنما یا تارگاه چیست؟

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

WEB چیست؟

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

 

تاریخچه طراحی سایت

در سال 1989 اینترنت توسط Tim Berners-Lee اختراع شد. پس از آن اولین وب سایت تاریخ که کاملا”بر پایه متن بود؛ ساخته شد. در آن دوران کمتر وب سایتی بود که درآن عکس وجود داشت. تارنماهای اولیه تماما” سیاه و سفید بودند. به همین خاطر به آن دوران عصر تاریک طراحی گفته می شود. تنها رنگی که در وب سایت ها به سختی به چشم می خورد، چند پیکسل تک رنگ بود.

در سال 1990 میلادی HTML متولد شد. در 6 اوت 1991 برنرز – لی به همراه تیمش اولین صفحه وب دنیا را راه‌اندازی کرد. این صفحه معروف کاملا” ساده بوده و حاوی اطلاعاتی در مورد شبکه گسترده جهانی بود. در سال 1992 اولین عکس در اینترنت بارگذاری شد. اینگونه بود که با پیدایش انواع مرورگرها پای تصاویر و عکس ها نیز به وب سایت ها باز گردید؛ که این را می توان اولین گام برای دیزاین و طراحی وب سایت ها دانست. در سال 1996 میلادی شرکت مایکروسافت نخستین مرورگر قابل رقابت بازار را با برچسب HTML منتشر کرد. اولین مرورگری که از همه نوع صفحات وب سایت ها پشتیبانی می کرد.

در آن دوران طراحی وبگاه به معنای امروزی وجود نداشت. از این رو از نشانه گذاری HTML برای جدول ها جهت نمایش جدولی استفاده می شد. به این سبک، طراحی های جدول محور یا همان Table-Base اطلاق می شد. نخستین بار فردی به نام David Siegel برای طراحی سایت جذاب تر و بهتر، روش هوشمندانه ای را ابداع نمود. روشی که طی آن جداول در هم قرار می گرفتند. با وجودیکه این روش خالی از اشکال نبود؛ بسیاری از طراحان تا مدت ها از آن برای طراحی سایت ها استفاده می کردند؛ چراکه در آن زمان برای یک وب سایت طراحی زیبا بر ساختار خوب اولویت داشت.

البته این نوع طراحی مزایایی هم داشت. مزایایی همچون:

  • نمایش عمودی داده ها
  • تعریف کردن اندازه براساس پیکسل یا درصد

با گذشت زمان، معایب و شکنندگی طراحی Table-Base باعث شد طراحی Slicing Design یا همان طراحی قطعه قطعه جایش را بگیرد. در طراحی اسلایسینگ، طرح های گرافیکی زیبایی توسط طراحان ساخته می شد.  این طرح ها به کمک برنامه نویسان به قطعات کوچک تر تبدیل و در نهایت در وب سایت ها به بهترین شکل کنار هم قرار می گرفتند.

 

راه کاری رهایی بخش به نام جاوا اسکریپت

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

اما باز هم مشکلی وجود داشت؛ جاوا اسکریپت در اصل لایه ای جدا از ساختار کلی وب سایت بود. این بدان معنا بود که باید جداگانه لود می شد. همین امر باعث کاهش سرعت لود سایت می شد. البته استفاده هوشمندانه از این زبان برنامه نویسی قدرت واقعی آن را نمایش خواهد داد. حتی امروزه روز با کمک JavaScript برای سایت هایی با قالب jQuery و  Node.js می توان ویژگی های خلاقانه و خاصی را ایجاد کرد.

 

فلش عصر طلایی طراحی سایت

در سال 1996 میلادی Flash یا همان FutureSplash ساخته شد. تکنولوژی ای نوین برای شکستن محدودیت های طراحی سایت که با آن امکان استفاده از هرگونه فونت، انیمیشن، قالب و لایه ای وجود داشت. با این وجود فلش نیز دارای اشکالات و محدودیت هایی بود که می توان آن ها را اینگونه برشمرد:

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

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

تولد CSS در 1998

در سال 1998 و تقریبا” همزمان با ظهور فلش روشی بهتر و مناسب تر برای دسته بندی و طراحی سایت به نام Cascading Style Sheets یا همان Css ابداع شد. CSS این امکان را به کاربران می دهد که تمامی تنظیمات و جزییات سایت را در فایلی ذخیره نمایند. با ذخیره این فایل دیگر نیاز نیست برای هر صفحه از تارنما مجددا” کد نویسی انجام شود. نخستین نسخه CSS انعطاف پذیری و گستردگی پایینی داشت؛ که باعث می شد مرورگرها نتوانند کاملا” خود را با آن تطبیق دهند. تنها مرورگرهایی با جدیدترین آپدیت می توانستند از ویژگی های شگفت انگیز این تکنیک جدید بهرمند شوند؛ که این امر برای برنامه نویسان به کابوسی وحشتناک بدل شد.

 

وردپرس و تولد وبلاگ نویسی

در سال 2003 میلادی ایده ساخت یک نرم افزار وبلاگ نویسی توسط مت مالنوگ و مایک لیتل به نام وردپرس ایجاد شد. در ژانویه سال 2004 اولین نسخه وردپرس (WordPress 1.0) روانه بازار گردید. البته در سال های نخستین تولد وردپرس غالبا” سایت ها و وبلاگ هایی ساده و ایستا به وجود آمد. هرچند این تنها ابتدای راه بود؛ چراکه با گذشت تنها دو سال وردپرس برای جذابیت بیشتر پلاگین های سفارشی بسیاری را به کاربران معرفی کرد.

 

پدیده ای به نام تلفن همراه

نخستین موبایل با دسترسی به اینترنت در سال 2007 میلادی توسط شرکت آیفون ساخته شد. این موبایل امکان اتصال به اینترنت و جستجو در وب سایت ها را داشت. در این سال نحوه نمایش صفحات وبگاه ها در صفحه کوچک موبایل و سرعت لود سایت ها چالش بزرگی بود. برای رفع این معضل سیستم 960 grid و تقسیم بندی 12 ستونی (12-column division) به روش هایی متداول برای طراحی وب سایت ها بدل شدند. مسئله بعدی استاندارد سازی عناصری در سایت بود که متناوبا” استفاده می شد. بدین نظور کتابخانه ای از عناصر بصری با تمامی کدهای مورد نیاز، ایجاد شد.

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

در سال 2010 . با افزایش محبوبیت وب سایت گردی با گوشی های هوشمند، فردی به نام Ethan Marcotte از محتواهایی یکسان اما قالب های گوناگون برای نمایش تارنما در صفحه های نمایش مختلف استفاده کرد. با این روش سایت های واکنشگرا (Responsive) را به وجود آورد. مزیت مهمی که این نوع وب سایت ها داشتند، نمایش صحیح و درستشان در گوشی های موبایل بود.

 

عصر کنونی و طراحی سایت

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

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

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

 

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

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

http://info.cern.ch/hypertext/WWW/TheProject.html

و اما مراحل WEB-DESIGN را می توان اینگونه برشمرد:

  1. طراحی وایر فریم
  2. طراحی گرافیک سایت
  3. کدنویسی و برنامه‌نویسی
  4. راه‌اندازی سایت

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

انواع وب سایت

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

  1. استاتیک (Static Website)
  2. داینامیک (Dynamic Website)

در نوع استاتیک مدیر سایت نمی تواند محتوای آن را تغییر دهد و برای هر تغییر نیاز است از طراح سایت خود کمک گیرد. این سایت ها با ورود سیستم های مدیریت محتوایی چون وردپرس، کم کم منسوخ شدند. امروزه روز تنها کارایی Static Website برای شرکت‌های کوچک و یا سایت‌های معرفی که نیاز زیادی به تغییر محتوا ندارند؛ است.

سایت‌های داینامیک پویا هستند و مدیر سایت می تواند تمامی محتوای آن را تغییر دهد. به طور مثال مدیر سایت می تواند هر روز یک محتوای تازه در آن بارگذاری نماید. از انواع Dynamic Website  می توان به وب سایت های خبری و مجله‌ای اشاره کرد.

 

مشاغل مرتبط با طراحی وبگاه

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

هدف از Web Design

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

  • دندانپزشکی
  • بیمارستان
  • آزمایشگاه
  • داروخانه
  • دامپزشکی (پت شاپ)
  • روانشناسی
  • طب سنتی
  • پارچه فروشی
  • کالای خواب
  • سایت املاک
  • درب و پنجره
  • سیستم های برودتی و تهویه مطبوع
  • الکتریکی
  • آتلیه عکاسی و فیلمبرداری
  • بانک
  • سایت خبری، خبرگزاری، مجله، روزنامه و هفته نامه
  • دفتر اسناد رسمی
  • خشکشویی
  • صرافی
  • تالار پذیرایی
  • باشگاه بدنسازی
  • ریسندگی و بافندگی
  • آهن آلات
  • قالب سازی
  • کارتن و جعبه سازی
  • وکالت
  • پالسکو
  • شوینده و بهداشتی
  • دالترجمه
  • آموزشگاه رانندگی
  • لوازم التحریر
  • دوربین مدار بسته
  • آموزشگاه موسیقی
  • انواع آموزشگاه
  • آسانسور
  • فروشگاه صوتی و تصویری
  • موبایل و کامپیوتر
  • هتل
  • آژانس مسافرتی
  • چاپ و تبلیغات
  • صحافی
  • اسباب بازی
  • لوازم عکاسی
  • لوازم شکار
  • نمایندگی
  • مجتمع تجاری (پاساژ)
  • سایت شخصی
  • آموزشی
  • فروشگاه زنجیره ای
  • سایت پس زمینه سفید
  • طالا و جواهر
  • پوشاک زنانه
  • لباس بچگانه
  • پوشاک مردانه
  • لوازم پزشکی
  • پارچه فروشی
  • تجهیزات ایمنی
  • فینگرفود
  • سایت ارزان
  • فست فود
  • رستوران
  • خط تولید و تولیدی
  • چرم
  • کیف
  • کفش
  • جوراب
  • سیسمونی
  • شال و روسری
  • ملزومات حجاب
  • لباس زیر
  • نخ و کاموا
  • آبنما
  • پرده
  • لوازم خانگی
  • کابینت
  • لوازم بهداشتی ساختمانی
  • دکوراسیون داخلی / پارتیشن
  • فروش رنگ
  • تاسیسات و تهویه مطبوع
  • لوستر و آیینه شمعدان
  • آبمیوه و بستنی
  • سفره خانه
  • کافی شاپ
  • قهوه
  • ابزار صنعتی
  • تراشکاری
  • خرازی
  • چاقو و قیچی
  • سنگ تزئینی
  • فرش
  • فروش گاو صندوق
  • لوازم اداری
  • مبلمان
  • نجاری
  • آرایشگاه
  • کلینیک زیبایی
  • فروش انواع ساعت
  • انتشارات
  • پرچم فروشی
  • سایت کاغذ و مقوا
  • اسباب بازی
  • استخر آماده
  • کتاب فروشی
  • لوازم ورزشی
  • نقاشی و خوشنویسی
  • سایت اتومبیل
  • رینگ و الستیک
  • لوازم لوکس-ضبط وباند-شیشه اتومبیل
  • لوازم یدکی خودر
  • موتور فروشی
  • دوچرخه سازی
  • سایت بلور کریستال
  • فروشگاه لیوان، ماگ، فنجان، بشقاب و …
  • گل فروشی
  • دخانیات (سیگار)
  • قنادی، خشکبار و لوازم قنادی
  • لوازم دکوری و خانگی
  • کادویی
  • لوازم تولد
  • لوازم آنتیک
  • داروخانه
  • ابزار فروشی
  • عروسی
  • مجالس (تولد، مهمونی)
همراهان گرامی با کلیک بر روی هر یک از اصناف بالا می توانید به لزوم طراحی سایت در آن حرفه پی ببرید.