Free guide / 6 pages in Arabic

Design decisions behind the Habibah concept

A free six-page Arabic design guide using the independent Habibah concept, with five questions, a worked example and a reusable website brief.

Download Arabic PDF ↓Read in Arabic ↙

Selectable text and clickable contact links. No signup required.

Cover of the Arabic Habibah design guide

What you will take away

A clearer message

Define your offer, audience and the next action for your visitor.

An eye for decisions

Read visual hierarchy and evaluate typography, motion and mobile usability.

A brief for your business

Answer five questions using a worked example and a reusable template.

The project shown is an independent, unofficial Habibah Sweets concept. No commission or endorsement is claimed.

اقرأ الدليل

أفكار من تصوّر حبيبة / لموقعك إنت

كيف فكّرت بتصميم
موقع حبيبة؟

قرارات بصرية تفهمها، و٥ أسئلة بتطلع منها بموجز لموقعك.

لقطة فعلية من تصوّر حبيبة: قطعة كنافة مرفوعة فوق الصينية، وعمّان بالخلفية. — من تصوّر موقع حبيبة المستقل غير الرسمي

دليل مجاني بالعربي
أمثلة، ملاحظات، وورقة شغل

إعداد أحمد رصاص
٦ صفحات / الإصدار ٢

١ / وضّح الرسالة

ابدأ برسالة واضحة.

قبل الألوان والخطوط، اكتب شو بتقدّم، لمين، وشو بدك الزائر يعمل. جرّب تقرأ الجملة لحالها: بتفهم منها المشروع؟

مثالين لمخبز خيالي / للتوضيح

صياغة عامة

أهلًا فيكم
بمخبزنا.

الجودة والطعم الأصيل.

اعرف أكثر

صياغة أوضح

مخبوزات صباحية
لأهل الحيّ.

شوف أصناف اليوم، واطلب للاستلام من المخبز.

شوف أصناف اليوم ↗

شو صار أوضح؟الصياغة الثانية بتسمّي المنتج والجمهور، وبتوضح ليش تضغط الزر. كمّلها بصورة حقيقية لمخبوزات اليوم.

اكتب جملتك

«بنقدّم [الخدمة] لـ[الجمهور]، وبنساعدهم بـ[فائدة واضحة].»

بعدها سمّي خطوة واحدة: يشوف الأصناف؟ يحجز موعد؟ يطلب عرض سعر؟

حبيبة المعروض بالدليل تصوّر مستقل غير رسمي. ما بنقدّمه كمشروع مكلّف فيه أو معتمد من العلامة.

٢ / اقرأ ترتيب العناصر

وين بتروح عينك أول؟

اقرأ العلاقة بين المنتج والمكان والشعار.

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

١ المنتج أولًا

كبّر أهم عنصر، وخفّف اللي بينافسه.

٢ المكان بضيف معنى

عمّان بتعطي سياق. اختار خلفية مرتبطة بمشروعك.

٣ الشعار إله مكانه

حجمه بالزاوية بترك مساحة للمنتج.

جرّب على موقعك: صغّر صورة الصفحة. لسه واضح شو أهم عنصر؟

٣ / راجع التفاصيل

خلّي التفاصيل تخدمك.

المنتج ممكن يتغيّر، وطريقة العرض تضل واضحة. لاحظ المشهدين من نفس التجربة.

تفصيل مكبّر من لقطة فعلية لمعرض التصوّر، يظهر قطعة حلويات شرقية على خلفية زرقاء. — تفصيل من عرض الحلويات الشرقية

تفصيل مكبّر من لقطة فعلية لمعرض التصوّر، يظهر المعمول بنفس أسلوب العرض الأزرق. — تفصيل من عرض المعمول

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

مثال تعليمي للقراءةأصناف اليوم

اختار اللي بناسبك، وشوف وقت الاستلام.

فرّق بوضوح بين العنوان والنص. خلي المسافة تجمع الجمل المرتبطة، وتفصل بين الأقسام.

٣ فحوصات قبل ما تعتمد التصميم

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

الصور بتوضح الشكل. الأداء وسهولة الاستخدام بدهم فحص فعلي.

٤ / ورقة شغلك

هسا دورك تجرّب.

اكتب بملاحظاتك أو بالمساحات الفاضية. الأمثلة لمخبز خيالي؛ إجابات مشروعك هي الأساس.

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

هيك بصير مثال المخبز فكرة صفحة

بداية واضحة: صورة مخبوزات وعنوان بيسمّي المنتج.
معلومات بتساعد: أصناف اليوم، الاستلام، والمكان.
خطوة محدّدة: زر «اطلب للاستلام».

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

٥ / نشتغل على مشروعك

عندك فكرة؟
خلّينا نحكي عنها.

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

أنا أحمد رصاص

بساعدك ترتّب محتوى موقعك، وبصمّم تجربة مناسبة لمشروعك وللناس اللي بدك توصلهم.

تصميم لمشروعكصفحات مبنية على رسالتك وصورك، بهوية بصرية مناسبة إلك.

استخدام واضحترتيب محتوى مناسب للموبايل، وتفاعل بنختاره حسب الحاجة.

هدف مفهومخطوة تواصل أو طلب واضحة، مع أساسيات الظهور بالبحث.

احكيلي شو مشروعك، وشو بدك موقعه يساعدك فيه.

احكيلي عن مشروعك واتساب برسالة جاهزة. ابعتها لما تكون جاهز تحكي.

شوف شغلي على rasas.co ↗

From idea to brief

Start with your own answers

The worksheet and optional brainstorming prompt below are in Arabic. Use your own business information; the bakery example is fictional.

Website brief template · Arabic

موجز فكرة موقعي

اسم المشروع:
شو بقدّم:
مين الناس اللي بدي أوصلهم:
الهدف الأساسي من الموقع:
أول إحساس بدي أوصله:
أهم ٣ معلومات لازم يعرفها الزائر:
١.
٢.
٣.
الإضافة المفيدة اللي بدي أجرّبها، والسبب:
أول جملة تظهر بالموقع:
الإجراء الأساسي اللي بدي الزائر يعمله:
المواد المتوفّرة عندي: صور / شعار / نصوص / غيرها:
شو لسه ناقصني:

فحص سريع:
هل أول جملة بتشرح شو بقدّم ولمين؟
هل المعلومات بتساعد الزائر يقرّر؟
هل الإجراء الأساسي واضح على الموبايل؟
هل الإضافة اللي اقترحتها بتخدم الهدف؟

إعداد أحمد رصاص / rasas.co

Download TXT

Optional AI brainstorming prompt · Arabic

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

معلومات مشروعي:
[الصق إجاباتك أو موجزك هون]