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

بشكل منفصل ، أريد الإبلاغ عن تحديد آخر لمصممي الويب ، لكنه يشير أكثر إلى الصور المتجهة:

إذن ، إليك مجموعة مختارة من 5 مجموعات من الخدمات لمصمم الويب:

16 موارد تصميم ويب مجانية

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

المواقع التالية هي بعض من أفضل المواقع في هذا المجال:

• 1 Freebbble - إذا كنت بحاجة إلى المزيد من الهدايا المجانية لإنشاء التصميم الخاص بك ، فقم بإلقاء نظرة على هذه الخدمة. ستجد هنا الكثير من حلول التصميم الرائعة التي يمكنك تنزيلها مجانًا تمامًا.
• 2 AllFreeStock هي خدمة رائعة تحتوي على صور مجانية ونماذج بالأحجام الطبيعية ومقاطع فيديو ومؤثرات صوتية وأيقونات. والموقع نفسه سهل الاستخدام للغاية.
• 3 Dribbble - ابحث عن "الهدية الترويجية" وستجد قائمة بجميع الهدايا المجانية الموجودة في هذه الخدمة ويمكنك تنزيل كل منها.
• 4 جرافيك برجر - تصميم عالي الجودة.
• 5 Pixel Buddha هو موقع للمصممين المحترفين. هناك مواد مدفوعة الأجر.
• 6 Freebiesbug - إذا كنت ترغب في استخدام أحدث قوالب PSD والمستجدات عند تطوير تصميمك ، فتأكد من زيارة هذا الموقع.
• 7 365 PSD عبارة عن مجموعة كبيرة من ملفات PSD.
• 8 Dbf - تجمع هذه الخدمة بين أفضل الخدمات المجانية لخدمة Dribble وخدمة Behance.
• 9 Marvel هي مواد مجانية من مصممين يتمتعون بسمعة طيبة مع أقرانهم وعملائهم.
• 10 مساحة واجهة المستخدم - مواد يدوية.
• 11 قسم مجاني من Pixeden - يوجد محتوى مميز هنا.
• 12 قسم مجاني للسوق الإبداعي- هدايا مجانية جديدة كل يوم اثنين.
• 13 Teehan + Lax هو أفضل مصدر بالحجم الطبيعي لأجهزة iPhone 6 و iPad و iOS8 GUI.
• 14 Tech & All عبارة عن مجموعة كبيرة من قوالب PSD التي يمكنك استخدامها دون أي مسؤولية إضافية.
• 15 Freepik - موارد الرسم الحرة.
• 16 Tethr هو التصميم الأكثر روعة لنظام iOS.

19 لوحة على الإنترنت

بفضل خدمات مطابقة الألوان التالية عبر الإنترنت ، يمكنك اختيار أفضل الألوان لصورك وخطوطك وتصميماتك بشكل عام.

• 1 لوحة المواد هي أداة مفيدة لتوليد وتصدير الألوان للتصميم متعدد الأبعاد.
• 2 New Flat UI Color Picker - هذه الخدمة ضرورية إذا كنت تقوم بإنشاء تصميمات بأسلوب مسطح حديث. ستجعل الألوان موقع الويب الخاص بك أكثر جاذبية على الرغم من مفهوم التصميم المسطح نفسه.
• 3 Flat UI Colors هي خدمة أخرى يجب أن تكون في ترسانة المصمم الذي يعمل مع Flat.
• 4 Coolors هي خدمة رائعة للمصممين تسمح لك ليس فقط بالحصول على مخططات ألوان رائعة لموقعك ، ولكن أيضًا للقيام بذلك بسرعة كبيرة.
• 5 Skala Color هو برنامج مجاني لمطابقة الألوان والكشف عن نظام التشغيل OS X.
• 6 Couleurs هو تطبيق آخر لمستخدمي Mac للعمل مع الألوان على شاشة العرض.
• 7 ألوان لواجهة المستخدم المادية - مجموعة واسعة من الألوان لتختار من بينها.
• 8 تدرجات ملونة عبارة عن مجموعة كبيرة من التدرجات اللونية الجاهزة التي يمكنك استخدامها في مشاريعك.
• 9 Adaptive Backgrounds هو مكون إضافي jquery يفهم تلقائيًا لون الخلفية السائد للصورة ويعرض كتلة خلفية بنفس اللون.
• 10 ألوان للعلامة التجارية - ستجد هنا الألوان التي تستخدمها أشهر الماركات.
• 11 Paletton - ستجعل هذه الخدمة من السهل جدًا اختيار نظام الألوان لموقعك.
• 12 0 إلى 255 - البحث عن مخططات الألوان وتغييرها أسهل بكثير باستخدام هذه الخدمة.
• 13 Color Lovers هو مجتمع صغير يشارك فيه المصممون أعمالهم. يمكنك أيضًا إنشاء نظام الألوان أو النمط الخاص بك ونشر ما قمت بإنشائه ليراه الجمهور.
• 14 Adobe Color CC - أنظمة الألوان التي أنشأها مجتمع Kuler.
• 15 Bootflat - إذا كنت تعمل مع مواقع في تصميم مسطح ، فعليك ببساطة تجربة هذه الخدمة.
• 16 Hex Colorrrs - التحويل من تنسيق HEX إلى RGB.
• 17 احصل على ألوان واجهة المستخدم - مع هذه الخدمة تحصل على ألوان مذهلة لواجهة المستخدم.
• 18 Coleure هي أداة رائعة لاختيار الألوان.
• 19 Palette for Chrome - يتيح لك هذا المكون الإضافي لمتصفح Google Chrome إنشاء أنظمة ألوان. ويمكن التقاط الصور مباشرة من الصور.

