البحث في الموقع

جمعت لك مجموعة ضخمة من المواقع ذات تصميم مميز وسهلة الاستخدام التي سوف تلهمك، وتتكون هذه المجموعة من 50 موقع. اختيرت هذه التصاميم من زوايا مختلفة، من مواقع مشهورة مثل موقع National Geographic، أو Marni، أو The Winter Olympic Games، حتى أفكار المواقع التي لم تنشأ بعد أو مشاريع تصميم الويب الصغيرة التي وجدناها على موقع Behance. يجب على جميع مصممي الويب أن يُنشئوا مواقعهم واضعين بعين الاعتبار سهولة الاستخدام. ستفيدك هذه الميزة بإبقاء زوارك أكثر تفاعلًا، مما يجعلهم يمكثون وقتًا أطول في تصفح موقعك. ولكن في الحقيقة، ما الذي يجعل موقعك أكثر سهولة في الاستخدام؟ تصميمٌ متجاوب تمامًا، اجعل محتواك واضحًا، على سبيل المثال: القائمة، والأزرار المهمة، وكن حذرًا أيضًا من الخطوط التي تستخدمها والألوان.. إلخ. يجب عليك أيضًا أن تُبقي بعين الاعتبار وضع بيانات التواصل الخاصة بك، ووسائل التواصل الاجتماعي، استخدم قائمة ثابتة تظهر في جميع الأوقات. إضافةً لذلك، يجب عليك أن تفكر في قبول الطلبات عبر الإنترنت أو تضمين شريط بحث، كل هذا للتسهيل على الزائر عند تصفحه لموقعك. هذه المواقع السهلة الاستخدام أكثر من كونها جميلة فهي لديها مميزات أساسية ومفيدة للتصميم الكلي. تصفح هذه التصاميم الخاصة بمواقع سهلة الاستخدام وقم بدراستها. سوف تستفيد منها بالطبع وسوف تلهمك لتصنع تصاميم ويب فعالة وجميلة. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن National Geographic هذا الموقع رائع جدًا ولديه تركيب واضح، وقائمة ظاهرة، وخطوط جميلة، وصفحة رئيسية منزلقة فريدة من نوعها. Uncrate 2.0 فكرة الموقع الإلكتروني الرائعة هذه لديها تصميم متجاوب تمامًا، مما يشمل شريط بحث والمحتوى منظم بشكل جيد وظاهر تمامًا. كل هذه الميزات تُسهّل الاستخدام وتُظهر الموقع بشكل جيد لجميع الزائرين. Madewell ها هي فكرة موقع إلكتروني جميلة ولديها تخطيط سهل الاستخدام. احصل على إلهامك من هذا التصميم المذهل وانظر أي الميّزات الرائعة يمكنك اكتشافها. Sikora Ibizan Hounds هذا الموقع لديه تخطيط واضح بمعلومات مختصرة وصور عالية الجودة. يظهر كل من الشعار ومعلومات التواصل بسهولة. Aquawa on Behance هذا تصميم متجاوب تمامًا وسوف يقوم بمناسبة محتواه تلقائيًا بشكل مثالي مع أي حجم شاشة. WAVERIDER تصميم هذا الموقع هو أيضًا تصميمٌ بسيط ويشمل مميزات سهلة الاستخدام. حيث يتضمن قائمة ظاهرة وشعار، وتخطيط سريع الاستجابة 100%، وعناوين كبيرة بمعلومات دقيقة …إلخ. Kara فكرة التصميم هذه رائعة جدًا وتمتلك تصميمًا ملفتًا للانتباه والذي سوف يُبقي مستخدميك متفاعلين بكل تأكيد. Drew Watts هذا الموقع لديه رأس وذيل صفحة ثابتين واللذان يشملان كل المعلومات الضرورية للتصفح خلال موقعك. STP – Simple, Clean, Masonry يشتمل هذا التصميم على ميزة رائعة والتي تقوم بسحب رأس الصفحة والقائمة والشعار كلما قمت بالتمرير للأعلى. ويمتلك أيضًا تصميمًا متكامل ومنظم بشكل جيد مع صور عالية الجودة وجميلة. Nike: Tights of the Moment وهو موقع مليء بالألوان الجميلة ويحتوي على مميزات وتصميم يشد الانتباه. شريط التمرير في الصفحة الرئيسية فريدٌ من نوعه ولديه بعض حركات الانتقال الرائعة. Hireinfluence ترى هنا موقعًا ممتازًا ويمتلك تصميمًا جذابًا ومميزات رائعة. The French Cuisse يعد هذا التصميم بسيطًا بشبكة تخطيط منظمة جدًا، وسريع الاستجابة كليًا ويشمل مميزات رائعة تجعل منه سهلًا للاستخدام. The new Heroes & Pioneers فكرة موقع مذهلة بإمكانك استخدامها كمصدر إلهام. تفقد جميع مزاياه وحدد أي الأشياء الجديدة يمكنك تعلمها منه. Ok Kid – Grundlos Extended تصميم هذا الموقع هو تصميم دنيوي برسومات خفيّة. تعد التفاصيل البسيطة والتصميم الإبداعي من الأسباب التي تعطيه مظهرًا فريدًا من نوعه. Onlab – Font for the HBC تجدون هنا تصميمًا مذهلًا على شكل صفحة واحدة وهو ملفت للانتباه وسوف يشد انتباهك بكل تأكيد. يستخدم هذا التصميم قائمةً ثابتة تساعدك على التصفح خلال الموقع بسهولة. The Woman بإمكانك استخدام هذا التصميم الجميل كمصدر إلهام في مشاريعك المستقبلية. يعتبر التخطيط الخاص بالموقع سريع الاستجابة بمميزات أنيقة وتصميم مذهل. SocioDesign هذا الموقع مصمم بخبرة كبيرة وهو وكالة تخطيط مقرها في لندن. وهو موقع ممتاز بتخطيط منظم جيدًا. Tatte- Amanda Jane Jones احصل على إلهامك من فكرة التصميم المذهلة هذه واستخدم ما تتعلمه في مشاريعك المستقبلية. القائمة الرئيسية، الأزرار والمظهر الدنيوي مناسبين لهذا النوع من المواقع. Scotland Can Make It! Designed by Graphical House هذا تصميم موقع إلكتروني جميل بتخطيط سهل الاستخدام. وهو سريع الاستجابة تمامًا، ولديه أسلوب تصميم بسيط وأسلوب طباعة تم اختياره بشكل موفق. Ouur Collection هذا الموقع يملك تخطيطًا سريع الاستجابة والذي سوف يجعل محتواه يتناسب تمامًا مع أي حجم شاشة. يستخدم الموقع صورًا كبيرة لزيادة التأثير المرئي للتصميم. And And Web Design يستخدم هذا التصميم أفضل الصيحات في عالم تصميم الويب، والرسومات، والقوائم الإبداعية، والصور ذات الجودة العالية، والمزيد. Shotfolio PSD Theme ها هو نمط موقع إلكتروني مصمم بشكل جيد وبإمكانك تعديله بسرعة لجعله يتوافق مع متطلباتك. هذا التصميم سهل الاستخدام ويشمل ميّزات قوية. Marni يعتبر Marni موقعًا سهل الاستخدام فيه جميع المهام الضرورية للمتاجر على الإنترنت. أضاف المصمم العديد من الميزات الرائعة والتي سوف تسهل عليك التصفح في الموقع. Frú Frú يمكن قول الكثير عن هذا الموقع الجميل. يمتلك تصميمًا سريع الاستجابة، محتوى منظم جيدًا، وميّزات رائعة أخرى، يمتلك هذا الموقع تخطيطًا سهل الاستخدام ويجعل المستخدمين متفاعلين. World of Swiss استخدم هذا التصميم الجميل كمصدر إلهام لمشاريعك المستقبلية. يشتمل هذا التخطيط على تصميم متفاعل، صور عالية الجودة، والمزيد. Twiggy Bar هذا موقع جميل فيه محتوى منظم بشكل جيد بتصميم إبداعي سوف يضمن لك أن يلاحظه المستخدمون. تخطيط الموقع يشبه المجلة. Lala Berlin تصميم موقع مذهل ويحتوي أيضًا على متجر إلكتروني. اضغط على الرابط وألقِ نظرة على التصميم الكامل والميّزات. Bureau of Visual Affairs يمتلك هذا الموقع تصميم قائمة إبداعي، تأثيرات زَيْغ (تحريك الصور الثابتة)، رسومات أنيقة وتصميم مذهل. هذه الميّزات تجعل الموقع سهل الاستخدام وسهل الوصول لجميع الزوار. Johann Lucchini موقع رائع على شكل معرض بتصميم سهل الاستخدام. استعراض الأعمال يتم عرضه في شبكة منظمة تمكنك من رؤية الأعمال بشكل أفضل. Everlane بإمكانك استخدام هذا التصميم الجميل كمصدر إلهام لمشاريعك المستقبلية. هذا التخطيط لديه قائمة ثابتة تسهل عليك التصفح في الموقع. THISISPAPER أيضًا تصميم موقع رائع ولديه العديد من المزايا سهلة الاستخدام. هذه المزايا تشمل محتوى منظم، وتصميم أنيق، ومعلومات واضحة، وتصميم سريع الاستجابة، والمزيد. Brave People يمتلك هذا الموقع تصميمًا احترافيًا بميّزات قوية مثل تأثير الزّيْغ، ورسومات، وتخطيط كامل الشاشة ...إلخ. GC Watches في هذا الموقع، سوف تكتشف صورًا عالية الجودة، قائمة ملصقة، سريع الاستجابة بشكل كامل، جميعها مستخدمة بإتقان عالي واهتمام بالتفاصيل. هذا تصميم أنيق بشكل عام وفاخر. Escape Committee يستغل هذا الموقع المساحة البيضاء بشكل ممتاز، كون الصور محط الاهتمام في الموقع. تخطيطه سريع الاستجابة تمامًا ويمكنك من رؤية المحتوى بشكل ممتاز على أي شاشة عرض. Nixon هذا الموقع الإلكتروني الأنيق يحتوي على متجر تم تصميمه للساعات والاكسسوارات المميزة. خذ الإلهام من الطريقة التي يركز فيها هذا المتجر الإلكتروني على منتجاته بينما يمتلك تصميم UX رائعًا. Doug Aitken: The Source موقع إلكتروني جميل آخر بتصميم إبداعي. يحتوي التخطيط على مقابلات متعددة ومعروضة بطريقة فريدة من نوعها في رأس الصفحة. Crop the Block وهو موقع رائع بشاشة كاملة وله تصميم سهل الاستخدام. وسوف تجد أيضًا العديد من مقاطع الفيديو التي تجذب الانتباه والخطوط الجميلة. Castscarf يوجد العديد من الصور عالية الجودة والتي سوف تُذهل محبي الحيوانات في هذا المتجر الإلكتروني. وبالإضافة لتصميمه الرائع، فإن هذا الموقع أيضًا لديه تخطيط سريع الاستجابة بالكامل ويتوافق مع أي حجم شاشة عرض. Falve هذا التصميم الجميل للموقع الإلكتروني لديه تخطيط سهل الاستخدام. هذا يشمل، تصميمًا سريع الاستجابة، محتوى منظم بشكل ممتاز مع عناوين، وأزرار، والعديد من الميّزات الواضحة. Intersection التصميم الخاص بهذا الموقع سريع الاستجابة بشكل كامل، مما يجعله يُعرَض بشكل مثالي على أي جهاز. تندمج العناوين تمامًا مع صورة الخلفية الكبيرة. Harry’s تصميم الموقع الإلكتروني هذا هو تصميم شاشة كاملة مع تخطيط سهل الاستخدام. سوف تكتشف العديد من الصور المذهلة، الخطوط الجميلة، المحتوى المنظم جيدًا، والعديد العديد. Squarespace بالتأكيد قد سمعتَ عن Squarespace. استخدم هذا التصميم الأكثر من رائع كمصدر إلهام لمشاريعك المستقبلية. يستخدم التصميم رسومات تفاعلية، صور جميلة، والعديد من المميزات المخصصة. Jonathan Decosta يستخدم هذا الموقع شبكةً منظمةً لعرض صور مختلفة. وأيضًا، تمتلك القائمة موقعًا ثابتًا، فعند استخدامها، تقوم بفتح تركيب يغطي تقريبًا الشاشة بأكملها. IWC Schaffhausen موقع IWC Schaffhausen هو متجر إلكتروني بتصميم احترافي وتخطيط سهل الاستخدام. هنالك العديد من الفيديوهات في الخلف والتي سوف تشد انتباهك بكل تأكيد. Spotify وهو موقع مشهور جدًا ويحتوي على رأس صفحة ثابت مع خلفية شفافة. ويمتلك التصميم صور خلفية بألوان جميلة. هنالك العديد من خدع التصميم بإمكانك تعلُّمها من تخطيط هذا الموقع. Google Glass تصميم هذا الموقع بسيط ولكن فعال. اكتشف العديد من المميزات في هذا الموقع واستخدمها في تصاميمك. Jack Daniels بتأثير مظهر جميل، صور عالية الجوة وعلامة تجارية مشهورة، فإن هذا الموقع يجذب ويحافظ على مستخدميه. Symbolset يمتلك هذا الموقع خلفية بألوان متغير تشُد الانتباه وأسلوب طباعة مرسوم. Simone Marcarino ها هي صفحة رئيسية مرسومة بشكل تفاعلي والتي تشجعك على الانخراط في الموقع. هذا التصميم لديه تخطيط دنيوي وبسيط ويتفاعل فجأة عندما تقوم بالتمرير من فوقه. Pulse هذا التصميم معقد بعض الشيء ويشمل عدّة ميزات رائعة وتصميم مدروس كليًا مع ألوان جميلة ورسومات مذهلة. الخلاصة تعد عملية صنع تصميم سهل الاستخدام مهمًا جدًا لعدد من الأسباب. أولًا، سوف يقوم التصميم المشوش بإحباط المستخدمين وقد يغادرون الموقع بدون أن يقوموا بأداء ما أتوا للقيام به في موقعك (سواء كان شراء شيء ما، تعبئة نموذج، قراءة مقالة، أو أي شيء آخر). ثانيًا، تصميم الموقع المدروس جيدًا والمنفذ بشكل جيد سوف يضمن أن يعود المستخدمون من جديد لزيارته وهو شيء يريده جميع مالكي المواقع. لذلك، استخدم هذه الأفكار عند صنعك لموقعك الإلكتروني سهل الاستخدام في المستقبل. احصل على موقع إلكتروني مخصص لأعمالك أبهر زوارك بموقع احترافي ومميز بالاستعانة بأفضل خدمات تطوير وتحسين المواقع على خمسات أنشئ موقعك الآن ترجمة -بتصرف- للمقال ‎50 User-Friendly Website Designs That Work لصاحبه Iggy

