مجموعة ضخمة من أدوات مصمم
مصممي الويب لديهم ثروة من الأدوات المتاحة لهم ، للقيام بكل شيء من تنظيم أفكارهم حول تصميم معين إلى تصحيح التصميم النهائي.
ولكن مع وجود العديد من الأدوات ، كيف يمكنك تحديد أي منها مفيد بالفعل وأيها سيضيع وقتك؟
لقد قمنا بتجميع قائمة كبيرة ببعض أفضل الأدوات وأكثرها فائدة لمصممي الويب .
غادر عن قصد القائمة هي أدوات مشتركة معظم المصممين من المحتمل استخدامها بالفعل (مثل دريمويفر أو بانيك كودا ، فوتوشوب أو الأعرج ، وبرامج مماثلة شائعة إلى حد كبير كل مصمم لديها بالفعل في مجموعة أدواتهم).
هذه الأدوات هي التي ستوفر عليك الوقت ، وتجعلك مصمماً أكثر فاعلية ، وتبسيط أو تسريع عملية التصميم ، أو تجعل حياتك أسهل.
تجميع أدوات دون اتصال
تركز معظم أدوات تصميم الويب المفيدة فقط على الأدوات عبر الإنترنت.
ولكن هناك بعض الأدوات المفيدة جدًا التي يمكنك استخدامها لفتح خياراتك عندما يتعلق الأمر بالتصميم. هذه الأشياء يمكن أن تجعل مهام معينة أسهل ، بما في ذلك العمل مع العملاء غير المعيدين.
أقراص الرسومات
تعد لوحات الرسومات (والتي يشار إليها أحيانًا باسم ألواح الرسم أو لوحات الرسومات أو الأقراص الرقمية) أداة مفيدة بشكل لا يصدق في ترسانة مصممي الويب. في حين أن معظم المصممين يمكن أن يرسموا بمهارة كبيرة باستخدام الماوس ، إلا أن الجهاز اللوحي يجعله أسهل وأسرع.
تتكون معظم الأجهزة اللوحية من جزئين أساسيين: الجهاز اللوحي نفسه والقلم (أو القلم). كما يأتي كثير منها مع عفريت (يعمل بشكل مشابه للماوس ، ولكن على اللوحة نفسها بدلاً من لوحة الماوس أو مكتبك). الاعتبار الرئيسي للجهاز اللوحي هو الحجم ، في حين أن الاعتبار الرئيسي للقلم هو حساسية للضغط.
تتوفر الأجهزة اللوحية نفسها بأحجام تتراوح من حوالي 4 × 5 ″ إلى 19 ″ x 13 ″. بطبيعة الحال ، كلما زاد حجم الجهاز اللوحي ، زادت تكلفة استخدامه. بالنسبة للجزء الأكبر ، يمكن لمصممي الويب أن يفلتوا من الأجهزة اللوحية على الطرف الأصغر من الطيف ما لم يخططوا للقيام بالكثير من أعمال التوضيح (وحتى بعد ذلك ، من الممكن تمامًا الحصول على نتائج عالية الجودة من جهاز لوحي متوسط الحجم).
كما أن الأجهزة اللوحية الأصغر حجمًا أكثر قابلية للحمل ، مما يجعلها ملائمة للمصممين الذين لا يرغبون دائمًا في الارتباط بمكتبهم.
الأقلام حساسة للضغط لإعطاء تجربة أكثر واقعية . تتراوح الحساسيات الشائعة من 256 مستوى من الضغط حتى 2048 مستوى. كلما ارتفع مستوى الحساسية ، كلما شعرت أنك تستخدم قلم وورقة.
أقراص الرسومات الشعبية
اكوم هو على الأرجح الشركة المصنعة للأجهزة اللوحية الأكثر شعبية هناك. لديهم أربعة خطوط إنتاج مختلفة: الخيزران (الذي يتضمن منتجات الخيزران كرافت و Bamboo Fun) ، التي تستهدف المستهلكين والهواة. Graphire ، لوحة البلوتوث الخاصة بهم ؛ Intuos ، خطها المتوسط المدى للمهنيين المبدعين ؛ و Cintiq ، الخط المتطور الذي يشتمل على شاشة في الجهاز اللوحي للحصول على تجربة "القلم على الشاشة" (واحد حتى يتميز بشاشة 21 بوصة).
ايبتك يصنع خطًا من الأجهزة اللوحية منخفضة التكلفة التي تبدأ بسعر 50 دولارًا أمريكيًا فقط. وهي توفر قرصًا لوحيًا بسعة 12.1 ″ USB لأقل من 130 دولارًا (مقارنةً بـ 469 دولارًا أمريكيًا لوحي من Wacom بحجم مماثل). ومع ذلك ، فإن برنامج Aiptek الأكثر إثارة للاهتمام هو "My Note Premium" (170 دولارًا أمريكيًا) والذي يتيح لك الرسم على قطعة من الورق أعلى الجهاز اللوحي باستخدام قلم حقيقي ويسجل كل ما تفعله. تتوفر ذاكرة كافية لما يصل إلى 100 صفحة مكتوبة ، وتأتي مع فتحة بطاقة SD لتوسيع سعتها. وإذا كنت ترغب في استخدامه لمجرد تدوين الملاحظات في أحد الاجتماعات ، فيمكن تشغيله من بطاريات AAA 4 ، مما يعني أنك لن تضطر إلى إحضار الكمبيوتر المحمول معك.
UC-المنطق هي الشركة المصنعة للجهاز اللوحي الرسومية الأخرى. وتندرج منتجاتها في النطاق المتوسط لأسعار الأجهزة اللوحية ، مع وجود قرص 9 x x12 ((PF1209-Pro) مقابل 250 دولارًا أمريكيًا تقريبًا. لديهم أقراص متوفرة تبدأ بسعر 40 دولارًا أمريكيًا فقط.
لوحات المزاج
تعد لوحات المزاج (تسمى أيضًا لوحات إلهام) أداة رائعة للمصممين الذين يعملون مع العملاء الذين قد لا يكون لديهم فكرة واضحة عما يريدون.
تأخذ لوحات المزاج عادة شكل ملصقة تتضمن عناصر تصميم للمشروع. قد تكون أمثلة العناصر المضمنة عبارة عن عينات الطباعة أو مخططات الألوان أو أمثلة رسومية محددة أو عناصر "المزاج" العامة التي تعكس رؤية المصمم للظهور الذي يجب أن يمنحه الموقع للزوار.
غالباً ما تستخدم لوحات المزاج في مجال التصميم الداخلي لإظهار أفكار العملاء لإعادة تزيين غرفة أو منزل بأكمله. كما أنها تستخدم في صناعة الأزياء لتكون بمثابة مصدر إلهام واتجاه لخط أو موسم. لكنها ذات قيمة كبيرة بالنسبة لمصممي الرسوم والمواقع الإلكترونية.
استنادًا إلى نوع العميل الذي تعمل معه ، يمكنك إنشاء صورة مجمعة غير منسقة مع تراكب العينات بطريقة عضوية . إذا كان عميلك في حقل إبداعي ، أو على دراية بالعملية الإبداعية ، يمكن أن يعمل هذا النوع من لوحة المزاج بشكل جيد.
إذا كان عميلك ، من ناحية أخرى ، مستخدمًا في بيئة أكثر رسمية أو رسمية ، فقد يكون إنشاء لوحة مزاجية أكثر تنظيماً مناسبًا على الأرجح.
استخدم الرؤوس لتمييز نظام الألوان وعناصر التصميم الخاصة والطباعة والأجزاء الأخرى من اللوحة المزاجية لإعطاء الهيكل بأكمله بعض الشيء.
إذا كانت لديك أفكار متعددة للاتجاهات التي يمكن للمشروع أن يذهب إليها ، فإن إنشاء لوحات مزاجية مختلفة يمكن أن يكون طريقة رائعة للحصول على تعليقات العملاء وتحسين أفكارك الخاصة.
يمكن أن يكون إنشاء مثالين أو ثلاثة أمثلة لإظهار العميل قيماً في الحصول على مزيد من التوجيه من العميل دون الحاجة إلى قضاء ساعات أو أيام في نموذج فعلي للموقع فقط ليتم إخباره بأنه لا يشبه ما يبحثون عنه.
وهذا بالفعل هو الفائدة الرئيسية من استخدام لوحات المزاج في عملية التصميم الخاصة بك. عادةً ما يستغرق إنشاء لوحة المزاج وقتًا أقل بكثير من إنشاء نموذج للموقع .
استخدام لوحات المزاج للحصول على مزيد من التعليقات من عميل غير حاسم أو غير آمن قبل تخصيص ساعات للتصميم الذي سيتم رفضه فقط يجعل الجميع أكثر سعادة.
موارد لإنشاء لوحات المزاج الخاصة بك
نشرنا مقالا على لماذا مجالس المزاج المسألة في نهاية العام الماضي. تتناول المقالة أساسيات إنشاء لوحات المزاج ولماذا تريد استخدامها. إنها نقطة بداية رائعة.
من الأريكة لديه فيديو تعليمي دعا خلق مجلس المزاج الفعال . يبلغ طوله سبع دقائق ويغطي أساسيات إنشاء لوحة مزاجية رقمية للمشاريع.
فليكر لديه لوحات الإلهام تجمع تجمع صور المزاج والإلهام من مختلف مجالات التصميم. إنه مكان جيد للعثور على بعض الإلهام أو مجرد الاطلاع على أمثلة عن كيفية تقارب الآخرين مع لوحاتهم المزاجية.
مجموعة من الأدوات عبر الإنترنت
أدوات تصميم مواقع الإنترنت هي عبارة عن عشرة سنتات. يمكن أن يبدو أن فرزهم للعثور على الإعلانات المميزة حقًا يستغرق وقتًا أطول مما قد تتوقعه من الحفظ باستخدامهم.
ولكننا وجدنا أدناه أفضل الأدوات للطباعة ، و CSS ، و AJAX ، و Javascript ، واختيار الألوان ، والأدوات اللازمة لتسهيل إنشاء عناصر صفحة فردية.
مرة أخرى ، هذه هي بعض من أفضل الأدوات المتاحة لما يقومون به ، لذلك لن تضطر إلى إهدار الكثير من الوقت في اختبار العشرات من الأدوات المختلفة.
أدوات الطباعة
هناك مجموعة من الأدوات عبر الإنترنت لتجربة الطباعة على تصاميم موقع الويب الخاص بك. بعض تسمح لك لمقارنة الخطوط المختلفة جنبا إلى جنب. يسمح لك البعض بتجربة نمط واحد فقط في كل مرة. وما زال آخرون يعرضون لك مجموعات خطوط مختلفة موصى بها.
ومن الأدوات الأخرى المفيدة في مجال الطباعة على شبكة الإنترنت ، تطبيقات لتحويل أحجام البيكسل إلى وحدات em ومجموعة متنوعة من أبراج أبورم وغيرها من مولدات النص الوهمية. في كل شيء ، هناك أدوات الطباعة هناك فقط عن كل حاجة ممكنة قد يكون مصمم على شبكة الإنترنت.
Typetester
يتيح لك Typetester مقارنة ما يصل إلى ثلاثة خطوط جنبًا إلى جنب .
يمكنك تحديد أي خط من جهاز الكمبيوتر الخاص بك أو استخدام الخطوط من القائمة الخاصة به من خطوط النظام الشائعة والخطوط الآمنة للويب. كما يسمح لك أيضًا بتغيير الألوان والقيادة والتتبع والحجم وخيارات النمط الأخرى.
إنها أداة رائعة عند محاولة تحديد الخطوط التي سيتم استخدامها للعناصر المختلفة أو حتى لتجميع مكدسات الخط الخاصة بك (حيث أنها تتيح لك مقارنة العديد من الخطوط جنبًا إلى جنب).
مجموعة CSS Type
تتيح لك مجموعة نوع CSS لصق أي نص تريد تعديله في مربع واحد ، وضبط أشرطة التمرير واختيار خيارات تنسيق أخرى ، ثم نسخ CSS الذي تم إنشاؤه.
إنها طريقة سريعة وسهلة لتنسيق أي نص تحتاج إليه ، من فقرات إلى رأس علامات.
وتشمل الخيارات لون النص ، والرائدة ، والتتبع ، وتحول خط الأساس ، وزخارف النص ، والمحاذاة ، والمزيد.
أفضل CSS الخط المداخن
بالرغم من أنها ليست أداة تقليدية ، في حد ذاتها ، تقدم هذه المقالة عددًا من البدائل لمكدسات الخط القياسية المستخدمة بشكل عام في CSS.
بالإضافة إلى تقديم إرشادات لإنشاء مكدّلات الخط الخاصة بك ، توفر هذه المقالة أيضًا مجموعة متنوعة من مكدسات العينات التي يمكنك استخدامها . مورد ممتاز عندما تشعر بالحيرة قليلاً على خيارات الطباعة الخاصة بك.
HTML-هوز
معظم مولدات لوريم Ipsum القياسية عبر الإنترنت تعطيك كتلة من النص ولا شيء أكثر من ذلك. وهذا رائع إذا كنت تحاول ملء بعض المساحة.
لكن HTML-Ipsum يمنحك النص الذي تم تعليمه بالفعل بعلامات HTML الأساسية (فقرة ، رأس ، قوائم غير مرتبة ، إلخ) حتى تتمكن من رؤية كيف تتفاعل كل العناصر المختلفة مع بعضها البعض. انها timesaver ضخمة.
PXtoEm.com
PXtoEM.com يقوم بما يقوله بالضبط: فهو يقوم بتحويل الخطوط بحجم البكسل إلى خطوط بحجم em .
الخيارات التي يوفرها لك هي ما يجعله أداة رائعة ومثيرة للإعجاب.
يمكنك اختيار حجم خط الهيكل الأساسي والحصول على التحويلات بناءً على حجم الخط الافتراضي للمستعرض الخاص بك (إذا ، على سبيل المثال ، يمكنك تعيين نسبة خط الأساس لديك إلى 62.5٪ بحيث يكون حجم 10 بكسل يساوي 1em ، يمكنك تحديد ذلك حجمك الافتراضي).
Typechart
يتيح لك Typechart استعراض مجموعة متنوعة من الخطوط الآمنة للويب وعرض كيفية ظهورها على نظامي Windows و Mac .
يمكنك العثور على الخطوط على أساس الحجم ، سواء كانت serif أو sans-serif ، أو التأكيد. لا تتضمن سوى الخطوط الآمنة للويب ، لذا فإن الخيارات المتاحة محدودة. ولكن بالنسبة للطباعة الأساسية ، فهي أداة رائعة يمكنها توفير الكثير من الإلهام.
ويمكنك نسخ ولصق CSS لكل نمط دون مغادرة الصفحة.
التقليب نموذجي
يتيح لك Flipping Typical عرض الخطوط العامة الموجودة على جهاز الكمبيوتر الخاص بك بتنسيق شبكة لجعل اختيار الخط الصحيح للمشروع الحالي أسهل.
هذه أداة رائعة عندما لا تكون مهتمًا باستخدام الخطوط القياسية الآمنة للويب وترغب في رؤية المزيد من الخيارات.
من المفيد بشكل خاص إذا كنت لا تريد الخوض في بضع مئات من الخطوط المثبتة على جهاز الكمبيوتر الخاص بك وترغب فقط في رؤية أكثر شعبية منها.
أدوات CSS
CSS تقريبًا مهم في تصميم الويب بتنسيق HTML. وهناك المئات من الأدوات لجعل CSS أكثر نظافة ، وأكثر رشاقة ، وأكثر فعالية ، وعموما أفضل أن يوفر لك الوقت والجهد اللازمين لإكمال صفائح الأنماط يدويا.
يتم تبسيط ضغط أوراق الأنماط الخاصة بك ، والتي يمكن أن تساعد في تسريع وقت التحميل لمواقعك ، باستخدام أداة تلقائية عبر الإنترنت. هناك أدوات متاحة لإزالة الإعلانات المتكررة أيضًا.
تحافظ الأوراق الغشية على العناصر الأساسية لـ CSS في متناول يدك عندما لا تكون القهوة قد استقرت في الصباح وتجد صعوبة في تذكر أي أمر يجب أن يكون به ترميز الاختزال.
في حين أن معظم هذه الأدوات تقوم بعمل رائع في تنظيف CSS الخاص بك ، تأكد دائمًا من الاحتفاظ بنسخة احتياطية من المستند الأصلي واختبار المنتج النهائي الذي تم إنشاؤه. في بعض الأحيان ، يزيل جهاز التنظيف أو الضاغط شيئًا ضروريًا بعد كل شيء ، مما يؤدي إلى كسر موقعك.
CSS SuperScrub
يهدف CSS SuperScrub إلى الحد بشكل كبير من تعقيد وحجم أوراق الأنماط الخاصة بك .
يتخلص من المكالمات المتكررة ، ويزيل المحتوى غير الضروري ، ويجمع العناصر المتبقية لتسهيل عملية التحرير لاحقًا.
هناك بعض الخيارات ، بما في ذلك واحدة لإزالة كل المساحة البيضاء في ورقة الأنماط الخاصة بك ، أو لإدراج سطر جديد قبل فتح الأقواس.
كود المجمل
يقوم Code Beautifier بتحسين وتنسيق ملفات CSS الخاصة بك .
وهو يوفر عددًا كبيرًا من الخيارات لتنسيق النص الخاص بك ، بما في ذلك ضغط الألوان ، وفرز خصائصك ، وتحويل جميع المحددات إلى أحرف صغيرة ، وتحويل خصائصك إلى إما كبيرة أو صغيرة ، واختيار مستوى الضغط الذي تريد استخدامه.
يمكنك إما نسخ ولصق CSS في التطبيق أو توفير عنوان URL لملف CSS الخاص بك.
CSS Drive
CSS Drive هو ضاغط CSS أساسي .
يمكنك ضبط مقدار الضغط الذي تريد أن يكون CSS عليه (خفيف ، عادي أو فائق صغير) ، وكيف تريد أن تتعامل مع التعليقات (ما إذا كنت تريد تجريدها).
هناك أيضًا وضع متقدم يمنحك المزيد من الخيارات ، بما في ذلك إزالة مسافات حول بعض الأحرف ، وإزالة علامات التبويب ، وإزالة الخطوط الجديدة ، والمزيد.
CSS التكرار مدقق
في بعض الأحيان أثناء تصميم أحد المواقع ، يمكنك إعداد محددات CSS التي لا تنتهي في النهاية إلى ترميزك النهائي.
لا تعمل هذه المحددات أكثر من جعل أوراق الأنماط الخاصة بك أكبر حجمًا وأصعب في التعديل لاحقًا.
ينتقل CSS Redundancy Checker من خلال ورقة الأنماط الخاصة بك وكل صفحة من صفحات HTML الخاصة بك لمعرفة المحددات التي لا يتم استخدامها ، ثم يزيلها .
إنها أداة رائعة يمكنك استخدامها إذا كنت تعتقد أنه قد يكون لديك أدوات اختيار غير ضرورية في أوراق الأنماط الخاصة بك.
فهرس خصائص CSS
يسرد فهرس خصائص CSS كل خاصية CSS أبجديًا .
يؤدي النقر فوق أي من الخصائص المضمنة إلى إحضار تعريف ومعلومات حول القيمة الافتراضية والقيم المسموح بها وما إذا كانت ترث من خاصية رئيسية.
دليل مختصرة CSS
يؤدي استخدام خصائص CSS المختصرة إلى جعل ملفات CSS أصغر من استخدام خصائص longhand .
ولكن تذكر أي أمر يمكن أن تسلكه كل العناصر المختلفة في جميع الخصائص المختلفة قد يكون صداعًا ، خاصةً تلك التي قد لا تستخدمها في كل تصميم تقوم به.
ويتضمن أيضًا معلومات حول قيم الخاصية الافتراضية ، لذلك إذا اخترت ترك خاصية ما ، فستعرف ما الذي ستفترضه.
أدوات الألوان
يمكن أن يكون اختيار الألوان المناسبة لتصميمات موقعك الإلكتروني أحد أهم القرارات التي تتخذها في عملية التصميم بالكامل.
في بعض الأحيان نأتي إلى تصميم مع نظام ألوان محدد مسبقًا (مثل عندما يكون العميل قد أنشأ بالفعل ألوان علامة تجارية) أو على الفور معرفة الألوان التي نرغب في استخدامها. في أوقات أخرى قد نكون حراً في إنشاء لوح الألوان الخاص بنا للتصميم.
إذا كنت تقوم بإنشاء نظام ألوان من البداية ، فإن مولدات ورسومات لوحة الألوان يمكن أن تكون مساعدة كبيرة.
إذا كان لديك بالفعل نظام ألوان ، فهناك اعتبارات أخرى يجب مراعاتها ، مثل إمكانية الوصول وأي الألوان التي سيتم استخدامها في أجزاء الموقع.
ولكن هناك أدوات للمساعدة في اتخاذ تلك القرارات أيضًا. فيما يلي بعض أفضل الأدوات المتاحة لإدارة أنظمة الألوان.
Colorblind صفحة تصفية ويب
وبالنظر إلى أن ما بين 7 و 10 ٪ من السكان الذكور لديهم درجة من عمى الألوان (وفقا ل ويكيبيديا ) ، والتأكد من أن مواقعك لا تزال متاحة لهذا المحتوى ليست فكرة سيئة.
توضح لك هذه الأداة كيف ستظهر تصميماتك للأشخاص الذين يعانون من عدد من اضطرابات عمى الألوان المختلفة. يمكنك عرض النتائج لموقعك بأكمله أو استبعاد الصور من النتيجة.
كما أنها توفر رابطًا لأداة اختيار لون آمن للعين.
العثور على مطابقة الألوان لموقع الويب الخاص بك
تعثر أداة لوحة الألوان هذه على ألوان تنسق مع أي لون تحدده .
يمكنك إما اختيار لون من خيارات محددة مسبقًا أو إدخال أي قيمة لون ست عشري أو RGB للحصول على تنسيق الألواح استنادًا إلى مخططات ألوان تكميلية أو مكملة أو ثلاثية أو ثلاثية أو تمثيلية أو أحادية اللون.
الألوان المتشابهة كلها متشابهة في الكثافة ، على الرغم من ذلك ، وهذا يعني أنه في الحقيقة مجرد نقطة بداية لإنشاء لوحات الألوان للتصميمات الخاصة بك.
مولد لوحة الألوان
الصور هي أماكن رائعة للبحث عن إلهام التصميم. يمكن لهذه الأداة إنشاء لوحة ألوان من أي صورة تختارها (قم فقط بإدخال عنوان URL الخاص بالصورة).
ويوفر مخططات الألوان الباهتة والنابضة بالحياة بناءً على الصورة التي تقدمها.
إن إمكانية استخدام أي صورة عبر الإنترنت تجعل هذه الأداة مفيدة حقًا ، لأنها توفر وقت الاضطرار إلى تنزيل صورة ثم إعادة تحميلها إلى موقع مثل هذا لإنشاء نظام ألوان (أو تنزيل برنامج رسومات ثم فتحه لإنشاء يدويًا لوحة الألوان).
Kuler
يعد معرض لوحة ألوان Kuler من Adobe أحد أفضل معارض لوحة الألوان .
يمكنك استعراض أو البحث في أكثر من 10000 لوحة ألوان تم إرسالها بواسطة مستخدمي Kuler ثم تنزيل أو حفظ التفضيلات الخاصة بك للرجوع إليها فيما بعد.
يتضمن Kuler أيضًا أداة إنشاء لوحة فعالة تمكنك من تحديد الألوان باستخدام أشرطة التمرير أو استنادًا إلى قيم ألوان HSV أو RGB أو CMYK أو LAB أو Hex.
عندئذٍ ، سيؤدي تعيين أي لون كاللون الأساسي إلى تغيير الألوان المحيطة لتكملة ذلك.
COLOURlovers
COLOURlovers هو معرض آخر لون مخطط عظيم .
يمكنك البحث عن أكثر من 800000 مخطط ألوان (استنادًا إلى 20 مخططًا لكل صفحة و 43،200 صفحة من مخططات). بالإضافة إلى اللوحات ، يمكنك أيضًا البحث عن ألوان وأنماط فردية استنادًا إلى لوحات الألوان.
واحد من أكثر الميزات المفيدة في COLOURlovers هو ، على الرغم من ذلك ، هو أداة إنشاء الأنماط ، مما يجعل إنشاء الأنماط الخاصة بك يعتمد إما على نظام ألوان محدد مسبقًا أو على نمط تقوم بإنشائه على الطاير.
ما عليك سوى التأكد من الاتصال بمالك حقوق الطبع والنشر للنمط إذا كنت تريد استخدام أحدهما للعمل التجاري.
100 ألوان عشوائية 2.0
إذا لم تكن لديك أي فكرة من أين تبدأ نظام الألوان لأحد تصميماتك ، فقد يكون 100 Random Colors 2.0 هو الأداة المناسبة.
يفعل فقط ما يقوله الاسم: يقدم لك 100 لون عشوائي ، بما في ذلك قيمها السداسية .
وإذا لم تجد أي شيء في أول 100 ، يمكنك فقط أن تضرب التحديث وتعطيك مجموعة جديدة كاملة!
أدوات العنصر الفردي
هناك الكثير من المولدات التي تجعلها سريعة وسهلة لإنشاء الأزرار والخلفيات والنماذج وعناصر التصميم الأخرى لمواقعك.
بعض منهم مجرد حيلة ، ولكن البعض الآخر هو مساعدة كبيرة إذا كنت تريد فقط إنشاء شيء بسرعة مثل زر الويب 2.0 أو زر أو خلفية مخططة أساسية.
قد تكون أدوات بناء النماذج مفيدة جدًا أيضًا ، خاصة إذا كنت ترغب في أن يتمكن عملاؤك من تنفيذ بعض أعمال المشرف الخاصة بهم في نماذجهم.
أعرف على الأقل اثنين من المصممين الذين يستخدمون هذه الأدوات حتى لا يضطروا إلى إنشاء واجهة مخصصة ومبسطة للوصول إلى قاعدة بيانات النموذج أو لتحرير النماذج لعملائهم. إنهم موفرون للوقت ، خاصة لبناء أشكال أكثر تعقيدًا.
موثقة wufoo
Wufoo هو منشئ نماذج HTML الذي يقدم أكثر من 80 نموذجًا للنماذج وأنظمة الألوان مع السماح لك أيضًا بالتحكم الكامل في إنشاء نماذج مخصصة لعملائك.
تجعل القوالب من إنشاء نماذج ويب قياسية أسرع وأسهل (مثل صفحات التسجيل أو نماذج الاتصال).
يتم تجميع النماذج المرسلة تلقائيًا في قاعدة بيانات تجعل من السهل على عملائك الطباعة وإرسال البريد الإلكتروني الفردي والتصفية والبحث والقيام بالوظائف المتقدمة الأخرى دون الحاجة إلى إنشاء واجهة مخصصة.
يمكنك أيضًا استخدام Wufoo لإنشاء نماذج طلب عبر الإنترنت والتكامل مع Authorize.net أو PayPal أو Google Checkout.
BgPatterns
تتيح لك BgPterterns إنشاء أنماط تجانب باستخدام مجموعة متنوعة من عناصر التكرار المختلفة.
يمكنك تحديد لون الخلفية وملمس قماشك وزاوية النقش. يمكنك تطبيق الخلفيات التي تقوم بإنشائها على موقع BgPatterns لمعاينتها ، ثم تنزيل الصورة بعد الانتهاء منها.
يمكنك أيضًا تصفح الأنماط التي أنشأها الآخرون. إنها الطريقة الأسرع والأسهل لإنشاء خلفيات مبلطة بسيطة.
شريط المولدات 2.0
إن إنشاء خطوط متكررة لموقع ويب يستغرق وقتًا طويلاً.
بالتأكيد ، يمكنك إنشاء قوالب للخطوط الشائعة التي قد تستخدمها ، ولكن ماذا لو كنت تريد شريطًا دبوسًا لمشروع واحد ، وشريطًا عريضًا لواحد ، وواحد في زاوية غريبة لآخر؟ قريبا هذه القوالب لا يبدو أنها قطعت بعد الآن.
يقدم Stripe Generator 2.0 خطوطًا في مجموعة متنوعة من الزوايا ، بأي عرض تقريبًا ، مع أو بدون ظلال وتدرجات ، وباستخدام أي ألوان سداسي عشري تريده.
كما تحتوي على معرض خطي حيث يمكنك مشاهدة ما قام الآخرون ببنائه.
صانع الترتان
إذا كان إنشاء الخلفيات المخططة يستغرق وقتًا طويلاً ، فإن إنشاء خلفيات منقوشة يمثل صداعًا كبيرًا.
وهنا يأتي دور Tartan Maker. حدد حجم الغزل والألوان لنمطك والزاوية ويخلقه تلقائيًا.
يمكنك معاينة التصميمات الخاصة بك بملء الشاشة ثم تنزيل الملف.
خلفية Pixelknete Dotter
ينشئ هذا المولّد الخلفي خلفية منقّحة حديثة بنقاط صغيرة تدريجيًا عند تحريكها لأسفل الصفحة.
يمكنك تحديد ما يصل إلى نقطتي ألوان ولونين لخلفية متدرجة (أو لون واحد فقط لخلفية صلبة).
يمكنك أيضًا تحديد ارتفاع النموذج (الافتراضي هو 700 بكسل). خلقت الخلفية يكرر على محور أفقي.
كمولد زر
إذا تجاهلت النص المترجم بشكل سيئ في هذه الصفحة ، فسترى أن هذا هو واحد من أسلس مولدات الأزرار المتاحة . أضف نصًا ، تدرجات مختلفة ، ومخططات ، وصور ، والمزيد إلى أزرارك.
يمكنك تحديد الزر وألوان الحدود ، والحجم الإجمالي (باستخدام أشرطة التمرير أو حقول النص) وسمك الحد ، وكيفية تقريب الزر.
إذا قمت بتضمين خطوط ، فإنك ستعطي الكثير من الخيارات ، بما في ذلك اللون والشفافية والسماكة والمسافة بين المشارب والزاوية.
هذا هو بالتأكيد زر زر الأكثر وضوحا تماما هناك.
صانع الزر
يتيح لك هذا المولد الزر إنشاء أزرار ثنائية الألوان 80 × 15 بكسل .
حدد ألوان الزر ، ألوان الحدود ، حيث يجب أن يكون الانقسام بين المربعات ، وأدخل النص لكل جانب ، وهذا كل شيء!
هذه واحدة من تلك الأدوات التي لم يتم تحميلها بالميزات ولكنها تفعل ما تم تصميمه للقيام به بشكل مثالي وسهل.
اياكس وجافا سكريبت ادوات
نعلم جميعا أن أياكس يمكنه إضافة الكثير من الوظائف إلى موقعك. سواء كنت ترغب في إضافة معرض صور بسيط ، أو نموذج اتصال تفاعلي ، أو إنشاء تطبيق ويب كامل ، فإن Ajax موجود لمساعدتك.
لكن البدء من الصفر قد يكون أمرًا شاقًا ، خاصة إذا كنت جديدًا نسبيًا على أجاكس. وحتى إذا كنت تعتبر نفسك محترفاً ، فلا يزال من المستطاع للوقت أن تبدأ مع قائمة بيضاء لكل مشروع من مشاريعك.
هناك الكثير من الأدوات لتسريع تطوير Ajax الخاص بك. من المجموعات النصية إلى الأطر إلى مولدات العناصر المحددة ، من المحتمل وجود شيء متاح في الأدوات أدناه مما يجعلك مطورًا أكثر كفاءة.
Ajaxload
Ajaxload هو مولد لإنشاء أيقونات محمل Ajax . هناك الكثير من الرموز المختلفة للاختيار من بينها.
كل ما عليك فعله هو تعيين ألوان المقدمة والخلفية (أو اختيار خلفية شفافة) ثم تنزيل البرنامج النصي الذي تم إنشاؤه.
سريع وسهل ولكنه يوفر عليك بضع دقائق (أو أكثر) من الترميز!
ميني أجاكس
Mini Ajax عبارة عن معرض من البرامج النصية القابلة للتحميل Ajax و DHTML .
ويشمل كل شيء من النوافذ المشروطة إلى عرض الشرائح إلى البرامج النصية الأكثر تقدمًا (مثل التقويمات وأدوات إدارة المشروع بالكامل).
إنها نقطة انطلاق رائعة للعثور على عناصر Ajax الفردية أو حتى مجرد الحصول على بعض الإلهام.
هناك عروض تجريبية متاحة للكثير من النصوص وكلها قابلة للتنزيل من مصادرها الأصلية.
موتولز
MooTools هو إطار جافا سكريبت موجه للكائنات . إنه بالتأكيد غير مصمم للمبتدئين ، ولكن يمكن أن يسمح لك بكتابة تطبيقات Ajax المرنة والقوية المتوافقة مع المتصفحات.
كما أنها متوافقة مع المعايير وموثقة بشكل جيد بشكل لا يصدق.
بالإضافة إلى باني الأساسية ، هناك أيضا طن من الإضافات المتاحة. يمكن استخدام MooTools لإنشاء كل شيء من معارض الصور البسيطة إلى واجهات المستخدم الكاملة.
مسج
jQuery هي مكتبة JavaScript تعمل على تبسيط مجموعة متنوعة من وظائف JavaScript .
واحد من أفضل أجزاء هذه الأداة ، على الرغم من ذلك ، هو عدد المكونات الإضافية المتوفرة بالفعل في jQuery.
هناك مكونات إضافية جاهزة لكل شيء بدءًا من الرسوم المتحركة البسيطة وحتى النماذج إلى الأدوات إلى عناصر واجهة المستخدم المتقدمة.
من المحتمل أن يكون هناك بالفعل مكون إضافي تم إعداده لأي شيء قد ترغب في تنفيذه باستخدام جافا سكريبت أو أياكس ، أو على الأقل واحد لاستخدامه كأساس لإنشاء حسابك الخاص.
Script.aculo.us
Script.aculo.us هي مكتبة واجهة مستخدم JavaScript تحتوي على إطار رسوم متحركة ، عناصر تحكم Ajax ، أدوات مساعدة DOM والمزيد .
يتم استخدامه بواسطة Apple و CNN و Basecamp و Ruby on Rails. إنها مبنية على إطار النموذج الأولي.
هناك وثائق واسعة متاحة في Script.aculo.us wiki ، مما يجعل من السهل البدء.
أداة ضغط جافا سكريبت على الإنترنت
يؤدي ضغط ملفات جافا سكريبت إلى تحميلها بشكل أسرع ، والتخلص من النطاق الترددي الخاص بك ، واستهلاك مساحة أقل على الخادم الخاص بك. هذه الأداة تجعل الضغط أسهل.
ما عليك سوى نسخ ملفات JS الخاصة بك ولصقها (أو تحميلها) في هذه الأداة ، ثم تحديد ما إذا كنت تريد ضغطها باستخدام Minify أو Packer.
وتبث تلقائيًا رمزًا أكثر نظافة وكفاءة. فقط تأكد من إجراء اختبار شامل للنتائج واحتفظ دائمًا بنسخة احتياطية من ملفك الأصلي.
جافا سكريبت
إذا كان جافا سكريبت الخاص بك أضيق قليلاً مما تريد (أو يكاد يكون من المستحيل فك الشفرة نظرًا لتنسيقه بشكل سيئ) ، فقم بتشغيله من خلال هذا الجهاز للحصول على نصوص نظيفة ، نظيفة ، متسقة بشكل متسق أسهل للقراءة والتحرير فيما بعد .
تكون الإعدادات المستخدمة قليلة ، ولكن يمكنك اختيار عدد المسافات المطلوب استخدامها للتأخير ، سواءً للكشف عن الحزم ، وما إذا كان يجب الحفاظ على فواصل الأسطر.
مرة أخرى ، تأكد من اختبار الشفرة النهائية واحتفظ بنسخة احتياطية في حالة حدوث أي مشكلات في الشفرة التي تم تجميلها حديثًا.
BrowserShots
للأسف ، تعرض المتصفحات المختلفة المواقع بطرق مختلفة قليلاً. يمكن أن يكون هذا صداعًا كبيرًا ، خاصةً إذا كان العملاء يستخدمون متصفحًا واحدًا وكنت تستخدم متصفحًا مختلفًا تمامًا.
إذا رأوا أشياء لا تظهر على نهايتك (أو العكس) ، فيمكن أن تحدث مشاكل على كلا الجانبين.
يمكنك دائمًا تثبيت عدة مستعرضات على جهاز الكمبيوتر الخاص بك ، ولكن أ) مضيعة للفضاء على القرص و ب) ماذا عن المتصفحات غير المتاحة لنظام التشغيل لديك؟ هذا هو المكان BrowserShots ادخل.
يمكنك الاختيار من بين كل المتصفحات الرئيسية الموجودة تقريبًا ، بما في ذلك المتصفحات الغامضة مثل Minefield و Epiphany.
تعرض لك BrowserShots لقطات شاشة للمتصفحات التي اخترت عرضها فقط ، بحيث يمكنك اختيار العدد الذي تريده أو القليل منه.
فقط تذكر أنه كلما زادت المتصفحات التي تختار اختبارها ، كلما استغرقت وقتًا أطول. إذا تم إعداد BrowserShots ، فيمكنك فقط وضع إشارة على الصفحة والرجوع لاحقًا لمشاهدة النتائج.
الحرائق
لن تكتمل أية قائمة بأدوات مصمم الويب بدون ذكر مكون Firebug Firefox الإضافي .
غالبًا ما يعتبر برنامج Firebug بمثابة الأداة الوحيدة الأكثر قيمة في ترسانة المصمّم ، حيث يعمل على تصحيح الشفرات وتحريرها (سواء كانت جافا سكريبت أو CSS أو HTML) بشكل لا نهائي.
يمكنك تعديل CSS في المتصفح الخاص بك. تصور طريقة محاذاة مربعات CSS الخاصة بك. قم بتحرير أي عنصر على صفحتك في متصفحك مباشرة.
تصحيح أخطاء جافا سكريبت وإيجاد الأخطاء بشكل أسرع. وهذا مجرد خدش لسطح ما يمكن أن يفعله Firebug.
إنها حقا أداة يجب أن يكون لديك كل مصمم هناك. بمجرد استخدامه ، سوف نتساءل كيف صممت من أي وقت مضى دون ذلك.