17 موقعًا للعثور على الإلهام

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

• 1 FLTDSGN ​​- هل تعمل بشكل أساسي مع مواقع الويب ذات التصميم المسطح؟ ثم يمنحك هذا المورد الكثير من المعلومات التي بفضلها سيكون لديك أفكار باستمرار.
• 2 Site Inspire - إنشاء مواقع إلكترونية لطلبها ولم يعد لديك ما يكفي من الإلهام؟ ثم الق نظرة على هذا الموقع.
• 3 UI Cloud هي واحدة من أكبر القواعد التي يتم فيها تجميع تصميمات واجهات المستخدم. ستساعدك هذه الخدمة في إنشاء تصميم عالي الجودة لواجهة المستخدم (واجهة المستخدم) لمشروعك وتضمن سهولة استخدام الموقع أو تطبيق الويب.
• 4 Moodboard - تتيح لك الخدمة إنشاء مشروعك الخاص ، والذي سيتكون من صور معينة بنفس الأسلوب والألوان والمواد الأخرى.
• 5 Crayon - إذا كنت تعمل على تصميم صفحة مع أي منتج أو خدمة ، فستساعدك هذه الخدمة في العثور على أفكار في هذا المجال.
• 6 كتاب الأرض هو نشاط إبداعي. قم بزيارة هذا المورد لمعرفة المزيد حول والعناصر التي يمكنك وضعها على صفحتك المقصودة.
• 7 Dribbble - بالنسبة للمصممين ذوي الخبرة ، سيكون هذا المورد مألوفًا جدًا ، ولكنه سيكون مفيدًا للغاية بالنسبة للمبتدئين. تعلم كيفية التصميم من المصممين المحترفين باستخدام هذا المورد.
• 8 Behance هو أيضًا مصدر مشهور جدًا حيث ينشر المصممون المحترفون أعمالهم.
• 9 Pttrns - هذه الخدمة مفيدة لمن هم مغرمون جدًا بتصميم المواقع للأجهزة المحمولة. ستجد هنا عددًا كبيرًا من الأمثلة المختلفة التي صنعها مصممين محترفين.
• 10 تصميم مسطح لواجهة المستخدم - بكلمات بسيطة ، هذا "لوحة إلهام".
• 11 Awwwards - يكافئ هذا المشروع باستمرار أكثر المواقع إبداعًا وأضيق الحدود وأجملها. لذلك ، أنصحك بالزيارة ومعرفة ما هو أكثر صلة بعالم تصميم الويب الآن.
• 12 The Starter Kit هي أداة مفيدة لمصممي الويب ومطوري الويب.
• 13 One Page Love - إذا كنت منخرطًا في إنشاء مواقع من صفحة واحدة ، فعليك بالتأكيد استخدام هذه الخدمة في الخدمة. لأنه بفضله ، ستنشئ مواقع أكثر ودية سيحبها المستخدمون وستكون مريحة قدر الإمكان في الاستخدام.
• 14 UI Parade - يتم توفير تصميم لعناصر واجهة المستخدم والأفكار الجديدة بعد زيارة هذا المورد لك.
• 15 أفضل تصميمات - أفضل التطورات في مجال تصميم المواقع الإلكترونية.
• 16 مصممًا رشيقًا - إذا كنت مصممًا أو مطورًا ، فهذا مورد يجب عليك التحقق منه.
• 17 Niice هو محرك بحث حسن الذوق. لأنه يسمح لك بالبحث عن معلومات حول العديد من مواقع التصميم الشهيرة في وقت واحد. يجب أن يكون إدخال الطلب ، بالطبع ، بأحرف لاتينية.

38 مخزون صور مجاني

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

