في هذا البرنامج التعليمي ونحن سوف تكون إنشاء تخطيط متجر بضائع المصنوعة يدوياً. الأول لن نتحدث كثيرا عن أحجام الخطوط المحددة أو رموز الألوان، ولكنها ستركز بدلاً من ذلك على شرح خيارات الخط، الألوان، أبعادا وهلم جرا.
دروس الأصول
من أجل متابعة على طول كنت ستحتاج بعض الأصول (مجاناً):
قبل البدء في تصميم التخطيط الخاص بك تحتاج إلى أولاً بتعريف ما أهداف هذه العملية التجارية. هو أولوية قصوى لزيادة الوعي بالعلامة التجارية؟ يتم بيع المنتجات إلى عملاء جدد، أو أن توفر لهم قيمة أولاً، الحصول على التفاصيل الخاصة بهم ومن ثم بيعها في وقت لاحق؟ لديك للتفكير في أهداف الأعمال والتسويق، ويحتاج المستخدم الخاص بك من أجل تصميم تخطيط أن تقنع الجمهور المستهدف اتخاذ الإجراءات التي تريد.
ابدأ بطرح هذه الأسئلة:
ما نحن ببيعها؟
الذين سوف تكون مهتمة في شراء منتجاتنا؟
لماذا ينبغي أن يشترونها منا؟
كيف نحن ذاهبون لتوفير قيمة؟
لهذا البرنامج التعليمي لقد قررت أن تركز على الصور القوية والسخية استخدام الفضاء السلبية لخلق شعور بالحرية والوضوح. أريد تصميم لتبدو أنيقة ونداء إلى الناس الذين يهتمون بصورتهم.
إعداد
وقبل القفز إلى Adobe Photoshop والحصول على صور لأسفل، دعونا تعريف بعض المتغيرات مثل الألوان والأنماط والاتجاه العام.
الخطوة 1
البدء في جمع الصور التي تريد للوح الألوان مودبوارد والألوان الخاصة بك. وعادة ما تستخدم بينتيريست، ولكن gomoodboard.com مفيد جداً، وقد صمم لخلق مودبواردس بحتة.
gomoodboard.com أداة مودبواردينج بسيطة وسهلة الاستخدام.
الخطوة 2
حتى دعونا التالية نموذج نظام ألوان للتصميم الخاص بك؛ واحدة ذات صلة بالعلامة التجارية الخاصة بك، وسوف نداء إلى الجمهور المستهدف. وكثيراً ما هو الممارسة الجيدة لاستخدام مولد لوح ألوان مثل أدوبي لون CC (Kuler السابق) التي يمكن أن توفر لك الوقت انتقاء الألوان.
تحميل صورة من مودبوارد الخاص بك ومعرفة ما هي الألوان التي يتم إنشاؤها. ضبط لوحة الألوان لتناسب الاحتياجات الخاصة بك وحفظ الألوان للرجوع إليها في المستقبل.
أدوبي "لون نسخة" يسمح لك لإنشاء لوح الألوان من صورة.
اختيار المحارف
مستوحاة من بعض العناصر الموجودة في مودبوارد أننا سوف نذهب مع "برو المصدر" محرف الأسرة، بما في ذلك على حد سواء بلا وإصدارات serif الخط. سيتم إضافة خليط من كليهما شعور متوازن وعناوين قوية.
الحصول على الوثيقة جاهزة
قبل أن نصل الإبداعية في "أدوبي فوتوشوب" دعونا فرز بعض الأعمال المنزلية، مثل إنشاء مستند جديد ووضع بعض المبادئ التوجيهية.
الخطوة 1
فتح "أدوبي فوتوشوب" وإنشاء مستند جديد CMD + N. تحديد أبعادها، لما كنت أشعر سوف تناسب التصميم الخاص بك الاحتياجات – في حالتي أنه في 1400x3564px.
الخطوة 2
بعد ذلك بتعيين بعض أدلة ذلك لدينا تخطيط مساحة كافية وتبدو متوازنة. وضع بعض المبادئ التوجيهية سيتم ضمان نظافة وستساعد على تحديد عرض موقعنا على شبكة الإنترنت لأغراض هذا التصميم. انتقل إلى طريقة عرض > "دليل جديد".. ووضع بعض المبادئ التوجيهية. وعادة ما اخترت 1000px كنقطة انطلاق وإضافة بعض المبادئ التوجيهية من الزوايا ذلك لديه مساحة للتنفس.
ملاحظة: استخدام المبادئ التوجيهية لهذا البرنامج التعليمي: الرأسي في 200px، 500px، 550px، 700px، 850px، 900px، و 1200px.
تلميح: يمكنك أيضا استخدام المساعد فوتوشوب جويديجويدي لإجراء هذه العملية حتى أسرع.
وإذ ترحب بالعملاء الجدد
سوف نبدأ أعمالنا تصميم المحل بخلق منطقة العلوي شكل جذاب لفت انتباه الزائر وإرسال رسالة فورية لأي موقع كل شيء.
الخطوة 1
إنشاء مجموعة جديدة تسمى "التنقل" وتعيين توجيهي أفقية جديدة في 130px. هذا حيث ستتواجد لدينا شعار وارتباطات التنقل والبحث. وضع الشعار الخاص بك على اليسار. إذا لم يكن لديك واحد، إنشاء مستطيل الشكل ومكان نص على ذلك.
الخطوة 2
الآن مكان عناصر التنقل الخاص بك كنص نقي. من مرحلة التخطيط يجب أن تعرفه بالفعل ما تحتاج إلى تضمين في الملاحة الخاصة بك حتى العميل الخاص بك المحتملة ويرى أنها مفيدة. استخدام أداة نوع أفقي (T) لكتابة عناوين الارتباط الخاص بك ومكان لهم بعد ذلك إلى الشعار الخاص بك ترك قدرا كبيرا من الفضاء.
الخطوة 3
يتم البحث عن وظيفة مهمة بشكل لا يصدق فيما يتعلق بالتجارة الإلكترونية. جعل حقل البحث الخاص بك بارزا وموجودا بوضعه على الحق في التنقل العلوي الرئيسي الخاص بك. لإنشاء استخدام أداة المستطيل (U)وأداة النوع الأفقي (T). لاحظ كيف نستلهم ألوان الصورة استخدمنا مع CC لون Adobe.
الخطوة 4
الآن حان الوقت لوضع صورة ملفتة للنظر والتي ستكون نقطة محورية الموقع كله مرة واحدة يراها الزائر للمرة الأولى. كما سترى تماما عادة على شبكة الإنترنت هذه الأيام، سوف نختار صورة عالية الجودة مع تركيز بشكل قوي وواضح، مما يسمح للنص وعناصر واجهة المستخدم تكون مضافين.
باستخدام أداة المستطيل (T) رسم 1400x700px (أي لون) مستطيل الشكل ومكان ذلك الحق دون التنقل العلوي (تذكر 130px الأفقي المبدأ التوجيهي؟ لهذا الشكل). ثم اسحب صورة اختيارك ووضع لها طبقة فوق طبقة الشكل المستطيل.
بعد أن اضغط باستمرار المفتاح Alt والماوس فوق طبقة الصورة حتى ترى قليلاً يشير السهم إلى الأسفل، ثم حرر زر الماوس لإنشاء "قناع لقطة" لذا الصورة مرئياً فقط ضمن منطقة المستطيل.
ضرب CMD + T لتغيير حجم الصورة، والتأكد من أن تضغط باستمرار على المفتاح Shift حتى يمكنك تغيير حجمه نسبيا.
الخطوة 5
للمساعدة في صورتنا انتباه أكثر نحو المركز الأفقي، دعونا نضيف تدرج الذي يذهب من الشفافية إلى اللون الأسود في الجزء السفلي. اختيار الأداة التدرج (ز) وتخصيصه للانتقال من الأسود #000000 شفافة. وبعد ذلك اضغط باستمرار على المفتاح Shift واسحب مع الماوس الخاص بك من الجزء السفلي من الصورة إلى حوالي منتصف لإنشاء تدرج. ثم تحويله إلى "قناع القطع" وخفض به العتامة إلى 50% حيث أنها ليست شديدة. قم بإعادة تسمية الطبقة إلى "الظل" حيث أنه من السهل تحديد.
الخطوة 6
الآن حان الوقت لاستخدام عنوان قوية التي تجذب العين الزوار الخاص بك وتشجعها على العثور على مزيد من المعلومات. استخدام كبيرة وجريئة "المصدر بلا برو" وكتابة عنوان قصير. لقد استعملت "المصدر بلا برو" (أسود) 70px الحجم و 160 لرسالة تعقب.
الخطوة 7
لك كسبنا انتباه المستخدم، وتوفر الآن رسالة ثانوية، والأهم من ذلك، دعوة إلى العمل (يعرف أيضا باسم كبار المستشارين التقنيين.) لقد استعملت 28px حجم "المصدر Serif برو" (العادية) للعنوان الفرعي وإعادة استخدام زر البحث للحفاظ على تناسق واجهة المستخدم.
إشعار التباعد أنا باستخدام. ترك مساحة كافية حول العناصر دائماً حيث أنها تعتبر أسرع ونظرة أكثر تنظيم. أيضا، إذا كنت تبحث عن كثب سترى أن طبقات النص أقرب إلى بعضهما البعض. ويعزى هذا الأمر إلى القانون في الجشطالت من التقارب.
"وفقا لقانون القرب، تبدو الأشياء التي تقترب من بعضها البعض يتم تجميعها معا".
خلق الثقة
ونحن القيام به مع "الترحيب العملاء الجدد"، أو الرأس، والمنطقة. بعد أن لدينا اهتمام الزوار وحان الوقت لتظهر لهم بعض متجر له لتقديم المزيد من الفوائد.
الخطوة 1
كما حافظنا على منطقتنا أعلى الموقع ضئيلة جداً سوف نذهب مع جمالية نظيفة وبسيطة لبقية التخطيط.
ضع عنواناً التي قد تهم زوار موقعك ووصف مختصر سيشجعها أكثر. لقد استعملت 24px "المصدر بلا برو" (سيميبولد) وإلى رمادي داكن #282723. تأكد من ترك الكثير من الفضاء فوق العنوان حيث أنها تتفق مع الناحية العلوية.
لوصف استخدام شيئا أكثر إشراقا حتى أنها أضعف بشكل مرئي والمتصورة على الفور كالثانوية في أهمية. لقد استعملت 16px "المصدر Serif برو" (العادية) وهو اللون الرمادي #adadad.
الخطوة 2
هو وسيلة فعالة لخلق الثقة استخدام صور عالية الجودة جذابة الذي يشغل الدماغ، وخلق الرغبة. تأكد من أن تستثمر وقت التقاط الصور كبيرة من المنتجات الخاصة بك أو الحصول على مصور محترف لإنجاز هذه المهمة. هذا البرنامج التعليمي سوف تستخدم منتجات خيالية حيث ليس لدى لالتقاط صور نفسي – بدلاً من استخدام تلك من أونسبلاش والمخزون الاحتياطي.
اختر أداة المستطيل (U) ورسم شكل مستطيل. بعد أن سحب صورة المنتج الخاص بك في Photoshop، وضعه فوق المستطيل وإنشاء "قناع القطع". تغيير حجم الصورة إذا لزم الأمر عن طريق ضرب CMD + T.
مكان المستطيل بين المبادئ التوجيهية الأولى والثانية العمودي كما لقد حددنا مجالات متساوية لصور المنتج في البداية.
الخطوة 3
لإبقاء الأمور بسيطة سوف نقدم مجرد معلومات أساسية حول المنتج بما في ذلك العنوان والأسعار (التي قد تجد مستخدمي مشغلات ترغب في العثور على مزيد من المعلومات).
اختيار نفس الخط Serif برو المصدر وقم بإدخال العنوان باستخدام رمادي أغمق كما تستخدم لعنوان المقطع. بعد أن استخدم الرمادي أخف لسعرها، كما هو الحال معلومات ثانوية ولا تتطلب الكثير من القوة البصرية. أكثر شيء واحد أن نأخذ في الاعتبار هو أن لدينا عناصر المحل مثل العناوين، يتم توسيط النداء لعمل أزرار ووصف كتل.
الخطوة 4
الآن وضع جميع طبقات المنتج في مجموعة واحدة ومضاعفتهم بضرب CMD + J، ووضعها بين في وقت سابق التحديد الرأسي المبادئ التوجيهية ترك مسافات بين.
الخطوة 5
نحن القيام به مع مقطع "تريندينج" يضم ثلاثة منتجات. طبقاً لبول سيز، ثلاثة خيارات هو العدد الأمثل لجعل العرض أكثر إقناعاً.
"إحدى هذه التقنيات هو المعروف' أثر المعتدل '(أو' التسعير المعتدل '). المصطلح مستمد من قصة "الأخوين جريم" المعتدل في الذي يأكل الأطباق الثلاثة من عصيدة؛ أولها حار جداً، التالي أيضا البرد، ولكن في نهائي واحد 'مجرد حق'. "
الآن دعونا نضع مقسم قليلاً حيث أنه يفصل بين التخطيط إلى أقسام. لقد استعملت 1pxأداة الخط (U) الضوء #e6e6e6 الرمادي حيث يكون مرئياً، ولكن ليست قوية جداً.
تلميح: اضغط باستمرار على المفتاح Shift لرسم خط أفقي تماما بسهولة.
الخطوة 6
الآن دعنا إنشاء قسم آخر عرض المزيد من المنتجات والذي يطلق عليه "الشعبية". دائماً تسعى للتحقق من صحة الناس وعرض المنتجات الشعبية الأخرى الناس تتمتع بإعطائهم الاجتماعية دليلاً على أن هذه المنتجات قيمة المال.
تكرار CMD + J وتخصيص العنوان والوصف والمنتجات من المقطع "تريندينج". المزيد من المنتجات المكررة وجعل شبكة 3 × 2 من أفضل المنتجات الخاصة بك.
التقاط العملاء المتوقعين
بعد فضح معظم المرئيات تثير اهتمام ورغبة حان الوقت لالتقاط معلومات الزوار في حالة أنهم لا يشعرون مثل شراء الحق الآن، حتى يمكنك الوصول في وقت لاحق.
الخطوة 1
ونحن سوف تشمل قسم مدونة بسيطة باستخدام نفس عنوان ووصف الشكل وبعض مقتطفات من بلوق وظيفة إعادة توجيه المستخدمين إلى المحتوى الذي قد تصب في مصلحة لهم.
اختر أداة المستطيل (U) وارسم مستطيل ضخمة التي ستكون بمثابة خلفية لهذا القسم الجديد. استخدام رمادي فاتح خفية لإنشاء فاصل طفيف من المنتجات. لقد استعملت #fbfafa. الآن تكرار العنوان والوصف من المقطع السابق ووضعها على رأس الخلفية الجديدة.
الخطوة 2
الآن اختر أداة النوع الأفقي (T) وأدخل العنوان والتاريخ ومقتطفات قصيرة من بلوق وظيفة الخاص بك. لقد مرة أخرى استعملت "المصدر شريف الموالية" للعنوان والوصف و "مصدر بلا الموالية" للتاريخ.
وحتى في هذه الكتلة بلوق ستلاحظ التسلسل الهرمي واضحة البصرية وعنوان أظلم وأكبر وعناصر أخرى أصغر حجماً وأخف وزنا في اللون. وتستخدم دائماً التسلسل الهرمي المرئي لتحقيق تدفق منطقي. للحفاظ على تناسق جعل بلوق وظيفة كبير مثل كتل المنتج.
الخطوة 3
الآن وضع كل بلوق وظيفة الطبقات في مجموعة وتكرار ذلك مرتين عن طريق ضرب CMD + J، ووضعه بين المبادئ التوجيهية العمودية ترك المسافات بين مع المنتجات.
الخطوة 4
بعد عرض بعض منتجات باردة وقيمة بلوق وظيفة حان الوقت لدفع الزوار قليلاً وتقديم نموذج مع دعوة واضحة للعمل للاشتراك.
مرة أخرى الاستيلاء على أداة المستطيل (U) واختر لون أغمق، مثل #282723 ورسم خلفية لاستمارة الاشتراك. باستخدام خلفية داكنة ملحوظ ستقوم بإنشاء على النقيض من ذلك سيتم تلقائياً استرعى انتباه المشاهدين.
الخطوة 5
الآن كتابة قصيرة دعاية مغالى فيها شرح لماذا يجب أن اشترك الشعب؛ التعبير عن فوائد أكثر الميزات. بعد أن انتقل إلى تنقل تصميمنا وتكرار الحقل البحث بما في ذلك الزر، أننا سوف إعادة استخدامه لنموذج اشتراك.
اسحب الطبقات المكررة ووضعها على رأس لدينا الخلفية التي تم إنشاؤها حديثا ثم تخصيص حقول الإدخال والدعوة إلى زر الإجراء.
الخطوة 6
وأخيراً، قد كل قالب لتذييل صفحة مع وصلات شملت حتى يتمكن الناس من التمرير لأسفل والبحث عن التنقل إلى الصفحات الرئيسية، مثل دعم العملاء ومعلومات الاتصال، والشبكات الاجتماعية، وأكثر.
مرة أخرى، تكرار طبقات النص بلوق وظيفة وتخصيصها لإظهار الروابط من اختيارك. تقسيم مجموعات مختلفة من الارتباط وشكل الأعمدة التي هي متساوية في صف واحد.
آخر اتصال: إضافة خط المؤلف في الجزء السفلي من التخطيط.
تهانينا!
هذا هو! نحن القيام به أخيرا مع موضوع التصميم متجر شوبيفي مدعوم الآن المضي قدما واستعراض طبقات المستند الخاص بك، وحذف تلك التي لا لزوم لها وتسليمها إلى المطور الخاص بك أو، رمز حتى أفضل، نفسك!
Tomas Laurinavicius is a designer, marketer, blogger, marketing advisor at Devsolutely and co-founder of Best Writing, an all-in-one platform connecting writers with businesses.
