تصميم قاتل الويب UI تخطيطات مع المجانية - الدليل النهائي

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

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

لهذا الدليل لقد قرنت بعض تقنيات تصميم واجهة المستخدم الحديثة مع المجانية يمكنك تحميل واللعب مع. آمل أن يوفر هذا بعض الدوافع للمهتمين بمهنة في تصميم الرسومات / تصميم الويب. حتى مصممي الويب المحترفين قد يجدون بعضًا من هذه الاتجاهات مفيدة لمشروعك القادم.

الممارسة مع قوالب كاملة

عندما يكون لديك المهارات اللازمة لتصميم التصميم الخاص بك من البداية ، لن تكون هناك حاجة للبدء في القوالب. من ناحية أخرى ، قد يشعر المبتدئين بمزيد من الراحة بدءًا من التصميم الكامل والعمل على التفاصيل الدقيقة.

هناك بعض التنزيلات المجانية الممتازة لقوالب موقع PSD الكاملة للحوافظ والصفحات الرئيسية والمدونات والعديد من الفئات الأخرى. هذه هي التصاميم المثالية للبدء في التعرف على نفسك “جنرال لواء” تخطيط ويب. سيكون لكل موقع احتياجات مختلفة لعناصر الصفحة وعليك تحديد العناصر المهمة.

هنا مثال PSD يسمى "AppCivilization" ، صممه Martin Fabricius. يتميز التصميم باستوديو إبداعي يقوم بتصميم تطبيقات للهواتف المحمولة وربما لمواقع الويب. في الجزء السفلي ستجد لوحة صغيرة من أيقونات التطبيقات تعرض في مجموعة. ستلاحظ أيضًا أن التصميم بالكامل قد تم تقسيمه أفقيًا إلى رأس وعرض شرائح أعلى ومحتوى رئيسي وتذييل داكن.

المصدر الأصلي - تنزيل

تصميم الصفحات المقصودة

دعونا ننظر في الهدية الترويجية آخر صممه مارتن. هذا المثال التالي هو صفحة مقصودة يمكنك استخدامها لبيع أي نوع من المنتجات. بشكل عام ، هذه سلع رقمية يمكن تنزيلها بواسطة المستخدم ، مثل التطبيقات والصور والرموز والقوالب وغيرها.

المصدر الأصلي - تنزيل

ولكن أفضل جزء من تصميمه هو أنه مرن جدًا للمبتدئين لحلها. لا يزال يستخدم الرأس التنقل العلوي صغير مع صورة كبيرة ، ولكن لا سيما إجراءات المستخدم المتوقعة مختلفة. لديه كبير “شرائه!” الزر الذي يبرز الحق فوق أضعاف. في الصفحة المقصودة للمنتج ، قد يجذب ذلك مزيدًا من الاهتمام أكثر من عرض شرائح مسج.

هناك تقنية أخرى رائعة لواجهة المستخدم وهي عرض ميزة iPhone الصغيرة في منتصف الصفحة. يشتمل Martin على لقطة معاينة لـ iPhone وزر App Store وقائمة صغيرة من الميزات الرئيسية. عندما يبحث الزوار عن تفاصيل المنتج ، لا يمكنك جعل الأشياء أكثر بساطة من خلال قائمة منسقة.

المزيد من القوالب:

فيما يلي بعض قوالب PSD المجانية التي أصدرناها في المسار:

• "بيز" قوالب موقع PSD للأعمال
• "ThinkJuice" قالب موقع المنتج PSD
• المهنية PSD موقع قالب
• "Polo360" Portfolio موقع PSD القالب

قد تكون مهتمًا أيضًا بما يلي:

• قوالب موقع العمل
• "قريباً" دروس في الصفحة + قوالب

الموقع الرئيسي الملاحة

القوائم والأزرار هي مجرد أدوات لبناء عناصر صفحة أكبر بكثير. لا يمكن إنكار أن التنقل الرئيسي لموقعك الإلكتروني له غرض مهم للغاية. تحتاج إلى أن يكون موقع الويب الخاص بك سهل الوصول إليه من خلال طرق احتياطية ممكنة لمستخدمي الأجهزة المحمولة.

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

المصدر الأصلي - تنزيل

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

المصدر الأصلي - تنزيل

أنماط القائمة البديلة

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

خذ على سبيل المثال القائمة الهدية الترويجية أدناه التي صممها موقع Icojam.

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

المصدر الأصلي - تنزيل

نصائح الملاحة / الدروس:

• 50+ برامج نصية للتنقل تعتمد على علامة تبويب CSS
• Breadcrumb Navigation أفضل الممارسات والأمثلة
• بناء الملاحة المتنقلة مع مسج
• الترميز التنقل التصفح في CSS3
• تصميم الملاحة مع LESS CSS

أشكال الويب الأنظف

العصر الحديث للإنترنت هو أبعد ما يكون عن مكان اجتماع ثابت. يتشارك المستخدمون باستمرار المعلومات ويتفاعلون مع بعضهم البعض بشكل يومي. تتم إدارة معظم مشاركة النص والوسائط من خلال نماذج الويب.

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

حقول تسجيل الدخول

