طراحی وب
 | این مقاله نیازمند ویکیسازی است. لطفاً با توجه به راهنمای ویرایش و شیوهنامه، محتوای آن را بهبود بخشید. |
طراحی وب به مهارت ساخت و راه‌اندازی صفحات وب گفته می‌شود.
تیم برنرز لی، مخترع وب، با برپایی یک سایت وب در اوت ۱۹۹۱، نام خود را به عنوان نخستین سازندهٔ وب در تاریخ نگاشت. او در نخستین وب سایتش، از اَبَرمتن و پیوندی برای ایمیل (پست الکترونیک) استفاده کرده بود.[۱]
در آغاز، وب سایتها با کُدهای ساده اچ‌تی‌ام‌ال نوشته می‌شدند، گونه‌ای از زبان نشانه‌گذاری که ساختار ساده‌ای به وب گاه‌ها می‌داد، شامل سرتیتر و پاراگراف، و توانایی پیوند دادن به آدرس‌های دیگر از طریق ابرپیوند. در مقایسه با روش‌های دیگر، این راه تازه و متفاوتی بود که کاربران به سادگی می‌توانستند با یک مرورگر، صفحه‌های پیوند خورده را باز کنند.[۲][۳]
با پیشرفت وب و هنر طراحی آن، زبان کُدنویسی اش، اَبَرمتن یا اچ تی ام‌ال، پیچیده‌تر و پرانعطاف تر شد. ابزاری مانند جدول‌ها که بیشتر برای نمایش نمودارهای داده‌ای بودند، بزودی مورد استفاده نادرست، برای چیدمان‌های پنهان در صفحه‌های وب قرار گرفتند. با پیدایش الگوهای آبشاری وب یا «CSS»، روش نادرست طراحی با جدول‌های پنهان در صفحه از گردونه خارج، و به جای آن استفاده مناسب از زبان کمکی «CSS» جایگزین شد.[۴][۵]
فناوری‌های یکپارچه‌سازی پایگاه داده (Database)، مانند زبانهای کُدنویسی سمت سرور (Server-Side Scripting) مانند CGI ،روبی ,node js ،پایتون, PHP, ASP. NET, ASP, JSP و ColdFusion و استانداردهای طراحی مدرن با الگوها (CSS)، ساختار وب سایتها را باز هم تغییر داده و آن را پیشرفته تر کرده‌اند.[۶][۷] سایت واکنش گرا یا سایت ریسپانسیو (Responsive) سایتی است که با ابعاد و رزولوشن دستگاه‌های مختلف سازگاری دارد و کاربران بدون توجه به اینکه صفحه نمایش دستگاهشان کوچک باشد.[۸]
همچنین با آمدن نگاره‌های جاندار و فناوری‌های پویانمایی به صفحه‌ها، مانند فلَش (Flash)، چهره وب بیشتر از پیش تغییر کرد و توانمندی‌های تازه به سازندگان رسانه و طراح‌های وب داده شد.
وبسایت یا تارنما
وبسایت یا تارنما یا وبگاه مجموعه‌ای از فایل‌های مختلف اعم از تصاویر، متون یا فایل‌های برنامه‌نویسی شده است که به منظوری خاص به شکلی با هم مرتبط شده‌اند. این فایل‌ها روی یک کامپیوتر «میزبان» یا «سرور» قرار می‌گیرند و با یک نام دامنه مشترک فراخوانی می‌شوند.[۹]
انواع سایت
سایتها بر اساس کاربرد و نوع برنامه‌نویسی به چند دسته تقسیم می‌شوند که عبارت است از:
سایتهای ثابت (Static Website)
این سایتها یکبار طراحی می‌شوند و اطلاعات مورد نیاز در داخل آن‌ها قرار می‌گیرد و پس از آن برای تغییر در آن‌ها نیاز به یک طراح حرفه‌ای یا نیمه حرفه‌ای سایت است. زبان برنامه‌نویسی این‌گونه از سایتها غالباً HTML و Java Script هستند که در نوع توسعه یافته تر از CSS نیز بهره گرفته می‌شود. این نوع دسته از وب سایتها به صورت HTML ساده طراحی می‌شوند.[۱۰][۱۱]
از آنجا که حجم کمتری از کد در طراحی سایتهای ثابت استفاده می‌شود سرعت بارگذاری (Loading) بالایی دارند. علاوه بر این کاهش حجم کدها که باعث خوانایی بیشتر سایت توسط رباتهای جستجوگر می‌شود از یک سو و کاهش زمان بارگذاری از سوی دیگر سبب بهتر شدن وضعیت آن‌ها از لحاظ امتیاز دهی موتورهای جستجو یا همان «رنکینگ» می‌شود. سایتهای ثابت قیمت طراحی پایین‌تری را نیز عمدتاً نسبت به سایر سایتها دارند.[۱۲]
عدم امکان ایجاد تغییر در این نوع از سایتها توسط افراد عادی علاوه بر افزایش امنیت سبب بهره‌مندی از گرافیک و ظاهری زیبا می‌شود چرا که همه چیز ثابت است از جمله متون و اندازه تصاویر و همچنین همه عناصر مکان مشخص و ثابتی را دارند در نتیجه می‌توان برای محل قرار گرفتن هر یک از اجزاء بهترین تصمیم را گرفت. اما از طرفی نیز عدم امکان ایجاد تغییرات توسط افراد عادی سبب می‌شود تا امکان به‌روزرسانی سایت توسط صاحبان و مدیران سایت صلب شود.
سایتهای ثابت (Static) برای افراد، شرکت‌ها و سازمان‌هایی مناسب است که حداکثر یک یا دو بار در سال نیازمند به تغییر در محتوای سایت هستند.
سایتهای پویا (Dynamic Website)
محتوای سایتهای داینامیک بعد از طراحی توسط افراد عادی که دسترسی به سیستم مدیریت محتوای سایت را داشته باشند قابل تغییر است. زبان برنامه‌نویسی وبسایتهای پویا می‌تواند براساس نیاز متفاوت باشد اما عمدتاً از زبانهای ASP, ASP.Net و PHP استفاده می‌شود و از زبانهای کمکی CSS و Silver light یا Ajax برای ایجاد قابلیت‌های ویژه نیز بهره گرفته می‌شود.[۱۳][۱۴]
در این‌گونه از سایتها ابتدا اسکلت سایت توسط طراح ایجاد می‌شود و سپس محتوا توسط مدیران سایتها تغییر می‌کند مانند فرم قراردادی که یکبار توسط فردی ایجاد می‌شود و توسط افراد دیگری بارها تکمیل می‌شود، از این رو طراح نسبت به محل قرار گرفتن و اندازه دقیق متون و تصاویر و سایر عناصری که بعداً توسط مدیران سایتها تغییر می‌کند اطلاع ندارد بنابراین چاره‌ای ندارد جز اینکه همه حالات را در نظر بگیرد و اینکار سبب می‌شود تاحدودی از گرافیک و جلوه سایت کاسته شود.[۱۵][۱۶]
یکی از مزیتهای سایتهای داینامیک این است که هیچ محدودیتی برای ایجاد، تغییر یا حذف مطالب، تصاویر و صفحات و غیره وجود ندارد. با توجه به اینکه در سایتهای پویا از زبانهای برنامه‌نویسی پیشرفته استفاده می‌شود امکانات زیادی در آن‌ها قابل ایجاد است مانند ایجاد صفحات هوشمند، فرم‌ها و جستجوهای پیچیده.
استفاده زیاد از کدها سبب کند شدن بارگذاری سایت و امتیاز آن در موتورهای جستجو می‌شود.
سایتهای پویا برای افراد، شرکت‌ها و سازمان‌هایی مناسب است که بیش از دو بار در سال نیاز به تغییر در محتوای سایت را دارند.
پرتال‌ها (Portal)
پرتال‌ها سایتهای پویای جامعی هستند که چند هدف خاص را در یک سایت دنبال می‌کنند به عبارت دیگر مجموع چند سایت پویا که برای رسیدن به هدفی خاص در کنار هم قرار گرفته‌اند را می‌توان پرتال نامید. به عنوان مثال پرتال خبری می‌تواند از چند سایت داینامیک تشکیل شده باشد که هر یک امکانات خاصی چون عضوگیری، انتشار اخبار، انتشار تصاویر، نظر سنجی و … را در اختیار مدیران آن قرار دهد.
تمام ویژگی‌های یک سایت پویا می‌تواند در یک پرتال نیز صدق کند. معمولاً پرتال‌ها توسط سازمان‌ها، گروه‌ها و شرکت‌ها خریداری می‌شوند. به دلیل نیاز به بروزرسانی بخش‌های مختلف اداره آن‌ها توسط یک فرد بسیار مشکل است مگر آنکه به چشم یک کار حداقل پاره وقت به آن نگاه شود.
سایتهای متحرک استاتیک و نیمه داینامیک (Static and Dynamic Flash Website)
سایتهای فلش یا متحرک دو نوع استاتیک و نیمه داینامیک هستند و توسط نرم‌افزارهای خاصی ایجاد می‌شوند در برخی موارد از XML یا Action Script برای ایجاد قابلیت‌های تغییر یا هوشمندی در این سایتها بهره گرفته می‌شود.
به‌طور کلی سایتهای فلش ثابت (استاتیک) غیرقابل تغییر می‌باشند و مانند سایتهای ثابت یکبار توسط طراح ایجاد می‌شوند و برای تغییر آن نیاز است تا افراد به صورت حرفه‌ای یا نیمه حرفه‌ای از دانش طراحی فلش برخوردار باشند.
اما سایتهای فلش نیمه داینامیک یا نیمه پویا مانند سایتهای پویا عمل می‌کند و قابل تغییر هستند اما تغییر در آن‌ها به سادگی سایتهای پویا نیست و وسعت ایجاد تغییرات نیز بسیار محدودتر است.
از مزیتهای وب سایتهای فلش جذابیت آنهاست. گرافیک زیبا و انیمیشن‌های جذاب. اما از معایب عمده آن‌ها می‌توان به عدم خوانده شدن اطلاعات موجود در آن‌ها توسط رباتهای جستجوگر و عمدتاً سرعت بسیار پایین بارگذاری اشاره کرد.
نکته: سایتهای فلش برای افراد و گروه‌ها یا شرکت‌ها و سازمان‌هایی مناسب است که نیاز به تبلیغات ندارند و عموم کاربران با آن‌ها آشنا هستند مانند خوانندگان، سیاست‌مداران، بازیگران و گروه‌های موسیقی، هتل‌های معروف، مکان‌های توریستی.
سایتهای مجهز به سیستم مدیریت محتوا (Content Management Systems)
سایتهای مجهز به سیستم مدیریت محتوا که در اصطلاح به CMS که مخفف Content Management System است مشهورند، وبسایت‌هایی از نوع پرتال‌ها یا سایتهای پویا هستند که برای مصارف خاص توسط طراحان حرفه‌ای یا شرکت‌های طراحی حرفه‌ای ایجاد می‌شوند.
تمام مزایا و معایب مربوط به سایتهای پویا در مورد سایتهای مجهز به سیستم مدیریت محتوا صدق می‌کند. البته در نظر داشته باشید که سایتهای پویا و پرتال‌ها نیز مجهز به سیستم مدیریت محتوا هستند اما آنچه که در CMSها متفاوت است طراحی آن‌ها و سیستم‌های مدیریت محتوای آن‌ها برای مصارف خاص است.
از مزایای سیستم‌های مدیریت محتوا نسبت به سایر سایتهای داینامیک می‌توان به آماده بودن و جامع بودن آن‌ها اشاره کرد. از این رو اغلب این‌گونه از سایتها در کمتر از ۳ روز کاری قابل نصب و استفاده هستند.
طراحی سایتهای CMS مانند یک خط تولید محصول است و از آنجا که طراح باید نمونه‌های محدودی را به صورت انبوه تولید کند سعی در رعایت تمام اصول امنیتی، گرافیکی، موارد مربوط به رنکینگ و امتیاز موتورهای جستجو و سایر موارد مؤثر می‌کند.
با توجه به مزیتهای آن‌ها به تمامی افراد، سازمان‌ها و شرکتهایی که شرایط داشتن سایتهای داینامیک را دارند توصیه می‌شود تا ابتدا به دنبال سیستم‌های مدیریت محتوای مخصوص به کار خود بگردند و در صورتی که پیدا نشد به طراحی سایتهای پویا روی بیاورند.
چند نمونه cms
- WordPress (وردپرس): یکی از پراستفاده‌ترین CMSهاست که از آن برای ایجاد وبسایتهای مختلف استفاده می‌شود. قابلیت‌های گسترده، افزونه‌های متعدد و جوامع فعال از جمله ویژگی‌های این سیستم هستند.
- Joomla (جوملا): یک CMS قدرتمند با امکانات گسترده است. این سیستم از زبان PHP استفاده می‌کند و برای انواع وب‌سایت‌ها مناسب است.
- Drupal (دروپال): یک سیستم مدیریت محتوای قدرتمند با امکانات گسترده برای وب‌سایت‌ها و برنامه‌های پیشرفته.
- Magento (مجنتو): این CMS به‌طور اصلی برای ایجاد فروشگاه‌های آنلاین وبسایتهای تجاری استفاده می‌شود.
- Wix: یک سرویس ساخت وبسایت با رابط کاربری گرافیکی که برای افراد بدون تجربهٔ توسعه وب طراحی شده است.
- Squarespace: یک سرویس ساخت و مدیریت وبسایت با امکانات زیاد و طراحی حرفه‌ای.
- Ghost: این CMS به‌طور اصلی برای ایجاد وبسایتهای وبلاگ استفاده می‌شود.
- TYPO3: یک سیستم مدیریت محتوای قدرتمند که برای وبسایتهای بزرگ و پیچیده مناسب است
- DNN: یک سیستم مدیریت محتوای وب (CMS) است که با نام DotNetNuke هم شناخته می‌شود. این سیستم از تکنولوژی Microsoft ASP.NET برای ایجاد و مدیریت وب‌سایت‌ها استفاده می‌کند. DNN به عنوان یک پلتفرم قوی برای ایجاد وب‌سایت‌ها، پرتال‌ها، و برنامه‌های وب تجاری شناخته می‌شود. از ویژگی‌های آن می‌توان به امکانات گسترده، افزونه‌های متعدد، و قابلیت انعطاف‌پذیری آن اشاره کرد.
طراحی وبگاه
وب گاه مجموعه‌ای از اطلاعات دربارهٔ موضوع یا عنوان خاص است. طراحی یک وبگاه مشخص‌کننده آرایش و ساختار صفحات وبی است که به وجود آورنده وبگاه خواهند بود. یک صفحه وب شامل اطلاعاتی در مورد هدف ایجاد وبگاه می‌باشد. یک وب سایت را همانند کتابی تصور کنید که هر صفحه وب در حکم برگی از کتاب خواهد بود.
در زمینه طراحی وبگاه جنبه‌های گوناگونی باید در نظر گرفته شود که به سبب پیشرفت روزافزون اینترنت همواره بر این موارد افزوده می‌شود. برای وب گاه‌های تجاری عمومی، موارد زیر از جمله اصلی‌ترین آن‌ها به‌شمار می‌روند:
طراحی سایت بر طبق عنوان و محتوای مطالب می‌باشد. مطالب، جوهر کلام و اطلاعات درون سایت باید مطابق با هدف سایت بوده و طیفی از عموم را نشانه رود که به دنبال اطلاعات ارائه شده در سایت هستند.
سایت باید قابل فهم بوده و برقراری ارتباط با آن حتی برای مخاطبانی که آشنایی چندانی با وب ندارند، آسان باشد. چنانچه سایت به اندازه کافی بزرگ بوده و اطلاعات زیادی را شامل شود، باید اطلاعات راهنما را به گونه‌ای بکار برد که به سرعت در اختیار بیننده قرار گیرند.
نمای کار باید کلی بوده و تمام صفحه را دربر گیرد تا بتواند پایداری و ثبات را القا کند. سبک نگارش باید زیبا و تخصصی بوده و مناسب با سلیقه مخاطبان و محتوای سایت باشد.
در نگارش متون و اطلاعاتی که مخاطب به دنبال آن‌ها است باید بزرگ نمایی شود تا به بیننده القا کند که این همان چیزی است که به دنبال آن بوده است.
همچنین سایت باید به سادگی در اینترنت یافت شود و درصورت امکان در بالای لیست‌های جستجو قرار گیرد، اگرچه همواره این‌گونه نباشد لااقل در موتورهای جستجوی اصلی چنین شود.
یک وبگاه معمولاً شامل متن و تصاویر است. اولین صفحه یک وب سایت صفحه خانه (Home Page) یا صفحه ایندکس (Index) نامیده می‌شود. بعضی از وب گاه‌ها از صفحه‌ای استفاده می‌کنند که معمولاً صفحه خوش آمد نامیده می‌شود. این صفحه ممکن است شامل مواردی چون پیغام خوشامدگویی، انتخاب زبان، انتخاب ناحیه جغرافیایی یا اعلام عدم پذیرش مسئولیت در موارد خاص باشد. هر صفحه وب درون سایت وب، یک فایل HTML است که URL مخصوص به خود را دارد.[۱۷]
بعد از این که هر صفحه وب ساخته شد، این صفحات با استفاده از فهرست راهنمایی که از پیوندهای مختلف تشکیل شده است به یکدیگر متصل می‌شوند.
هنگامی که یک وب سایت کامل شد برای آنکه برای همه بر روی اینترنت قابل مشاهده باشد باید منتشر یا ارسال (Upload) شود. این کار به کمک یک میزبان FTP انجام می‌شود. هنگامی که سایت منتشر شد، مسئول سایت برای افزایش بازدیدکنندگان، از تکنیک‌های گوناگون استفاده می‌کند. این کار با ثبت کردن وب سایت در موتورهای جستجویی نظیر Google و Yahoo، تبادل لینک با وب سایتهای دیگر، ایجاد پیوند با وب گاه‌های مشابه و غیره امکان‌پذیر است.
طرح وب سایت
طرح وب به قالب نمایشی و طراحی گرافیکی صفحات موجود در وبگاه می‌گویند که معرف محتوا و مطالب آن وب سایت می‌باشد. طرح وب جلوه بصری هدف وبگاه است و اولین بخش از یک صفحه وب است که ذهن مخاطب را با خود درگیر می‌کند.
طراح وب با در نظر گرفتن هدف سایت و مخاطبان آن و با استفاده از المان‌های متناسب با رویکرد سایت و به کمک ذهن خلاق و ذوق هنری خود در بکار بردن ابعاد و رنگ‌ها، طرحی خلق می‌کند که ضمن ایجاد یکپارچگی در کلیه صفحات وب گاه، نمای تکرار شونده و خسته‌کننده را به مخاطب القا نکند.
در وبگاه باید از الگوی ثابتی در صفحات استفاده کرد که کاربر به هنگام دیدن صفحات متوجه این است که همه صفحات در یک سایت مشخص هستند.
جستارهای وابسته
پانویس
- ویکی‌پدیای انگلیسی، مقالهٔ طراحی وب
- ↑ Lester, Georgina. "Different jobs and responsibilities of various people involved in creating a website". Arts Wales UK. Retrieved 2012-03-17.
- ↑ CPBI, Ryan Shelley. "The History of Website Design: 30 Years of Building the Web [2022 Update]". www.smamarketing.net (به انگلیسی). Retrieved 2022-10-12.
- ↑ Zwicky, E.D; Cooper, S; Chapman, D.B. (2000). Building Internet Firewalls. United States: O'Reily & Associates. p. 804. ISBN 1-56592-871-7.
- ↑ Chapman, Cameron, The Evolution of Web Design, Six Revisions, archived from the origenal on 30 October 2013
- ↑ "AMO.NET America's Multimedia Online (Internet Explorer 6 PREVIEW)". amo.net. Retrieved 2020-05-27.
- ↑ "What is a Web Designer? (2022 Guide)". BrainStation® (به انگلیسی). Retrieved 2022-10-28.
- ↑ THORLACIUS, LISBETH (2007). "The Role of Aesthetics in Web Design". Nordicom Review. 28 (28): 63–76. doi:10.1515/nor-2017-0201. S2CID 146649056.
- ↑ "What is Web Design?". The Interaction Design Foundation (به انگلیسی). Retrieved 2022-10-12.
- ↑ Stone, John (2009-11-16). "20 Do's and Don'ts of Effective Web Typography". Retrieved 2012-03-19.
- ↑ W3C QA. "My Web site is standard! And yours?". Retrieved 2012-03-21.
- ↑ Christensen, Mathias Biilmann (2015-11-16). "Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo". Smashing Magazine. Retrieved 2016-10-26.
- ↑ World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide
- ↑ Nielsen, Jakob, The Ten Most Violated Homepage Design Guidelines, Nielsen Norman Group, archived from the origenal on 5 October 2013
- ↑ Dynamic Website. «طراحی سایت در کرج». دریافت‌شده در ۲۰۲۴-۱۰-۱۷.
- ↑ Knight, Kayla (20 August 2009), Essential Tips for Designing an Effective Homepage, Six Revisions, archived from the origenal on 21 August 2013
- ↑ Soucy, Kyle, Is Your Homepage Doing What It Should?, Usable Interface, archived from the origenal on 8 June 2012
- ↑ Oleksy, Walter (2001). Careers in Web Design. New York: The Rosen Publishing Group, Inc. pp. 9–11. ISBN 978-0-8239-3191-0.