فيما يلي قائمة صغيرة بالمواقع التي يمكنك استخدامها للعثور على صور عالية الجودة مجانًا:

• 1 Stock Up هو أحد أفضل مخزونات الصور التي تقدم مجموعة كبيرة من الصور المختلفة للاختيار من بينها.
• 2 Pexels - أفضل صور غروب الشمس والسيارات والمباني والأشخاص وشوارع المدينة والطبيعة وما إلى ذلك.
• 3 All the Free Stock - لا توفر هذه الخدمة الصور فحسب ، بل توفر أيضًا الرموز ومقاطع الفيديو. جميع الصور بترخيص مجاني (ترخيص Creative Commons Zero).
• 4 Unsplash - قد يكون الكثير على دراية بهذه الخدمة. هنا كل 10 أيام يمكنك تنزيل 10 صور جديدة.
• 5 صور Startup Stock - مجموعة من الصور المخصصة للشركات الناشئة.
• 6 جاي مانتري - صور مذهلة عالية الدقة لاحتياجاتك.
• 7 Moveast هي صور لمسافر برتغالي يلتقط صورًا عالية الجودة ويتيح لك استخدامها مجانًا تمامًا.
• 8 Stokpic - إذا لم تعط جميع المواقع المذكورة أعلاه النتيجة التي تحتاجها عند البحث ، فابحث هنا عن الصورة التي تحتاجها.
• 9 Kaboompics - مجموعة رائعة من الصور المذهلة.
• 10 وظيفة - يقدم هذا الموقع مجموعة كاملة من الصور.
• 11 MMT - صور الإنترنت المذهلة التي التقطها جيفري بيتس.
• 12 كتاب قهوة السفر - تم التقاط هذه المجموعة من الصور أثناء السفر حول العالم.
• 13 صورة للمصممين - هنا يمكنك بسهولة العثور على صور للاستخدام الشخصي والعمل.
• 14 Death to the Stock Photo - بعد الاشتراك ، سترسل لك هذه الخدمة صورًا مجانية تمامًا كل شهر.
• 15 Foodie's Feed - العمل على مواقع الويب المتعلقة بالطعام؟ ثم قم بزيارة هذا الموقع. لأن هناك الكثير من صور الطعام بجودة عالية. يجعلك ترغب في إفراز اللعاب أثناء مشاهدته 🙂.
• 16 Mazwai - مجموعة كبيرة من مقاطع الفيديو الخلفية.
• 17 Jéshoots - إذا كنت ترغب في الاستفادة من أحدث الصور وأكثرها حداثة في الوقت الحالي - فهذه الخدمة هي المكان المناسب للعثور على مثل هذه الصور.
• 18 Super Famous - تم التقاط هذه الصور بواسطة المصمم الهولندي Folkert Gorter.
• 19 صورة - يمنحك هذا الموقع الفرصة للاختيار من بين مجموعة كبيرة من الصور عالية الدقة.
• 20 Splashbase عبارة عن مجموعة من مواد الصور والفيديو لمشاريعك.
• 21 Pixabay هي خدمة أخرى للصور عالية الدقة.
• 22 Little Visuals - من خلال الاشتراك ، ستتلقى 7 صور عالية الدقة كل أسبوع. هذه صورة جديدة كل يوم!
• 23 سبليتشاير - صور مجانية "شهية".
• 24 مخزون قديم جديد - إذا كنت تبحث عن صور قديمة من أرشيفات الحكومة ، فهذا الموقع مثالي لك.
• 25 Picjumbo هو موقع آخر حيث يمكنك العثور على الصور وتنزيلها مجانًا تمامًا.
• 26 Life of Pix - ليست كل الصور الموجودة على هذا الموقع مجانية تمامًا ، لكنها جميعها بدقة عالية جدًا.
• 27 Gratisography - إذا لم تتمكن من العثور على صورة عالية الدقة مناسبة ، فيمكن أن يساعدك هذا الموقع.
• 28 Getrefe - المزيد من الصور المجانية لتصميماتك.
• 29 IM Free - يضم هذا الموقع مجموعة كبيرة حقًا من الصور.
• 30 كب كيك - هذا الموقع هو جنة المصور التي أنشأها جوناس نيلسون لي.
• 31 مكتبة الأنماط - إذا كنت تبحث عن أنماط لمشروعك ، فيمكن لهذا الموقع أن يساعدك في ذلك.
• 32 أرشيف المجال العام - تقدم هذه الخدمة صورًا مجانية بنسبة 100٪.
• 33 ISO Republic - يوفر لك هذا المخزون أيضًا مجموعة من الصور عالية الدقة.
• 34 Paul Jarvis - لن تجد في هذا الموقع مقالات عن التصميم فحسب ، بل ستجد أيضًا مجموعات من الصور عالية الجودة.
• 35 Lock & Stock Photos - مجموعة من الصور عالية الجودة.
• 36 Raumrot - مجموعة كبيرة من الصور عالية الجودة.
• 37 Bucketlistly - صور السفر.
• 38 Magdeleine - كل يوم صورة جديدة ذات جودة عالية.