يمكن أن يكون تصميم نشرة إخبارية صعبًا. فأنت لا تحتاج فقط إلى معرفة وفهم كيف يتوقّع المستخدمون أو القرّاء وصول المحتوى إليهم، بل إنّك تعاني أيضًا من مشكلة جعل تصميم النشرة الإخبارية متوافقًا مع مختلف عملاء البريد الالكتروني. إذا كنت تدرس تصاميم النشرات الإخبارية الحالية، فهذا سيساعدك لفهم آلية عمل تخطيطات هذه الأخيرة وشفرتها البرمجية. لهذا السبب، قمت بانتقاء 10 من أفضل تصاميم الرسائل الإخبارية المتجاوبة بالكامل والمواكبة لمعايير البرمجة الحديثة. إذا كنت تخطّط لإطلاق نشرة إخبارية خاصة بك، ستكون هذه التصميمات مصدر إلهام كبير لك. seatGeek مع تصميم أحادي العمود وأسلوب خطٍّ كبير، أحبّ الطريقة التي يستخدم بها البريد SeatGeek الأيقونات والرسومات البسيطة لجذب انتباهك. تأخد الخطوط الكبيرة أيضًا نسبة عالية من الصفحة مما يجعل قراءة النصوص سهلة للغاية. فقراتٍِ أقصر وخطٍّ أكبر وزرّ دعوة إجراء واضح في أسفل الصفحة، كلها عوامل من شأنها زيادة قابلية استخدام النشرة. سيقضي هذا التصميم الغرض منه عند استعماله مع رسائل التحقّق عبر البريد. PlayStation إذا كنت تبحث عن تصميم أكثر تعقيدًا، فإنّ إصدار Battlefield 1 من شركة Sony يقدّم بعض الأفكار الرائعة. يعتمد جلّ محتوى هذه الرسالة الإخبارية على الصور لتكرار موقع Sony PlayStation الرسمي. يعدّ هذا أمرًا رائعًا لبناء الوعي بالعلامة التجارية والثقة بها، ولكنّك تحسّ أنّ هذه النشرة فقيرة من ناحية المعلومات نظرًا لأنها لا تخبر القارئ بما يجب عمله أو ماذا تعني الرسالة. ومع ذلك، فإنّها مصمّمة بشكلِِ سلس للغاية وتوضّح الدور الذي تلعبه الرسومات عالية الجودة في تصاميم البريد. Social Print Studio لا يلزم أن تكون رسائل التحقّق عبر البريد معقّدة. ولكن لا بأس بإضافة بعض التفاصيل حول الموقع أو القائمة التي قام المستخدم بالتسجيل بها للتّو. يعدّ هذا البريد الإلكتروني بواسطة Social Print Studio رسالة تحقّق في المقام الأول، ولكنه يتضمن أيضًا نقاطًا حول الموقع وما يمكن للمستخدمين الجدد توقّعه من خلال استخدامه. ويتضمّن أيضََا زر دعوة إلى إجراء باسم "shop" CTA يؤدّي مباشرةً إلى الموقع حيث يمكن للقرّاء طلب مطبوعات لصور الانستغرام الخاصة بهم. يعدّ هذا البريد مثالََا ممتازََا لإقناع المستخدمين بالعودة إلى الموقع مع زيادة عمليات التحقّق من الاشتراك. ##Archant إليك نشرة إخبارية عبر الايميل حقيقية ومثيرة للاهتمام والتي تضمّ رسالة تحديث التفضيلات من Archant (ناشر عبر الإنترنت). الهدف هو الاتصال بالمستخدمين الذين قد يكون لديهم إعدادات اشتراك صارمة جدًا (حظر جميع جهات الاتصال) أو متساهلة للغاية (تلقّي رسائل بريد إلكتروني كثيرة جدًا). فهذه طريقة رائعة للاتصال بالمشتركين الحاليين وجلبهم للتسجيل في المزيد من القوائم. WistiaFest2017 عادة ما تكون النشرات الإخبارية لأحداث وفعاليات مثل هذه بسيطةََ للغاية. فالأهداف التي يصبون إليها قليلة: مشاركة المعلومات حول الحدث وتشجيع المشتركين لشراء تذكرتهم في وقت مبكِّر. تحتوي هذه الرسالة الإخبارية على كلّ ما ذكرناه سابقا وبكثرة، مع وجود أزرار دعوة الإجراء (CTA) للتحقّق من المتحدّثين بالحدث والاشتراك للحصول على تذكرة. ويتّبع التخطيط أيضًا تصميمًا أحادي العمود والذي عادةََ ما يُعتبر مثاليََا بالنسبة لرسائل البريد الالكترونية . لا تخرج قوائم الأحداث بانتظام، فمن الضروري تضمين الشعار بالقرب من أعلى الصفحة. وبهذه الطريقة، سيعرف المشتركون تمامًا ما هو فحوى الرسالة رغم أنّه من الممكن أن تمرّ سنة على آخر رسالة قد تلقّوها. ندوة Sprout Social النشرات الإخبارية الخاصّة ب Sprout Social مصمّمة بطريقة رائعة وشفرتها البرمجية غير اعتيادية. ألقِ نظرة على هذا التصميم البسيط للترويج لندوة عبر الإنترنت. التصميم قصير جدًا ويستخدم الرسوم البيانية للفت الانتباه. كما يستخدم قوائم نقطية مع الأيقونات للمساعدة في الترويج للندوة حيث أن النقاط النقطية أسهل بكثير في القراءة من الفقرات. بالإضافة إلى ذلك، فإنّ نداء إجراء النشاط (CTA) الأخضر الكبير متواجدُُ فوق الطيّة بشكل جيد (أي أنه يظهر في الواجهة فور تحميل الصفحة دون الحاجة إلى تمرير الفأرة إلى الأسفل) ويدفع جدول أعمال ندوتهم على الويب إلى الأسفل. يمكنك استبدال العديد من هذه العناصر بعناصرك الخاصة والحصول على نتائج رائعة. ميزة جدولة منشورات الانستغرام الخاصة ب Sprout Social لنلقٍ نظرة على مثال آخر من Sprout Social، وهو هذا البريد الترويجي الذي يغطي ميزة جدولة Instagram الخاصة بهم. يختلف هذا التخطيط عمّا سبق بكونه يحتوي على شبكة بعمودين متناوبين. وهو يستخدم الأيقونات المربعة الموضوعة بجانب صناديق تحوي معلومات مربعة مع صور واضحة. إنّه لتصوّرُُ رائع وينسجم بشكلِِ جميل مع الشكل العام. إذا كنت تبحث عن قالبِِ بسيط لدراسته أو ربما إعادة إنشائه، فيجب عليك التحقّق من رسائل Sprout Social الإلكترونية. فبالنظر إلى جميع العوامل مثل المرئيّات، النسخ وهيكل الصفحة، تقوم Sprout Social بالتسويق عبر الايميل بشكل صحيح. Moo Design من بطاقات العمل إلى الملصقات المخصّصة، تبيع هذه الرسالة الإخبارية الترويجية المنتج بشكلِِ جيّد. يمكنك تعلم الكثير من خلال دراسة كيف تروّج مواقع الويب الأخرى لمحتواها، وتعدّ هذه النشرة الإخبارية مثالًا رائعًا. تُظهر صور المنتج كيف يمكن استخدام هذه العناصر ويمكنك أيضًا معرفة الكثير من أسلوب البريد ومظهره. تَظهر هذه الصور بشكل غنيّ وممتع وتجعلك تحسّ بشعورٍ خفيف من الفكاهة. هذا يجسّد للقراء كيف تشعر هذه المنتجات ولماذا قد ترغب في زيارة Moo. تستخدم الرسالة الإخبارية ميزة المنتج المكوّن من عمودين مع تجميعات من الصور والنصوص. وهي طريقة ممتازة لجذب الانتباه وزيادة التحويلات. Under Armor تحظى علامة Under Armor بشعبيةِِ كبيرة في مجتمع اللياقة البدنية. لديهم الكثير من المنتجات الرائعة وتصميم النشرة الإخبارية الخاصّة بهم يبيع سلعهم بشكل جيد. لاحظ عدد الصور الفريدة المستخدمة في هذا التصميم. من المنطقيّ، في بعض المنتجات، إضافة صور أكثر من نص. تخدم العناصر المُجمِّعة التي تحتوي على الصور ونداءات إجراء النشاط (CTA) الرسالة الإخبارية لـ Under Armor بشكلِِ جيّد، وهي عادةً استراتيجية جيّدة لجميع السلع المادية. Runtastic . تعدّ قوائم ميزات المنتج رائعةََ للترويج لتطبيقات الأجهزة المحمولة والبرامج الرقمية. ويعتمد بريد Runtastic هذا على لقطات شاشة للتطبيق وأيقونات صغيرة مسطّحة لتلفت انتباهك. الهدف من هذه الرسالة الإخبارية هو تشجيع النقرات المحوّلة وجعل المستخدمين الجدد يتعمقون في الميزات. إنّها مجموعة كاملة من البرامج وأدوات التتبّع بحيث يمكن أن يستغرق الأمر بعض الوقت لتعلّم كلّ شيء. ولكن من خلال بريد متابعة رائع، يمكنك تقديم معلومات كافية لإثارة فضول الناس ورغبتهم في معرفة المزيد. هذه فقط بعض من أفضل تصاميم الرسائل الإخبارية التي وجدتها ولكن هناك العشرات الأخرى منها. وبغضّ النظر عما تروِّج له أو لماذا تحتاج إلى رسالة إخبارية في الأصل، ستساعدك هذه التصاميم على التخطيط لتصاميم قابلة للاستخدام وذات شفرة مصدر نظيفة وسلسة للانطلاق منها. ترجمة -وبتصرف- للمقال 10 Newsletter Layouts With Free Source Code لصاحبه Jake Rocheleau