بسم الله الرحمن الرحيم

وبه نستعين

التصميم الجرافيكي / أدوات تصميم الويب (FLASH - SHOCKWAVE - WYSIWYG)

Web Design Tools (FLASH - SHOCKWAVE - WYSIWYG)

 

ما تراه هو ما تحصل عليه

What You See is What You Get

تتوفر مجموعة كبيرة ومتنوعة من أدوات تصميم الويب أو "التأليف authoring" للاختيار من بينها. على المستوى الاحترافي، توفر برامج WYSIWYG ("ما تراه هو ما تحصل عليه What You See is What You Get")، مثل Macromedia Dreamweaver وAdobe GoLive، بيئة عمل تشبه إلى حد ما برامج النشر المكتبي (DTP) التي يفضلها المصممون. بفضل أدواتها الدقيقة للتخطيط ووضع الصور وتحرير النصوص، تُعد هذه الحزم مثالية لمصممي المطبوعات الراغبين في دخول مجال النشر الإلكتروني.

يُلبي سوق تصميم الويب الاستهلاكي احتياجات برامج منخفضة التكلفة توفر خيارات تنسيق أساسية، لكنها تفتقر إلى مرونة وتحكم الأدوات الاحترافية، مما يُجبر المستخدم غالبًا على استخدام قالب مُحدد مسبقًا أو تحرير الشيفرة يدويًا. قد تُقدم هذه البرامج مقدمة مفيدة، لكن المصممين سيشعرون بالإحباط فورًا بسبب قدراتها المحدودة.

أدوات التأليف الاحترافية

Professional Authoring Tools

تُعدّ باقات تصميم مواقع الويب المرئية الاحترافية الخيار الأمثل، إذ تُقدّم أساليب عمل تُسهّل عملية التنسيق بين منهج WYSIWYG في برامج النشر المكتبي والاحتياجات التقنية لتصميم المواقع. يُرتّب المُصمّم عناصر الصفحة، ويكتب البرنامج الكود اللازم لإعادة إنشاء التصميم في المتصفح.

يُفضّل كلٌّ من Dreamweaver وGoLive إعداد كل شيء، باستثناء النص، للويب مُسبقًا، ويُمكنهما توفير "روابط ذكية smart links" مع Fireworks أو Photoshop/ImageReady لتحسين الصور. يتوافق SoftPress Freeway بشكل أوثق مع جانب النشر المكتبي، ويُمكنه العمل مع تنسيقات الرسومات المطبوعة مثل TIFF وEPS، بالإضافة إلى JPEG وGIF، ثم إنشاء رسومات الويب وتحسينها مع كود الصفحة.

باستخدام Freeway، يُمكن للمصمم إنشاء موقع ويب أساسي بسرعة نسبية دون مساعدة مُتخصص. مع ذلك، فهي ليست خطوة أولى مُفيدة لبناء شيء أكثر تعقيدًا. يمكن لكلٍّ من المصمم والمبرمج إتقان تطبيقات تصميم الويب، مثل دريم ويفر وجو لايف، وهناك فوائد تُجنى من استغلالها لتشغيل سير عمل متكامل.

يشعر العديد من المصممين براحة أكبر عند إنشاء المخططات باستخدام QuarkXPress أو FreeHand أو Photoshop، ولكن من خلال استخدام أدوات إنتاج الويب، يمكنهم التحكم في التصميم بشكل أعمق في العملية، ويزيدون من فرص فهمهم لما يتحدث عنه المبرمجون.

تقنية WYSIWYG

WYSIWYG

يمكن إنشاء مواقع ويب كاملة وتحريرها باستخدام أدوات WYSIWYG؛ حيث يمكن إنشاء الروابط التشعبية واختبارها، وإنشاء النماذج التفاعلية والأزرار والنوافذ المنبثقة، وتحميل الصفحات إلى مزود خدمة الإنترنت المُضيف. يمكن تضمين ملفات Flash وShockwave كعناصر في الصفحة، ولكن غالبًا ما تُستخدم لإنشاء صفحات مستقلة أو مجموعات من الصفحات.

يستخدم كلاهما تنسيقًا تقليديًا للخط الزمني لإنشاء الرسوم المتحركة مع إمكانية كتابة روابط لصفحات أخرى أو أفلام أو عناوين إنترنت أو لإرسال البريد. تكمن ميزة استخدام Flash وShockwave لتصميم الويب في إمكانية التعامل معهما كملفات أو كائنات "مُضمنة embedded" داخل HTML. هذا يعني أنه لا يمكن تعديلها عند عرضها في المتصفح، مما يضمن دقة التصميم. يُفضل مصممو الويب Flash، على وجه الخصوص، لهذا السبب وحده.

تقنية SHOCKWAVE

SHOCKWAVE

