Typography for Web Designers

WebDesign

0 تعليق

2016-09-06

admin

1676 مشاهدة

Typography for Web Designers

بنشوف كورسات كتير جدا علي lynda.com و tutsplus.com بعنوان Typography for Web Designers و نادرا جدا ما حد بيهتم بأي كورس او معلومة في مجال الweb design بعيدة عن اطار الhtml و الcss و الjavascript .. و بالتالي دائما ما تجد مصمم المواقع قوي جدا في جزئية التكويد و لكن تصميماته تفتقد المعايير المطلوبة لنجاح التصميم مثل: اختيار الألوان و الصور و تنسيق المساحات بين العناصر و بعضها و الTypography.

الTypography هو كل ما يخص الكتابات و النصوص في التصميم و يعتبر من اهم عناصر نجاح التصميم و بالتالي نجاح الموقع .. لذلك علي مصمم المواقع ان يحرص في التصميم علي النقاط التالية:

-  اختيار نوع الخط المناسب لكل text في الموقع:

 احرص دائما علي استخدام انواع خطوط sans serif لعرض كميات كبيرة من النص مثل الparagraphs و الtables و انواع خطوط serifs  لل لوجو مثلا و عناصر القوائم و العناوين. ببساطة جدا الsans serif هي الخطوط التى لا يوجد بها serifs
و serifs تعني الخطوط المائلة او اشكال في نهاية الحروف.
فرص عدم عرض الserifs بوضوح او انها يحدث لها pixel مع الzoom متاحة لذلك دائما sans serif هو اختيارك الأول.
فمن الأفضل تغذية العين و تدوين انواع الخطوط التي تراها مناسبة لتستخدمها فيما بعد في مشاريعك.
ويتم ادراج الخطوط داخل الموقع بأستخدام CSS rule: @font-face.

 serif-and-san1-850_475x475

 - لون الكتابات في الموقع:

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

- الMicro Typography:

هو مراعاة حجم النصوص و المسافات. من الضروري استخدام حجم خطوط مناسب للنص فعناصر القائمة يكون حجم الخط فيها 14px و قطع النص من 10px الي 12px .. الأرقام مش ثابتة و لكن معظم التصميمات تخضع لهذه النسب. ايضا المسافات ما بين حرف الكلمة(letter-spacing) و الكلمات و بعضها و السطور(line-spacing) مهمة جدا في شكل النص.

- ابعد عن الLOREM IPSUM:

بعض التصميمات عليك ان تكتب النص الحقيقي للكلام داخل التصميم و بالتالي يعطيك فرصة لتغير شكل اول كلمة مثلا او جملة معينة هتشد انتباه الuser من الأفضل ان يكون ليها style مختلف عن باقي التصميم .. مش هتقدر تحدد الا بأستخدام النص الحقيقي و ليس ال generated lorem ipsum.

web_2

- تجنب العناوين و النصوص في المنتصف

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