مجموعة من المواقع المصورة الرائعة
يمكن أن تضفي الإضافات المصوَّرة على مواقع الويب حتى أدق موضوع مستوى إضافي من الاهتمام البصري والتعقيد.
الرسوم التوضيحية تختلف على نطاق واسع من موقع إلى آخر. بعضها تبدو مرسومة باليد (سواء كانت أم لا) بينما البعض الآخر من الواضح أن تقدم رقميا.
في ما يلي أكثر من ثلاثين تصميمًا رائعًا لموقع الويب تحتوي على رسوم توضيحية.
الأكثر شيوعًا هي الرسوم التوضيحية في الرؤوس والخلفيات ، غالبًا من تمائم المواقع أو الأحرف.
لكن الرسوم التوضيحية تُستخدم بطرق أخرى أيضًا. إذا كان لديك موقع موضح موضحًا لم يتم ذكره هنا ، فالرجاء إخبارنا بذلك في التعليقات.
المواقع مع الرسوم التوضيحية الرقمية
هذه المواقع لديها الرسوم التوضيحية التي من الواضح أن الرقمية. الخطوط الناعمة والألوان الزاهية هي السمات المميزة لهذا النمط ، ولكن ليس كل ما هو معروض أدناه يتوافق مع هذه المعايير.
F5
يستخدم الموقع الإلكتروني F5 رسمًا رقميًا غريب الاطوار لخلفيتهم. الألوان الزاهية والشخصيات الكرتونية هي نموذجية من الرسوم التوضيحية الرقمية. ما هو غير مرئي هنا هو أن الرسم التوضيحي يستمر أسفل الصفحة ، ويكشف عن طبقات مختلفة.
Wireframe Plus
يستخدم Wireframe Plus توضيحات خلفية أحادية اللون لموقعهم. إنه دقيق ، لكنه يضيف بالفعل بعض الجاذبية البصرية الإضافية ويجعل الموقع بارزا على الرغم من أن نظام الألوان والطباعة هما معياران إلى حد ما.
توم برادشو تصميم
يستخدم Tom Bradshaw Design الطباعة على نمط التوضيح في جميع أنحاء الموقع ، بالإضافة إلى تعويذة شخصية للرسوم المتحركة ، تظهر على كل قسم من الصفحة (إنه موقع من صفحة واحدة).
Mediocore
لا يمكن رؤية الرسوم التوضيحية الرقمية اللامعة مثل هذه في كثير من الأحيان ، وتبرز من المواقع الأخرى. هذا واحد يبرز أكثر منذ وضعه على خلفية سوداء ويستخدم الألوان الساطعة فقط على الصفحة.
htmlMafia
تُعد الرسوم التوضيحية هنا مزيجًا من الأساليب الرقمية والأنماط المرسومة يدويًا ، على الرغم من أن التدرجات المستخدمة تجعلها أكثر ثباتًا في الفئة الرقمية. هذا مثال رائع على كيفية إيضاح الرسوم التوضيحية لموقع ما وإعطاء انطباع أكثر دراماتيكية.
CreativeSwitch
الرسوم المتحركة الموضحة هنا هي في الواقع متحركة على الموقع نفسه ، وإن كان بمهارة. يتم استخدام الرسوم التوضيحية إضافية في جميع أنحاء الموقع.
690 تصميم
يعد وضع الرسوم التوضيحية في نسخة موقع الويب إستراتيجية رائعة. هنا ، يناقش نص سطر الوصف التناغم ، ويستخدم موصل الأوركسترا للتوضيح.
Kipu
الرسوم التوضيحية البسيطة ، على غرار المتجهات ، لها تأثير كبير للغاية. إن استخدام لوحة ألوان أكثر صموحية بالنسبة لهم ، كما هو موضح أعلاه ، يجعلهم يندمجون بسلاسة أكبر في بقية أجزاء الموقع.
Siringa 1
هذه الشخصيات هي مثال آخر على الرسوم التوضيحية الرقمية التي لديها شعور مرسومة باليد لهم. وبالإضافة إلى نظام الألوان ، فإن هذه الرسوم التوضيحية تمنح الموقع شعورًا بالود والراحة.
PixelBaecker
هناك الكثير يحدث في هذا التوضيح على غرار متجه ، من الرجال الذين يعملون في حفرة تحت الأرض إلى الطائر في الشجرة. أسلوبيا ، هو رسم توضيحي نموذجي جدا ، على الرغم من أن التنفيذ رائع.
Pieoneers
إن استخدام الرسوم التوضيحية للتحدث عن الفوائد أو تقديم معلومات أخرى ، دون تحويلها إلى رسم معلومات ، يعد إستراتيجية عظيمة. إنها طريقة ممتعة وممتعة لنقل المعلومات التي من المرجح أن تجذب الزائرين إليها. بالإضافة إلى ذلك ، فإن الجمع بين الفطيرة والصحن الطائر هنا رائع فقط!
يعقوب لي
تبدو البطريق الموضحة هنا وكأنها مرسومة يدويًا ، ولكنها مصقولة وسلسة بعض الشيء. التلوين الأبيض الصارخ (أو عدمه) يبرز حقا ضد الخلفية الملونة.
Treehouse التحرير
تتغير الخلفية المصورة هنا من صفحة إلى صفحة ولديها رسوم متحركة دقيقة. لكنها قطعة فنية جميلة تستحق نظرة ثانية.
الكاشمون
الرسوم التوضيحية الرقمية الأكثر شيوعًا هي الأحرف البسيطة أو الوحوش مثل هذه. وبوصفها تعويذة ، فإنها تعمل بشكل مثالي مع اسم الموقع.
Forrst
أصبحت الخلفيات المصورة مثل هذه الخلفية أكثر شيوعًا. التكامل التام بين المحتوى والخلفية هو ما يجعل هذه الميزة مميزة.
Coo / Coo Core
مزيد من الرسوم التوضيحية مثل هذا يعطي الموقع شعورا أكثر حداثة. هذا هو مجرد مجردة بما فيه الكفاية للقيام بذلك ، في حين لا تزال معروفة كشجرة.
المقود جنرال
يضيف تكرار الحرف الأساسي في خلفية الرأس طبقة إضافية من الاهتمام المرئي إلى ما هو رسم بسيط نسبيًا. نظام الألوان المستخدم هنا بسيط ، ولكن عندما يقترن بخلفية grungy ، تبدو رائعة.
جعل فيلم العمل
تظهر الرسوم التوضيحية أقل في مواقع نمط الجرونج ، ربما لأنها تخاطر بإحداث فوضى مرئية. لكن الرسم التوضيحي البسيط هنا ، مع مخطط الألوان الباهت والملمس الخفيف ، يعمل بشكل رائع في تصميم الجرونج البسيط.
استوديوهات صلبة
مثال آخر رائع من الوحوش الرقمية البسيطة المستخدمة في التصميم. هؤلاء الرجال هم عارضة وممتعة ، وجعل الموقع يشعر نفسه.
سحق الزيتون
الرؤوس هي واحدة من أكثر المناطق خداعًا لاستخدام الرسوم التوضيحية. من خلال الاستخدام المبتكر للظلال المسقطة ، يبدو هذا العنوان التوضيحي ثلاثي الأبعاد تقريبًا.
سارة توزار
مثال آخر رائع من الوحوش ، هذه المرة في تصميم الرأس. إنها ألوان رقيقة ، تردد الألوان من بقية الموقع ، ولكنها تضفي لمسة شخصية أكثر.
أربيل-تصاميم
يستخدم موقع Arbel-Designs خلفية خلفية متعددة الطبقات ، تبدأ من الفضاء في أعلى الصفحة ، وتتقدم بعمق تحت الماء. يعمل هذا النمط من الخلفية المصورة بشكل رائع على مواقع ذات صفحة واحدة.
حوش Minding
هذه بعض أبسط حروف المتجه في هذا المنشور. انهم لطيف جدا ، رغم ذلك ، ويتم دمجها بالكامل في تصميم الموقع. في الواقع ، هم بيت القصيد من الموقع.
المواقع ذات الرسوم التوضيحية المرسومة يدويًا
الرسوم التوضيحية المرسومة يدويًا أقل شيوعًا في تصميم الويب ، ولكن لا تزال هناك بعض الأمثلة الرائعة هناك. وهي تتراوح من رسومات فنية راقية إلى رسومات الشعار المبتكرة ، وكل شيء بينهما.
ستيف شوجر
تعمل الرسومات البسيطة مثل هذا العمل الرائع على أي موقع ، ولكن بشكل خاص عندما تحل محل صورة نموذجية (أو أي صورة مهنية). انهم أيضا بديل كبير لأولئك الذين هم خجول الكاميرا! ترك ملمس الخلفية من خلال إعطاء لهجة الجلد هو لمسة لطيفة.
كيني مايرز
يمكن أن يساعد مثال توضيحي لأبطال خارقين على ما هو أقل من ذلك موقعًا بسيطًا إلى حد كبير في بث الثقة في زائري موقعك دون اللجوء إلى تصميم موقع "الشركة". إن صدى الألوان من أي مكان آخر في الموقع يضمن أن يمزج الرسم التوضيحي بسلاسة.
اندي وارد
من المنطقي أن يقوم الرسام بتضمين الرسوم التوضيحية على موقعه. يستخدم آندي وارد عرض شرائح من رسوماته التوضيحية في رأسه ، ولكن يتم دمجها بطريقة تجعلها جزءًا من التصميم نفسه.
كيليان موستر
خط رسم أكثر رسمية ، وخط رفيع مثل هذا يقدم إيماءة للتقاليد. في هذه الحالة: طرق التنضيد التقليدية. انها بسيطة ولكنها جريئة بما يكفي لجعل تأثير حقيقي.
الحمض النووي لداروين
مثال آخر رائع على موقع يستخدم رسومات خطية رسمية لخلق إحساس بالتاريخ. الرسوم التوضيحية ذات الطبقات تجعلها أكثر إثارة.
ربطة القوس
موقع رسمى أكثر رسمياً ، مع حوش مرسومة باليد (أو هل هو أجنبي؟). يستخدم الموقع رسمًا توضيحيًا متعدد الطبقات ، يبدأ من الفضاء وينتهي في البحر.
xhtmlCafe
رسم توضيحي مرسوم يدويًا مع ألوان مائية يخلق عنوانًا رائعًا ومفيدًا على موقع xhtmlCafe. تعطي العناصر المبينة داخل اللوحة شعورا أكثر أناقة من لوحة مائية مستقيمة.
هجوم على الويب
ما هي الوظيفة المنشورة على مواقع الويب المصورة التي لا يمكن أن يكون لها مثال لتوضيح أسلوب الكتاب الهزلي؟ كل شيء من سمك الخط إلى تلوين محكم يعيد إلى الأذهان روايتك المصورة أو الرسومية المفضلة لديك.
Janko at Warp Speed
هناك مثال بسيط في العنوان هنا ، وهو دقيق ودقيق لكنه يضيف قدراً كبيراً من النداء الجمالي لتصميم الموقع.
مكتوبة حصرا ل WDD من قبل كاميرون تشابمان .
إذا كان لديك مواقع ويب موضحة أخرى مفضلة ، فالرجاء مشاركتها في التعليقات!