يمكن استخدام تقنية Shockwave وهو تنسيق تصدير الويب لبرنامج Director، وبرنامج تأليف الوسائط المتعددة من Macromedia. يُستخدم على نطاق واسع في الألعاب الإلكترونية بفضل لغة البرمجة القوية Lingo، التي تُسهّل التفاعل المتنوع. يحتوي Shockwave على صوت ورسوم متحركة ورسومات ومكونات ثلاثية الأبعاد. ومع ذلك، يُعدّ التعامل معه أكثر تعقيدًا بكثير من Flash، الذي يُقدّم العديد من الميزات نفسها.

تقنية FLASH

FLASH

يمكن استخدام تقنية FLASH وهو تنسيق خاص باستخدام Macromedia Flash (يُطلق الاسم على وسيطة التوصيل والبرنامج المُستخدم لإنشاء المحتوى) ويعمل لأي شيء، بدءًا من الرسوم المتحركة البسيطة ووصولًا إلى مواقع ويب كاملة ذات تصفح تفاعلي. يستخدم Flash تقنية المتجهات، المُشابهة لـ Illustrator وFreeHand، وهي مثالية للويب نظرًا لصغر حجم ملفاته وجودته القابلة للتطوير.

يضغط Flash الصوت باستخدام صيغة MP3، مما يُسهم في سرعة التنزيل. مُكوّن Flash الإضافي مُثبّت بالفعل في ملايين متصفحات الويب حول العالم. مع ذلك، هذا لا يعني أن جميع هذه المتصفحات ستحتوي على أحدث إصدار من المُكوّن الإضافي، أو ربما لم يتم تعطيله لسبب ما. يُنصح بعدم تصميم مواقع تتطلب Flash إلا إذا كنت واثقًا تمامًا من أن الجمهور المُستهدف سيُثبّت الإصدار اللازم.

أمثلة عن أهم التقنيات في تصميم الويب

Examples of Key Technologies in Web Design

مثال (1)

تُمكّنك واجهة Macromedia Dreamweaver من العمل بشكل بصريً وتحرير شيفرة HTML في آنٍ واحد. هذا المستوى من المرونة مفيد لأنه يوفر لك تحكمًا أكبر في المخرجات.

مثال (2)

يعتمد منهج Freeway في التخطيط على سلوك النشر المكتبي التقليدي، والتحكم في حجم الرسومات، وتنسيق النصوص على الصفحة. يمكن سحب الأدلة إلى الصفحات يدويًا أو إعدادها كهياكل شبكية تصميم عادية.

مثال (3)

في هذا الموقع www.brightlingphoto.com. تم دمج الصور المُعدّة بعناية مع تمريرات دقيقة وتمثيل جرافيكي رسومي أنيق لموقع المستخدم الحالي داخل الموقع. والنتيجة موقع أنيق وسهل التصفح.

مثال (4)

يستخدم هذا الموقع www.birthmovie.com. وهو الموقع الترويجي لفيلم "Birth" من إنتاج New Line تقنية Flash لخلق جوّ مُحكم. وتم استحضار الألوان والخطوط والصور أجواء الفيلم. بلمسة من الفكاهة الساخرة، تحمل شاشة التحميل الأولية كلمة واحدة غامضة تشير إلى: "الصبر".

مثال (5)

يتيح برنامج Freeway لمصممي الجرافيك ذوي الخبرة المحدودة في الويب البدء في العمل بسرعة وإنشاء موقع ويب عملي، بالمظهر الذي يرغبون فيه تمامًا، في وقت أقصر بكثير مما هو ممكن باستخدام Dreamweaver أو GoLive. 

مثال (6)

قد يكون من الصعب العثور على واجهة Flash في البداية، على الرغم من أن الإصدارات الحديثة تبدو أشبه بتطبيق DTP. بالنسبة للمبتدئين في تصميم الوسائط المتعددة، تتوفر العديد من الدروس التعليمية وملفات النماذج لإعطاء فكرة فورية عما يمكن تحقيقه وكيفية تحقيقه.

مثال (7)

في هذا الموقع www.edgemodern.com. لم يكن لدى المؤسسين المشاركين لهذا المتجر الإلكتروني للديكورات الداخلية أي خبرة تقنية، ولكن باستخدام Dreamweaver، تمكنوا من إنشاء موقع تجارة إلكترونية متكامل. بفضل لغة برمجة CSS، أصبح تنفيذ أي تغييرات على التصميم سهلًا وسريعًا.

 

أرجو أن تنال التدوينة إعجابكم وإلى لقاء قريب بإذن الله

 

المراجع والمصادر

الدليل الكامل للتصميم الجرافيكي الرقمي.

The Complete Guide to Digital Graphic Design

 

لمزيد من التواصل تابعونا على وسائل التواصل الاجتماعي

حساب "مدونة ألوان" على فيسبوك.

حساب "مدونة ألوان" على انستجرام.

حساب "مدونة ألوان" على تويتر.