هناك بعض الأمثلة الرائعة لنماذج PSD لتسجيل الدخول للتحقق. هذا الهدية الترويجية تسجيل الدخول عبر عالم الفسفور الابيض لديه كل العناصر القياسية الخاصة بك. حقلي إدخال لتسجيل الدخول / كلمة المرور ، وزر إرسال ، وخانات الاختيار لإدارة ملفات تعريف ارتباط الجلسة.

نموذج التصميم هذا مثالي إذا كنت تستطيع تنفيذ التأثيرات من خلال jQuery. رأس السهم الأيمن العلوي يجعلك تفكر في إعداد نافذة منبثقة. هذه طريقة رائعة لتوفير مساحة على موقع الويب الخاص بك عن طريق الحفاظ على النموذج مخفيًا حتى ينقر المستخدم على رابط التسجيل.

المصدر الأصلي - تنزيل

النموذج أدناه مجاني للتنزيل بفضل المصمم جيل هويبرشت. اعتاد نمط مماثل مع خلفية محببة والملمس ورقة. ما يعجبني بشكل خاص في تصميم جيل هو العناصر "الضخمة". إنه هبوط أكثر ودا في نموذج تسجيل الدخول الذي يملأ الصفحة بأكملها. يمكن للمستخدمين بسهولة رؤية ما يكتبونه وهناك فوضى أقل.

المصدر الأصلي - تنزيل

إذا كنت خبيرًا في تطوير الواجهة الأمامية باستخدام CSS3 ، فمن السهل جدًا ترجمة هذا الرسم إلى رمز. يمكنك حتى تنفيذ تأثير التوهج الخارجي المحدد والزوايا الدائرية للزر وحقول الإدخال.

جهات الاتصال

نموذج آخر ستجده في كل موقع إلكتروني هو نموذج اتصال. يتضمن هذا عادةً مجالات اسم المرسل والبريد الإلكتروني ومحتوى الرسالة.

الهدية الترويجية أدناه هي مثال رائع لاستخدام القوام والرموز المخصصة.

يستخدم التصميم أيضا نص العنصر النائب بدلا من التسميات. هذا يعني أنه عند تحميل النموذج لأول مرة يتم تعيين كل حقل بقيمة افتراضية (على سبيل المثال: اسمك). ولكن بعد أن تبدأ في كتابة مسح العنصر النائب يتم عرض المحتوى الخاص بك بدلاً من ذلك. جميع المتصفحات المتوافقة مع المعايير ستدعم هذا التأثير ويمكن أن توفر لك بعض المساحة على الصفحة.

المصدر الأصلي - تنزيل

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

المصدر الأصلي - تنزيل

نماذج الاتصال التعليمية:

• نموذج تسجيل الدخول / التسجيل: أفكار وأمثلة جميلة
• إنشاء نموذج تسجيل تأثير مكدس الورق
• قم بإنشاء نموذج اتصال HTML5 / CSS3 يستند إلى Ajax

شرائط ورايات

منذ 6 أو 7 سنوات فقط ، بدأت الزوايا المستديرة في الارتفاع في اتجاهات التصميم الشائعة. الآن وصلنا إلى أبعد من ذلك مع الظلال المسقطة وأشرطة الركن.

المصدر الأصلي - تنزيل

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

تعمل تأثيرات الصفحة الصغيرة جدًا على تحسين تخطيطك. يلاحظ الزوار وسيحبون هذه المجاملات الجمالية. لكن ضع في اعتبارك أن شرائط الركن الصغيرة ليست سوى جزء من اتجاه التصميم هذا.

المصدر الأصلي - تنزيل

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

التفاف الزاوية

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

التصميم أدناه مجاني 100٪ للتنزيل ويمكن استخدامه لأفكار المشروع الخاصة بك. يمكنك أن ترى كيف يمكن لهذا أن يلفت الانتباه من الزوار ولماذا نما هذا الاتجاه إلى مثل هذه الهيجان. يجب الحرص على عدم الإفراط في استخدام لافتات. بشكل عام ، يمكن أن تصبح هذه مزعجة للغاية مثل التأثيرات اللامعة / المتطابقة "القديمة على الويب 2.0".

المصدر الأصلي - تنزيل

تصميم مع أزرار

بصرف النظر عن الارتباطات التشعبية ، ستحصل على أقصى تفاعل من الزائرين باستخدام الأزرار. يمكن لعناصر الصفحة هذه أداء أي شيء بمساعدة مكالمات jQuery و Ajax باستثناء يمكنك أيضًا استخدام أزرار للربط بالمحتوى الثابت ، مثل التنزيلات المجانية على سبيل المثال!

طقم واجهة المستخدم أدناه ، صممه مات الوثنيون لديه أكثر من مجرد أزرار. مجموعة PSD الخاصة به رائعة للمبتدئين الذين يتطلعون لالتقاط التدرجات والملمس لبناء أشكال مماثلة. في كثير من الأحيان ستجد أزرارًا ذات جودة أعلى بكثير في مجموعات واجهة المستخدم مقارنةً بأجهزة PSD الفردية.

المصدر الأصلي - تنزيل

كيفية إنشاء الاختلافات

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

المصدر الأصلي - تنزيل

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

المصدر الأصلي - تنزيل

الخشب + ورقة القوام

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

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

المصدر الأصلي - تنزيل

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

28 القوام الخشب عالية الدقة

استنتاج

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