14 خدمة مع أيقونات مجانية

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

• 1 Fontello هو موقع منشئ الأيقونات.
• 2 أيقونة مسطحة - ابحث من خلال أكثر من 16000 رمز متجه. هنا يمكنك العثور على أفضل الرموز لمشاريعك.
• 3 أيقونات تصميم متعدد الأبعاد - أكثر من 750 رمزًا من Google.
• 4 Font Awesome - بلا شك ، هذا هو أفضل خط رمز يمكن تضمينه بسهولة في أي موقع ويب و.
• 5 Glyphsearc - ابحث في عدة قواعد باستخدام الرموز.
• 6 MakeAppIcon - ببضع نقرات يمكنك إنشاء أيقونات لتطبيقك.
• 7 أيقونات لا نهاية لها - إذا كنت تعمل باستخدام تصميم مسطح ، فتأكد من زيارة هذا المورد.
• 8 Ico Moon هو مولد رمز يحتوي على أكثر من 4000 رمز متجه.
• 9 The Noun Project - يحتوي هذا الموقع على آلاف الرموز المختلفة التي أنشأها مصممين مختلفين.
• 10 أيقونات مثالية هي خدمة لإنشاء أيقونات اجتماعية.
• 11 Icon Finder هو قسم مجاني من هذا الموقع. تأكد من دراستها ، فربما تكون بعض الرموز مفيدة لك.
• 12 Doodle Set هي مجموعة مجانية من أيقونات نمط رسومات الشعار المبتكرة.
• 13 Flat Set هي مجموعة مجانية من أيقونات النمط المسطح.
• 14 Icon Sweets - 60 أيقونة فوتوشوب متجهية مجانية تجعل موقعك أكثر جاذبية.

انتاج |

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

اختيار المحرر

تعلم تصميم الويب من الصفر - دليل خطوة بخطوة للمبتدئين (عشر خطوات)

يرغب العديد من الشباب في ربط مهنتهم المستقبلية بتطوير مواقع الويب. بطبيعة الحال ، لا يرغب الجميع في أن يصبحوا مبرمجين ، فبعضهم راضٍ تمامًا عن تصميم الويب.

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

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

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

محتوى:

الخطوة الأولى - اكتشف لماذا تريد القيام بذلك

من ناحية ، هذا سؤال بسيط ، لأن معظم الناس يريدون تصميم مواقع الويب بسبب الأجر الجيد.

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

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

والسبب الشائع الثالث وراء اهتمام الناس بتصميم الويب هو الانجذاب إلى الفنون الجميلة.

ويمكن أن يكون هذا المجال وسيلة ممتازة لإدراك مواهبهم في الممارسة وجني الفوائد المالية من ذلك.

الأهمية!لأي غرض تتعرف على تصميم الويب ، تذكر أن كل من التعلم والعمل يجب أن يكونا ممتعين ، ويتم القيام بهما برغبة وجلب المتعة ، ولكن لا يتحولان إلى روتين.

منذ الفنان الرسومي مهنة شابة، تعريفه الدقيق غير موجود بعد ، ويفسر العديد من الخبراء المفهوم بطريقتهم الخاصة.

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

بدون حلول فريدة وأفكار أصلية ونهج إبداعي فردي ، لا يمكن حل المهمة.

مصمم موقعهو فنان تقني يعمل على تحسين شكل وأسلوب تحميل تطبيقات الويب ومواقع الويب.

تشمل مهام هؤلاء الأشخاص ما يلي:

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

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

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

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

الخطوة الثانية - اختر اتجاه تصميم الويب الذي تريد أن تجرب فيه بنفسك

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

اليوم يميزون ما يصل إلى سبعة اتجاهات في تصميمها ، وهذه هي فقط الاتجاهات الرئيسية.

الصعب

قديم مثل بناء الموقع نفسه نوع تصميم الصفحةجهد مثالي للمبتدئين.

خلاصة القول هي أن جميع عناصر الموارد يتم وضعها في خلايا جدول افتراضية ذات أحجام ثابتة ، والتي يحددها المصمم.

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

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

مرن

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

تحديات هذا التصميم هي:

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

مشترك

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

نص

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

طباعة

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

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

واجهه المستخدم

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

.

متحرك

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

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

