استخدام الرسم التوضيحي في تصميم الويب
يمثل Illustration أداة متعددة الاستخدامات يمكن أن تجد العديد من الاستخدامات المختلفة في التصميم. وعندما يتعلق الأمر بتصميم الويب ، يمكننا العثور على مجموعة واسعة للغاية من التطبيقات.
اليوم ، أريد أن أحفر بعض الطرق الرئيسية التي تم بها تشغيل هذه الأداة حتى نتمكن من رسم أفكار جديدة لإلهام وتحدي التصاميم التي ننتجها.
دعونا نبدأ في مكان ما نادرا ما تفعل ، مع تعريف أساسي: المصور: 1) لتوضيح ؛ 2) توضيح من خلال تقديم أو تقديم مثال أو مثال ؛ 3) لتوفير الميزات المرئية التي تهدف إلى شرح أو تزيين .
يبدو أنه في العالم الحقيقي لتصميم الويب ، يميل الرسم التوضيحي إلى أداء كلتا الوظيفتين في وقت واحد. يجمل بينما يوضح. وإذا كان الأمر يتعلق فقط بأحد هذه الأمور ، فقد تحتاج إلى أن تسأل نفسك عن السبب. ربما من خلال وضع الرسم التوضيحي للعمل من خلال تحقيق كل من الأدوار هو الطريق إلى الاستفادة حقا عنصر التصميم للجميع يستحق.
هذا ، بالطبع ، لا يعني أن التصميم لا يمكن أن ينجح إذا كان يعالج واحدة أو أخرى فقط ؛ بالتأكيد يمكن ذلك. ولكن من أجل الحصول على أقصى استفادة من عملنا ، أجد أن تحدي تفكيرنا مفيد دائمًا. كالمعتاد ، لننظر في بعض مجموعات العينات لنرى ما يمكن عمله باستخدام هذا الجهاز المرئي. على طول الطريق ، النظر في ما إذا كان كل نهج يوفر الوضوح أو الديكور ، أو كليهما.
التوضيح المواضيعي
النهج الأول للتوضيح الذي أريد أن أغطيه هنا هو استخدام هذا الأسلوب لإنتاج منهج موضوعي شامل. في هذه الحالة يتم وضع الرسوم التوضيحية للعمل على إنشاء موضوع شامل. هل نتسلق الجبال أو يزور محطة فضائية أو يستكشف مكتب الشركة؟
في حين أن هذا النهج لا يجب أن يأخذنا إلى الموقع ، فإنه في الغالب يفعل ذلك. في حالات أخرى ، يقوم النمط ببساطة بتأسيس شكل عام يتبعه الموقع.
والسبب الذي يجعلنا مهتمين به هنا هو أنه يتم استخدامه لقيادة التصميم العام بطريقة جذرية. الرسم التوضيحي ليس عنصر دعم صغير. بدلا من ذلك ، هو عنصر التصميم الأبرز والتحكم في تخطيط بأكمله.
الحصول على مدرب بلدي إلى كيب الشمالية
في هذه العينة لا يمكن أن يكون النهج أكثر وضوحًا. إن تصميم الموقع يعكس بوضوح غرضه الأساسي. يقدم الرسم التوضيحي إشارة بصرية لما سيفعله الفرد. وفيما يتعلق بتعريف الرسم التوضيحي ، فإن العمل الفني يوفر الزخرفة والجمال للصفحة.
في هذه الحالة ، يحدد الموضوع غرض الموقع ويساعد المستخدم على شراء هذا المفهوم.
إطلاق كيت
لا يجب أن يكون النهج المواضيعي صريحًا إلى حد ما. في بعض الأحيان ، يمكن أن يكون جزءًا طبيعيًا من موقع أكثر هيكلية. في هذه الحالة ، يكون الموقع فريدًا من نوعه في تصميمه ، ولا يفرض المظهر واجهةً أكثر من أعلى على أساس سفن الصواريخ.
بدلاً من ذلك ، يتم نسج السمة في التصميم بطريقة توصل لمساته الزخرفية دون التداخل مع المحتوى. هنا يعمل الرسم التوضيحي على تزيين ، ولكن ليس توضيح الكثير. هذا ليس مستغربًا على الإطلاق ، ويوضح بالطبع أنه لا توجد صيغة يجب اتباعها.
اتيليه انونيمي للتصميم
في حالات أخرى مثل هذا ، فإن الرسم التوضيحي الموضوعي هو حرفياً هو الموقع. إنه ليس عنصرا مساعدا ، ولكنه يصبح تماما التصميم نفسه.
هنا استخدام التوضيح يلعب بوضوح دور التزيين. ولكن أود أن أقول أنه يوفر أيضا مستوى كبير من الوضوح للزائر. هذا هو موقع ويب لوكالة تصميم. تصميم وطبيعة هذا الموقع يربط الكثير لزواره. على هذا النحو ، أنا متأكد من أنه بمثابة مرشح كبير لقاعدة عملائهم. إما أن تكون مغرمًا به أو تحب منهجها الممتع والمبتكر ، أو أنك ستغلقه تمامًا. إذن إلى هذه النقطة ، أعتقد أنها توفر قدراً كبيراً من الوضوح حول الوكالة وعقليتها.
جاذبية التصميم الجرافيكي
في هذا الموقع ، يلعب استخدام الرسم التوضيحي مقاربة موضوعية واضحة أيضًا. على الرغم من أن الموقع يتبع بعض صيغ التخطيط القياسية ، إلا أن التصميم بأكمله يتم تغليفه في تخطيط مواضيعي. هذه العناصر لا تقود فقط تصميم الموقع ، بل تندمج مع الشعار الرئيسي والنسخة المستخدمة على الموقع. الموضوع غامرة ويقود الرسالة الكاملة التي يقدمها الموقع.
عينات مواضيعية إضافية
في ما يلي بعض المواقع الإضافية التي تستخدم الرسوم التوضيحية المواضيعية لإنشاء بيئة أو موضوع لموقع.
السنجاب
الانجراف الأولاد
Iutopi
Chandu4u
تمائم
كيف يمكنني تغطية فكرة استخدام الرسوم التوضيحية دون مراجعة واحدة من أكثرها وضوحًا: التميمة؟ مع هذا العنصر المرئي ، يميل المصممون إلى تجسيد الموقع أو منتجه أو غرضه بحرف. لا يختلف تطبيق مثل هذا العنصر فحسب ، بل إن القوة والمنطق وراءه كذلك.
inkFinder
في هذا التصميم يلعب التميمة الموضحة دورًا واضحًا إلى حد ما. واضح من حيث أنه echos اسم المنتج. لا يوفر فقط بعض الحياة للتصميم ، لكنه يضع وجهاً له. وبهذه الطريقة ، يكون لدى الجمهور شيئًا أكثر تفردًا قليلاً في الابتعاد عن المخ. نأمل أن يساعد التميمة على تقديم تجربة فريدة لا تنسى والتي من شأنها أن تساعد المنتج على التميز عن الصوت المسموع.
ربما هذا هو الغرض الأكثر قوة وراء جالب الحظ ، لمساعدة شيء ما يبرز. إن الشيء العظيم في هذا التميمة الموضحة هو أنه يمكن أن يكون فريدًا ومميزًا تمامًا لهذا المنتج. إذا افترضنا أنها مصممة خصيصًا لهذا التصميم ، يجب أن يكون المكان الوحيد الذي يوجد فيه هذا الرسم التوضيحي الدقيق.
إيفنت
ومن المفارقات نجد هنا تميمة أخرى شبيهة بالأخطبوط (ما هو مخلوق البحر ثلاثي الأرجل؟). في هذه الحالة من الواضح أن التميمة هي خطوة أكبر بكثير من الواقع: مخلوق روبوت ثلاثي الأرجل مع دماغ في فقاعة.
في حين أنه قد يكون اختيارًا غريبًا ، إلا أنه يوفر عنصرًا مميزًا مميزًا للحدث. توفر هذه التميمة الفريدة عنصرًا مرئيًا رائعًا للتواصل مع الحدث. إنها تأخذ حياة خاصة بها وتربط الناس بشيء ملموس. أفترض أن هذا هو بالضبط الغرض من التميمة.
تصميم هذا الموقع جميل ، لكن ضع في اعتبارك كم ستكون باهتة من دون هذا التميمة المجنونة في مكانها. إن إنتاج مثل هذا العنصر ليس سهلاً ، ولكنه فعال للغاية في هذه الحالة.
عين كبيرة إبداعية
على سبيل المثال من التميمة القائمة على الأخطبوط غير إلقاء نظرة على عين كبيرة إبداعية موقع. هنا لا يلعب التميمة أكثر من دور رئيسي في التصميم. ومع ذلك ، فإنه يضيف الكثير من السمات لذلك. من الواضح أن الرسوم التوضيحية الأخرى والأسلوب العام للموقع يجعل عرضًا أقل رسمية. لكن التميمة في الشعار موجودة في جميع أنحاء الموقع. هذا يضمن نمطهم الفاتر يتخلل التصميم.
الرسوم التوضيحية التميمة إضافية
فيما يلي بعض عينات إضافية من جالبي الحظ في العمل في التصميم. بما في ذلك آخر واحد الأخطبوط ؛ يبدو أنها مشهورة للاستخدام.
إدارة السجلات بايونير
آرجيل الأخطبوط
كوكو
Konsebt
زخرفة مصورة
النوع التالي من الاستخدام الذي أود أن أعتبره هو ما أشير إليه كزخرفة موضوعية. هذا هو عندما يتم وضع التوضيح للعمل بطريقة مزخرفة لا توفر في الواقع مرجعًا ماديًا محددًا. على سبيل المثال ، يتضمن التوضيح غالبًا صورًا للأشخاص أو الحيوانات أو الكائنات أو الأماكن. ولكن في هذه الحالة ، لا يمثل الرسم التوضيحي أي شيء حقيقيًا ، بل إنه ببساطة يوفر ديكورًا لتجميل التصميم بطريقة لا يمكن إلا توضيحها. كما هو الحال دائمًا ، دعنا نوضح ذلك من خلال بعض العينات.
1000 الفسفور الابيض مواضيع
على سبيل المثال الأول لدينا ، والنظر في 1000 الفسفور الابيض مواضيع موقع الكتروني. في هذا الموقع ، يوفر استخدام الرسم التوضيحي إطارًا ونمطًا أساسيًا للموقع. لكنه يفعل ذلك في ما هو أكثر زخرفة بحتة. يبدو النمط العام وكأنه صورة توضيحية ، ومع ذلك ، فإنه لا يحتوي على العناصر الإنسانية النموذجية.
الآن ، أريد أن أعارض نفسي تمامًا. أعتقد أن النمط في الغالب مزخرف. ولكن يمكنني أن أرى في الواقع كيف يمكننا أن نقول أنه لا يوفر مستوى من التوضيح للموقع. النمط الذي يستخدمه التصميم يتصل مع جمهور معين. وهي تقول شيئًا عن نمط الموقع والمواضيع التي قد تنتجها. في العديد من الطرق ، توضح جودة التخطيط الموضح جودة العمل الذي قد تتوقع رؤيته من خلال هذا الموقع. وبهذه الطريقة ، قد يكون التوضيح أكثر دهاء وأقل في وجهك ، ولكنه موجود على الرغم من ذلك.
تاريخ كوكا كولا
في هذا الموقع نجد تصميمًا آخر مدفوعًا بالتوضيح. هناك بعض العناصر الموضحة هنا والتي تدل على أشياء حقيقية ، لكن معظم النهج المواضيعي قائم مع الزخرفة النقية. لا يوضح هذا المثال هذا النهج فحسب ، بل إنه يوضح أيضًا أنه لا يتم استخدام أي تقنية تقريبًا بطريقة خالصة. والحقيقة هي أنك ستقوم على الأرجح بدمج هذه العناصر بطرق مختلفة.
Metaphiziks
في هذا المثال الأخير للتوضيح التوضيحي تجد بعض عناصر الخلفية الممتازة. بعض هذه الأشياء أكثر ملموسًا من البعض الآخر ، ولكن بشكل عام ، تكون أكثر عن عناصر الدعم الأسلوبية أكثر من أي شيء آخر. من اللافت للنظر مدى روعة هذه الرسومات الخطية البسيطة عند دمجها مع النصوص الجميلة ، والألوان المختارة بعناية ، والرموز البسيطة. النتيجة النهائية هنا رائعة وجميلة بشكل ملحوظ.
مزيد من التصاميم مع زخرفة مصورة
فيما يلي بعض العينات الإضافية لتدوير هذا النوع من الرسوم التوضيحية في التصميم.
موي الكعك
وظائف التقنية
ملعب Pixel
حقائب مخصصة HQ
النص المصور
من المؤكد أن النص المقدم يدويًا ليس مفهومًا جديدًا ، وهو شيء قمت بتغطيته عدة مرات من قبل . ومع ذلك ، لم أفكر مطلقا في مثل هذا النهج مع منظور التوضيح.
يعد عرض النص هو أحد الأشكال الشائعة للنص الموضح ، وهو حل رائع للعديد من التصميمات. فهي طريقة رائعة لوضع كل هذا التدريب العملي على المدرسة. ثانيًا ، إنها طريقة رائعة لإنتاج شيء فريد. بعد كل شيء ، إذا قمت بتسليم بعض النص سيكون 100 ٪ فريدة من نوعها. حتى إذا رسمت محرفًا حاليًا ، فستظل عبارة عن إنشاء مميز.
Rangus
هذا هو مثال مثالي للنوع المصور. النمط رائع للغاية وفريد من نوعه وجذاب للغاية. لكنها لا تتوقف عند هذا الحد. نوع اليد المقدمة في الواقع يدل على مواهب الأفراد. إنه يُظهر أنه ينشئ أعمالًا فنية بيده ويتصل بشكل مثالي بمهاراته في الرسوم المتحركة. أنا أحب بشكل خاص حقيقة أن كل ذلك يستند إلى موضوع السبورة لأنه يربط حقا الموضوع والعناصر معا تماما. في رأيي ، يوضح هذا الموقع كيف يمكن أن يكون التوضيح الموحد لغرض ورسالة الموقع.
جوي لومانتو
في هذه الحالة ، يكون النص الموضح أكثر دقة. بدلاً من دفع اتجاه التصميم بأكمله ، فهو ببساطة يلعب بشكل جيد. في الواقع ، قد لا تلاحظ في البداية طريقة عرض النص الرئيسي للصفحة الرئيسية. من المؤكد أن النص قد يكون في الواقع خطًا ، ولكنه قد تم استخدامه بطريقة تدمج بشكل مثالي مع نمط الموقع. بصرف النظر عن ذلك ، فإن النمط موحَّد بشكل جميل ويلعب الرسم التوضيحي أدوارًا عديدة في التصميم العام.
اذهب لايف
لا يلزم تقديم النص المصور يدويًا. كما ستجد في هذا المثال ، يتم نص النص بطرق مختلفة لتحويل النص نفسه إلى أجزاء من الرسم التوضيحي الكلي. جمال هذا النهج هو أنه يوحد النص مع الرسوم التوضيحية الأخرى. يتجنب هذا الشعور بتوافق أقل حيث يكون لديك ببساطة رسومًا توضيحية فوق النص القياسي المستند إلى الويب. هذا الأخير يمكن أن يعمل ، لكن في هذه الحالة يكون تأثير النص الموضح واضحًا.
عينات إضافية من النص المصور
الأمثلة التالية تناسب بشكل فضفاض في هذه الفئة. أقول بشكل فضفاض لأنه من الصعب القول في بعض الأحيان لأنه شيء دقيق في بعض الأحيان. في بعض هذه الحالات ، يبدو النص وكأنه مجرد عمل فني ، لذا فقد وضعته في هذه المجموعة.
تمايل التباين
Fakta
لا ويب للتسوق
الرسوم التوضيحية الإعلامية
حسب تعريف التوضيح نفسه ، فإن أحد أغراضه هو توضيح وشرح ذلك. لذلك ، من المناسب فقط أن نجد بعض الأمثلة حيث تعمل الرسوم التوضيحية بهذا الوضوح الفائق.
كتبي
دعونا نبدأ مع كتبي موقع. في هذا المخطط غير العادي ، نجد أن الرسوم التوضيحية ترمز بوضوح تام إلى النقاط المختلفة لتخطيط الصفحة الرئيسية. تحتوي كل كتلة على عنصر مرئي لا يجملها فقط ، بل الأهم من ذلك ، يشرحها. لدرجة أنني كقارئ لا أحتاج حتى لقراءة النسخة. يوضح العمل الفني للأجهزة في أسفل اليسار هذا بشكل خاص.
Conferize
بطريقة أقل بروزًا ، يثبت الرسم التوضيحي في هذا التصميم أنه غني بالمعلومات. يوضح التوضيح المفرد البسيط موضوع الموقع. قد لا تضغط على رأسك برسالته ، لكنه يردد غرض الموقع بشكل جميل.
تفعيل
لا يوحي الرسم التوضيحي في هذا التصميم بالمعلومات حول الحدث الذي يمثله فحسب ، بل يردد أيضًا الغرض الأساسي من الحدث. هذا الحدث الخاص يدور حول فصل من التكنولوجيا. إنها فرصة للناس المغمورين بالتكنولوجيا للهروب من براثنها.
يوضح لنا الرسم التوضيحي هنا ما سيفعله الحاضرون ، لذلك فهو مفيد. وبحكم طبيعته ، ينقسم التوضيح إلى التكنولوجيا والجذور نفسها في صورة عضوية خالصة ، وهي طريقة رائعة بشكل أساسي لتوصيل غرض المواقع.
مزيد من الرسوم التوضيحية بالمعلومات
تظهر هذه المواقع الإضافية أيضًا فكرة الرسوم التوضيحية التي تبلغنا. بعضها عبارة عن رموز صغيرة وأساسية ، في حين أن البعض الآخر عبارة عن عناصر غامرة تحدد المحتوى بالكامل وتمثله.
مدينة حيوية
Uklizenodoma.cz
Qubiq
ترياق تقني
مع المثال الأخير (The تفعيل الموقع) صعدنا إلى ما أريد أن أعتبره بعد ذلك ، استخدام التوضيح لكسر الشعور التكنولوجي للأشياء. في بعض الأحيان لا بد من فصل من الأسس التكنولوجية على شبكة الإنترنت وإظهار شعور العضوية للغاية. التوضيح هو واحد من أقوى الأدوات لإنجاز هذه الفكرة.
شحنة التطبيق
هذه الصفحة الواضحة في وقت قريب هي أقل من غير عادية. ومن الواضح أن الطريقة التي تحقق بها جمالها بسيطة للغاية. التوضيح الضخم المفرد يصرفنا عن حقيقة أن هذه صفحة ويب. يبدو الأمر وكأنه عمل فني يصادف وجود عنصر تفاعلي صغير ، وبالتأكيد وسيلة رائعة لإحداث تأثير كبير على المستخدمين وإنشاء صورة لا تنسى.
Muziekpark
في حين أن هذا الموقع لا يستفيد من النهج المتشدد ، إلا أن الرسم التوضيحي لا يزال كبيرًا وبارزًا في التخطيط. هنا تتنفس الصور المتحركة الحياة في الصفحة. ادمج هذا مع تصميم مبتكر وغير اعتيادي وشعر بأنه منفصل تمامًا عن التكنولوجيا التي تحركه. ولعل حقيقة أنه لا يبدو وكأنه موقع عادي يلعب دورا قويا في هذا أيضا. ضع في اعتبارك أيضًا أن الرسم التوضيحي في هذه الحالة يساعدنا على إبلاغنا بموضوع الموقع.
Egopop
في تخطيط غير نموذجي آخر نجد أن التوضيح قد تم وضعه موضع التنفيذ. هنا لا يخبرنا العمل الفني عن الشخص الذي يمثله الموقع فحسب ، بل يخرجنا أيضًا من عقلية الويب المعتادة التي قد يمتلكها الزائر. مرة أخرى ، يبدو وكأنه عمل فني تفاعلي أكثر من موقع ويب. إذا كان هذا هو هدفك واحتياجاتك ، فهذه مقاربة رائعة يجب مراعاتها.
Zaarly
مقارنة مع الأمثلة السابقة ، و Zaarly موقع يقف في تناقض صارخ. على الرغم من أن التصميم يحكمه رسم واحد كبير ، ويعمل هذا الرسم التوضيحي على تعيين نغمة للموقع ، إلا أن الوظيفة الأساسية أكثر تعقيدًا بكثير من تلك العينات الأخرى.
هذا الموقع هو تطبيق يهدف إلى استخدامه. ويساعد الرسم التوضيحي على إنشاء مجموعة معينة من التوقعات. إنه يمنح شعوراً إنسانياً خفيف القلب ، وهو شعور طبيعي وعضوي للغاية. تخيل هذا على النقيض من تطبيقات شبه أضيق الحدود مع عدم وجود شخصية على الإطلاق. يمنح التصميم الموقع إحساسًا بالمواهب ويغير توقعاتنا.
استنتاج
استخدام الرسم التوضيحي في التصميم هو ممارسة قديمة ، وتطبيقاتها على شبكة الإنترنت واضحة. كما هو الحال مع أي عنصر تصميم أستمتع بعملية إعادة النظر في غرضها واستخدامها. ومن خلال مثل هذا الجهد ، أجد حتمًا أنني أحصل على فهم أفضل لكيفية عمله ، وطرق الاستفادة منه لغرض مقصود ، وفي النهاية بعض الأفكار الجديدة والملهمة.
كيف تستخدم التوضيح في تصميم الويب؟ يرجى تبادل الخبرات الخاصة بك أدناه ....