تصميم في المتصفح المستخدم لإخافتي. ليس لأنه بدا صعبًا ولكن لأنني اعتقدت أنني سأنتهي بتصميم مكوّن من الكثير من المربعات الصغيرة ، وهو شيء كان عامًا ورقيقًا للغاية ، وسأنتهي بإعادته في Photoshop.
تبين أن هذا الخوف لا مبرر له على الإطلاق. لم تصبح تصميماتي أكثر تركيزًا فحسب ، بل كنت أكملها أيضًا بشكل أسرع وحضرت العملاء في وقت سابق من العملية من خلال التفاعل والمناقشة.
التصميم هو التصميم. لا يهم ما إذا كان يتم إجراؤه في برنامج حاسوبي أو يتم كتابته في الكود. التصميم في المتصفح ليس أصعب من التصميم في Photoshop. مثل أي أداة تحتاج إلى استخدامها لتعلمها وفي النهاية إتقانها.
التصميم هو عملية تكرارية ، أكثر صعوبة من خلال العمل مع العملاء. من الصعب أحيانًا على العملاء تصوير ما تصفه بالضبط ؛ التصميم في المتصفح يمكن أن يجعلهم يشاركون خلال العملية بدلاً من مجرد مرحلة التصميم.
بشكل أساسي ، يتم دمج مراحل التصميم والتطوير ، وإذا كنت جيدًا بشكل طبيعي في تصميم وتطوير الواجهة الأمامية ، فستضطر إلى التصميم في المتصفح مثلما تأخذ البطة إلى الماء.
إحدى الفوائد الرئيسية للتصميم في المتصفح هي أنه يمكننا تصميمها بناءً على توقعات واقعية. في بعض الأحيان ، قد يؤدي التصميم في البرمجيات إلى خلق مشاكل غير متوقعة من أجل تطوير الواجهة الأمامية. يمكن تصميم عناصر واجهة المستخدم بشكل ضبابي أو ربما لا يكون لها أي معنى ، من الصعب أن تشرح للعميل لماذا قمت بتغيير شيء ما ، ليس لأنهم لن يفهموه ولكن لأنك قد قمت بالفعل بوضعه في التصميم وكان ذلك وافق. التصميم في المتصفح يناسب فكرة البساطة.
قبل أن أفكر في التصميم أحتاج إلى خطة. لا يعني مجرد استخدام أداة مختلفة أن عملي يتغير. أحب أن يكون لدي خطة قوية قبل أن أبدأ في التصميم وأحتاج إلى معرفة ما أقوم بتصميمه ، ولماذا أقوم بالتصميم ، ومن أقوم بتصميمه ، وخلفية العميل ، وأي خدمة أو معلومات عن المنتج سأحتاج إلى التركيز عليها على.
بعد أن أحدد هذه الأشياء ، سأكون لدي فكرة أفضل عن المنتج أو ما يفعله العميل ، ومدة عمله ، وما الذي يميزه عن منافسته ، وعن قاعدة مستخدميه ، وعن الأساسي والثانوي. أهداف الموقع ستكون.
أنا شخصياً أحب الحصول على توثيق لكل شيء. عادة ما يكون لدي وثائق لتخطيط الموقع ، والمحتوى ، والعبارات التي تحث المستخدم على اتخاذ إجراء ، وهندسة الموقع. في الوقت الذي أبدأ فيه التصميم ، يجب أن يكون لدي استراتيجية واضحة للتصميم وكان يجب جمع كل المحتوى.
الرسم هو المفتاح إذا كنت سأصمم أي شيء في المتصفح. يمكنني التخلص من مناطق المحتوى باستخدام قلم رصاص وورقة ، والحصول على التعليقات والانتقال بسرعة إلى أساس تصميمي.
أقوم بالرسم استنادًا إلى الخطة الموضحة أعلاه ، وأحرص على أن يكون لدي كل مجالات المحتوى والعبارات التي تحث على اتخاذ إجراء. يجب أن يكون الرسم سريعًا ، ولا تنفق الكثير من الوقت لإتقان أي شيء. يجب أن تكون صلبة بما يكفي لإظهارها لأحد العملاء ، ولكنها كافية بما يكفي لجعلها منتهية في أقل من ساعة.
بعد ذلك ، أرغب في إنشاء نموذج للموقع من رسوماتي في HTML و CSS. النموذج الأولي هو الكثير من المربعات الرمادية مع النص والصور لعناصر نائبة. تعمل المربعات الرمادية كحاويات للمحتوى عندما أبدأ التصميم فعليًا. أكبر فائدة في النماذج الأولية مع الكود هي أن العميل يمكن أن يتفاعل مع النموذج الأولي ويرى كيف تعمل بنية الموقع ، وبهذه الطريقة إذا كان أي شيء مطفأ أو يحتاج إلى تحسين ، يمكننا التعامل معه الآن بدلاً من يوم الإطلاق.
قبل أن نتمكن من البدء في التصميم ، نحتاج إلى نوع من التصميم لإرساء تصميمنا. نحتاج إلى تحديد الألوان والخطوط التي سنستخدمها مع الزخارف والأنماط المحتملة. هذا هو المكان البلاط نمط تدخل حيز اللعب.
البلاط نمط تم إنشاؤها بواسطة سامانثا وارن ولقد تم استخدامها لفترة من الوقت الآن. فهي تساعد العملاء على رؤية دليل أسلوب مبكر وبسيط للغاية يمكننا استخدامه لبدء التصميم. أرغب في إنشاء العديد منها لمعرفة العميل الذي يفضل هذه الطريقة التي يمكنني تضييق نطاقها إلى واحد. أجد أن هذه هي أيضا مهمة جدا في عملية الموافقة ويساعد على منع الرفض التام.
نحن الآن جاهزون لبدء التصميم. إذا كنت معتادًا على التصميم في برنامج مثل Photoshop أو Sketch ، فهذا ليس مختلفًا كثيرًا. باستخدام ملف النموذج الأولي الخاص بنا ، نبدأ بإضافة محتوى زائف في ترميزنا. في هذه المرحلة ، نعرف بالضبط ما يدور في كل قسم من المحتوى في الترميز ، وقد تم بالفعل تعريف الشبكة بحيث لا يستغرق هذا الوقت طويلاً.
الآن سأبدأ في وضع أنماط طبقات على المحتوى الخاص بي. سأضيف أنماطًا أساسية للون ، والطباعة ، والتخطيط. بمجرد الانتهاء من الأنماط الأساسية سأبتعد عنك وننظر إليها. أنا أحب أن الشاشة لقطة أجزاء معينة من التصميم للإشارة في وقت لاحق.
عندما أشعر بالرضا عن الطبقة الأساسية ، أحب تدوين الملاحظات حول ما يجب تحسينه. بناءً على هذه الملاحظات ، سأستخدمها على الأرجح محل تصوير أو رسم لإضافة نسيج أو أي شيء ذو ملمس ملموس. يعد Photoshop و Sketch من الأدوات الرائعة لتحسين عناصر واجهة المستخدم المعقدة بسرعة ، لذا فإنني أنقذ أي شيء قد يؤدي إلى تشفير أكثر من مرة
السبب في أنني أفعل ذلك لأنني أرغب في أن يكون كود البرمجة الخاص بي مظلماً ونظيفة وكلما قمت بكتابة التعليمات البرمجية والتعليق عليها وحذفها ، كلما أصبح ملف التعليمات البرمجية الخاص بك أكثر هدوءًا وانتفاخًا.
إذا كان عليك تصميم المتصفح من الصفر في كل مرة ، فقد تبدو الأشياء وكأنها تأخذها إلى الأبد ، ولكن إذا بدأت من قاعدة مخصصة ، إطار عمل ، يمكنك إزالة أي خطوات متكررة. لتبدأ مع لدي نسخة مخصصة من Initializr التي أستخدمها مع شبكة استجابة مخصصة بنيت في Sass (http://sass-lang.com/). إن استخدام إطار مخصص يمنحني السبق في تصميم النماذج الأولية وتصميمها.
إن امتلاك مكتبة من أنماط واجهة المستخدم الشائعة يعد أيضًا طريقة رائعة لإنشاء نموذج أولي سريع ويجعل التصميم في المتصفح أكثر فاعلية. أنا أستعمل نص سامي للشفرة وشيء واحد تعلمته للاستفادة منه هو المقتطفات المخصصة التي يمكنك إنشاؤها. لقد أضفت العديد من أشكال التنقل والقوائم والشرائط الجانبية والعناصر المشتركة الأخرى إلى قائمة المقتطفات حتى أتمكن من وضعها بسرعة في ترميزي باستخدام إجراء بسيط. أنا أيضا استخدام الحسابات على Codepen و JSFiddle لحفظ الأنماط. قام Dan Cederholm بإنشاء موضوع WordPress رائع لتخزين الأنماط الشائعة المسماة إجاص . يستخدم هذا البرنامج مشاركات لتخزين رمز يمكنك تعديله مباشرةً في الواجهة الأمامية لاختبار التغييرات ومعاينتها.
الممارسة والتطبيق العملي سوف يجعلك أفضل في تصميم المتصفح. هناك احتمالات إذا قمت بإجراء أي نوع من تطوير الواجهة الأمامية التي لديك بالفعل إطار أساسي للبدء منها ولديك بالفعل بعض الأنماط الشائعة لاستخدامها.
الآن كل ما عليك القيام به هو البدء في التصميم في المتصفح ، وفي النهاية سوف تأتي بسير عمل فعال ويعمل ضمن العملية. مع الممارسة سوف تحصل على أسرع فقط.