الخطوة الثالثة - اكتشف برامج تصميم الويب التي تتجه الآن

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

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

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

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

هذا الأخير متضخم مع الوظائف المطلوبة في عشرات المجالات ، ولا يولي الرجال اهتمامًا كبيرًا لمضاعفة الفرص المتعلقة بتصميم الويب.

يعد Sketch أمرًا آخر - فقد تم صقله لرسم واجهات رسومية من نقطة الصفر ، ولا يحتوي على عنصر واحد غير ضروري ، كما أنه أسهل في التعلم ويتفوق بسهولة على Photoshop من حيث المؤشرات الأساسية.

تأكد من اختيار الأكثر ملاءمة الذي يدعم بناء الجملة والتمييز: ، Sublime ، Axure RP.

الخطوة الرابعة - اكتشف الكتب المفيدة لمصممي الويب الطموحين

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

مع تعميم مهنة تصميم الويب ، زاد عدد الكتب حول هذا الموضوع. بدون معلم ومعلم ، يعد الكتاب أفضل طريقة لاكتساب المعرفة.

يجب أن يبدأ تعلم تصميم الويب من البداية بالأدب حيث يتم إعطاء المفاهيم الأساسية والنظرية والمهام العملية الصغيرة:

العناصر الرئيسية هي:

شعار- يحتل ، كقاعدة عامة ، الجزء المركزي من الصفحة ويميز المصدر عن الآخرين ؛

عناصر التنقل- توضع في الجزء العلوي من الصفحة أفقيًا ، وفي كثير من الأحيان - عموديًا وتحتوي على روابط للأقسام الرئيسية ؛

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

شبكة معيارية

قبل تطوير مخطط المشروع ، عليك أن تفهم بنفسك مفهوم الشبكة المعيارية. إنها طريقة لتوزيع المعلومات في أعمدة ، إنها إطار عمل الموقع المستقبلي.

سيؤدي استخدام شبكة معيارية إلى تبسيط المزيد من التخطيط بشكل كبير ،خذ الوقت الكافي للتعرف عليها.

المرحلة السادسة - التدريبات عبر الإنترنت

• حضور الندوات والدورات التدريبية.
• المشاركة في التدريب عبر الإنترنت (عن بعد).

اختر الفصول المناسبة بناءً على معرفتك وخبرتك والاتجاه الذي تدرك فيه إمكاناتك الإبداعية. خلال الدورة ، من الرائع دمج النظرية في الممارسة.

1 دروس تصميم الويب للمبتدئين

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

الخطوة السابعة - ابحث عن الأشخاص ذوي التفكير المماثل

في حياتك العملية ، من المهم أن تتواصل مع الأشخاص الذين يفعلون ما تفعله.

لذلك لا يمكنك فقط تكوين صداقات ، ولكن أيضًا تبادل الخبرات والمعرفة والمشورة وتقديم المساعدة وتقييم المشاريع واحدًا تلو الآخر.

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

الخطوة الثامنة - اتبع الاتجاهات والاتجاهات

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

يتغيرون للأفضل ، ويحسّنون تحميل المورد ، ويزيدون من الجاذبية العاطفية للصفحة.

أسهل طريقة لزيارة الموارد ، حيث يعرض المصممون المتمرسون وغير المتمرسين أعمالهم على الشاشة:

المرحلة التاسعة - جرب يدك في تبادل مستقل

يمكنك العمل كفنان تقني بمفردك ولأي شركة. بالنسبة للمستخدمين المبتدئين ، من الأفضل اكتساب خبرة في التبادلات المستقلة:

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

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

انتبه أكثر لملء الملف التعريفي وأسعار العمل.

يمكن بيع المخططات البسيطة ، ولكن التي يتم وضعها في الاعتبار ، مع الأخذ في الاعتبار مشاريع مماثلة معروضة للبيع.

الأهمية!لا تتردد في طرح الأسئلة ، والاهتمام بالمواقع التي يحبها العملاء أكثر من غيرها ، بحيث يكون هناك شيء للتنقل فيه. يجب ألا تتسرع في العمل مع العيوب أو تقلل من شأن المواعيد النهائية ، ثم تجعل العميل ينتظر ويتوتر.

الخطوة العاشرة - تحويل تصميم الويب من هواية إلى مهنة

عادة ما يبدأ تصميم مواقع الويب من قبل الطلاب والشباب ، الذين يصبح هذا النشاط بالنسبة لهم هواية.

يكرسون عطلات نهاية الأسبوع والأمسيات لأعمالهم المفضلة ، وعندما يكتسبون القليل من الخبرة وتجلب الهواية الدخل الأول ، يفكرون بجدية في تغيير مهنتهم.

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

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

