بیاید قبل از بازگویی تاریخچه طراحی سایت یا همان طراحی وب سایت چند سوال مطرح کنیم و در ادامه به آنها پاسخ دهیم.
- طراحی وب سایت چیست و چه افرادی در طراحی وب سایت حضور دارند؟
- آیا یک طراح وب سایت می بایست کدنویسی هم یاد بگیرد؟
- آیا کدنویسان می‌بایست طراحی را یاد بگیرند؟
بیاید قبل از بازگویی تاریخچه طراحی وب سایت چند سوال مطرح کنیم و در ادامه به آنها پاسخ دهیم.
- طراحی وب سایت چیست و چه افرادی در طراحی وب سایت حضور دارند؟
- آیا یک طراح وب سایت می بایست کدنویسی هم یاد بگیرد؟
- آیا کدنویسان می‌بایست طراحی را یاد بگیرند؟
دوران تاریک طراحی وب (۱۹۸۹)
در آن دوران طراحی وب به معنای واقعی تاریک بود و تنها یک صفحه نمایش، با قابلیت اضافه کردن چندین کد وجود داشت و طراحی توسط نمادها و دکمه‌ی Tab انجام می شد.
جدوال – آغاز (۱۹۹۵)
تولد مرورگرها آغازی بر طراحی وب بود، زیرا مرورگرها می‌توانستند تصاویر را برای مخاطب به نمایش درآورند. در آن زمان نزدیک‌ترین گزینه‌ی موجود برای ساختار اطلاعات جدول‌ها، کدهای HTML بود.
با این جدول‌ها طراحان می‌توانستند تصاویر و المان‌های مختلفی را خلق کنند.
با اینکه این کار از لحاظ فنی اشتباه هست و جدول‌ها برای ساختن اعداد به کار می‌روند اما هنوز هم یک روش معمول برای طراحی وب به شمار می‌آید.
اما مشکل اساسی جای دیگری بود و آن هم حفظ و نگهداری ظاهر المان‌های طراحی در این ساختار شکننده بود.
همچنین زمانی که واژه Slicing Design محبوبیت پیدا کرد، طراحان المان‌ها و طرح‌های مختلفی را مانند یک پوستر یا بروشور طراحی می‌کردند و این برنامه‌نویسان بودند که می‌بایست تصاویر را به قطعات کوچک تبدیل کرده و بهترین راه را برای پیاده‌سازی و کدنویسی این المان‌ها پیدا کنند.
از طرف دیگر جدول‌ها ویژگی‌های بسیار عالی و کاربردی داشتند که برنامه نویسان می‌توانستند با کمک آنها تصاویر و متون را به صورت عمودی تراز کرده و نسبت این تراز را با واحد پیکسل یا نسبت‌های درصدی تعریف کنند.
JavaScript به کمک توسعه‌دهندگان می‌آید (۱۹۹۵)
جاوا اسکریپت پاسخی به محدودیت‌های HTML بود. برای مثال در مواقعی که نیاز است محتوا و المان‌های وب سایت شما داخل یک پنجره‌ی پاپ آپ باز شود و یا چیدمان المان‌های طراحی شده در صفحه را به صورت پویا تغییر دهید، جاوا اسکریپت در صدر راحت‌ترین راه‌حل‌های موجود قرار می‌گیرد.
اما مشکل بزرگی که جاوا اسکریپت با توجه به ساختارش داشت، پایین آوردن سرعت وب سایت‌ها بود و زمان بارگزاری را تا حد زیادی افزایش می‌داد. امروزه با توجه به وجود آمدن کد های CSS نمیتوان به صورت کامل جاوا اسکریپت را کنار گذاشت و این کدها یکی از مهمترین بخش‌های توسعه‌ی Front-end و Back-end هستند.
دوران طلایی انیمیشن‌های فلش (۱۹۹۶)
برای شکستن محدودیت‌های طراحی وب فناوری نوظهوری به وجود آمد که گویا نوید آزادی و خلاقیت را به طراحان می‌داد. حالا طراحان می توانستند با استفاده از ابزارهایی که نرم‌افزار Flash در اختیار آنها قرار می‌داد هر نوع شکل، چیدمان، انیمیشن، فونت و… را طراحی کنند.
نتیجه نهایی یک فایل Flash بود که در وب سایت بارگزاری می‌شد و شرط دیده شدن آن این بود که کاربر از قبل برنامه‌ی فلش‌پلیر را بر روی کامپیوترخود نصب کرده باشد و همچنین زمانی را باید منتظر باشد تا آن فایل بارگزاری شود. اما متاسفانه این روش برای موتورهای جستجو بهینه نبود و منابع پردازشی زیادی را مصرف می کرد.
هنگامی که شرکت اپل تصمیم گرفت در اولین گوشی آیفون خود در سال ۲۰۰۷ پشتیبانی از این فرمت را کنار بگذارد، فرمت فلش هم در صفحات وب کم کم به فراموشی سپرده شد.
(CSS (1998
تقریبا همزمان با فلش، راه‌حل بهتری در جلوی طراحان وب قرار گرفت و آن چیزی نبود جز Cascading Style Sheets یا همان CSS.
در این دوران قالب‌بندی و رنگ‌ها بر عهده CSS بود و محتوای وب را HTML بارگزاری می کرد. مشکلی که در نسخه های اولیه CSS وجود داشت عدم انعطاف پذیری آن بود؛
اما بزرگترین مشکل پشتیبانی نکردن مرورگرها از CSS بود و چندین سال طول کشید تا مرورگرها به طور کامل از آن پشتیبانی کنند.
اما ماجرا به اینجا ختم نمی‌شد و فقط زمانی که یک مرورگر جدیدترین ویژگی‌ها را داشت می‌توانست از این زبان استفاده کند اما مرورگر‌های قدیمی که فاقد این قابلیت بودند در عمل نمی‌توانستند وب‌سایت‌ها را به درستی نمایش دهند و این یک کابوس بزرگ برای توسعه دهندگان وب به حساب می آمد.
باید به این نکته توجه داشت که CSS یک زبان برنامه نویسی نیست بلکه یک Markkup Language است.
حال باید پاسخ یکی از سوالاتی که در اول مقاله نوشته شد را داد.
آیا طراحان وب باید کدنویسی را یاد بگیرند؟ شاید
آیا آنها باید درک کنند که CSS به چه صورت کار می‌کند؟ حتما
پس تا اینجا متوجه شدیم که یک طراح در اصل نباید کار کدنویسی را یاد بگیرد اما تا حدودی باید با کدنویسی آشنا باشد.
ظهور موبایل – گریدها و فریم ورک‌ها (۲۰۰۷)
با ظهور تلفن‌های همراه هوشمند، نمایش وب سایت‌ها در این دستگاه‌های پرمخاطب یک چالش بزرگ بود، چرا که صفحه‌های این وب‌سایت‌ها با نمایشگرهای موبایل سازگاری نداشتند.
از جمله مهمترین این ناسازگاری‌ها، خوانایی کم صفحات وب بر روی موبایل و همچنین سرعت بارگزاری پایین آنها بود به طوری که بارگزاری خیلی از مطالبی که شما به آن نیاز نداشتید پول اینترنت موبایل شما را تمام می کرد.
اولین قدم برای بهبود این مشکل ایده‌ی مشبک کردن (Grid) ستون‌ها بود؛ که بعد از تجربه‌های بسیار سیستم مشبک با اندازه‌ی۹۶۰ پیکسل (۹۶۰ grid) متداول شد و صفحات ۱۲ ستونی به ساختاری تبدیل شد که طراحان هر روز از آن استفاده می کردند.
در مرحله بعد استانداردسازی عناصر رایج مانند: فرم‌ها، پیمایش‌ها، دکمه‌ها و… به روشی آسان و قابل استفاده مجدد بود. به بیان دیگر لازم بود که کتابخانه‌ای از المان‌های کد شده به وجود آید.
در نهایت برندگان این استانداردسازی فریمورک‌های Bootstrap و Foundation هستند و به این واقعیت اشاره دارند که مرز میان وب سایت‌ها وبرنامه‌ها روز به روز در حال محو شدن است.
نکته منفی که در این نوع کدنویسی وجود داشت یکسان بودن طرح‌ها بود و در عمل طراحان هنوز نمی‌دانستند که چگونه این کدها کار می کنند.
طراحی وب واکنش گرا یا ریسپانسیو (۲۰۱۰)
یک پسر به نام ایتان مارکوته (Ethan Marcotte) تصمیم گرفت رویکرد موجود را با پیشنهاد استفاده از همان محتوا، اما با طرح های مختلف برای طراحی به چالش بکشد و این پسر اصطلاح طراحی واکنش گرا را ابداع کرد.
از لحاظ فنی ما همچنان از کد های CSS و HTML استفاده می کنیم، بنابراین این تنها یک پیشرفت مفهومی به حساب می‌آید. با این وجود بسیاری از تصورات غلط در اینجا وجود دارد و طراحان فکر می کنند ریسپانیسو بودن به معنای به دست آوردن چیدمان‌های چندگانه و متفاوت است، در حالی که برای مشتری ریسپانیسو به این معناست که وب سایت روی تلفن همراه هم کار کند.
برای توسعه دهنده وب بدین معنی است که چگونه تصاویر مورد استفاده قرار می گیرند، سرعت دانلود به چه صورت است و بسیاری از موارد دیگر که در این مقاله نمی گنجد.
اما مزیت اصلی واکنش گرایی در محتوای وب سایت است. یعنی هم در صفحه نمایش دسکتاپ و هم در موبایل از لحاظ محتوا تمام موارد یکسان هستند و فقط چیدمان و نحوه‌ی نمایش آنها متفاوت است.
Flat شدن المان‌ها (۲۰۱۰)
در این زمان طراحیهای پیچیده همراه با سایه و سایر المان‌ها جای خود را به طراحیهای به اصطلاح تخت یا فلت دادند. عکاسی زیبا، تایپوگرافی، تصویرسازی‌های واضح، چیدمان‌های متفکرانه و… چیزی است که در اکنون در طراحیهای امروزی از آن استفاده می‌شود.
ساده‌سازی عناصر بصری یا به اصطلاح طراحی فلت نیز بخشی از این فرایند است؛ مزیت اصلی آن در توجه بیشتر به تجربه‌ی کاربری یا همان UX است.
دکمه‌های پر زرق و برق جای خود را به آیکون های ساده و جذاب می‌دهند و این کار با استفاده از فونت آیکون و تصاویر وکتوری انجام پذیر است. فونت‌های وب تایپوگرافی‌های زیبایی را به ما ارائه می دهد.
نکته جالب توجه این است که دنیای وب از همان ابتدا به این شیوه بیشتر نزدیک بوده است.
آینده روشن (۲۰۱۹)
همواره هدف والای طراحی وب این است که هر آنچه یک طراح به صورت بصری طراحی می‌کند را وارد دنیای مرورگر ها کند.
تصور کنید که طراحان همه چیز را به درون یک صفحه منتقل کنند و یک کد تمیز و عالی به دست بیاید؛ البته منظور فقط تغییر چیدمان و ترتیب المان‌ها نیست بلکه انعطاف پذیری و کنترل کامل بر روی طراحی صفحه‌ها است! تصور کنید توسعه‌دهندگان وب هیچ نگرانی بابت سازگاری کدها با مرورگرها ندارند و تنها روی حل مساله‌ی واقعی تمرکز دارند.
نظر شما در مورد آینده وب چیست؟
منبع : froont