أرز. 15 - بمرور الوقت ، يجب أن يصبح تصميم المواقع مهنة

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

بمرور الوقت ، ستظهر المعرفة والخبرة والأوامر الدائمة.

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

الشيء الرئيسي هو أن تسعى جاهدًا لتصبح أفضل ، وتتطور باستمرار وتستمتع بما تفعله!

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

برنامج معالجة الرسومات النقطية

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

• نغمة متناغمة وتصحيح الألوان ؛
• إعادة لمس الصورة؛
• أداة المحاصيل؛
• الاختلافات في الهيكل والعمل مع تنسيقات رسومات مختلفة ؛
• عمل كفء مع المرشحات ؛
• باستخدام الطبقات.

البرامج الأكثر شيوعًا هنا هي:

1. أدوبي فوتوشوبهو الرائد المطلق بين برامج الرسوم من هذا النوع. ومع ذلك ، فإنه يتطلب الكثير من موارد الكمبيوتر.
2. paint.net- بديل جيد للفوتوشوب. واجهة مريحة ، حيث يكون كل شيء في متناول اليد والقدرة على توسيعه باستخدام مكونات إضافية تابعة لجهات خارجية. يعمل تحت Windows.
3. الأعرج- والتي تعني "برنامج معالجة الصور جنو". يعد هذا بديلاً مشهورًا عبر الأنظمة الأساسية لبرنامج Photoshop ، مع وظائف قوية أيضًا. يوجد إصدار من GIMPShop أقرب إلى واجهة Photoshop.

برنامج معالجة رسومات المتجهات

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

• العمل مع الكائنات الرسومية: تراكبها ، وتجميعها ، وإنشاء أشكال غير عادية ؛
• العمل مع المنحنيات وعقد المنحنى ؛
• حيازة أدلة والعمل مع الشبكة ؛
• فهم نماذج الألوان -RGB و HSB و CMYK
• القدرة على وضع النص على أي منحنى ؛
• التمكن من التأثيرات
• التدرجات والعبوات ، بما في ذلك الفركتال.

الممثلون الرئيسيون لهذه الفئة من البرامج هم CorelDRAW و Adobe Illustrator.إنهم متساوون تقريبًا في قدراتهم ويستخدمون أحدث التطورات في الرسومات المتجهة. ومع ذلك ، فإن كلا البرنامجين ثقيلان للغاية. خيار أخف هو Corel Xara ، لكن عليك أن تدفع ثمن السهولة بسبب عدم القدرة على أداء بعض التأثيرات والأوامر.

برامج متصفح الويب

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

محرر نص بسيط

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

برامج التعرف الضوئي على الحروف

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

بعض البرامج الخاصة

بعض التأثيرات أو الإجراءات لا يمكن أو يصعب تنفيذها في البرامج المدرجة ، لذلك ستكون هناك حاجة إلى بعض البرامج الإضافية ، على سبيل المثال:

1. كولورمانيا-أداة مفيدة وخفيفة الوزن تسمح لك بتحديد لون RGB لأي نقطة على الشاشة بنقرة واحدة. يمكنك أيضًا استخدام امتداد متصفح مثل Eye Dropper لمتصفح Chrome.
2. برنامج أدوب فلاش- أداة معروفة لإنشاء اللافتات والرسوم المتحركة الأخرى لمواقع الويب ، مثل الأزرار التفاعلية وشخصيات الرسوم المتحركة وأشياء أخرى كثيرة.
3. مسطرة -يسمح لك بقياس حجم أي عنصر تحتاجه. هناك العديد من الحلول البرمجية هنا ، على سبيل المثال SPRuler و Code-V Ruler. يمكنك أيضًا استخدام امتداد متصفح مشابه مثل MeasureIt (Google Chrome).
4. GIF انيميتور- برنامج بسيط لإنشاء صور متحركة بتنسيق gif. على الرغم من أن هذا العمل يمكن القيام به في Photoshop.

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

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

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

أرز. 7.0: لقد صممت موقعي باستخدام بعض الأدوات الأساسية وخط واحد وثلاثة ألوان.

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

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

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

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

برامج التصميم الشعبية

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

1. رسم- 99 دولارًا في السنة (Mac فقط)

الشكل 7.1: رسم تخطيطي

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

يحتوي Sketch على كل ما تحتاجه للتصميم: أدلة ، وشبكات ، ورموز ، وتحويل الصور في المنظور (لمعاينة التصميمات على iOS) ، وتحرير المتجهات ، والنماذج الأولية ، والمكتبات ، وتصدير الأصول ، والسحابة (لمشاركة التصميمات والمكتبات) ، وحتى تصدير الكود. وهناك الكثير من المكونات الإضافية والموارد لها.

أكبر عيب في Sketch هو أنه يعمل فقط على Mac. ومع ذلك ، من الممكن تصدير مشاريع لتطبيقات مثل إنفيجن و زيبلين لإنشاء المواصفات وأدلة المطور.

2. فيجما- مجاني أو 12 دولارًا شهريًا (تطبيق ويب)

الشكل 7.2: Figma

فيجما هو برنامج تصميم جديد نسبيًا. من المحتمل أن يكون أكبر منافس لـ Sketch - وهو ينمو بسرعة كبيرة. تتمتع Figma بجميع ميزات Sketch - بالإضافة إلى أن العديد من المصممين يمكنهم العمل في نفس المشروع في نفس الوقت.

أروع شيء هو أن Figma مجاني تمامًا إذا كان لديك ما يصل إلى ثلاثة مشاريع ، ومقابل 12 دولارًا فقط شهريًا ، يمكنك فتح جميع الميزات ويمكنك إنشاء عدد لا حصر له من المشاريع. يعمل التطبيق مباشرة في المتصفح - وبالتالي ، على أي نظام تشغيل تقريبًا. تذكرنا واجهة المستخدم بـ Sketch و Adobe XD: إذا كنت معتادًا على هذه الأدوات ، فلن تحتاج حتى إلى إتقان أي شيء.

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

3. Adobe XD- مجاني (Mac و Windows)

الشكل 7.3: Adobe XD

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

الجانب الإيجابي هو أن الأداة مجانية لكل من نظامي التشغيل Mac و Windows (على الرغم من أنه من المحتمل أن يتم دفعها عند طرحها على الذهن). بالإضافة إلى ذلك ، فهو أحد منتجات Adobe - لذا ستتمكن من تبديل الأصول بأدوات أخرى مثل Photoshop أو Illustrator.

الواجهة تشبه إلى حد بعيد Sketch و Figma ، لذا يمكنك استخدام ثلاث أدوات في نفس الوقت - والتبديل بينها دون أي مشاكل (باستثناء أن بعض مفاتيح الاختصار مختلفة!).

4. ستوديو إنفيجن- مجاني (نسخة تجريبية ، مع إمكانية الوصول المبكر)

الشكل 7.4: InVision Studio

InVision Studio هي أداة مكدس كاملة جديدة لا تزال في مرحلة تجريبية ولكنها تبدو واعدة. الواجهة عبارة عن نسخة من Sketch و Figma ، والتي أصبحت بالفعل المعيار الحديث لأدوات التصميم.

لقد كنت ألعب مع InVision Studio قليلاً ومنذ أن حصلت على تجربة عامة جيدة مع منتجات InVision الأخرى ، أنا متأكد من أن اللاعبين سيكونون ناجحين عندما يصدر الإصدار الرسمي.

5. تدفق الويب- مجاني أو 16 دولارًا شهريًا (تطبيق ويب)

الشكل 7.5: تدفق الويب

Webflow هو أداة متكاملة لإنشاء مواقع ويب وظيفية وسريعة الاستجابة يمكن استضافتها مباشرة على نظامها الأساسي (أو تصديرها واستضافتها في مكان آخر).

لست من أشد المعجبين بأدوات التصميم إلى الكود لأن الكود الذي تم إنشاؤه لا يعمل بشكل جيد في العادة ، بالإضافة إلى صعوبة العمل معه. ومع ذلك ، فإن Webflow جيد جدًا. لديك سيطرة كاملة على كود CSS ، بالإضافة إلى أن الأداة توضح لك كيفية عمل HTML و CSS لأن جميع عناصر التصميم في المتصفح تتصرف كما ينبغي.

أعتقد أن Webflow رائع لبناء نماذج أولية سريعة ومواقع ويب بسيطة وجهاز استدعاء واحد وما شابه. العديد من المصممين المحترفين الذين أعرفهم يستخدمون Webflow - لذا فإن الأمر يستحق إلقاء نظرة فاحصة!

6. أدوبي فوتوشوب- 20.99 دولارًا شهريًا أو كجزء من Creative Cloud (52.99 دولارًا شهريًا)

الشكل 7.6: Adobe Photoshop

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

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

ومع ذلك ، ما زلت أستخدم Photoshop لمعالجة الصور والرسومات والرسوم التوضيحية.

الشكل 7.7: مقارنة سريعة بين واجهات Sketch و Figma و Adobe XD. انظروا كم هم متشابهون!

أدوات أخرى أستخدمها في العمل:

فيما يلي قائمة كاملة بالأدوات التي أستخدمها في هذه العملية.

3 أصوات

أرحب بكم في مدونتي. قررت اليوم إعداد مجموعة مفيدة للمصممين. لقد زرت أشهر مواقع مشرفي المواقع ووجدت أفضل 50 أداة لمساعدتك في التصميم.

أقدم انتباهك إلى برامج تصميم الويب ، وأفضل الخدمات والأدوات عبر الإنترنت المعترف بها من قبل المتخصصين. لا أتفق مع كل النقاط ، ولكن من أنا لأجادل الخبراء العاملين في مواقع مثل نتولوجي , vc.ru, قل مرحباو اخرين.

أضفت القليل إلى هذه القائمة بمفردي وقسمتها إلى فئات. الآن أعرضه على انتباهكم.

البرامج الأساسية

بالطبع ، لا يمكن لأي مطور ويب الاستغناء عن مجموعة قياسية من Adobe ، والتي يتم من خلالها تنفيذ جميع الأعمال. إنها الآن نهاية عام 2016 ويدعي العديد من المهنيين أن الشعبية المتزايدة للبرنامج رسم ، الذي كان يحل محل Photoshop ، المألوف للكثيرين منذ عدة سنوات ، على وشك القيام بذلك. في عام 2017 ، سنقوم جميعًا بدراسة هذا البرنامج المعين بنشاط.

هذا على الرغم من حقيقة أنه غير متوفر بعد باللغة الروسية وهو مناسب فقط لنظام التشغيل Mac OS. يقول معظم المحترفين إن تصميم الواجهة يناسب أفضل بكثير من Photoshop.

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

• Illustrator هو أفضل أداة للرسومات المتجهة والتوضيح.
• InDesign هو الأداة المثلى للطباعة.
• Adobe Muse هو النظام الأساسي المثالي للإبداع

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

يقدم إصدار Creative Bloq خدمة حديثة أخرى كبديل لبرنامج Adobe Muse بينيجرو ، فهو مناسب لرسم أي موقع مع التحويل التلقائي اللاحق للصورة إلى رمز. يمكن تحقيق نفس الشيء على Jetstrap.

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

بنك الجرافيكس

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

على سبيل المثال ، في endlessicons.com يمكنك العثور على الرموز ، وما إلى ذلك Coverr.co أغلفة الفيديو.

على ال freepik.com و متجر الرموز يمكنك العثور على العديد من الصور المجانية. المتجهات وحتى تخطيطات PSD. يمكنني أن أقدم نفسي محل تصوير-رئيس و بيكساباي .

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

Findguidelin.es هذه مجموعة حيث يمكنك العثور على الرموز وجميع المعلومات للمصممين حول العلامات التجارية الشهيرة: WatsApp و Facebook و Vkontakte وما إلى ذلك.

صانع الشعار والأيقونة المفضلة

لقد فوجئت ، ولكن في العديد من المواقع الشهيرة والمرموقة للمصممين ، يمكنك العثور على رابط لخدمة تساعد. على Netology ، على سبيل المثال ، يقدمون withoomph.com أو designrails.com . أنا أفضل Logaster .

للإنشاء السريع ، يمكنك استخدام البوابة www.favicon.cc . بالمناسبة ، لقد كتبت بالفعل عنه. أشياء جيدة.

العمل مع اللون

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

خدمة لوحة المواد تقدم لك اختيار لونين ، وستكمل باقي المخطط نيابة عنك: الخطوط ، والفواصل ، وما إلى ذلك.

على ال 0to255يمكنك رؤية ظلال مختلفة ، على الرغم من أن لديك أيضًا بديل روسي - Yandex.

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

العمل مع الخطوط

المورد الأول والأفضل للعمل مع خطوط Google. هذه مجموعة ضخمة من الخطوط ، بما في ذلك باللغة الروسية. سهل الاختيار وسهل الاستخدام.

للعثور على مزيج مثالي من الخطوط ، يوصي الخبراء باستخدام الخدمة: canva.com/font-combinations أو typewolf.com .

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

وفي المحرر على الإنترنت في الموقع prototypo.io يمكنك تغييره قليلاً وجعله فريدًا.

المرحلة الأخيرة

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

بمساعدة الخدمة dunnnk.com يمكنك إدراج لقطة الشاشة الخاصة بك في آلاف الصور للهواتف وأجهزة الكمبيوتر ومعرفة كيف سيبدو موقعك على الأدوات المختلفة من عدة زوايا.

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

إذا كنت مشتركًا في التخطيط ، بالإضافة إلى التصميم ، يمكنك تضمين الأداة المساعدة في الكود tota11y . سوف يسلط الضوء على الأخطاء.

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

دورات للمصممين من فريق PhotoshopMaster.

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

حسنا هذا كل شيء. أراك مرة أخرى ونتمنى لك التوفيق.